diff --git a/apps/zero-runtime-vite-app/src/App.tsx b/apps/zero-runtime-vite-app/src/App.tsx index ec8dfb2bd40fda..07b4e0f494bf22 100644 --- a/apps/zero-runtime-vite-app/src/App.tsx +++ b/apps/zero-runtime-vite-app/src/App.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { styled, generateAtomics, css } from '@mui/zero-runtime'; +import { styled, generateAtomics } from '@mui/zero-runtime'; import type { Breakpoint } from '@mui/system'; import { Button, bounceAnim } from 'local-ui-lib'; import Slider from './Slider/ZeroSlider'; +import { Box } from './Box'; const ShowCaseDiv = styled('div')({ [`.${Button}`]: { @@ -57,11 +58,7 @@ export function App({ isRed }: AppProps) { const [isHorizontal, setIsHorizontal] = React.useState(true); return ( -
+
@@ -171,6 +168,7 @@ export function App({ isRed }: AppProps) { Hello2
+ Hello ); } diff --git a/apps/zero-runtime-vite-app/src/Box.jsx b/apps/zero-runtime-vite-app/src/Box.jsx new file mode 100644 index 00000000000000..a6c66c96cf6bbb --- /dev/null +++ b/apps/zero-runtime-vite-app/src/Box.jsx @@ -0,0 +1,68 @@ +import { generateAtomics } from '@mui/zero-runtime'; + +const atomics = generateAtomics(({ theme }) => ({ + conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => { + acc[breakpoint] = `@media (min-width: ${theme.breakpoints.values[breakpoint]}${ + theme.breakpoints.unit ?? 'px' + })`; + return acc; + }, {}), + defaultCondition: 'xs', + properties: { + display: [ + 'block', + 'inline-flex', + 'contents', + 'none', + 'flex', + 'inline-flex', + 'grid', + 'inline-grid', + ], + flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'], + justifyContent: [ + 'center', + 'end', + 'flex-end', + 'flex-start', + 'left', + 'right', + 'space-around', + 'space-between', + 'space-evenly', + 'start', + ], + alignItems: [ + 'baseline', + 'center', + 'end', + 'flex-end', + 'flex-start', + 'self-end', + 'self-start', + 'start', + 'stretch', + ], + position: ['relative', 'absolute', 'static', 'sticky', 'fixed'], + }, + shorthands: { + direction: ['flexDirection'], + }, +})); + +// eslint-disable-next-line react/prop-types +export function Box({ children, as = 'div', className = '', style = undefined, ...rest }) { + const Component = as; + const atomicsResult = atomics(rest); + const componentClass = `${atomicsResult.className} ${className ?? ''}`.trim(); + const finalStyles = { + ...(atomicsResult.style ?? {}), + ...style, + }; + return ( + // eslint-disable-next-line react/jsx-filename-extension + + {children} + + ); +} diff --git a/apps/zero-runtime-vite-app/vite.config.ts b/apps/zero-runtime-vite-app/vite.config.ts index 59341474b75dc4..8d26341e9f4769 100644 --- a/apps/zero-runtime-vite-app/vite.config.ts +++ b/apps/zero-runtime-vite-app/vite.config.ts @@ -22,4 +22,12 @@ export default defineConfig({ reactPlugin(), splitVendorChunkPlugin(), ], + resolve: { + alias: [ + { + find: /^@mui\/system\/(.*)/, + replacement: '@mui/system/esm/$1', + }, + ], + }, }); diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 9f6e0ab2b61445..1d05e927dde6d7 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -48,6 +48,7 @@ "@mui/system": "workspace:^", "@mui/types": "workspace:^", "@mui/utils": "workspace:^", + "@mui/zero-runtime": "workspace:^", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "csstype": "^3.1.2", diff --git a/packages/zero-next-plugin/src/index.ts b/packages/zero-next-plugin/src/index.ts index bad1f50dda198d..3e4f9c3ac462bd 100644 --- a/packages/zero-next-plugin/src/index.ts +++ b/packages/zero-next-plugin/src/index.ts @@ -3,7 +3,7 @@ import type { NextConfig } from 'next'; import { findPagesDir } from 'next/dist/lib/find-pages-dir'; import { webpack as zeroWebpackPlugin, - PluginOptions as BaseZeroPluginConfig, + type PluginOptions as BaseZeroPluginConfig, } from '@mui/zero-unplugin'; export type ZeroPluginConfig = BaseZeroPluginConfig & { diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json index 64848705893e64..8471cb1ea2af43 100644 --- a/packages/zero-runtime/package.json +++ b/packages/zero-runtime/package.json @@ -12,7 +12,7 @@ "typecheck": "tsc --noEmit -p ." }, "dependencies": { - "csstype": "^3.1.2", + "csstype": "^3.1.3", "cssesc": "^3.0.0", "clsx": "^2.1.0", "@babel/core": "^7.23.9", @@ -22,12 +22,12 @@ "@babel/types": "^7.23.9", "@emotion/css": "^11.11.2", "@emotion/serialize": "^1.1.3", - "@emotion/styled": "^11.11.0", - "@linaria/tags": "^5.0.2", - "@linaria/utils": "^5.0.2", + "@wyw-in-js/processor-utils": "^0.3.0", + "@wyw-in-js/shared": "^0.3.0", + "@wyw-in-js/transform": "^0.3.0", "@mui/system": "workspace:^", "lodash": "^4.17.21", - "stylis": "^4.2.0" + "stylis": "^4.3.1" }, "devDependencies": { "@types/babel__core": "^7.20.5", @@ -37,7 +37,7 @@ "@types/lodash": "^4.14.202", "@types/node": "^18.19.14", "@types/react": "^18.2.55", - "@types/stylis": "^4.2.0", + "@types/stylis": "^4.2.5", "react": "^18.2.0" }, "peerDependencies": { @@ -47,7 +47,7 @@ "publishConfig": { "access": "public" }, - "linaria": { + "wyw-in-js": { "tags": { "styled": "./exports/styled.js", "default": "./exports/styled.js", diff --git a/packages/zero-runtime/src/processors/base-processor.ts b/packages/zero-runtime/src/processors/base-processor.ts index bfbfe5df641ab5..7e17e4459da12c 100644 --- a/packages/zero-runtime/src/processors/base-processor.ts +++ b/packages/zero-runtime/src/processors/base-processor.ts @@ -1,11 +1,11 @@ +import { slugify, IVariableContext } from '@wyw-in-js/shared'; import { - BaseProcessor as LinariaBaseProcessor, - toValidCSSIdentifier, buildSlug, -} from '@linaria/tags'; -import { slugify, type IVariableContext } from '@linaria/utils'; + BaseProcessor as WywBaseProcessor, + toValidCSSIdentifier, +} from '@wyw-in-js/processor-utils'; -export default abstract class BaseProcessor extends LinariaBaseProcessor { +export default abstract class BaseProcessor extends WywBaseProcessor { variableIdx = 0; // Implementation taken from Linaria - /~https://github.com/callstack/linaria/blob/master/packages/react/src/processors/styled.ts#L284 diff --git a/packages/zero-runtime/src/processors/createUseThemeProps.ts b/packages/zero-runtime/src/processors/createUseThemeProps.ts index dbdd445c57be5e..bdaafb5adc86d6 100644 --- a/packages/zero-runtime/src/processors/createUseThemeProps.ts +++ b/packages/zero-runtime/src/processors/createUseThemeProps.ts @@ -1,5 +1,5 @@ -import { validateParams, IOptions as IBaseOptions } from '@linaria/tags'; -import type { Expression, Params, TailProcessorParams } from '@linaria/tags'; +import { validateParams, IOptions as IBaseOptions } from '@wyw-in-js/processor-utils'; +import type { Expression, Params, TailProcessorParams } from '@wyw-in-js/processor-utils'; import BaseProcessor from './base-processor'; import { valueToLiteral } from '../utils/valueToLiteral'; @@ -13,12 +13,13 @@ export class CreateUseThemePropsProcessor extends BaseProcessor { componentName: string; constructor(params: Params, ...args: TailProcessorParams) { - super(params, ...args); + // this is already transformed if there is an extra argument if (params.length > 2) { - // no need to do any processing if it is an already transformed call or just a reference. throw BaseProcessor.SKIP; } - validateParams(params, ['callee', 'call'], `Invalid use of ${this.tagSource.imported} tag.`); + validateParams(params, ['callee', 'call'], 'Invalid use of createUseThemeProps tag.'); + + super([params[0]], ...args); const [, callParam] = params; const [, callArg] = callParam; if (!callArg || callArg.ex.type !== 'StringLiteral') { diff --git a/packages/zero-runtime/src/processors/css.ts b/packages/zero-runtime/src/processors/css.ts index 6b8ea4fd1e4480..7cc910f56f82ca 100644 --- a/packages/zero-runtime/src/processors/css.ts +++ b/packages/zero-runtime/src/processors/css.ts @@ -1,14 +1,14 @@ import type { Expression } from '@babel/types'; -import { validateParams } from '@linaria/tags'; +import { validateParams } from '@wyw-in-js/processor-utils'; import type { CallParam, TemplateParam, Params, TailProcessorParams, ValueCache, -} from '@linaria/tags'; -import type { Replacements, Rules } from '@linaria/utils'; -import { ValueType } from '@linaria/utils'; +} from '@wyw-in-js/processor-utils'; +import type { Replacements, Rules } from '@wyw-in-js/shared'; +import { ValueType } from '@wyw-in-js/shared'; import type { CSSInterpolation } from '@emotion/css'; import deepMerge from 'lodash/merge'; import BaseProcessor from './base-processor'; @@ -34,10 +34,10 @@ export class CssProcessor extends BaseProcessor { callParam: CallParam | TemplateParam; constructor(params: Params, ...args: TailProcessorParams) { - super(params, ...args); if (params.length < 2) { throw BaseProcessor.SKIP; } + super([params[0]], ...args); validateParams( params, ['callee', ['call', 'template']], diff --git a/packages/zero-runtime/src/processors/generateAtomics.ts b/packages/zero-runtime/src/processors/generateAtomics.ts index bd8ed5c9e60ac9..1780a386f2f02e 100644 --- a/packages/zero-runtime/src/processors/generateAtomics.ts +++ b/packages/zero-runtime/src/processors/generateAtomics.ts @@ -4,9 +4,8 @@ import { type TailProcessorParams, type ValueCache, validateParams, -} from '@linaria/tags'; -import { ValueType } from '@linaria/utils'; -import type { ExpressionValue, Replacements, Rules } from '@linaria/utils'; +} from '@wyw-in-js/processor-utils'; +import { ValueType, type ExpressionValue, type Replacements, type Rules } from '@wyw-in-js/shared'; import { CSSInterpolation } from '@emotion/css'; import BaseProcessor from './base-processor'; @@ -25,8 +24,7 @@ export class GenerateAtomicsProcessor extends BaseProcessor { runtimeConfig?: RuntimeConfig; constructor(params: Params, ...args: TailProcessorParams) { - super(params, ...args); - + super([params[0]], ...args); validateParams(params, ['callee', ['call']], `Invalid use of ${this.tagSource.imported} tag.`); const [, callParam] = params; const [, callParamArgument] = callParam; diff --git a/packages/zero-runtime/src/processors/keyframes.ts b/packages/zero-runtime/src/processors/keyframes.ts index 217f399b302b84..9d0abb355056da 100644 --- a/packages/zero-runtime/src/processors/keyframes.ts +++ b/packages/zero-runtime/src/processors/keyframes.ts @@ -1,15 +1,14 @@ import type { Expression } from '@babel/types'; -import { validateParams } from '@linaria/tags'; import type { CallParam, TemplateParam, Params, TailProcessorParams, ValueCache, -} from '@linaria/tags'; -import type { Replacements, Rules } from '@linaria/utils'; -import { ValueType } from '@linaria/utils'; +} from '@wyw-in-js/processor-utils'; +import { type Replacements, type Rules, ValueType } from '@wyw-in-js/shared'; import type { CSSInterpolation } from '@emotion/css'; +import { validateParams } from '@wyw-in-js/processor-utils'; import BaseProcessor from './base-processor'; import type { IOptions } from './styled'; import { cache, keyframes } from '../utils/emotion'; @@ -22,7 +21,7 @@ export class KeyframesProcessor extends BaseProcessor { callParam: CallParam | TemplateParam; constructor(params: Params, ...args: TailProcessorParams) { - super(params, ...args); + super([params[0]], ...args); if (params.length < 2) { throw BaseProcessor.SKIP; } diff --git a/packages/zero-runtime/src/processors/styled.ts b/packages/zero-runtime/src/processors/styled.ts index 7fcba174ab8275..b2fbc941a8fefa 100644 --- a/packages/zero-runtime/src/processors/styled.ts +++ b/packages/zero-runtime/src/processors/styled.ts @@ -1,17 +1,21 @@ -import { validateParams } from '@linaria/tags'; -import type { - Expression, +import { parseExpression } from '@babel/parser'; +import type { ObjectExpression, SourceLocation, Identifier, Expression } from '@babel/types'; +import { Params, TailProcessorParams, ValueCache, + validateParams, IOptions as IBaseOptions, - WrappedNode, -} from '@linaria/tags'; -import { ValueType } from '@linaria/utils'; -import type { Rules, Replacements, ExpressionValue, LazyValue, ConstValue } from '@linaria/utils'; -import { parseExpression } from '@babel/parser'; -import type { ObjectExpression, SourceLocation } from '@babel/types'; -import { CSSObject } from '@emotion/css'; +} from '@wyw-in-js/processor-utils'; +import { + ValueType, + type ConstValue, + type ExpressionValue, + type LazyValue, + type Replacements, + type Rules, +} from '@wyw-in-js/shared'; +import { CSSObject } from '@emotion/serialize'; import type { PluginCustomOptions } from '../utils/cssFnValueToVariable'; import { cssFnValueToVariable } from '../utils/cssFnValueToVariable'; import { processCssObject } from '../utils/processCssObject'; @@ -31,6 +35,14 @@ type VariantDataTransformed = { className: string; }; +export type WrappedNode = + | string + | { + node: Identifier; + nonLinaria?: true; + source: string; + }; + export type IOptions = IBaseOptions & PluginCustomOptions; type ComponentNames = keyof Exclude; @@ -113,11 +125,11 @@ export class StyledProcessor extends BaseProcessor { originalLocation: SourceLocation | null = null; constructor(params: Params, ...args: TailProcessorParams) { - super(params, ...args); if (params.length <= 2) { // no need to do any processing if it is an already transformed call or just a reference. throw BaseProcessor.SKIP; } + super([params[0]], ...args); validateParams( params, ['callee', ['call', 'member'], ['call', 'template']], diff --git a/packages/zero-runtime/src/processors/sx.ts b/packages/zero-runtime/src/processors/sx.ts index 9873c076a4dd88..37bdc88ac59ec0 100644 --- a/packages/zero-runtime/src/processors/sx.ts +++ b/packages/zero-runtime/src/processors/sx.ts @@ -1,7 +1,11 @@ -import type { Expression, Params, TailProcessorParams, ValueCache } from '@linaria/tags'; -import { validateParams } from '@linaria/tags'; -import { ValueType } from '@linaria/utils'; -import type { ExpressionValue, Replacements, Rules } from '@linaria/utils'; +import type { Expression } from '@babel/types'; +import { + validateParams, + type Params, + type TailProcessorParams, + type ValueCache, +} from '@wyw-in-js/processor-utils'; +import { ValueType, type ExpressionValue, type Replacements, type Rules } from '@wyw-in-js/shared'; import type { IOptions } from './styled'; import { processCssObject } from '../utils/processCssObject'; import { cssFnValueToVariable } from '../utils/cssFnValueToVariable'; @@ -17,7 +21,7 @@ export class SxProcessor extends BaseProcessor { elementClassName = ''; constructor(params: Params, ...args: TailProcessorParams) { - super(params, ...args); + super([params[0]], ...args); validateParams(params, ['callee', 'call'], 'Invalid usage of sx call.'); const [, [, ...sxCallArguments]] = params; sxCallArguments.forEach((arg) => { diff --git a/packages/zero-runtime/src/utils/cssFnValueToVariable.ts b/packages/zero-runtime/src/utils/cssFnValueToVariable.ts index cee4a9d1263d55..2e40a511bc6d78 100644 --- a/packages/zero-runtime/src/utils/cssFnValueToVariable.ts +++ b/packages/zero-runtime/src/utils/cssFnValueToVariable.ts @@ -1,8 +1,8 @@ -import type { ExpressionValue, FunctionValue } from '@linaria/utils'; +import type { ExpressionValue, FunctionValue } from '@wyw-in-js/shared'; import { transformSync, type Node } from '@babel/core'; import { parseExpression } from '@babel/parser'; -import type { Expression } from '@linaria/tags'; import * as t from '@babel/types'; +import type { Expression } from '@babel/types'; import { isUnitLess } from './isUnitLess'; import { cssFunctionTransformerPlugin } from './cssFunctionTransformerPlugin'; diff --git a/packages/zero-runtime/src/utils/sxObjectExtractor.ts b/packages/zero-runtime/src/utils/sxObjectExtractor.ts index cf2729cfb7dd38..c5dc53b8b078c8 100644 --- a/packages/zero-runtime/src/utils/sxObjectExtractor.ts +++ b/packages/zero-runtime/src/utils/sxObjectExtractor.ts @@ -7,7 +7,7 @@ import type { ObjectExpression, PrivateName, } from '@babel/types'; -import { findIdentifiers } from '@linaria/utils'; +import { findIdentifiers } from '@wyw-in-js/transform'; import { isStaticObjectOrArrayExpression } from './checkStaticObjectOrArray'; function validateObjectKey( diff --git a/packages/zero-runtime/src/utils/valueToLiteral.ts b/packages/zero-runtime/src/utils/valueToLiteral.ts index 5f4a23ff46eafa..52a30e97298d98 100644 --- a/packages/zero-runtime/src/utils/valueToLiteral.ts +++ b/packages/zero-runtime/src/utils/valueToLiteral.ts @@ -1,7 +1,7 @@ import { types as t } from '@babel/core'; -import type { ExpressionValue, Serializable } from '@linaria/utils'; -import { isBoxedPrimitive } from '@linaria/utils'; import { parseExpression } from '@babel/parser'; +import { ExpressionValue, isBoxedPrimitive } from '@wyw-in-js/shared'; +import { Serializable } from '@wyw-in-js/transform'; export function isSerializable(o: unknown): o is Serializable { if (Array.isArray(o)) { diff --git a/packages/zero-unplugin/package.json b/packages/zero-unplugin/package.json index fd9eff0b16d4e8..b78593970f15f7 100644 --- a/packages/zero-unplugin/package.json +++ b/packages/zero-unplugin/package.json @@ -13,9 +13,8 @@ }, "dependencies": { "@babel/core": "^7.23.9", - "@linaria/babel-preset": "^5.0.4", - "@linaria/logger": "^5.0.0", - "@linaria/utils": "^5.0.2", + "@wyw-in-js/shared": "^0.3.0", + "@wyw-in-js/transform": "^0.3.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "unplugin": "^1.6.0" }, diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index 54a926ed64a8a0..3958342f8c6f61 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -1,13 +1,19 @@ +import { transformAsync } from '@babel/core'; +import { + type Preprocessor, + type PluginOptions as LinariaPluginOptions, + type IFileReporterOptions, + TransformCacheCollection, + transform, + createFileReporter, +} from '@wyw-in-js/transform'; +import { asyncResolveFallback, slugify } from '@wyw-in-js/shared'; import { UnpluginFactoryOutput, WebpackPluginInstance, createUnplugin, UnpluginOptions, } from 'unplugin'; -import { transformAsync } from '@babel/core'; -import type { PluginOptions as LinariaPluginOptions, Preprocessor } from '@linaria/babel-preset'; -import { TransformCacheCollection, transform } from '@linaria/babel-preset'; -import { createPerfMeter, asyncResolveFallback, slugify } from '@linaria/utils'; import { preprocessor as basePreprocessor, generateTokenCss, @@ -42,7 +48,7 @@ export type PluginOptions = { theme: Theme; transformLibraries?: string[]; preprocessor?: Preprocessor; - debug?: boolean; + debug?: IFileReporterOptions | false; sourceMap?: boolean; meta?: Meta; asyncResolve?: (what: string) => string | null; @@ -105,7 +111,7 @@ export const plugin = createUnplugin((options) => { ...rest } = options; const cache = new TransformCacheCollection(); - const { emitter, onDone } = createPerfMeter(debug); + const { emitter, onDone } = createFileReporter(debug ?? false); const cssLookup = meta?.type === 'next' ? globalCssLookup : new Map(); const cssFileLookup = meta?.type === 'next' ? globalCssFileLookup : new Map(); const isNext = meta?.type === 'next'; diff --git a/packages/zero-vite-plugin/package.json b/packages/zero-vite-plugin/package.json index a66b74af50c0c0..beb4dc9b99c5ce 100644 --- a/packages/zero-vite-plugin/package.json +++ b/packages/zero-vite-plugin/package.json @@ -14,15 +14,13 @@ "dependencies": { "@babel/core": "^7.23.9", "@babel/preset-typescript": "^7.23.3", - "@linaria/babel-preset": "^5.0.4", - "@linaria/logger": "^5.0.0", - "@linaria/utils": "^5.0.2", "@mui/zero-runtime": "workspace:^", + "@wyw-in-js/shared": "^0.3.0", + "@wyw-in-js/transform": "^0.3.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24" }, "devDependencies": { "@types/babel__core": "^7.20.5", - "@types/debug": "^4.1.12", "vite": "^5.0.12" }, "peerDependencies": { diff --git a/packages/zero-vite-plugin/src/index.ts b/packages/zero-vite-plugin/src/index.ts index 03abb3f5c6f549..aef0933c855c65 100644 --- a/packages/zero-vite-plugin/src/index.ts +++ b/packages/zero-vite-plugin/src/index.ts @@ -7,17 +7,17 @@ import { import { transformAsync } from '@babel/core'; import baseZeroVitePlugin, { type VitePluginOptions } from './zero-vite-plugin'; -type BaseTheme = { +interface BaseTheme { cssVarPrefix: string; colorSchemes: Record; generateCssVars: (colorScheme?: string) => { css: Record }; -}; +} export interface ZeroVitePluginOptions extends VitePluginOptions { /** * The theme object that you want to be passed to the `styled` function */ - theme: BaseTheme; + theme: unknown; /** * Prefix string to use in the generated css variables. */ @@ -73,10 +73,10 @@ export function zeroVitePlugin(options: ZeroVitePluginOptions) { }, load(id) { if (id === VIRTUAL_CSS_FILE) { - return generateTokenCss(theme); + return generateTokenCss(theme as BaseTheme); } if (id === VIRTUAL_THEME_FILE) { - return `export default ${JSON.stringify(generateThemeTokens(theme))};`; + return `export default ${JSON.stringify(generateThemeTokens(theme as BaseTheme))};`; } return null; }, @@ -112,7 +112,7 @@ export function zeroVitePlugin(options: ZeroVitePluginOptions) { } const zeroPlugin = baseZeroVitePlugin({ - cssVariablesPrefix: theme.cssVarPrefix, + cssVariablesPrefix: (theme as BaseTheme).cssVarPrefix, themeArgs: { theme, }, diff --git a/packages/zero-vite-plugin/src/zero-vite-plugin.ts b/packages/zero-vite-plugin/src/zero-vite-plugin.ts index bafee077d0c010..0db85c53f7d4f0 100644 --- a/packages/zero-vite-plugin/src/zero-vite-plugin.ts +++ b/packages/zero-vite-plugin/src/zero-vite-plugin.ts @@ -10,15 +10,20 @@ import path from 'node:path'; import type { ModuleNode, Plugin, ResolvedConfig, ViteDevServer, FilterPattern } from 'vite'; import { optimizeDeps, createFilter } from 'vite'; -import { transform, slugify, TransformCacheCollection } from '@linaria/babel-preset'; -import type { PluginOptions, Preprocessor } from '@linaria/babel-preset'; -import { linariaLogger } from '@linaria/logger'; -import type { IPerfMeterOptions } from '@linaria/utils'; -import { createPerfMeter, getFileIdx, syncResolve } from '@linaria/utils'; +import { slugify, logger as wywLogger, syncResolve } from '@wyw-in-js/shared'; +import { + TransformCacheCollection, + transform, + Preprocessor, + createFileReporter, + getFileIdx, + type PluginOptions, + type IFileReporterOptions, +} from '@wyw-in-js/transform'; import { type PluginCustomOptions } from '@mui/zero-runtime/utils'; export type VitePluginOptions = { - debug?: IPerfMeterOptions | false | null | undefined; + debug?: IFileReporterOptions | false | null | undefined; exclude?: FilterPattern; include?: FilterPattern; preprocessor?: Preprocessor; @@ -52,7 +57,7 @@ export default function zeroVitePlugin({ let config: ResolvedConfig; let devServer: ViteDevServer; - const { emitter, onDone } = createPerfMeter(debug ?? false); + const { emitter, onDone } = createFileReporter(debug ?? false); // const targets: { dependencies: string[]; id: string }[] = []; @@ -130,7 +135,7 @@ export default function zeroVitePlugin({ return null; } - const log = linariaLogger.extend('vite'); + const log = wywLogger.extend('vite'); log('Vite transform', getFileIdx(id)); const asyncResolve = async (what: string, importer: string, stack: string[]) => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 35076db3726532..921528e634b3e8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -741,7 +741,7 @@ importers: version: 13.4.19(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) notistack: specifier: 3.0.1 - version: 3.0.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0) + version: 3.0.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0) nprogress: specifier: ^0.2.0 version: 0.2.0 @@ -877,7 +877,7 @@ importers: version: 1.8.8 '@types/stylis': specifier: ^4.2.0 - version: 4.2.0 + version: 4.2.5 chai: specifier: ^4.4.1 version: 4.4.1 @@ -1546,7 +1546,7 @@ importers: version: 2.1.0 csstype: specifier: ^3.1.2 - version: 3.1.2 + version: 3.1.3 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -1803,7 +1803,7 @@ importers: version: 11.11.0 csstype: specifier: ^3.1.2 - version: 3.1.2 + version: 3.1.3 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -1841,7 +1841,7 @@ importers: version: 7.23.9 csstype: specifier: ^3.1.2 - version: 3.1.2 + version: 3.1.3 hoist-non-react-statics: specifier: ^3.3.2 version: 3.3.2 @@ -1897,7 +1897,7 @@ importers: version: 2.1.0 csstype: specifier: ^3.1.2 - version: 3.1.2 + version: 3.1.3 hoist-non-react-statics: specifier: ^3.3.2 version: 3.3.2 @@ -1983,7 +1983,7 @@ importers: version: 2.1.0 csstype: specifier: ^3.1.2 - version: 3.1.2 + version: 3.1.3 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -2346,18 +2346,18 @@ importers: '@emotion/serialize': specifier: ^1.1.3 version: 1.1.3 - '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0) - '@linaria/tags': - specifier: ^5.0.2 - version: 5.0.2 - '@linaria/utils': - specifier: ^5.0.2 - version: 5.0.2 '@mui/system': specifier: workspace:^ version: link:../mui-system/build + '@wyw-in-js/processor-utils': + specifier: ^0.3.0 + version: 0.3.0 + '@wyw-in-js/shared': + specifier: ^0.3.0 + version: 0.3.0 + '@wyw-in-js/transform': + specifier: ^0.3.0 + version: 0.3.0 clsx: specifier: ^2.1.0 version: 2.1.0 @@ -2365,14 +2365,14 @@ importers: specifier: ^3.0.0 version: 3.0.0 csstype: - specifier: ^3.1.2 - version: 3.1.2 + specifier: ^3.1.3 + version: 3.1.3 lodash: specifier: ^4.17.21 version: 4.17.21 stylis: - specifier: ^4.2.0 - version: 4.2.0 + specifier: ^4.3.1 + version: 4.3.1 devDependencies: '@types/babel__core': specifier: ^7.20.5 @@ -2396,8 +2396,8 @@ importers: specifier: ^18.2.55 version: 18.2.55 '@types/stylis': - specifier: ^4.2.0 - version: 4.2.0 + specifier: ^4.2.5 + version: 4.2.5 react: specifier: ^18.2.0 version: 18.2.0 @@ -2407,15 +2407,12 @@ importers: '@babel/core': specifier: ^7.23.9 version: 7.23.9 - '@linaria/babel-preset': - specifier: ^5.0.4 - version: 5.0.4 - '@linaria/logger': - specifier: ^5.0.0 - version: 5.0.0 - '@linaria/utils': - specifier: ^5.0.2 - version: 5.0.2 + '@wyw-in-js/shared': + specifier: ^0.3.0 + version: 0.3.0 + '@wyw-in-js/transform': + specifier: ^0.3.0 + version: 0.3.0 babel-plugin-transform-react-remove-prop-types: specifier: ^0.4.24 version: 0.4.24 @@ -2438,18 +2435,15 @@ importers: '@babel/preset-typescript': specifier: ^7.23.3 version: 7.23.3(@babel/core@7.23.9) - '@linaria/babel-preset': - specifier: ^5.0.4 - version: 5.0.4 - '@linaria/logger': - specifier: ^5.0.0 - version: 5.0.0 - '@linaria/utils': - specifier: ^5.0.2 - version: 5.0.2 '@mui/zero-runtime': specifier: workspace:^ version: link:../zero-runtime + '@wyw-in-js/shared': + specifier: ^0.3.0 + version: 0.3.0 + '@wyw-in-js/transform': + specifier: ^0.3.0 + version: 0.3.0 babel-plugin-transform-react-remove-prop-types: specifier: ^0.4.24 version: 0.4.24 @@ -2457,9 +2451,6 @@ importers: '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 - '@types/debug': - specifier: ^4.1.12 - version: 4.1.12 vite: specifier: ^5.0.12 version: 5.0.12(@types/node@18.19.14) @@ -4236,7 +4227,7 @@ packages: resolution: {integrity: sha512-To/Z92oHpIE+4nk11uVMWqo2GGRS86coeMmjxtpnErmWRdLcp1WVCVRAvn+ZwpLiNR+reWFr2FFqJRsREuZdAg==} dependencies: '@chakra-ui/shared-utils': 2.0.5 - csstype: 3.1.2 + csstype: 3.1.3 lodash.mergewith: 4.6.2 dev: false @@ -4471,7 +4462,7 @@ packages: '@emotion/memoize': 0.8.1 '@emotion/unitless': 0.8.1 '@emotion/utils': 1.2.1 - csstype: 3.1.2 + csstype: 3.1.3 /@emotion/server@11.11.0: resolution: {integrity: sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==} @@ -5115,98 +5106,6 @@ packages: - supports-color dev: true - /@linaria/babel-preset@5.0.4: - resolution: {integrity: sha512-OMhlD6gc/+6DFLkadoavlxCtTIElo/UdDMeQH6I/CAL3hgfmHyIXJPrGObTa7jvQKddUaKvFIHGAVB7pz6J8Qg==} - engines: {node: '>=16.0.0'} - dependencies: - '@babel/core': 7.23.9 - '@babel/generator': 7.23.6 - '@babel/helper-module-imports': 7.22.15 - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 - '@linaria/core': 5.0.2 - '@linaria/logger': 5.0.0 - '@linaria/shaker': 5.0.3 - '@linaria/tags': 5.0.2 - '@linaria/utils': 5.0.2 - cosmiconfig: 8.2.0 - happy-dom: 10.8.0 - source-map: 0.7.4 - stylis: 3.5.4 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - dev: false - - /@linaria/core@5.0.2: - resolution: {integrity: sha512-l5jQq7w9kDvonfr/0MBF47Dagx9Y9f/o5Q8j3zv7GepwG/yHQdbjKr0tq07rx2fSDDX7Nbqlxk6k9Ymir/NGpg==} - engines: {node: '>=16.0.0'} - dependencies: - '@linaria/logger': 5.0.0 - '@linaria/tags': 5.0.2 - '@linaria/utils': 5.0.2 - transitivePeerDependencies: - - supports-color - dev: false - - /@linaria/logger@5.0.0: - resolution: {integrity: sha512-PZd5H0I4F84U0kXSE+vD75ltIGDxEA6gMDNWS2aDZFitmdlQM5rIXqvKFrp5NsHa7a3AH+I2Hxm0dg60WZF7vg==} - engines: {node: '>=16.0.0'} - dependencies: - debug: 4.3.4(supports-color@8.1.1) - picocolors: 1.0.0 - transitivePeerDependencies: - - supports-color - dev: false - - /@linaria/shaker@5.0.3: - resolution: {integrity: sha512-2a3pzYs09Iz88e+VG4OAQVRSIjxkbj7S4ju81ZTJVbZIWSR1kGsbX5OtJkRrh/AbKRrrUMW0DBS4PPgd0fks4A==} - engines: {node: '>=16.0.0'} - dependencies: - '@babel/core': 7.23.9 - '@babel/generator': 7.23.6 - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-runtime': 7.23.9(@babel/core@7.23.9) - '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.23.9) - '@babel/preset-env': 7.23.9(@babel/core@7.23.9) - '@linaria/logger': 5.0.0 - '@linaria/utils': 5.0.2 - babel-plugin-transform-react-remove-prop-types: 0.4.24 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - dev: false - - /@linaria/tags@5.0.2: - resolution: {integrity: sha512-opcORl2sA6WkBjTNLHTgpet97dNKnwPRX/QGGZMykBsvGH3AsnEg/bT31cKBMBhL+YBGQsCdBmolxvCkWPOXQw==} - engines: {node: '>=16.0.0'} - dependencies: - '@babel/generator': 7.23.6 - '@linaria/logger': 5.0.0 - '@linaria/utils': 5.0.2 - transitivePeerDependencies: - - supports-color - dev: false - - /@linaria/utils@5.0.2: - resolution: {integrity: sha512-ZL8Yz4IIr9A8a5+o5LRnEpgdzIkyj4yKJrhw5Zv8wwvL+d/MHUK0q+l/KvxBmuYdcF+YYVHZ9eeBHTQBSL7r/w==} - engines: {node: '>=16.0.0'} - dependencies: - '@babel/core': 7.23.9 - '@babel/generator': 7.23.6 - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 - '@linaria/logger': 5.0.0 - babel-merge: 3.0.0(@babel/core@7.23.9) - find-up: 5.0.0 - minimatch: 9.0.3 - transitivePeerDependencies: - - supports-color - dev: false - /@material-ui/types@4.1.1: resolution: {integrity: sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==} dependencies: @@ -5352,7 +5251,7 @@ packages: '@types/react': 18.2.55 '@types/react-transition-group': 4.4.10 clsx: 2.1.0 - csstype: 3.1.2 + csstype: 3.1.3 prop-types: 15.8.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -5394,7 +5293,7 @@ packages: '@emotion/cache': 11.11.0 '@emotion/react': 11.11.3(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0) - csstype: 3.1.2 + csstype: 3.1.3 prop-types: 15.8.1 react: 18.2.0 dev: false @@ -5424,7 +5323,7 @@ packages: '@mui/utils': 5.15.6(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 clsx: 2.1.0 - csstype: 3.1.2 + csstype: 3.1.3 prop-types: 15.8.1 react: 18.2.0 dev: false @@ -7526,7 +7425,7 @@ packages: '@emotion/react': ^11.11.1 dependencies: '@emotion/react': 11.11.3(@types/react@18.2.55)(react@18.2.0) - csstype: 3.1.2 + csstype: 3.1.3 dev: false /@theme-ui/global@0.16.1(@emotion/react@11.11.3)(react@18.2.0): @@ -7699,12 +7598,6 @@ packages: resolution: {integrity: sha512-Qii6nTRktvtI380EloxH/V7MwgrYxkPgBI+NklUjQuhzgAd1AqT3QDJd+eD+0doRADgfwvtagLRo7JFa7aMHXg==} dev: true - /@types/debug@4.1.12: - resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} - dependencies: - '@types/ms': 0.7.34 - dev: true - /@types/doctrine@0.0.9: resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==} dev: true @@ -7876,10 +7769,6 @@ packages: resolution: {integrity: sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==} dev: true - /@types/ms@0.7.34: - resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==} - dev: true - /@types/node@18.19.14: resolution: {integrity: sha512-EnQ4Us2rmOS64nHDWr0XqAD8DsO6f3XR6lf9UIIrZQpUzPVdN/oPuEzfDWNHSyXLvoGgjuEm/sPwFGSSs35Wtg==} dependencies: @@ -7974,7 +7863,7 @@ packages: dependencies: '@types/prop-types': 15.7.11 '@types/scheduler': 0.16.2 - csstype: 3.1.2 + csstype: 3.1.3 /@types/resolve@0.0.8: resolution: {integrity: sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==} @@ -8031,12 +7920,16 @@ packages: /@types/styled-system@5.1.15: resolution: {integrity: sha512-1uls4wipZn8FtYFZ7upRVFDoEeOXTQTs2zuyOZPn02T6rjIxtvj2P2lG5qsxXHhKuKsu3thveCZrtaeLE/ibLg==} dependencies: - csstype: 3.1.2 + csstype: 3.1.3 dev: false /@types/stylis@4.2.0: resolution: {integrity: sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==} + /@types/stylis@4.2.5: + resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} + dev: true + /@types/tsscmp@1.0.0: resolution: {integrity: sha512-rj18XR6c4Ohds86Lq8MI1NMRrXes4eLo4H06e5bJyKucE1rXGsfBBbFGD2oDC+DSufQCpnU3TTW7QAiwLx+7Yw==} dev: false @@ -8357,6 +8250,50 @@ packages: webpack: 5.90.0(esbuild@0.19.11)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.0) + /@wyw-in-js/processor-utils@0.3.0: + resolution: {integrity: sha512-RBrWLN/voN1tW/Jv/H7HcZS+Kr5N40GMo15fRjO5nnl6a2qQpVmGYgVgP9nxG0/c1PzONW6U9VAN/j3NQrQDvQ==} + engines: {node: '>=16.0.0'} + dependencies: + '@babel/generator': 7.23.6 + '@wyw-in-js/shared': 0.3.0 + transitivePeerDependencies: + - supports-color + dev: false + + /@wyw-in-js/shared@0.3.0: + resolution: {integrity: sha512-C0NwF8NeBi5n9M1b3aj+sC9T+IFAdIjVAMDB/cFwoVlVXKRcAr4TROZOyt4/xGyJJxkkO90NQERrCYKd2UBW5w==} + engines: {node: '>=16.0.0'} + dependencies: + debug: 4.3.4(supports-color@8.1.1) + find-up: 5.0.0 + minimatch: 9.0.3 + transitivePeerDependencies: + - supports-color + dev: false + + /@wyw-in-js/transform@0.3.0: + resolution: {integrity: sha512-2TXPMPexwEzHUEDgDF6qB1G9H7Vjc0jbo0FCUEzj4r0V+XKa95S82ahFgqJeDTG4ltr4ogcyZDmBd2c/jG/1Rw==} + engines: {node: '>=16.0.0'} + dependencies: + '@babel/core': 7.23.9 + '@babel/generator': 7.23.6 + '@babel/helper-module-imports': 7.22.15 + '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) + '@babel/template': 7.23.9 + '@babel/traverse': 7.23.9 + '@babel/types': 7.23.9 + '@wyw-in-js/processor-utils': 0.3.0 + '@wyw-in-js/shared': 0.3.0 + babel-merge: 3.0.0(@babel/core@7.23.9) + cosmiconfig: 8.2.0 + happy-dom: 12.10.3 + source-map: 0.7.4 + stylis: 4.3.1 + ts-invariant: 0.10.3 + transitivePeerDependencies: + - supports-color + dev: false + /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -10657,6 +10594,9 @@ packages: /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} + /csstype@3.1.3: + resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} + /custom-event@1.0.1: resolution: {integrity: sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==} dev: true @@ -11127,7 +11067,7 @@ packages: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: '@babel/runtime': 7.23.9 - csstype: 3.1.2 + csstype: 3.1.3 dev: false /dom-serialize@2.2.1: @@ -12997,12 +12937,12 @@ packages: - supports-color dev: true - /goober@2.1.13(csstype@3.1.2): + /goober@2.1.13(csstype@3.1.3): resolution: {integrity: sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==} peerDependencies: csstype: ^3.0.10 dependencies: - csstype: 3.1.2 + csstype: 3.1.3 dev: false /google-auth-library@9.5.0: @@ -13106,8 +13046,8 @@ packages: uglify-js: 3.17.0 dev: true - /happy-dom@10.8.0: - resolution: {integrity: sha512-ux5UfhNA9ANGf4keV7FCd9GqeQr3Bz1u9qnoPtTL0NcO1MEOeUXIUwNTB9r84Z7Q8/bsgkwi6K114zjYvnCmag==} + /happy-dom@12.10.3: + resolution: {integrity: sha512-JzUXOh0wdNGY54oKng5hliuBkq/+aT1V3YpTM+lrN/GoLQTANZsMaIvmHiHe612rauHvPJnDZkZ+5GZR++1Abg==} dependencies: css.escape: 1.5.1 entities: 4.5.0 @@ -14732,7 +14672,7 @@ packages: resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==} dependencies: '@babel/runtime': 7.23.9 - csstype: 3.1.2 + csstype: 3.1.3 is-in-browser: 1.1.3 tiny-warning: 1.0.3 dev: false @@ -16606,7 +16546,7 @@ packages: engines: {node: '>=10'} dev: true - /notistack@3.0.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0): + /notistack@3.0.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==} engines: {node: '>=12.0.0', npm: '>=6.0.0'} peerDependencies: @@ -16614,7 +16554,7 @@ packages: react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: clsx: 1.2.1 - goober: 2.1.13(csstype@3.1.2) + goober: 2.1.13(csstype@3.1.3) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) transitivePeerDependencies: @@ -20200,10 +20140,6 @@ packages: cssjanus: 2.1.0 stylis: 4.2.0 - /stylis@3.5.4: - resolution: {integrity: sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==} - dev: false - /stylis@4.2.0: resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}