[enhancement] Reorder the css generation order for styled calls

to match with @mui/system

Fixes mui#55

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

@@ -310,8 +310,8 @@ export class StyledProcessor extends BaseProcessor {
    * which we can use to generate our styles.
    * Order of processing styles -
    * 1. CSS directly declared in styled call
-   * 2. CSS declared in theme object's styledOverrides
    * 3. Variants declared in styled call
+   * 2. CSS declared in theme object's styledOverrides
    * 3. Variants declared in theme object
    */
   build(values: ValueCache): void {
@@ -325,11 +325,17 @@ export class StyledProcessor extends BaseProcessor {
     );
     // all the variant definitions are collected here so that we can
     // apply variant styles after base styles for more specific targetting.
-    const variantsAccumulator: VariantData[] = [];
+    let variantsAccumulator: VariantData[] = [];
     (this.styleArgs as ExpressionValue[]).forEach((styleArg) => {
       this.processStyle(values, styleArg, variantsAccumulator, themeImportIdentifier.name);
     });
+    // Generate CSS for default variants first
+    variantsAccumulator.forEach((variant) => {
+      this.processVariant(variant);
+    });
+    variantsAccumulator = [];
     this.processOverrides(values, variantsAccumulator);
+    // Generate CSS for variants declared in `styleOverrides`, if any
     variantsAccumulator.forEach((variant) => {
       this.processVariant(variant);
     });

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

@@ -0,0 +1,36 @@
+import { styled } from '@pigment-css/react';
+
+const OutlinedInputInput = styled('input', {
+  name: 'MuiOutlinedInput',
+  slot: 'Input',
+})({
+  padding: '16.5px 14px',
+  variants: [
+    {
+      props: {
+        size: 'small',
+      },
+      style: {
+        padding: '8.5px 14px',
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.multiline,
+      style: {
+        padding: 0,
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 0,
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 0,
+      },
+    },
+  ],
+});

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

@@ -0,0 +1,21 @@
+.o1ei225m {
+  padding: 16.5px 14px;
+}
+.o1ei225m-1 {
+  padding: 8.5px 14px;
+}
+.o1ei225m-2 {
+  padding: 0;
+}
+.o1ei225m-3 {
+  padding-left: 0;
+}
+.o1ei225m-4 {
+  padding-right: 0;
+}
+.o1ei225m-5 {
+  padding-left: 10px;
+}
+.o1ei225m-6 {
+  padding: 9px 14.5px;
+}

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

@@ -0,0 +1,34 @@
+import { styled as _styled } from '@pigment-css/react';
+import _theme from '@pigment-css/react/theme';
+const OutlinedInputInput = /*#__PURE__*/ _styled('input', {
+  name: 'MuiOutlinedInput',
+  slot: 'Input',
+})({
+  classes: ['o1ei225m', 'o1ei225m-5'],
+  variants: [
+    {
+      props: {
+        size: 'small',
+      },
+      className: 'o1ei225m-1',
+    },
+    {
+      props: ({ ownerState }) => ownerState.multiline,
+      className: 'o1ei225m-2',
+    },
+    {
+      props: ({ ownerState }) => ownerState.startAdornment,
+      className: 'o1ei225m-3',
+    },
+    {
+      props: ({ ownerState }) => ownerState.endAdornment,
+      className: 'o1ei225m-4',
+    },
+    {
+      props: {
+        size: 'small',
+      },
+      className: 'o1ei225m-6',
+    },
+  ],
+});

packages/pigment-css-react/tests/styled/styled.test.tsx

@@ -105,4 +105,38 @@ describe('Pigment CSS - styled', () => {
     expect(output.js).to.equal(fixture.js);
     expect(output.css).to.equal(fixture.css);
   });
+
+  it('should work with theme styleOverrides and variants', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled-theme-styleOverrides2.input.js'),
+      {
+        themeArgs: {
+          theme: {
+            components: {
+              MuiOutlinedInput: {
+                styleOverrides: {
+                  input: {
+                    paddingLeft: 10,
+                    variants: [
+                      {
+                        props: {
+                          size: 'small',
+                        },
+                        style: {
+                          padding: '9px 14.5px',
+                        },
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
 });