[pigment-css][react] Use class selector instead of value

for composition. Now, you don't have to explicitly add a "." selector.

Author: brijeshb42

packages/pigment-react/src/processors/styled.ts

@@ -292,15 +292,15 @@ export class StyledProcessor extends BaseProcessor {
    * ```js
    * const Component = styled(...)(...)
    * const Component2 = styled()({
-   *   [`.${Component} &`]: {
+   *   [`${Component} &`]: {
    *      color: 'red'
    *   }
    * })
    * ```
    * to further target `Component` rendered inside `Component2`.
    */
   doEvaltimeReplacement() {
-    this.replacer(this.value, false);
+    this.replacer(this.astService.stringLiteral(this.asSelector), false);
   }
 
   /**

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) {

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;
+  }
 `;

packages/pigment-react/tests/styled/fixtures/styled.output.css

@@ -26,3 +26,6 @@
   opacity: 0.38;
   font-size: 3rem;
 }
+.s6hrafw .s1sjy0ja {
+  display: none;
+}