Skip to content

Commit aad3473

Browse files
committed
chore: upgrade to Linaria v4
1 parent 278e651 commit aad3473

File tree

115 files changed

+2066
-2417
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+2066
-2417
lines changed

apps/website/docs/react/ahead-of-time-compilation/with-babel.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
1313
<TabItem value="yarn" label="Yarn">
1414

1515
```shell
16-
yarn add --dev @griffel/babel-preset
16+
yarn add --dev @griffel/babel-preset @griffel/linaria-processor
1717
```
1818

1919
</TabItem>
2020
<TabItem value="npm" label="NPM">
2121

2222
```shell
23-
npm install --save-dev @griffel/babel-preset
23+
npm install --save-dev @griffel/babel-preset @griffel/linaria-processor
2424
```
2525

2626
</TabItem>

apps/website/docs/react/ahead-of-time-compilation/with-webpack.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
1313
<TabItem value="yarn" label="Yarn">
1414

1515
```shell
16-
yarn add --dev @griffel/webpack-loader
16+
yarn add --dev @griffel/linaria-processor @griffel/webpack-loader
1717
```
1818

1919
</TabItem>
2020
<TabItem value="npm" label="NPM">
2121

2222
```shell
23-
npm install --save-dev @griffel/webpack-loader
23+
npm install --save-dev @griffel/linaria-processor @griffel/webpack-loader
2424
```
2525

2626
</TabItem>
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "major",
3+
"comment": "BREAKING: update to Linaria v4",
4+
"packageName": "@griffel/babel-preset",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "major",
3+
"comment": "chore: initial release",
4+
"packageName": "@griffel/linaria-processor",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "chore: add meta to package.json for @griffel/processor",
4+
"packageName": "@griffel/react",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "major",
3+
"comment": "BREAKING: update to Linaria v4",
4+
"packageName": "@griffel/webpack-loader",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

e2e/nextjs/project.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"$schema": "../../node_modules/nx/schemas/project-schema.json",
44
"sourceRoot": "e2e/nextjs/src",
55
"projectType": "library",
6-
"implicitDependencies": ["@griffel/webpack-loader"],
6+
"implicitDependencies": ["@griffel/linaria-processor", "@griffel/webpack-loader"],
77
"targets": {
88
"test": {
99
"executor": "nx:run-commands",

e2e/nextjs/src/test.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ async function performTest() {
2323
packLocalPackage(rootDir, tempDir, '@griffel/style-types'),
2424
packLocalPackage(rootDir, tempDir, '@griffel/core'),
2525
packLocalPackage(rootDir, tempDir, '@griffel/react'),
26+
packLocalPackage(rootDir, tempDir, '@griffel/linaria-processor'),
2627
packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'),
2728
packLocalPackage(rootDir, tempDir, '@griffel/webpack-loader'),
2829
packLocalPackage(rootDir, tempDir, '@griffel/next-extraction-plugin'),

package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"type-check": "nx affected --target=type-check"
2727
},
2828
"devDependencies": {
29+
"@babel/generator": "^7.12.13",
2930
"@babel/preset-react": "^7.14.5",
3031
"@babel/preset-typescript": "7.12.13",
3132
"@codesandbox/sandpack-react": "1.18.4",
@@ -50,6 +51,7 @@
5051
"@storybook/builder-webpack5": "6.5.15",
5152
"@storybook/manager-webpack5": "6.5.15",
5253
"@storybook/react": "6.5.15",
54+
"@swc/core": "^1.3.19",
5355
"@testing-library/jest-dom": "5.16.1",
5456
"@testing-library/react": "13.4.0",
5557
"@tsconfig/docusaurus": "^1.0.4",
@@ -137,20 +139,18 @@
137139
},
138140
"dependencies": {
139141
"@babel/core": "^7.12.13",
140-
"@babel/generator": "^7.12.13",
141142
"@babel/helper-module-imports": "^7.12.13",
142143
"@babel/helper-plugin-utils": "^7.12.13",
143-
"@babel/template": "^7.12.13",
144-
"@babel/traverse": "^7.12.13",
145144
"@emotion/hash": "^0.9.0",
146-
"@linaria/babel-preset": "^3.0.0-beta.23",
147-
"@linaria/shaker": "^3.0.0-beta.22",
148-
"@swc/core": "^1.3.19",
145+
"@linaria/babel-preset": "^4.5.4",
146+
"@linaria/shaker": "^4.5.3",
147+
"@linaria/tags": "^4.5.4",
148+
"@linaria/utils": "^4.5.3",
149+
"@linaria/webpack-loader": "^4.5.4",
149150
"@typescript-eslint/utils": "^5.47.0",
150151
"ajv": "^8.4.0",
151152
"browserslist": "^4.19.1",
152153
"csstype": "^3.1.2",
153-
"enhanced-resolve": "^5.8.2",
154154
"rtl-css-js": "^1.16.1",
155155
"source-map-js": "1.0.2",
156156
"stylis": "^4.2.0",

packages/babel-preset/README.md

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ A Babel preset that performs build time transforms for [`@griffel/react`](../rea
2121
## Install
2222

2323
```bash
24-
yarn add --dev @griffel/babel-preset
24+
yarn add --dev @griffel/babel-preset @griffel/linaria-processor
2525
# or
26-
npm install --save-dev @griffel/babel-preset
26+
npm install --save-dev @griffel/babel-preset @griffel/linaria-processor
2727
```
2828

2929
## When to use it?
@@ -49,22 +49,27 @@ import { makeStyles } from 'custom-package';
4949
import { createStyles } from 'custom-package';
5050
```
5151

52-
By default, preset handles imports from `@griffel/react` & `@fluentui/react-components`, to handle imports from custom packages settings should be tweaked:
52+
By default, preset handles imports from `@griffel/react` & `@fluentui/react-components`, to handle imports from custom packages settings you need to include meta information to a matching `package.json`:
5353

5454
```json
5555
{
56-
"presets": [
57-
[
58-
"@griffel",
59-
{
60-
"modules": [{ "moduleSource": "custom-package", "importName": "makeStyles" }]
61-
}
62-
]
63-
]
56+
"name": "custom-package",
57+
"version": "1.0.0",
58+
"linaria": {
59+
"tags": {
60+
"makeStyles": "@griffel/linaria-processor/make-styles",
61+
"makeResetStyles": "@griffel/linaria-processor/make-reset-styles"
62+
}
63+
}
6464
}
6565
```
6666

67-
> **Note**: "custom-package" should re-export `__styles` function from `@griffel/react`
67+
> **Note**: "custom-package" should re-export following functions from `@griffel/react`:
68+
>
69+
> - `__styles`
70+
> - `__css`
71+
> - `__resetStyles`
72+
> - `__resetCSS`
6873
6974
### Configuring Babel settings
7075

@@ -156,9 +161,9 @@ const useStyles = makeStyles({
156161
roughly to
157162

158163
```js
159-
import { __styles } from '@griffel/react';
164+
import { __styles as _styles } from '@griffel/react';
160165

161-
const useStyles = __styles(/* resolved styles */);
166+
const useStyles = _styles(/* resolved styles */);
162167
```
163168

164169
## Troubleshooting
@@ -168,7 +173,7 @@ However, the concepts are not coupled to the repo setup.
168173

169174
### Module evaluation
170175

171-
The preset uses tools from [linaria](https://github.com/callstack/linaria) to evaluate runtime calls of `makeStyles`.
176+
The preset reuses `@linaria/babel-preset` from [linaria](https://github.com/callstack/linaria) to evaluate runtime calls of `makeStyles` and `makeResetStyles`.
172177
[Linaria's debugging documentation can help here](https://github.com/callstack/linaria/blob/master/CONTRIBUTING.md#debugging-and-deep-dive-into-babel-plugin).
173178

174179
Debugging output can be activated with following environment variables:
@@ -182,9 +187,3 @@ On Windows it's required to set environment variables via [`set`](https://docs.m
182187
```sh
183188
$ cross-env DEBUG=linaria\* LINARIA_LOG=debug yarn build
184189
```
185-
186-
The debug output will include:
187-
188-
- Prepared code
189-
- Evaluated code
190-
- AST that indicates what code has been shaken with `@linaria/shaker`
Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1+
import { __styles as _styles } from '@griffel/react';
12
import _asset2 from './empty.jpg';
23
import _asset from './blank.jpg';
3-
import { __styles } from '@griffel/react';
4-
import blank from './blank.jpg';
5-
import empty from './empty.jpg';
6-
export const useStyles = __styles(
4+
export const useStyles = /*#__PURE__*/ _styles(
75
{
86
root: {
9-
Bcmaq0h: 'fp00rh9',
7+
Bcmaq0h: 'f1surbjy',
108
},
119
},
1210
{
13-
d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`],
11+
d: [`.f1surbjy{background-image:url(${_asset}),url(${_asset2});}`],
1412
},
1513
);
Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import _asset2 from './empty.jpg';
1+
import { __resetStyles as _resetStyles } from '@griffel/react';
2+
import _asset3 from './empty.jpg';
3+
import _asset2 from './blank.jpg';
24
import _asset from './blank.jpg';
3-
import { __resetStyles } from '@griffel/react';
4-
import blank from './blank.jpg';
5-
import blankDuplicate from './blank.jpg';
6-
import empty from './empty.jpg';
7-
export const useStyles = __resetStyles('ra9m047', null, [
8-
`.ra9m047{background-image:url(${_asset});}`,
9-
`.ra9m047:hover{background-image:url(${_asset});}`,
10-
`.ra9m047:focus{background-image:url(${_asset2});}`,
5+
export const useStyles = /*#__PURE__*/ _resetStyles('rzkd6zb', null, [
6+
`.rzkd6zb{background-image:url(${_asset});}`,
7+
`.rzkd6zb:hover{background-image:url(${_asset2});}`,
8+
`.rzkd6zb:focus{background-image:url(${_asset3});}`,
119
]);

packages/babel-preset/__fixtures__/assets-urls/output.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { __styles } from '@griffel/react';
2-
export const useStyles = __styles(
1+
import { __styles as _styles } from '@griffel/react';
2+
export const useStyles = /*#__PURE__*/ _styles(
33
{
44
httpUrl: {
55
Bcmaq0h: 'f405sdg',
Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,26 @@
1-
import _asset3 from './a.svg';
1+
import { __styles as _styles } from '@griffel/react';
22
import _asset2 from './empty.jpg';
33
import _asset from './blank.jpg';
4-
import { __styles } from '@griffel/react';
5-
import blank from './blank.jpg';
6-
import blankDuplicate from './blank.jpg';
7-
import empty from './empty.jpg';
8-
export const useStyles = __styles(
4+
export const useStyles = /*#__PURE__*/ _styles(
95
{
106
rootA: {
11-
Bcmaq0h: 'fnwsaxv',
7+
Bcmaq0h: 'f1lg9ji5',
128
},
139
rootB: {
14-
Bcmaq0h: 'fnwsaxv',
10+
Bcmaq0h: 'f1lg9ji5',
1511
},
1612
rootC: {
17-
Bcmaq0h: 'f1ryfumh',
13+
Bcmaq0h: 'feire57',
1814
},
1915
assetWithHash: {
20-
Bhu2qc9: 'fv04sme',
16+
Bhu2qc9: 'f12vvth1',
2117
},
2218
},
2319
{
2420
d: [
25-
`.fnwsaxv{background-image:url(${_asset});}`,
26-
`.f1ryfumh{background-image:url(${_asset2});}`,
27-
`.fv04sme{filter:url(${_asset3}#a);}`,
21+
`.f1lg9ji5{background-image:url(${_asset});}`,
22+
`.feire57{background-image:url(${_asset2});}`,
23+
`.f12vvth1{filter:url(./a.svg#a);}`,
2824
],
2925
},
3026
);

packages/babel-preset/__fixtures__/at-rules/output.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { __styles } from '@griffel/react';
2-
export const useStyles = __styles(
1+
import { __styles as _styles } from '@griffel/react';
2+
export const useStyles = /*#__PURE__*/ _styles(
33
{
44
root: {
55
cvzfql: ['f13wceqr', 'fmtq1hn'],

packages/babel-preset/__fixtures__/config-babel-options/output.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
1-
import { __styles } from '@griffel/react';
2-
const func = () => {
3-
// This assignment has no sense, but it will prevent us from evaluation in AST
4-
// This fixture uses "colorRenamePlugin.js" in transformPlugin's config so input we should get a different color
5-
const color = 'red';
6-
return {
7-
color,
8-
};
9-
};
10-
export const useStyles = __styles(
1+
import { __styles as _styles } from '@griffel/react';
2+
export const useStyles = /*#__PURE__*/ _styles(
113
{
124
root: {
135
sj55zd: 'f163i14w',

packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { __styles } from '@griffel/react';
2-
import { colorRed } from './consts';
3-
export const useStyles = __styles(
1+
import { __styles as _styles } from '@griffel/react';
2+
export const useStyles = /*#__PURE__*/ _styles(
43
{
54
root: {
65
sj55zd: 'f163i14w',
Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
// @ts-check
22

3-
/** @type {import("@linaria/babel-preset").Evaluator} */
4-
const sampleEvaluator = () => {
5-
// Evaluators transform input code to something that will be evaluated by Node later. In evaluatePathsInVM() we expect
6-
// that results will be available as "exports.__mkPreval", this evaluator mocks it
7-
const result = `exports.__mkPreval = [{ root: { color: 'blue' } }]`;
3+
/** @type {import("@linaria/utils").Evaluator} */
4+
const sampleEvaluator = (babelOptions, ast) => {
5+
// Evaluators transform input code to something that will be evaluated by Node
6+
// later. Linaria expects that results will be available as
7+
// "exports.__linariaPreval", this evaluator mocks it
8+
const result = `
9+
exports.__linariaPreval = {
10+
_exp: () => ({
11+
root: { color: 'blue' }
12+
})
13+
};
14+
`;
815

9-
return [result, null];
16+
return [ast, result, null];
1017
};
1118

1219
module.exports.default = sampleEvaluator;
Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
// @ts-expect-error This module does not exist, but will be resolved via aliases
2-
import { createStylesA } from 'custom-package';
3-
// @ts-expect-error This module does not exist, but will be resolved via aliases
4-
import { createStylesB } from 'custom-package';
1+
import { makeStyles as makeStylesA } from '@griffel/react';
2+
import { makeStyles as makeStylesB } from '@griffel/react';
53

6-
export const useClassesA = createStylesA({
4+
export const useClassesA = makeStylesA({
75
root: { color: 'red' },
86
});
97

10-
export const useClassesB = createStylesB({
8+
export const useClassesB = makeStylesB({
119
root: { color: 'yellow' },
1210
});
Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
// @ts-expect-error This module does not exist, but will be resolved via aliases
2-
import { __styles } from 'custom-package';
3-
// @ts-expect-error This module does not exist, but will be resolved via aliases
4-
import { createStylesB } from 'custom-package';
5-
export const useClassesA = __styles(
1+
import { __styles as _styles2 } from '@griffel/react';
2+
import { __styles as _styles } from '@griffel/react';
3+
export const useClassesA = /*#__PURE__*/ _styles(
64
{
75
root: {
86
sj55zd: 'fe3e8s9',
@@ -12,8 +10,13 @@ export const useClassesA = __styles(
1210
d: ['.fe3e8s9{color:red;}'],
1311
},
1412
);
15-
export const useClassesB = createStylesB({
16-
root: {
17-
color: 'yellow',
13+
export const useClassesB = /*#__PURE__*/ _styles2(
14+
{
15+
root: {
16+
sj55zd: 'f1aqe04n',
17+
},
1818
},
19-
});
19+
{
20+
d: ['.f1aqe04n{color:yellow;}'],
21+
},
22+
);

0 commit comments

Comments
 (0)