Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Feb 7, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
548521e
[zero] Migrate to use wyw-in-js instead of linaria
brijeshb42 Jan 25, 2024
fd72ee4
Final fixes
brijeshb42 Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions apps/zero-runtime-vite-app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`]: {
Expand Down Expand Up @@ -57,11 +58,7 @@ export function App({ isRed }: AppProps) {
const [isHorizontal, setIsHorizontal] = React.useState(true);

return (
<div
className={css`
color: red;
`}
>
brijeshb42 marked this conversation as resolved.
Show resolved Hide resolved
<div>
<ShowCaseDiv>
<Button>This button&apos;s text color has been overridden.</Button>
</ShowCaseDiv>
Expand Down Expand Up @@ -171,6 +168,7 @@ export function App({ isRed }: AppProps) {
<span>Hello2</span>
</div>
</div>
<Box as="div">Hello</Box>
brijeshb42 marked this conversation as resolved.
Show resolved Hide resolved
</div>
);
}
68 changes: 68 additions & 0 deletions apps/zero-runtime-vite-app/src/Box.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
8 changes: 8 additions & 0 deletions apps/zero-runtime-vite-app/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,12 @@ export default defineConfig({
reactPlugin(),
splitVendorChunkPlugin(),
],
resolve: {
alias: [
{
find: /^@mui\/system\/(.*)/,
replacement: '@mui/system/esm/$1',
},
],
},
});
1 change: 1 addition & 0 deletions packages/mui-material/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/zero-next-plugin/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Member

@siriwatknp siriwatknp Jan 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with using explicit type, we should mention this in the core meeting to set the consistency.

Copy link
Member

@oliviertassinari oliviertassinari Feb 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we can't do this with the current version of TypeScript supported https://mui.com/material-ui/getting-started/supported-platforms/#typescript, e.g. #38296.

I believe we need to change this import. I don't even know if #40996 would be enough.

Suggested change
type PluginOptions as BaseZeroPluginConfig,
import type { PluginOptions as BaseZeroPluginConfig } from '@mui/zero-unplugin';

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we can write this in our source code but it should not end up in the generated d.ts files. This is exactly what is happening right now. If you look at the output, it's like this -

import { PluginOptions } from '@mui/zero-unplugin';

type ZeroPluginConfig = PluginOptions & {
    asyncResolve?: (what: string) => string | null;
};

So there is no type import here.

} from '@mui/zero-unplugin';

export type ZeroPluginConfig = BaseZeroPluginConfig & {
Expand Down
14 changes: 7 additions & 7 deletions packages/zero-runtime/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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": {
Expand All @@ -47,7 +47,7 @@
"publishConfig": {
"access": "public"
},
"linaria": {
"wyw-in-js": {
"tags": {
"styled": "./exports/styled.js",
"default": "./exports/styled.js",
Expand Down
10 changes: 5 additions & 5 deletions packages/zero-runtime/src/processors/base-processor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
11 changes: 6 additions & 5 deletions packages/zero-runtime/src/processors/createUseThemeProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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') {
Expand Down
10 changes: 5 additions & 5 deletions packages/zero-runtime/src/processors/css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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']],
Expand Down
8 changes: 3 additions & 5 deletions packages/zero-runtime/src/processors/generateAtomics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down
9 changes: 4 additions & 5 deletions packages/zero-runtime/src/processors/keyframes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
}
Expand Down
34 changes: 23 additions & 11 deletions packages/zero-runtime/src/processors/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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<Theme['components'], undefined>;

Expand Down Expand Up @@ -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']],
Expand Down
14 changes: 9 additions & 5 deletions packages/zero-runtime/src/processors/sx.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) => {
Expand Down
4 changes: 2 additions & 2 deletions packages/zero-runtime/src/utils/cssFnValueToVariable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Loading
Loading