[zero] Migrate to use wyw-in-js instead of linaria (#40866)

Author: brijeshb42

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 (
-    <div
-      className={css`
-        color: red;
-      `}
-    >
+    <div>
       <ShowCaseDiv>
         <Button>This button&apos;s text color has been overridden.</Button>
       </ShowCaseDiv>
@@ -171,6 +168,7 @@ export function App({ isRed }: AppProps) {
           <span>Hello2</span>
         </div>
       </div>
+      <Box as="div">Hello</Box>
     </div>
   );
 }

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
+    <Component className={componentClass} style={finalStyles}>
+      {children}
+    </Component>
+  );
+}

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',
+      },
+    ],
+  },
 });

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",

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 & {

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",

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

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') {

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']],

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;