-
Notifications
You must be signed in to change notification settings - Fork 61
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
Conversation
📊 Bundle size reportUnchanged fixtures
|
2f57972
to
1eab167
Compare
dfbe546
to
1a4de81
Compare
"@griffel/linaria-processor/make-styles": ["packages/linaria-processor/src/MakeStylesProcessor.ts"], | ||
"@griffel/linaria-processor/make-reset-styles": ["packages/linaria-processor/src/MakeResetStylesProcessor.ts"], |
There was a problem hiding this comment.
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.
1a4de81
to
90a6c0e
Compare
const react_make_styles_1 = require('@griffel/react'); | ||
export const useStyles = react_make_styles_1.__styles( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
require()
and export
🙈
90a6c0e
to
c2600b3
Compare
"@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", |
There was a problem hiding this comment.
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', |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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.
99f2719
to
b5a58c8
Compare
a19e9e5
to
b5ccbfa
Compare
b5ccbfa
to
a998d86
Compare
ea91f83
to
8d36747
Compare
2384cac
to
e737178
Compare
e9aa068
to
d610051
Compare
ea632ac
to
cfd2873
Compare
cd4c944
to
7758dcf
Compare
fc77183
to
aad3473
Compare
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:👆 indicates Linaria to process
makeStyles
&makeResetStyles
with matching transformsAnother 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, usepackage.json
to define processors (see Summary ⬆️ )EvalCache
&Module
are not longer exported and should not be used directly anymore@griffel/linaria-processor
installed@griffel/webpack-loader
modules
&projectRoot
options removed from configs, usepackage.json
to define processors (see Summary ⬆️ )@griffel/linaria-processor
installedDetails
@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 thereimport-custom-module
: aliases are configured now inpackage.json
filesimport-custom-name
: aliases are configured now inpackage.json
filesnon-existing-module-call
: removed,@linaria/shaker
now works differentlyrequire-custom-module
: removed, not neededUpdated fixtures:
asset
: file paths handled properly, fixes babel-preset: handles relative paths as assets #313config-evaluation-rules
: we don't have own evaluation part anymore, matches to what Linaria doesduplicated-imports
: handles multiple imports as it should be 💪 Fixes babel-preset: multiple modules produce the same import #104@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 inpackage.json
fileserror-argument-count
: not needed, check is not longer thereerror-syntax
: not neededNew fixture
react-component
to test a more real life example.Related issues
Fixes #104.
Fixes #184.
Fixes #313.
TODOs
🔴 BLOCKER Tags parsing is too aggressive callstack/linaria#1214🔴 BLOCKER EvalError: tslib_1.__importStar is not a function callstack/linaria#1209🔴 BLOCKER: TS helpers for imports are not fully handled? callstack/linaria#1186🔴 BLOCKER: feat(tags): introduce tagSource for processors callstack/linaria#1188🔴 BLOCKER: import side-effects are removed callstack/linaria#1189💣 BLOCKER: Circulars dependencies are causing infinite loop callstack/linaria#1193