[zero][tag] Add support for sx prop

User can pass object or a callback that returns an object.
This is done through an intermediate babel-plugin that rewrites the
object passed to `sx` prop.

apps/zero-runtime-vite-app/package.json

@@ -4,19 +4,22 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite"
+    "dev": "vite",
+    "build": "vite build"
   },
   "dependencies": {
     "@mui/zero-runtime": "file:../../packages/zero-runtime/build",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.22.10",
     "@linaria/vite": "^4.5.4",
-    "@mui/utils": "^5.14.5",
-    "@mui/material": "^5.14.5",
+    "@mui/utils": "^5.14.6",
+    "@mui/material": "^5.14.6",
     "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build",
-    "vite": "4.4.9",
-    "@vitejs/plugin-react": "^4.0.4"
+    "@types/babel__core": "^7.20.1",
+    "@vitejs/plugin-react": "^4.0.4",
+    "vite": "4.4.9"
   }
 }

apps/zero-runtime-vite-app/src/App.tsx

@@ -9,9 +9,7 @@ const Button = styled('button', {
   'color:red',
   ({ theme }: any) => ({
     fontFamily: 'sans-serif',
-    color: 'primary.main',
     backgroundColor: [theme.palette.primary.main, 'text.primary', 'background.paper'],
-    fontSize: (props: any) => (props.isRed ? 'h1.fontSize' : 'h2.fontSize'),
   }),
   {
     fontFamily: 'sans-serif',
@@ -34,7 +32,7 @@ const HalfWidth = styled.div({
   border: '1px solid #ccc',
 });
 
-export default function App() {
+export default function App({ isRed }: any) {
   const [count, setCount] = React.useState(0);
   const [value, setValue] = React.useState(50);
   const [isColorPrimary, setIsColorPrimary] = React.useState(true);
@@ -106,7 +104,19 @@ export default function App() {
         </div>
       </div>
       <div>
-        <HalfWidth sx={{ color: 'red' }}>
+        <HalfWidth
+          sx={({ theme }: any) => ({
+            color: theme.palette.primary.main,
+            fontSize: isRed ? 'h1.fontSize' : 'h2.fontSize',
+            ':hover': {
+              backgroundColor: ['primary.dark', 'secondary.main'],
+              color: {
+                sm: 'primary.dark',
+                md: 'secondary.main',
+              },
+            },
+          })}
+        >
           <Slider
             aria-label="Small steps"
             defaultValue={50}

apps/zero-runtime-vite-app/vite.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig, splitVendorChunkPlugin, type Plugin } from 'vite';
+import { defineConfig, splitVendorChunkPlugin, type PluginOption } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import linaria from '@linaria/vite';
 import { createTheme } from '@mui/material/styles';
 import { generateCss } from '@mui/zero-tag-processor/generateCss';
+import { transformAsync } from '@babel/core';
 
 const theme = createTheme();
 // @TODO - Make this part of the main package
@@ -17,46 +18,73 @@ theme.applyDarkStyles = function applyDarkStyles(obj) {
 
 const varPrefix = 'app';
 
-function injectMUITokensPlugin(): Plugin {
-  return {
-    name: 'vite-mui-theme-injection-plugin',
-    load(id) {
-      if (id.endsWith('@mui/zero-runtime/styles.css')) {
-        return {
-          code: generateCss(
-            {
-              cssVariablesPrefix: varPrefix,
-              themeArgs: {
-                theme,
+function muiZeroVitePlugin(): PluginOption {
+  function injectMUITokensPlugin(): PluginOption {
+    return {
+      name: 'vite-mui-theme-injection-plugin',
+      load(id) {
+        if (id.endsWith('@mui/zero-runtime/styles.css')) {
+          return {
+            code: generateCss(
+              {
+                cssVariablesPrefix: varPrefix,
+                themeArgs: {
+                  theme,
+                },
               },
-            },
-            {},
-          ),
-          map: null,
+              {},
+            ),
+            map: null,
+          };
+        }
+        return null;
+      },
+    };
+  }
+  const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mts', '.mjs', '.cts', '.cjs', '.mtsx'];
+
+  function intermediateBabelPlugin(): PluginOption {
+    return {
+      name: 'vite-intermediate-plugin',
+      async transform(code, id) {
+        const [filename] = id.split('?');
+        if (
+          !filename.includes('zero-runtime-vite-app/src') ||
+          !extensions.some((ext) => filename.endsWith(ext))
+        ) {
+          return null;
+        }
+        const result = await transformAsync(code, {
+          filename,
+          babelrc: false,
+          configFile: false,
+          plugins: [['@mui/zero-tag-processor/pre-linaria-plugin']],
+        });
+        return {
+          code: result?.code ?? code,
+          map: result?.map,
         };
-      }
-      return null;
+      },
+    };
+  }
+
+  // @TODO - Expect most of these from users of the plugin.
+  const linariaPlugin = linaria({
+    displayName: false,
+    sourceMap: true,
+    // @ts-ignore
+    cssVariablesPrefix: varPrefix,
+    themeArgs: {
+      theme,
     },
-  };
+    babelOptions: {
+      plugins: ['@babel/plugin-syntax-jsx'],
+    },
+  });
+
+  return [injectMUITokensPlugin(), intermediateBabelPlugin(), linariaPlugin];
 }
 
 export default defineConfig({
-  plugins: [
-    // @TODO Wrap and expose both the plugins in a single package `@mui/zero-vite`
-    injectMUITokensPlugin(),
-    linaria({
-      displayName: true,
-      sourceMap: true,
-      // @ts-ignore
-      cssVariablesPrefix: varPrefix,
-      themeArgs: {
-        theme,
-      },
-      babelOptions: {
-        plugins: ['@babel/plugin-syntax-jsx'],
-      },
-    }),
-    reactPlugin(),
-    splitVendorChunkPlugin(),
-  ],
+  plugins: [muiZeroVitePlugin(), reactPlugin(), splitVendorChunkPlugin()],
 });