[poc] Support a version of Material UI without CSS in JS

.codesandbox/ci.json

@@ -15,6 +15,7 @@
     "packages/mui-material-pigment-css",
     "packages/mui-private-theming",
     "packages/mui-styled-engine-sc",
+    "packages/mui-styled-engine-noop",
     "packages/mui-styled-engine",
     "packages/mui-styles",
     "packages/mui-system",
@@ -42,6 +43,7 @@
     "@mui/material-pigment-css": "packages/mui-material-pigment-css/build",
     "@mui/private-theming": "packages/mui-private-theming/build",
     "@mui/styled-engine": "packages/mui-styled-engine/build",
+    "@mui/styled-engine-noop": "packages/mui-styled-engine-noop/build",
     "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build",
     "@mui/styles": "packages/mui-styles/build",
     "@mui/system": "packages/mui-system/build",

babel.config.js

@@ -35,6 +35,7 @@ module.exports = function getBabelConfig(api) {
     '@mui/lab': resolveAliasPath('./packages/mui-lab/src'),
     '@mui/internal-markdown': resolveAliasPath('./packages/markdown'),
     '@mui/styled-engine': resolveAliasPath('./packages/mui-styled-engine/src'),
+    '@mui/styled-engine-noop': resolveAliasPath('./packages/mui-styled-engine-noop/src'),
     '@mui/styled-engine-sc': resolveAliasPath('./packages/mui-styled-engine-sc/src'),
     '@mui/styles': resolveAliasPath('./packages/mui-styles/src'),
     '@mui/system': resolveAliasPath('./packages/mui-system/src'),

docs/next.config.mjs

@@ -111,6 +111,10 @@ export default withDocsInfra({
           '@mui/icons-material': path.resolve(workspaceRoot, 'packages/mui-icons-material/lib/esm'),
           '@mui/lab': path.resolve(workspaceRoot, 'packages/mui-lab/src'),
           '@mui/styled-engine': path.resolve(workspaceRoot, 'packages/mui-styled-engine/src'),
+          '@mui/styled-engine-noop': path.resolve(
+            workspaceRoot,
+            'packages/mui-styled-engine-noop/src',
+          ),
           '@mui/styles': path.resolve(workspaceRoot, 'packages/mui-styles/src'),
           '@mui/system': path.resolve(workspaceRoot, 'packages/mui-system/src'),
           '@mui/private-theming': path.resolve(workspaceRoot, 'packages/mui-private-theming/src'),

docs/package.json

@@ -38,6 +38,7 @@
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
     "@mui/styled-engine": "workspace:^",
+    "@mui/styled-engine-noop": "workspace:^",
     "@mui/styled-engine-sc": "workspace:^",
     "@mui/styles": "workspace:^",
     "@mui/system": "workspace:^",

packages/mui-icons-material/test/generated-types/tsconfig.json

@@ -33,6 +33,8 @@
       "@mui/styled-engine-sc/*": ["./mui-styled-engine-sc/src/*"],
       "@mui/styled-engine": ["./mui-styled-engine/src"],
       "@mui/styled-engine/*": ["./mui-styled-engine/src/*"],
+      "@mui/styled-engine-noop": ["./mui-styled-engine-noop/src"],
+      "@mui/styled-engine-noop/*": ["./mui-styled-engine-noop/src/*"],
       "@mui/styles": ["./mui-styles/src"],
       "@mui/styles/*": ["./mui-styles/src/*"],
       "@mui/system": ["./mui-system/src"],

packages/mui-material/src/Header/Header.module.css

@@ -0,0 +1,3 @@
+.root {
+  color: blue;
+}

packages/mui-material/src/Header/Header.module.css.d.ts

@@ -0,0 +1 @@
+export const root: string;

packages/mui-material/src/Header/Header.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import classes from './Header.module.css';
+
+const HeaderRoot = styled('h1')({});
+
+function Header(props: React.ComponentPropsWithRef<'h1'>) {
+  return (
+    <HeaderRoot {...props} className={clsx('MuiHeader-root', classes.root, props.className)} />
+  );
+}
+
+export default Header;

packages/mui-material/src/Header/index.ts

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

packages/mui-styled-engine-noop/README.md

@@ -0,0 +1,11 @@
+# @mui/styled-engine-noop
+
+This package is a wrapper around the `@emotion/react` package.
+It also provides a shared interface that can be used with other styled engines, like styled-components.
+It is used internally in the `@mui/system` package.
+
+## Documentation
+
+<!-- #default-branch-switch -->
+
+Visit [https://mui.com/material-ui/integrations/styled-components/](https://mui.com/material-ui/integrations/styled-components/) to view the full documentation.

packages/mui-styled-engine-noop/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@mui/styled-engine-noop",
+  "version": "6.1.6",
+  "private": false,
+  "author": "MUI Team",
+  "description": "styled() API noop package for interoperability with CSS in JS libraries.",
+  "main": "./src/index.js",
+  "keywords": [
+    "react",
+    "react-component",
+    "mui",
+    "emotion"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-styled-engine-noop"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/material-ui/issues"
+  },
+  "homepage": "https://mui.com/system/styled/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "scripts": {
+    "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
+    "build:modern": "node ../../scripts/build.mjs modern",
+    "build:node": "node ../../scripts/build.mjs node",
+    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "prebuild": "rimraf build",
+    "release": "pnpm build && pnpm publish",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine/**/*.test.?(c|m)[jt]s?(x)'",
+    "typescript": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.26.0",
+    "@emotion/cache": "^11.13.1",
+    "@emotion/serialize": "^1.3.2",
+    "@emotion/sheet": "^1.4.0",
+    "csstype": "^3.1.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@mui/internal-test-utils": "workspace:^",
+    "@types/chai": "^4.3.20",
+    "@types/react": "^18.3.12",
+    "chai": "^4.5.0",
+    "react": "^18.3.1"
+  },
+  "peerDependencies": {},
+  "peerDependenciesMeta": {},
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

packages/mui-styled-engine-noop/src/GlobalStyles/GlobalStyles.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Interpolation } from '@emotion/react';
+
+export interface GlobalStylesProps<Theme = {}> {
+  defaultTheme?: object;
+  styles: Interpolation<Theme>;
+}
+
+export default function GlobalStyles<Theme = {}>(
+  props: GlobalStylesProps<Theme>,
+): React.JSX.Element;

packages/mui-styled-engine-noop/src/GlobalStyles/GlobalStyles.js

@@ -0,0 +1,6 @@
+'use client';
+import * as React from 'react';
+
+export default function GlobalStyles(props) {
+  return null;
+}

packages/mui-styled-engine-noop/src/GlobalStyles/index.d.ts

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

packages/mui-styled-engine-noop/src/GlobalStyles/index.js

@@ -0,0 +1 @@
+export { default } from './GlobalStyles';

packages/mui-styled-engine-noop/src/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface StyledEngineProviderProps {
+  children?: React.ReactNode;
+  injectFirst?: boolean;
+}
+
+export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

packages/mui-styled-engine-noop/src/StyledEngineProvider/StyledEngineProvider.js

@@ -0,0 +1,7 @@
+'use client';
+import * as React from 'react';
+
+export default function StyledEngineProvider(props) {
+  const { children } = props;
+  return children;
+}

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

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

packages/mui-styled-engine-noop/src/StyledEngineProvider/index.js

@@ -0,0 +1 @@
+export { default } from './StyledEngineProvider';

packages/mui-styled-engine-noop/src/index.d.ts

@@ -0,0 +1,54 @@
+export { default as StyledEngineProvider } from './StyledEngineProvider';
+
+export { default as GlobalStyles } from './GlobalStyles';
+export * from './GlobalStyles';
+
+export declare const ThemeContext: React.Context<null>;
+export function keyframes(arg: any): string;
+export function css(arg: any): string;
+
+/**
+ * For internal usage in `@mui/system` package
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_mutateStyles(
+  tag: React.ElementType,
+  processor: (styles: any) => any,
+): void;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles<P>(styles: any): object;
+
+export interface SerializedStyles {
+  name: string;
+  styles: string;
+  map?: string;
+  next?: SerializedStyles;
+}
+
+export type Keyframes = {
+  name: string;
+  styles: string;
+  anim: number;
+  toString: () => string;
+} & string;
+
+export function shouldForwardProp(propName: PropertyKey): boolean;
+
+/** Same as StyledOptions but shouldForwardProp must be a type guard */
+export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
+  label?: string;
+  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
+  target?: string;
+}
+
+export interface CSSObject {}
+
+export type Interpolation = any;
+
+export interface CreateMUIStyled<A extends any, B extends any, C extends any> {
+  <C extends any, ForwardedProps extends any>(
+    component: C,
+    options: object,
+  ): React.ComponentType<ForwardedProps & A & B & C>;
+}

packages/mui-styled-engine-noop/src/index.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export default function styled(Tag, options) {
+  const Component = React.forwardRef((props, ref) => {
+    return <Tag {...props} ref={ref} />;
+  });
+  // TODO: handle options
+  return () => Component;
+}
+
+export function keyframes() {
+  return 'animation-name';
+}
+
+export function css() {
+  return '';
+}
+
+export const ThemeContext = React.createContext(null);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_mutateStyles(tag, processor) {}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles(styles) {
+  return '';
+}
+
+export { default as StyledEngineProvider } from './StyledEngineProvider';
+export { default as GlobalStyles } from './GlobalStyles';

packages/mui-styled-engine-noop/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"]
+}

scripts/copyFiles.mjs

@@ -3,6 +3,7 @@ import path from 'path';
 import {
   createModulePackages,
   createPackageFile,
+  cssModulesCopy,
   includeFileInBuild,
   prepend,
   typescriptCopy,
@@ -42,6 +43,9 @@ async function run() {
     // TypeScript
     await typescriptCopy({ from: srcPath, to: buildPath });
 
+    // CSS modules
+    await cssModulesCopy({ from: srcPath, to: buildPath });
+
     const packageData = await createPackageFile();
 
     await Promise.all(

scripts/copyFilesUtils.mjs

@@ -91,6 +91,17 @@ export async function typescriptCopy({ from, to }) {
   return Promise.all(cmds);
 }
 
+export async function cssModulesCopy({ from, to }) {
+  if (!(await fse.pathExists(to))) {
+    console.warn(`path ${to} does not exists`);
+    return [];
+  }
+
+  const files = await glob('**/*.module.css', { cwd: from });
+  const cmds = files.map((file) => fse.copy(path.resolve(from, file), path.resolve(to, file)));
+  return Promise.all(cmds);
+}
+
 export async function createPackageFile() {
   const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8');
   const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } =

tsconfig.json

@@ -23,6 +23,8 @@
       "@mui/internal-markdown/*": ["./packages/markdown/*"],
       "@mui/styled-engine": ["./packages/mui-styled-engine/src"],
       "@mui/styled-engine/*": ["./packages/mui-styled-engine/src/*"],
+      "@mui/styled-engine-noop": ["./packages/mui-styled-engine-noop/src"],
+      "@mui/styled-engine-noop/*": ["./packages/mui-styled-engine-noop/src/*"],
       "@mui/styled-engine-sc": ["./packages/mui-styled-engine-sc/src"],
       "@mui/styled-engine-sc/*": ["./packages/mui-styled-engine-sc/src/*"],
       "@mui/styles": ["./packages/mui-styles/src"],

webpackBaseConfig.js

@@ -15,6 +15,7 @@ module.exports = {
       '@mui/icons-material': path.resolve(__dirname, './packages/mui-icons-material/lib/esm'),
       '@mui/lab': path.resolve(__dirname, './packages/mui-lab/src'),
       '@mui/styled-engine': path.resolve(__dirname, './packages/mui-styled-engine/src'),
+      '@mui/styled-engine-noop': path.resolve(__dirname, './packages/mui-styled-engine-noop/src'),
       '@mui/styled-engine-sc': path.resolve(__dirname, './packages/mui-styled-engine-sc/src'),
       '@mui/styles': path.resolve(__dirname, './packages/mui-styles/src'),
       '@mui/system': path.resolve(__dirname, './packages/mui-system/src'),