wip

packages/pigment-react/tests/styled/fixtures/styled-theme.input.js

@@ -24,9 +24,6 @@ const SliderRail = styled('span', {
   background-color: currentColor;
   opacity: 0.38;
   font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1};
-  ${SliderRail} {
-    display: none;
-  }
 `;
 
 const SliderRail2 = styled.span`

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

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

packages/pigment-react/tests/styled/fixtures/styled-theme.output.js

@@ -5,12 +5,6 @@ import _theme from '@pigment-css/react/theme';
 const Component = /*#__PURE__*/ _styled('div')({
   classes: ['clqufod'],
 });
-const SliderRail = /*#__PURE__*/ _styled2('span', {
-  name: 'MuiSlider',
-  slot: 'Rail',
-})({
-  classes: ['s1fopuc2', 's1fopuc2-1'],
-});
 const SliderRail2 = /*#__PURE__*/ _styled3('span')({
   classes: ['s1tggtaa'],
 });

packages/pigment-react/tests/styled/fixtures/styled.input.js

@@ -1,38 +1,14 @@
-import { styled, keyframes } from '@pigment-css/react';
+import { styled } from '@pigment-css/react';
 
-const rotateKeyframe = keyframes({
-  from: {
-    transform: 'rotate(360deg)',
-  },
-  to: {
-    transform: 'rotate(0deg)',
-  },
-});
-
-const Component = styled.div({
-  color: '#ff5252',
-  animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
-});
-
-const Component2 = styled.div`
-  color: red;
-  &:has(.foo) {
-    color: blue;
-  }
-`;
-
-const SliderRail = styled('span')`
+const Rail = styled('span')`
   display: block;
   opacity: 0.38;
-  ${SliderRail} {
-    display: none;
-  }
 `;
 
-const SliderRail2 = styled.span`
+const Slider = styled('div')`
   display: block;
-  opacity: 0.38;
-  ${SliderRail} {
+  opacity: 0.32;
+  ${Rail} {
     display: none;
   }
 `;

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

@@ -16,12 +16,14 @@
 .c1sjy0ja:has(.foo) {
   color: blue;
 }
-.c6hrafw {
-  color: red;
+.s6hrafw {
+  display: block;
+  opacity: 0.38;
 }
-.c6hrafw:has(.foo) {
-  color: blue;
+.s1nn157y {
+  display: block;
+  opacity: 0.38;
 }
-.s6hrafw .s1sjy0ja {
+.s1nn157y .s6hrafw {
   display: none;
 }

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

@@ -1,3 +1,4 @@
+import { styled as _styled4 } from '@pigment-css/react';
 import { styled as _styled3 } from '@pigment-css/react';
 import { styled as _styled2 } from '@pigment-css/react';
 import { styled as _styled } from '@pigment-css/react';
@@ -8,6 +9,6 @@ const Component = /*#__PURE__*/ _styled('div')({
 const Component2 = /*#__PURE__*/ _styled2('div')({
   classes: ['c1sjy0ja'],
 });
-const Component3 = /*#__PURE__*/ _styled3('div')({
-  classes: ['c6hrafw'],
+const SliderRail2 = /*#__PURE__*/ _styled4('span')({
+  classes: ['s1nn157y'],
 });