[code-infra] Convert @mui/styled-engine to TypeScript

packages/mui-styled-engine/package.json

@@ -24,7 +24,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "scripts": {
-    "build": "code-infra build --flat --skipTsc",
+    "build": "code-infra build --flat",
     "release": "pnpm build && pnpm publish",
     "test": "pnpm --workspace-root test:unit --project \"*:@mui/styled-engine\"",
     "typescript": "tsc -p tsconfig.json",
@@ -43,6 +43,7 @@
     "@emotion/styled": "11.14.1",
     "@mui/styled-engine": "workspace:*",
     "@types/chai": "5.2.3",
+    "@types/prop-types": "15.7.15",
     "@types/react": "19.2.14",
     "chai": "6.2.2",
     "react": "19.2.6"
@@ -69,7 +70,7 @@
     "node": ">=14.0.0"
   },
   "exports": {
-    ".": "./src/index.js",
-    "./*": "./src/*/index.js"
+    ".": "./src/index.ts",
+    "./*": "./src/*/index.ts"
   }
 }

packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.test.js → packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.test.tsx

@@ -36,7 +36,7 @@ describe('GlobalStyles', () => {
   it.skipIf(isJsdom())('should add global styles using function', function test() {
     render(
       <ThemeProvider theme={{ color: 'rgb(0, 0, 255)' }}>
-        <GlobalStyles styles={(theme) => ({ span: { color: theme.color } })} />
+        <GlobalStyles styles={(theme: any) => ({ span: { color: theme.color } })} />
         <span data-testid="text">Blue text</span>
       </ThemeProvider>,
     );
@@ -51,7 +51,7 @@ describe('GlobalStyles', () => {
       render(
         <GlobalStyles
           defaultTheme={{ color: 'rgb(0, 0, 255)' }}
-          styles={(theme) => ({ span: { color: theme.color } })}
+          styles={(theme: any) => ({ span: { color: theme.color } })}
         />,
       ),
     ).not.to.throw();

packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.tsx

@@ -0,0 +1,39 @@
+'use client';
+import type * as React from 'react';
+import PropTypes from 'prop-types';
+import { Global, type Interpolation } from '@emotion/react';
+
+export interface GlobalStylesProps<Theme = {}> {
+  defaultTheme?: object | undefined;
+  styles: Interpolation<Theme>;
+}
+
+function isEmpty(obj: object | null | undefined) {
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+}
+
+export default function GlobalStyles<Theme = {}>(
+  props: GlobalStylesProps<Theme>,
+): React.JSX.Element {
+  const { styles, defaultTheme = {} } = props;
+
+  const globalStyles =
+    typeof styles === 'function'
+      ? (themeInput: Theme) =>
+          (styles as (theme: Theme) => Interpolation<Theme>)(
+            isEmpty(themeInput as object) ? (defaultTheme as Theme) : themeInput,
+          )
+      : styles;
+
+  return <Global styles={globalStyles as any} />;
+}
+
+(GlobalStyles as any).propTypes /* remove-proptypes */ = {
+  defaultTheme: PropTypes.object,
+  styles: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+};

packages/mui-styled-engine/src/GlobalStyles/index.js → packages/mui-styled-engine/src/GlobalStyles/index.ts

@@ -1 +1,2 @@
 export { default } from './GlobalStyles';
+export type * from './GlobalStyles';

packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.test.js → packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.test.tsx

@@ -7,10 +7,10 @@ import { TEST_INTERNALS_DO_NOT_USE } from './StyledEngineProvider';
 describe('[Emotion] StyledEngineProvider', () => {
   const { render } = createRenderer();
 
-  let rule;
+  let rule: string | undefined;
 
   beforeAll(() => {
-    TEST_INTERNALS_DO_NOT_USE.insert = (...args) => {
+    TEST_INTERNALS_DO_NOT_USE.insert = (...args: any[]) => {
       rule = args[0];
     };
   });

packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js → packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.tsx

@@ -5,13 +5,24 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { StyleSheet } from '@emotion/sheet';
 
+export interface StyledEngineProviderProps {
+  children?: React.ReactNode;
+  enableCssLayer?: boolean | undefined;
+  injectFirst?: boolean | undefined;
+}
+
 // To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
 const cacheMap = new Map();
 
 // Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
 // We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
 // Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
-export const TEST_INTERNALS_DO_NOT_USE = {
+/**
+ * @internal
+ */
+export const TEST_INTERNALS_DO_NOT_USE: {
+  insert?: ((rule: string, options?: unknown) => unknown) | undefined;
+} = {
   /**
    * to intercept the generated CSS before inserting to the style tag, so that we can check the generated CSS.
    *
@@ -27,7 +38,7 @@ export const TEST_INTERNALS_DO_NOT_USE = {
 
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
-const createEmotionCache = (options, CustomSheet) => {
+const createEmotionCache = (options: any, CustomSheet: any) => {
   const cache = createCache(options);
 
   // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
@@ -43,7 +54,7 @@ const createEmotionCache = (options, CustomSheet) => {
   return cache;
 };
 
-let insertionPoint;
+let insertionPoint: any;
 if (typeof document === 'object') {
   // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
   // For more information, see https://github.com/mui/material-ui/issues/44597
@@ -59,22 +70,22 @@ if (typeof document === 'object') {
   }
 }
 
-function getCache(injectFirst, enableCssLayer) {
+function getCache(injectFirst?: boolean, enableCssLayer?: boolean) {
   if (injectFirst || enableCssLayer) {
     /**
      * This is for client-side apps only.
      * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
      * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
      */
     class MyStyleSheet extends StyleSheet {
-      insert(rule, options) {
+      insert(rule: string, options?: unknown): unknown {
         if (TEST_INTERNALS_DO_NOT_USE.insert) {
           return TEST_INTERNALS_DO_NOT_USE.insert(rule, options);
         }
         if (this.key && this.key.endsWith('global')) {
           this.before = insertionPoint;
         }
-        return super.insert(rule, options);
+        return (super.insert as (rule: string, options?: unknown) => unknown)(rule, options);
       }
     }
     const emotionCache = createEmotionCache(
@@ -86,20 +97,20 @@ function getCache(injectFirst, enableCssLayer) {
     );
     if (enableCssLayer) {
       const prevInsert = emotionCache.insert;
-      emotionCache.insert = (...args) => {
+      (emotionCache as any).insert = (...args: any[]) => {
         if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
           // avoid nested @layer
           args[1].styles = `@layer mui {${args[1].styles}}`;
         }
-        return prevInsert(...args);
+        return (prevInsert as (...insertArgs: any[]) => unknown)(...args);
       };
     }
     return emotionCache;
   }
   return undefined;
 }
 
-export default function StyledEngineProvider(props) {
+export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element {
   const { injectFirst, enableCssLayer, children } = props;
   const cache = React.useMemo(() => {
     const cacheKey = `${injectFirst}-${enableCssLayer}`;
@@ -110,10 +121,12 @@ export default function StyledEngineProvider(props) {
     cacheMap.set(cacheKey, fresh);
     return fresh;
   }, [injectFirst, enableCssLayer]);
-  return cache ? <CacheProvider value={cache}>{children}</CacheProvider> : children;
+  return (
+    cache ? <CacheProvider value={cache}>{children}</CacheProvider> : children
+  ) as React.JSX.Element;
 }
 
-StyledEngineProvider.propTypes = {
+(StyledEngineProvider as any).propTypes /* remove-proptypes */ = {
   /**
    * Your component tree.
    */

packages/mui-styled-engine/src/StyledEngineProvider/index.d.ts → packages/mui-styled-engine/src/StyledEngineProvider/index.ts

@@ -1,2 +1,2 @@
 export { default } from './StyledEngineProvider';
-export * from './StyledEngineProvider';
+export type * from './StyledEngineProvider';