[styled] Replace lowercase with lowerFirst (mui#54)

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

@@ -26,6 +26,7 @@ import type { PluginCustomOptions } from '../utils/cssFnValueToVariable';
 import { cssFnValueToVariable } from '../utils/cssFnValueToVariable';
 import { processCssObject } from '../utils/processCssObject';
 import { valueToLiteral } from '../utils/valueToLiteral';
+import { lowercaseFirstLetter } from '../utils/lowercaseFirstLetter';
 import BaseProcessor from './base-processor';
 import { Primitive, TemplateCallback } from './keyframes';
 import { cache, css } from '../utils/emotion';
@@ -470,9 +471,8 @@ export class StyledProcessor extends BaseProcessor {
       if (!overrides) {
         return;
       }
-      const overrideStyle = (overrides[value.slot.toLowerCase()] || overrides[value.slot]) as
-        | string
-        | CSSObject;
+      const overrideStyle = (overrides[lowercaseFirstLetter(value.slot)] ||
+        overrides[value.slot]) as string | CSSObject;
       const className = this.getClassName();
       if (typeof overrideStyle === 'string') {
         this.collectedStyles.push([className, overrideStyle, null]);
@@ -490,7 +490,7 @@ export class StyledProcessor extends BaseProcessor {
     if (
       'variants' in componentData &&
       componentData.variants &&
-      value.slot.toLowerCase() === 'root'
+      lowercaseFirstLetter(value.slot) === 'root'
     ) {
       variantsAccumulator.push(...(componentData.variants as unknown as VariantData[]));
     }

packages/pigment-css-react/src/utils/lowercaseFirstLetter.ts

@@ -0,0 +1,6 @@
+export const lowercaseFirstLetter = (string: string) => {
+  if (!string) {
+    return string;
+  }
+  return string.charAt(0).toLowerCase() + string.slice(1);
+};

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

@@ -0,0 +1,9 @@
+import { styled } from '@pigment-css/react';
+
+const NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiOutlinedInput',
+  slot: 'NotchedOutline',
+  overridesResolver: (props, styles) => styles.notchedOutline,
+})({
+  borderColor: 'red',
+});

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

@@ -0,0 +1,6 @@
+.njazm0b {
+  border-color: red;
+}
+.njazm0b-1 {
+  border: none;
+}

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

@@ -0,0 +1,9 @@
+import { styled as _styled } from '@pigment-css/react';
+import _theme from '@pigment-css/react/theme';
+const NotchedOutlineRoot = /*#__PURE__*/ _styled('fieldset', {
+  name: 'MuiOutlinedInput',
+  slot: 'NotchedOutline',
+  overridesResolver: (props, styles) => styles.notchedOutline,
+})({
+  classes: ['njazm0b', 'njazm0b-1'],
+});

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

@@ -81,4 +81,28 @@ describe('Pigment CSS - styled', () => {
     expect(output.js).to.equal(fixture.js);
     expect(output.css).to.equal(fixture.css);
   });
+
+  it('should work with theme styleOverrides', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled-theme-styleOverrides.input.js'),
+      {
+        themeArgs: {
+          theme: {
+            components: {
+              MuiOutlinedInput: {
+                styleOverrides: {
+                  notchedOutline: {
+                    border: 'none',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
 });