From a8102f8a8739b5d935278e4a572b84e641a682ba Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Mon, 15 Jan 2024 15:10:03 +0530 Subject: [PATCH] [zero] Identify zero runtime styled path (#40555) --- packages/mui-material/src/Badge/Badge.js | 2 +- packages/mui-material/src/zero-styled/index.d.ts | 2 ++ packages/mui-material/src/zero-styled/index.js | 2 ++ packages/zero-runtime/package.json | 12 ++++++++++++ packages/zero-runtime/src/processors/styled.ts | 5 ++++- packages/zero-unplugin/src/index.ts | 13 ++++++++++++- packages/zero-vite-plugin/src/zero-vite-plugin.ts | 13 ++++++++++++- packages/zero-vite-plugin/tsup.config.ts | 4 ++++ 8 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 packages/mui-material/src/zero-styled/index.d.ts create mode 100644 packages/mui-material/src/zero-styled/index.js diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 6e5e418a40d3ed..bcb554b0b7f65d 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -6,7 +6,7 @@ import { usePreviousProps } from '@mui/utils'; import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses'; import { useBadge } from '@mui/base/useBadge'; import { useSlotProps } from '@mui/base'; -import styled from '../styles/styled'; +import { styled } from '../zero-styled'; import useThemeProps from '../styles/useThemeProps'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; diff --git a/packages/mui-material/src/zero-styled/index.d.ts b/packages/mui-material/src/zero-styled/index.d.ts new file mode 100644 index 00000000000000..1fe160d7d76817 --- /dev/null +++ b/packages/mui-material/src/zero-styled/index.d.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line import/prefer-default-export +export { default as styled } from '../styles/styled'; diff --git a/packages/mui-material/src/zero-styled/index.js b/packages/mui-material/src/zero-styled/index.js new file mode 100644 index 00000000000000..1fe160d7d76817 --- /dev/null +++ b/packages/mui-material/src/zero-styled/index.js @@ -0,0 +1,2 @@ +// eslint-disable-next-line import/prefer-default-export +export { default as styled } from '../styles/styled'; diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json index 2521400bcd5870..09439a8d8403bf 100644 --- a/packages/zero-runtime/package.json +++ b/packages/zero-runtime/package.json @@ -87,8 +87,20 @@ "import": "./utils/index.mjs", "require": "./utils/index.js" }, + "./exports/generateAtomics": { + "default": "./exports/generateAtomics.js" + }, + "./exports/keyframes": { + "default": "./exports/keyframes.js" + }, + "./exports/styled": { + "default": "./exports/styled.js" + }, "./exports/sx-plugin": { "default": "./exports/sx-plugin.js" + }, + "./exports/sx": { + "default": "./exports/sx.js" } } } diff --git a/packages/zero-runtime/src/processors/styled.ts b/packages/zero-runtime/src/processors/styled.ts index 1437c5fa6af77f..efb9f7262852b1 100644 --- a/packages/zero-runtime/src/processors/styled.ts +++ b/packages/zero-runtime/src/processors/styled.ts @@ -338,7 +338,10 @@ export class StyledProcessor extends BaseProcessor { ); } - const styledImportIdentifier = t.addNamedImport(this.tagSource.imported, this.tagSource.source); + const styledImportIdentifier = t.addNamedImport( + this.tagSource.imported, + process.env.PACKAGE_NAME as string, + ); const styledCall = t.callExpression( styledImportIdentifier, componentMetaExpression ? [componentName, componentMetaExpression] : [componentName], diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index b8c934576dd1ba..32c1c73bedc1a9 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -99,6 +99,7 @@ export const plugin = createUnplugin((options) => { sourceMap = false, transformSx = true, overrideContext, + tagResolver, ...rest } = options; const themeArgs = { theme }; @@ -166,6 +167,7 @@ export const plugin = createUnplugin((options) => { root: process.cwd(), preprocessor, pluginOptions: { + ...rest, themeArgs: { theme, }, @@ -179,7 +181,16 @@ export const plugin = createUnplugin((options) => { } return context; }, - ...rest, + tagResolver(source: string, tag: string) { + const tagResult = tagResolver?.(source, tag); + if (tagResult) { + return tagResult; + } + if (source.endsWith('/zero-styled')) { + return `${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`; + } + return null; + }, babelOptions: { ...rest.babelOptions, plugins: [ diff --git a/packages/zero-vite-plugin/src/zero-vite-plugin.ts b/packages/zero-vite-plugin/src/zero-vite-plugin.ts index 2ad4c2be667373..7a05489d2e2706 100644 --- a/packages/zero-vite-plugin/src/zero-vite-plugin.ts +++ b/packages/zero-vite-plugin/src/zero-vite-plugin.ts @@ -43,6 +43,7 @@ export default function zeroVitePlugin({ preprocessor, transformLibraries = [], overrideContext, + tagResolver, ...rest }: VitePluginOptions = {}): Plugin { const filter = createFilter(include, exclude); @@ -116,7 +117,7 @@ export default function zeroVitePlugin({ let shouldReturn = url.includes('node_modules'); if (shouldReturn) { - shouldReturn = !transformLibraries.some((libName) => url.includes(libName)); + shouldReturn = !transformLibraries.some((libName: string) => url.includes(libName)); } if (shouldReturn) { @@ -195,6 +196,16 @@ export default function zeroVitePlugin({ } return context; }, + tagResolver(source: string, tag: string) { + const tagResult = tagResolver?.(source, tag); + if (tagResult) { + return tagResult; + } + if (source.endsWith('/zero-styled')) { + return `${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`; + } + return null; + }, }, }, cache, diff --git a/packages/zero-vite-plugin/tsup.config.ts b/packages/zero-vite-plugin/tsup.config.ts index f6b8c530b9be1f..16d0001d076fe1 100644 --- a/packages/zero-vite-plugin/tsup.config.ts +++ b/packages/zero-vite-plugin/tsup.config.ts @@ -1,5 +1,6 @@ import { Options, defineConfig } from 'tsup'; import config from '../../tsup.config'; +import zeroPkgJson from '../zero-runtime/package.json'; const external = ['@mui/zero-runtime/utils']; @@ -7,6 +8,9 @@ const baseConfig: Options = { ...(config as Options), tsconfig: './tsconfig.build.json', external, + env: { + RUNTIME_PACKAGE_NAME: zeroPkgJson.name, + }, }; export default defineConfig([