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.

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

chore: upgrade to Linaria v4 #309

Closed
wants to merge 1 commit into from

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jan 7, 2023

Summary

This PR upgrades @griffel/babel-preset and @griffel/webpack-loader to use Linaria v4. Linaria v4 introduced a concept of processors to handle different CSS-in-JS implementations i.e. "implement your processor (transform) and use existing tooling to run it".

The information is obtainer from package.json files:

{
  "linaria": {
    "tags": {
      "makeStyles": "@griffel/linaria-processor/make-styles",
      "makeResetStyles": "@griffel/linaria-processor/make-reset-styles"
    }
  }
}

👆 indicates Linaria to process makeStyles & makeResetStyles with matching transforms

Another benefit is that Linaria v4 supports async resolving of dependencies that was a blocker for other bundlers (#33).

BREAKING CHANGES

@griffel/babel-preset

  • modules & projectRoot options removed from configs, use package.json to define processors (see Summary ⬆️ )
  • EvalCache & Module are not longer exported and should not be used directly anymore
  • requires @griffel/linaria-processor installed

@griffel/webpack-loader

  • modules & projectRoot options removed from configs, use package.json to define processors (see Summary ⬆️ )
  • requires @griffel/linaria-processor installed

Details

@griffel/babel-preset

All internals of @griffel/babel-preset were removed: module evaluation is gone, parts related to assets handling were moved to @griffel/linaria-processor.

  • error-argument-count: not needed, check is not longer there
  • import-custom-module: aliases are configured now in package.json files
  • import-custom-name: aliases are configured now in package.json files
  • non-existing-module-call: removed, @linaria/shaker now works differently
  • require-custom-module: removed, not needed

Updated fixtures:

@griffel/webpack-loader

All internals of @griffel/webpack-loader were removed, now it's just a tiny wrapper around @linaria/webpack-loader.

Following fixtures were removed:

  • config-modules: aliases are configured now in package.json files
  • error-argument-count: not needed, check is not longer there
  • error-syntax: not needed

New fixture react-component to test a more real life example.

Related issues

Fixes #104.
Fixes #184.
Fixes #313.

TODOs

@github-actions
Copy link

github-actions bot commented Jan 7, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
core
__resetStyles (makeResetStyles)
273 B
198 B
core
__styles (makeStyles)
1.649 kB
787 B
core
makeResetStyles (runtime)
17.009 kB
6.491 kB
core
makeStyles (runtime)
21.424 kB
8.084 kB
core
mergeClasses
1.82 kB
881 B
core
shorthands.padding()
4.677 kB
1.517 kB
react
__css
1.645 kB
767 B
react
__styles
3.768 kB
1.666 kB
react
makeResetStyles (runtime)
19.159 kB
7.362 kB
react
makeStaticStyles (runtime)
9.121 kB
3.991 kB
react
makeStyles (runtime)
23.59 kB
8.929 kB
shadow-dom
createShadowDOMRenderer
3.236 kB
1.408 kB
🤖 This report was generated against 278e651936789f39df9f2b790993d4d680b345b6

Comment on lines +25 to +26
"@griffel/linaria-processor/make-styles": ["packages/linaria-processor/src/MakeStylesProcessor.ts"],
"@griffel/linaria-processor/make-reset-styles": ["packages/linaria-processor/src/MakeResetStylesProcessor.ts"],
Copy link
Member Author

Choose a reason for hiding this comment

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

Aliases that match export maps in @griffel/linaria-processor, needed for Jest.

Comment on lines -1 to -2
const react_make_styles_1 = require('@griffel/react');
export const useStyles = react_make_styles_1.__styles(
Copy link
Member Author

Choose a reason for hiding this comment

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

require() and export 🙈

"@swc/core": "^1.3.19",
"@typescript-eslint/utils": "^5.20.0",
"ajv": "^8.4.0",
"browserslist": "^4.19.1",
"csstype": "^3.0.10",
"enhanced-resolve": "^5.8.2",
Copy link
Member Author

Choose a reason for hiding this comment

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

We don't need to handle resolutions on our end anymore 💅

pluginOptions: {
babelOptions: {
presets: ['@babel/typescript'],
sourceType: 'unambiguous',
Copy link
Member Author

Choose a reason for hiding this comment

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

This will be probably defined in Linaria itself. Forces Babel to detect a type of module, so it will emit import/require properly.

plugins: [[transformPlugin, options]],
};
export default function griffelPreset(babel: ConfigAPI, options: BabelPluginOptions = {}) {
const { babelOptions, evaluationRules } = validateOptions(options);
Copy link
Member Author

Choose a reason for hiding this comment

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

I decided to not expose all Linaria options to better control APIs.

@layershifter layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from ea91f83 to 8d36747 Compare January 18, 2023 13:47
@layershifter layershifter mentioned this pull request Feb 3, 2023
@layershifter layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from 2384cac to e737178 Compare February 6, 2023 15:16
@layershifter layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from e9aa068 to d610051 Compare February 20, 2023 16:00
@layershifter layershifter reopened this Feb 20, 2023
@layershifter layershifter reopened this Feb 20, 2023
@layershifter layershifter reopened this Feb 20, 2023
@layershifter layershifter reopened this Feb 20, 2023
@layershifter layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from ea632ac to cfd2873 Compare February 21, 2023 15:04
@layershifter layershifter force-pushed the chore/linaria-v4 branch 3 times, most recently from cd4c944 to 7758dcf Compare July 31, 2023 13:11
@layershifter layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from fc77183 to aad3473 Compare July 31, 2023 13:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant