chore: migrate to to wyw-in-js

[layershifter]

TODO

Update PR to reflect removal of @griffel/babel-preset.

Summary

This PR upgrades @griffel/babel-preset and @griffel/webpack-loader to use wyw-in-js. wyw-in-js introduces 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 v5 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

TODO

• restore metadata parsing

@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:

• asset: file paths handled properly, fixes babel-preset: handles relative paths as assets #313
• config-evaluation-rules: we don't have own evaluation part anymore, matches to what Linaria does
• duplicated-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 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.

TODO

• document breaking changes

Related issues

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

TODOs

• Test on Windows machine
• Test in products
• Pass proper import sources in processors
• 🔴 "export *" prevent shaking and removal of unused code callstack/linaria#1311
• 🔴 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

[github-actions]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
core __resetStyles (makeResetStyles)	273 B 197 B
core __styles (makeStyles)	1.649 kB 788 B
core makeResetStyles (runtime)	17.011 kB 6.513 kB
core makeStyles (runtime)	21.499 kB 8.145 kB
core mergeClasses	1.82 kB 876 B
core shorthands.padding()	4.678 kB 1.52 kB
react __css	1.645 kB 768 B
react __styles	3.768 kB 1.661 kB
react makeResetStyles (runtime)	19.172 kB 7.377 kB
react makeStaticStyles (runtime)	9.136 kB 4.007 kB
react makeStyles (runtime)	23.675 kB 8.991 kB
shadow-dom createShadowDOMRenderer	3.236 kB 1.408 kB

_{🤖 This report was generated against d25676dd97e2621865e30270d9029ddeeb420cdb}