Skip to content

Commit

Permalink
chore: migrate to to wyw-in-js
Browse files Browse the repository at this point in the history
  • Loading branch information
layershifter committed Dec 8, 2023
1 parent 480aba5 commit 8fb9de8
Show file tree
Hide file tree
Showing 125 changed files with 2,161 additions and 2,715 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
<TabItem value="yarn" label="Yarn">

```shell
yarn add --dev @griffel/babel-preset
yarn add --dev @griffel/babel-preset @griffel/tag-processor
```

</TabItem>
<TabItem value="npm" label="NPM">

```shell
npm install --save-dev @griffel/babel-preset
npm install --save-dev @griffel/babel-preset @griffel/tag-processor
```

</TabItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
<TabItem value="yarn" label="Yarn">

```shell
yarn add --dev @griffel/webpack-loader
yarn add --dev @griffel/tag-processor @griffel/webpack-loader
```

</TabItem>
<TabItem value="npm" label="NPM">

```shell
npm install --save-dev @griffel/webpack-loader
npm install --save-dev @griffel/tag-processor @griffel/webpack-loader
```

</TabItem>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "major",
"comment": "BREAKING: migrate to to wyw-in-js",
"packageName": "@griffel/babel-preset",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "major",
"comment": "chore: initial release",
"packageName": "@griffel/tag-processor",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: add meta to package.json for @griffel/tag-processor",
"packageName": "@griffel/react",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "major",
"comment": "BREAKING: migrate to to wyw-in-js",
"packageName": "@griffel/webpack-loader",
"email": "[email protected]",
"dependentChangeType": "patch"
}
2 changes: 1 addition & 1 deletion e2e/nextjs/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "e2e/nextjs/src",
"projectType": "library",
"implicitDependencies": ["@griffel/webpack-loader"],
"implicitDependencies": ["@griffel/tag-processor", "@griffel/webpack-loader"],
"targets": {
"test": {
"executor": "nx:run-commands",
Expand Down
1 change: 1 addition & 0 deletions e2e/nextjs/src/test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ async function performTest() {
packLocalPackage(rootDir, tempDir, '@griffel/style-types'),
packLocalPackage(rootDir, tempDir, '@griffel/core'),
packLocalPackage(rootDir, tempDir, '@griffel/react'),
packLocalPackage(rootDir, tempDir, '@griffel/tag-processor'),
packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'),
packLocalPackage(rootDir, tempDir, '@griffel/webpack-loader'),
packLocalPackage(rootDir, tempDir, '@griffel/next-extraction-plugin'),
Expand Down
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"type-check": "nx affected --target=type-check"
},
"devDependencies": {
"@babel/generator": "^7.12.13",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "7.12.13",
"@codesandbox/sandpack-react": "1.18.4",
Expand All @@ -50,6 +51,7 @@
"@storybook/builder-webpack5": "6.5.15",
"@storybook/manager-webpack5": "6.5.15",
"@storybook/react": "6.5.15",
"@swc/core": "^1.3.19",
"@testing-library/jest-dom": "5.16.1",
"@testing-library/react": "13.4.0",
"@tsconfig/docusaurus": "^1.0.4",
Expand Down Expand Up @@ -140,20 +142,18 @@
},
"dependencies": {
"@babel/core": "^7.12.13",
"@babel/generator": "^7.12.13",
"@babel/helper-module-imports": "^7.12.13",
"@babel/helper-plugin-utils": "^7.12.13",
"@babel/template": "^7.12.13",
"@babel/traverse": "^7.12.13",
"@emotion/hash": "^0.9.0",
"@linaria/babel-preset": "^3.0.0-beta.24",
"@linaria/shaker": "^3.0.0-beta.22",
"@swc/core": "^1.3.19",
"@linaria/babel-preset": "^5.0.2",
"@linaria/shaker": "^5.0.1",
"@linaria/tags": "^5.0.1",
"@linaria/utils": "^5.0.1",
"@linaria/webpack-loader": "^5.0.2",
"@typescript-eslint/utils": "^5.47.0",
"ajv": "^8.4.0",
"browserslist": "^4.19.1",
"csstype": "^3.1.2",
"enhanced-resolve": "^5.8.2",
"rtl-css-js": "^1.16.1",
"source-map-js": "1.0.2",
"stylis": "^4.2.0",
Expand Down
41 changes: 20 additions & 21 deletions packages/babel-preset/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ A Babel preset that performs build time transforms for [`@griffel/react`](../rea
## Install

```bash
yarn add --dev @griffel/babel-preset
yarn add --dev @griffel/babel-preset @griffel/tag-processor
# or
npm install --save-dev @griffel/babel-preset
npm install --save-dev @griffel/babel-preset @griffel/tag-processor
```

## When to use it?
Expand All @@ -50,22 +50,27 @@ import { makeStyles } from 'custom-package';
import { createStyles } from 'custom-package';
```

By default, preset handles imports from `@griffel/react` & `@fluentui/react-components`, to handle imports from custom packages settings should be tweaked:
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`:

```json
{
"presets": [
[
"@griffel",
{
"modules": [{ "moduleSource": "custom-package", "importName": "makeStyles" }]
}
]
]
"name": "custom-package",
"version": "1.0.0",
"linaria": {
"tags": {
"makeStyles": "@griffel/tag-processor/make-styles",
"makeResetStyles": "@griffel/tag-processor/make-reset-styles"
}
}
}
```

> **Note**: "custom-package" should re-export `__styles` function from `@griffel/react`
> **Note**: "custom-package" should re-export following functions from `@griffel/react`:
>
> - `__styles`
> - `__css`
> - `__resetStyles`
> - `__resetCSS`
### Configuring Babel settings

Expand Down Expand Up @@ -157,9 +162,9 @@ const useStyles = makeStyles({
roughly to

```js
import { __styles } from '@griffel/react';
import { __styles as _styles } from '@griffel/react';

const useStyles = __styles(/* resolved styles */);
const useStyles = _styles(/* resolved styles */);
```

## Access CSS output from code
Expand Down Expand Up @@ -218,7 +223,7 @@ However, the concepts are not coupled to the repo setup.

### Module evaluation

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

Debugging output can be activated with following environment variables:
Expand All @@ -232,9 +237,3 @@ On Windows it's required to set environment variables via [`set`](https://docs.m
```sh
$ cross-env DEBUG=linaria\* LINARIA_LOG=debug yarn build
```

The debug output will include:

- Prepared code
- Evaluated code
- AST that indicates what code has been shaken with `@linaria/shaker`
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { __styles as _styles } from '@griffel/react';
import _asset2 from './empty.jpg';
import _asset from './blank.jpg';
import { __styles } from '@griffel/react';
import blank from './blank.jpg';
import empty from './empty.jpg';
export const useStyles = __styles(
export const useStyles = /*#__PURE__*/ _styles(
{
root: {
Bcmaq0h: 'fp00rh9',
Bcmaq0h: 'f1surbjy',
},
},
{
d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`],
d: [`.f1surbjy{background-image:url(${_asset}),url(${_asset2});}`],
},
);
16 changes: 7 additions & 9 deletions packages/babel-preset/__fixtures__/assets-reset-styles/output.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import _asset2 from './empty.jpg';
import { __resetStyles as _resetStyles } from '@griffel/react';
import _asset3 from './empty.jpg';
import _asset2 from './blank.jpg';
import _asset from './blank.jpg';
import { __resetStyles } from '@griffel/react';
import blank from './blank.jpg';
import blankDuplicate from './blank.jpg';
import empty from './empty.jpg';
export const useStyles = __resetStyles('ra9m047', null, [
`.ra9m047{background-image:url(${_asset});}`,
`.ra9m047:hover{background-image:url(${_asset});}`,
`.ra9m047:focus{background-image:url(${_asset2});}`,
export const useStyles = /*#__PURE__*/ _resetStyles('rzkd6zb', null, [
`.rzkd6zb{background-image:url(${_asset});}`,
`.rzkd6zb:hover{background-image:url(${_asset2});}`,
`.rzkd6zb:focus{background-image:url(${_asset3});}`,
]);
4 changes: 2 additions & 2 deletions packages/babel-preset/__fixtures__/assets-urls/output.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { __styles } from '@griffel/react';
export const useStyles = __styles(
import { __styles as _styles } from '@griffel/react';
export const useStyles = /*#__PURE__*/ _styles(
{
httpUrl: {
Bcmaq0h: 'f405sdg',
Expand Down
22 changes: 9 additions & 13 deletions packages/babel-preset/__fixtures__/assets/output.ts
Original file line number Diff line number Diff line change
@@ -1,30 +1,26 @@
import _asset3 from './a.svg';
import { __styles as _styles } from '@griffel/react';
import _asset2 from './empty.jpg';
import _asset from './blank.jpg';
import { __styles } from '@griffel/react';
import blank from './blank.jpg';
import blankDuplicate from './blank.jpg';
import empty from './empty.jpg';
export const useStyles = __styles(
export const useStyles = /*#__PURE__*/ _styles(
{
rootA: {
Bcmaq0h: 'fnwsaxv',
Bcmaq0h: 'f1lg9ji5',
},
rootB: {
Bcmaq0h: 'fnwsaxv',
Bcmaq0h: 'f1lg9ji5',
},
rootC: {
Bcmaq0h: 'f1ryfumh',
Bcmaq0h: 'feire57',
},
assetWithHash: {
Bhu2qc9: 'fv04sme',
Bhu2qc9: 'f12vvth1',
},
},
{
d: [
`.fnwsaxv{background-image:url(${_asset});}`,
`.f1ryfumh{background-image:url(${_asset2});}`,
`.fv04sme{filter:url(${_asset3}#a);}`,
`.f1lg9ji5{background-image:url(${_asset});}`,
`.feire57{background-image:url(${_asset2});}`,
`.f12vvth1{filter:url(./a.svg#a);}`,
],
},
);
4 changes: 2 additions & 2 deletions packages/babel-preset/__fixtures__/at-rules/output.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { __styles } from '@griffel/react';
export const useStyles = __styles(
import { __styles as _styles } from '@griffel/react';
export const useStyles = /*#__PURE__*/ _styles(
{
root: {
cvzfql: ['f13wceqr', 'fmtq1hn'],
Expand Down
12 changes: 2 additions & 10 deletions packages/babel-preset/__fixtures__/config-babel-options/output.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
import { __styles } from '@griffel/react';
const func = () => {
// This assignment has no sense, but it will prevent us from evaluation in AST
// This fixture uses "colorRenamePlugin.js" in transformPlugin's config so input we should get a different color
const color = 'red';
return {
color,
};
};
export const useStyles = __styles(
import { __styles as _styles } from '@griffel/react';
export const useStyles = /*#__PURE__*/ _styles(
{
root: {
sj55zd: 'f163i14w',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { __styles } from '@griffel/react';
import { colorRed } from './consts';
export const useStyles = __styles(
import { __styles as _styles } from '@griffel/react';
export const useStyles = /*#__PURE__*/ _styles(
{
root: {
sj55zd: 'f163i14w',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
// @ts-check

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

return [result, null];
return [ast, result, null];
};

module.exports.default = sampleEvaluator;
10 changes: 4 additions & 6 deletions packages/babel-preset/__fixtures__/duplicated-imports/code.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
// @ts-expect-error This module does not exist, but will be resolved via aliases
import { createStylesA } from 'custom-package';
// @ts-expect-error This module does not exist, but will be resolved via aliases
import { createStylesB } from 'custom-package';
import { makeStyles as makeStylesA } from '@griffel/react';
import { makeStyles as makeStylesB } from '@griffel/react';

export const useClassesA = createStylesA({
export const useClassesA = makeStylesA({
root: { color: 'red' },
});

export const useClassesB = createStylesB({
export const useClassesB = makeStylesB({
root: { color: 'yellow' },
});
21 changes: 12 additions & 9 deletions packages/babel-preset/__fixtures__/duplicated-imports/output.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
// @ts-expect-error This module does not exist, but will be resolved via aliases
import { __styles } from 'custom-package';
// @ts-expect-error This module does not exist, but will be resolved via aliases
import { createStylesB } from 'custom-package';
export const useClassesA = __styles(
import { __styles as _styles2 } from '@griffel/react';
import { __styles as _styles } from '@griffel/react';
export const useClassesA = /*#__PURE__*/ _styles(
{
root: {
sj55zd: 'fe3e8s9',
Expand All @@ -12,8 +10,13 @@ export const useClassesA = __styles(
d: ['.fe3e8s9{color:red;}'],
},
);
export const useClassesB = createStylesB({
root: {
color: 'yellow',
export const useClassesB = /*#__PURE__*/ _styles2(
{
root: {
sj55zd: 'f1aqe04n',
},
},
});
{
d: ['.f1aqe04n{color:yellow;}'],
},
);
Loading

0 comments on commit 8fb9de8

Please sign in to comment.