From 13d4a67f60730191508eb51023b3dde72e65e279 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Mon, 11 Mar 2024 13:09:41 +0530
Subject: [PATCH] [pigment-css][react] Use class selector instead of class
 value (#41442)

---
 packages/pigment-react/src/processors/styled.ts               | 4 ++--
 packages/pigment-react/src/processors/sx.ts                   | 4 ++--
 packages/pigment-react/tests/styled/fixtures/styled.input.js  | 3 +++
 .../pigment-react/tests/styled/fixtures/styled.output.css     | 3 +++
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/pigment-react/src/processors/styled.ts b/packages/pigment-react/src/processors/styled.ts
index 82f91f9775e47f..f9258edea8121e 100644
--- a/packages/pigment-react/src/processors/styled.ts
+++ b/packages/pigment-react/src/processors/styled.ts
@@ -292,7 +292,7 @@ export class StyledProcessor extends BaseProcessor {
    * ```js
    * const Component = styled(...)(...)
    * const Component2 = styled()({
-   *   [`.${Component} &`]: {
+   *   [`${Component} &`]: {
    *      color: 'red'
    *   }
    * })
@@ -300,7 +300,7 @@ export class StyledProcessor extends BaseProcessor {
    * to further target `Component` rendered inside `Component2`.
    */
   doEvaltimeReplacement() {
-    this.replacer(this.value, false);
+    this.replacer(this.astService.stringLiteral(this.asSelector), false);
   }
 
   /**
diff --git a/packages/pigment-react/src/processors/sx.ts b/packages/pigment-react/src/processors/sx.ts
index 37bdc88ac59ec0..86cf7a58d72ffa 100644
--- a/packages/pigment-react/src/processors/sx.ts
+++ b/packages/pigment-react/src/processors/sx.ts
@@ -41,7 +41,7 @@ export class SxProcessor extends BaseProcessor {
       }
     }
 
-    if (!this.elementClassName) {
+    if (!this.elementClassName || this.elementClassName[0] !== '.') {
       return;
     }
 
@@ -55,7 +55,7 @@ export class SxProcessor extends BaseProcessor {
       cssText = this.processCss(styleObjOrFn, sxStyle);
     }
     const selector = this.elementClassName
-      ? `.${this.elementClassName}${this.asSelector}`
+      ? `${this.elementClassName}${this.asSelector}`
       : this.asSelector;
 
     if (!cssText) {
diff --git a/packages/pigment-react/tests/styled/fixtures/styled.input.js b/packages/pigment-react/tests/styled/fixtures/styled.input.js
index fb6173d1406689..721ed8ddcd3874 100644
--- a/packages/pigment-react/tests/styled/fixtures/styled.input.js
+++ b/packages/pigment-react/tests/styled/fixtures/styled.input.js
@@ -30,4 +30,7 @@ const SliderRail2 = styled.span`
   display: block;
   opacity: 0.38;
   font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1};
+  ${SliderRail} {
+    display: none;
+  }
 `;
diff --git a/packages/pigment-react/tests/styled/fixtures/styled.output.css b/packages/pigment-react/tests/styled/fixtures/styled.output.css
index ff22b6cc6cb58d..ff9505f6627628 100644
--- a/packages/pigment-react/tests/styled/fixtures/styled.output.css
+++ b/packages/pigment-react/tests/styled/fixtures/styled.output.css
@@ -26,3 +26,6 @@
   opacity: 0.38;
   font-size: 3rem;
 }
+.s6hrafw .s1sjy0ja {
+  display: none;
+}