[zero][vite] Create a package for vite plugin

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

@@ -13,13 +13,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@linaria/vite": "^4.5.4",
-    "@mui/utils": "^5.14.6",
-    "@mui/material": "^5.14.6",
-    "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build",
-    "@types/babel__core": "^7.20.1",
+    "@mui/utils": "^5.14.8",
+    "@mui/material": "^5.14.8",
+    "@mui/zero-vite-plugin": "file:../../packages/zero-vite-plugin/build",
     "@vitejs/plugin-react": "^4.0.4",
     "vite": "4.4.9"
+  },
+  "resolutions": {
+    "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build"
   }
 }

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

@@ -1,9 +1,7 @@
-import { defineConfig, splitVendorChunkPlugin, type PluginOption } from 'vite';
+import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
-import linaria from '@linaria/vite';
+import { zeroVitePlugin } from '@mui/zero-vite-plugin';
 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
@@ -18,73 +16,13 @@ theme.applyDarkStyles = function applyDarkStyles(obj) {
 
 const varPrefix = 'app';
 
-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,
-          };
-        }
-        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,
-        };
-      },
-    };
-  }
-
-  // @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: [muiZeroVitePlugin(), reactPlugin(), splitVendorChunkPlugin()],
+  plugins: [
+    zeroVitePlugin({
+      cssVariablesPrefix: varPrefix,
+      theme,
+    }),
+    reactPlugin(),
+    splitVendorChunkPlugin(),
+  ],
 });

apps/zero-runtime-vite-app/yarn.lock

@@ -252,7 +252,7 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.22.10", "@babel/parser@^7.22.5":
+"@babel/parser@^7.22.10", "@babel/parser@^7.22.5":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.10.tgz#e37634f9a12a1716136c44624ef54283cabd3f55"
   integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==
@@ -966,7 +966,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.10", "@babel/types@^7.22.5", "@babel/types@^7.4.4":
+"@babel/types@^7.22.10", "@babel/types@^7.22.5", "@babel/types@^7.4.4":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.10.tgz#4a9e76446048f2c66982d1a989dd12b8a2d2dc03"
   integrity sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==
@@ -1321,73 +1321,73 @@
     "@linaria/utils" "^4.5.3"
     "@rollup/pluginutils" "^4.1.0"
 
-"@mui/[email protected].12":
-  version "5.0.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.12.tgz#131882930bdbe236dd835867bf6222a993b8d219"
-  integrity sha512-tZjjXNAyUpwSDT1uRliZMhRQkWYzELJ8Qi61EuOMRpi36HIwnK2T7Nr4RI423Sv8G2EEikDAZj7je33eNd73NQ==
+"@mui/[email protected].14":
+  version "5.0.0-beta.14"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.14.tgz#315b67b0fd231cbd47e8d54f8f92be23122e4d66"
+  integrity sha512-Je/9JzzYObsuLCIClgE8XvXNFb55IEz8n2NtStUfASfNiVrwiR8t6VVFFuhofehkyTIN34tq1qbBaOjCnOovBw==
   dependencies:
     "@babel/runtime" "^7.22.10"
     "@emotion/is-prop-valid" "^1.2.1"
     "@floating-ui/react-dom" "^2.0.1"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.6"
+    "@mui/utils" "^5.14.8"
     "@popperjs/core" "^2.11.8"
     clsx "^2.0.0"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/core-downloads-tracker@^5.14.6":
-  version "5.14.6"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.6.tgz#8cbc3441a630e1810a945e408e5025bdc99ea2f7"
-  integrity sha512-QZEU3pyGWLuaHbxvOlShol7U1FVgzWBR0OH9H8D7L8w4/vto5N5jJVvlqFQS3T0zbR6YGHxFaiL6Ky87jQg7aw==
+"@mui/core-downloads-tracker@^5.14.8":
+  version "5.14.8"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.8.tgz#9117bd29e94e96dc376f93a28e024666a2456696"
+  integrity sha512-8V7ZOC/lKkM03TRHqaThQFIq6bWPnj7L/ZWPh0ymldYFFyh8XdF0ywTgafsofDNYT4StlNknbaTjVHBma3SNjQ==
 
-"@mui/material@^5.14.6":
-  version "5.14.6"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.6.tgz#12cbb716a7f70859764be310bb9b2f5ffc0da818"
-  integrity sha512-C3UgGrmtvcGkQkm0ONBU7bTdapTjQc2Se3b2354xMmU7lgSgW7VM6EP9wIH5XqqoJ60m9l/s9kbTWX0Y+EaWvA==
+"@mui/material@^5.14.8":
+  version "5.14.8"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.8.tgz#1cad40f106f7c983639376589c3f21485fb1d166"
+  integrity sha512-fqvDGGF1pXwOOL/f0Gw+KHo/67hasRpf2ApTIJkbuONOk9AUb2jnYMEqCWmL2sUcbbE3ShMbHl8N7HPSsRv1/A==
   dependencies:
     "@babel/runtime" "^7.22.10"
-    "@mui/base" "5.0.0-beta.12"
-    "@mui/core-downloads-tracker" "^5.14.6"
-    "@mui/system" "^5.14.6"
+    "@mui/base" "5.0.0-beta.14"
+    "@mui/core-downloads-tracker" "^5.14.8"
+    "@mui/system" "^5.14.8"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.6"
+    "@mui/utils" "^5.14.8"
     "@types/react-transition-group" "^4.4.6"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.14.6":
-  version "5.14.6"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.6.tgz#bd80c91bea94b6e54a74764f8d3fb0d4ec418acb"
-  integrity sha512-3VBLFGizBXfofyk33bwRg6t9L648aKnLmOKPfY1wFuiXq3AEYwobK65iDci/tHKxm/VKbZ6A7PFjLejvB3EvRQ==
+"@mui/private-theming@^5.14.8":
+  version "5.14.8"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.8.tgz#8e224cd10c531d12b871dc59b1f9376028dd13bb"
+  integrity sha512-iBzpcl3Mh92XaYpYPdgzzRxNGkjpoDz8rf8/q5m+EBPowFEHV+CCS9hC0Q2pOKLW3VFFikA7w/GHt7n++40JGQ==
   dependencies:
     "@babel/runtime" "^7.22.10"
-    "@mui/utils" "^5.14.6"
+    "@mui/utils" "^5.14.8"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.14.6":
-  version "5.14.6"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.6.tgz#a4034ab51981ecf673275b2c1d1da71deb94317f"
-  integrity sha512-I6zeu/OP1Hk4NsX1Oj85TiYl1dER0JMsLJVn76J1Ihl24A5EbiZQKJp3Mn+ufA79ypkdAvM9aQCAQyiVBFcUHg==
+"@mui/styled-engine@^5.14.8":
+  version "5.14.8"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.8.tgz#b7a4d5dc6cbe3ecaa5af5189eb5ad90a62a255eb"
+  integrity sha512-LGwOav/Y40PZWZ2yDk4beUoRlc57Vg+Vpxi9V9BBtT2ESAucCgFobkt+T8eVLMWF9huUou5pwKgLSU5pF90hBg==
   dependencies:
     "@babel/runtime" "^7.22.10"
     "@emotion/cache" "^11.11.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/system@^5.14.6":
-  version "5.14.6"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.6.tgz#621eae10c4dde0a2ab566ac09c26f7becfb7ba80"
-  integrity sha512-/n0ae1MegWjiV1BpRU8jgg4E0zBjeB2VYsT/68ag/xaDuq3/TaDKJeT9REIvyBvwlG3CI3S2O+tRELktxCD1kg==
+"@mui/system@^5.14.8":
+  version "5.14.8"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.8.tgz#1ca201b948310083e670352bae2d7963ad6f971e"
+  integrity sha512-Dxnasv7Pj5hYe4ZZFKJZu4ufKm6cxpitWt3A+qMPps22YhqyeEqgDBq/HsAB3GOjqDP40fTAvQvS/Hguf4SJuw==
   dependencies:
     "@babel/runtime" "^7.22.10"
-    "@mui/private-theming" "^5.14.6"
-    "@mui/styled-engine" "^5.14.6"
+    "@mui/private-theming" "^5.14.8"
+    "@mui/styled-engine" "^5.14.8"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.6"
+    "@mui/utils" "^5.14.8"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
@@ -1397,10 +1397,10 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
   integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
 
-"@mui/utils@^5.14.6":
-  version "5.14.6"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.6.tgz#614338f781faf21535fbf1094b6691aaee1ff472"
-  integrity sha512-AznpqLu6hrFnpHgcvsSSMCG+cDbkcCYfo+daUwBVReNYv4l+NQ8+wvBAF4aUMi155N7xWbbgh0cyKs6Wdsm3aA==
+"@mui/utils@^5.14.8":
+  version "5.14.8"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.8.tgz#e1737d5fcd54aa413d6b1aaea3ea670af2919402"
+  integrity sha512-1Ls2FfyY2yVSz9NEqedh3J8JAbbZAnUWkOWLE2f4/Hc4T5UWHMfzBLLrCqExfqyfyU+uXYJPGeNIsky6f8Gh5Q==
   dependencies:
     "@babel/runtime" "^7.22.10"
     "@types/prop-types" "^15.7.5"
@@ -1409,12 +1409,12 @@
     react-is "^18.2.0"
 
 "@mui/zero-runtime@file:../../packages/zero-runtime/build":
-  version "0.0.1-alpha.0"
+  version "0.0.1-alpha.1"
   dependencies:
     clsx "^2.0.0"
 
-"@mui/zero-tag-processor@file:../../packages/zero-tag-processor/build":
-  version "0.0.1-alpha.0"
+"@mui/zero-tag-processor@0.0.1-alpha.2", "@mui/zero-tag-processor@file:../../packages/zero-tag-processor/build":
+  version "0.0.1-alpha.2"
   dependencies:
     "@babel/core" "^7.22.10"
     "@babel/helper-module-imports" "^7.22.5"
@@ -1423,9 +1423,16 @@
     "@emotion/css" "^11.11.2"
     "@linaria/tags" "^4.5.4"
     "@linaria/utils" "^4.5.3"
-    "@mui/system" "^5.14.6"
+    "@mui/system" "^5.14.8"
     lodash.get "^4.4.2"
 
+"@mui/zero-vite-plugin@file:../../packages/zero-vite-plugin/build":
+  version "0.0.1-alpha.0"
+  dependencies:
+    "@babel/core" "^7.22.10"
+    "@linaria/vite" "^4.5.4"
+    "@mui/zero-tag-processor" "0.0.1-alpha.2"
+
 "@popperjs/core@^2.11.8":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -1439,39 +1446,6 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@types/babel__core@^7.20.1":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.1.tgz#916ecea274b0c776fec721e333e55762d3a9614b"
-  integrity sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==
-  dependencies:
-    "@babel/parser" "^7.20.7"
-    "@babel/types" "^7.20.7"
-    "@types/babel__generator" "*"
-    "@types/babel__template" "*"
-    "@types/babel__traverse" "*"
-
-"@types/babel__generator@*":
-  version "7.6.4"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
-  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@types/babel__template@*":
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
-  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@types/babel__traverse@*":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.1.tgz#dd6f1d2411ae677dcb2db008c962598be31d6acf"
-  integrity sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==
-  dependencies:
-    "@babel/types" "^7.20.7"
-
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"

packages/zero-tag-processor/src/generateCss.ts

@@ -67,7 +67,7 @@ export function generateCss(
   }
   let cssStr = '';
   Object.entries(themeArgs).forEach(([themeKey, theme]) => {
-    const cssVarsObject = generateCssForTheme(theme, [cssVariablesPrefix]);
+    const cssVarsObject = generateCssForTheme(theme as Theme, [cssVariablesPrefix]);
     const cssThemeObject: Record<string, CssVarsObject> = {};
     if (themeKey === defaultThemeKey && injectInRoot) {
       cssThemeObject[':root'] = cssVarsObject;

packages/zero-tag-processor/src/styled.ts

@@ -369,7 +369,7 @@ export default class StyledProcessor extends BaseProcessor {
     if (!value.name || !theme) {
       return;
     }
-    const componentData = theme.components?.[value.name];
+    const componentData = (theme as Theme).components?.[value.name];
     if (!componentData) {
       return;
     }

packages/zero-tag-processor/src/utils/cssFnValueToVariable.ts

@@ -19,9 +19,7 @@ export type PluginCustomOptions = {
   /**
    * Object to pass as parameter to the styled css callback functions.
    */
-  themeArgs?: {
-    theme: Theme;
-  };
+  themeArgs?: Record<string, unknown>;
 };
 
 type CssFnValueToVariableParams = {
@@ -39,7 +37,8 @@ function transformThemeKeysInFn(
   filename?: string,
 ) {
   const { themeArgs: { theme } = {} } = options;
-  const config = theme?.unstable_sxConfig ?? defaultSxConfig;
+  const userTheme = theme as Theme;
+  const config = userTheme?.unstable_sxConfig ?? defaultSxConfig;
   const cssPropOptions = config[styleKey];
   const { themeKey } = cssPropOptions;
 

packages/zero-tag-processor/src/utils/cssFunctionTransformerPlugin.ts

@@ -1,6 +1,7 @@
 import { declare } from '@babel/helper-plugin-utils';
 import defaultSxConfig from '@mui/system/styleFunctionSx/defaultSxConfig';
 import get from 'lodash.get';
+import type { Theme } from '@mui/material/styles';
 import type { PluginCustomOptions } from './cssFnValueToVariable';
 
 type BabelPluginOptions = {
@@ -25,7 +26,7 @@ const cssFunctionTransformerPlugin = declare<BabelPluginOptions>((api, pluginOpt
     options: { cssVariablesPrefix = 'mui', themeArgs: { theme } = {} },
     styleKey,
   } = pluginOptions;
-  const config = theme?.unstable_sxConfig ?? defaultSxConfig;
+  const config = (theme as Theme)?.unstable_sxConfig ?? defaultSxConfig;
   const cssPropOptions = config[styleKey];
   const { themeKey } = cssPropOptions;
   if (!theme || !config || !cssPropOptions || !themeKey) {

packages/zero-vite-plugin/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": "error"
+  }
+}

packages/zero-vite-plugin/README.md

@@ -0,0 +1,3 @@
+# @mui/zero-vite-plugin
+
+Vite plugin to support MUI's `styled` processor.