chore: upgrade to Linaria v4 by layershifter · Pull Request #309 · microsoft/griffel

layershifter · 2023-01-07T14:28:15Z

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:

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.

Related issues

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

TODOs

Test on Windows machine
Test in products
Pass proper import sources in processors
~~🔴 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 · 2023-01-07T14:30:19Z

📊 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}

layershifter · 2023-01-11T11:53:15Z

tsconfig.base.json

+      "@griffel/linaria-processor/make-styles": ["packages/linaria-processor/src/MakeStylesProcessor.ts"],
+      "@griffel/linaria-processor/make-reset-styles": ["packages/linaria-processor/src/MakeResetStylesProcessor.ts"],


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

layershifter · 2023-01-11T12:00:06Z

packages/babel-preset/__fixtures__/require/output.ts

-const react_make_styles_1 = require('@griffel/react');
-export const useStyles = react_make_styles_1.__styles(


require() and export 🙈

layershifter · 2023-01-11T12:12:21Z

package.json

    "ajv": "^8.4.0",
    "browserslist": "^4.19.1",
    "csstype": "^3.0.10",
-    "enhanced-resolve": "^5.8.2",


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

layershifter · 2023-01-11T12:14:23Z

packages/babel-preset/src/index.test.ts

-  pluginOptions: {
-    babelOptions: {
-      presets: ['@babel/typescript'],
+      sourceType: 'unambiguous',


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

packages/babel-preset/src/index.test.ts

layershifter · 2023-01-11T12:19:35Z

packages/babel-preset/src/index.ts

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


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

layershifter force-pushed the chore/linaria-v4 branch 3 times, most recently from 2f57972 to 1eab167 Compare January 9, 2023 13:31

layershifter mentioned this pull request Jan 9, 2023

chore: upgrade Nx to 13.10.6 #310

Merged

layershifter force-pushed the chore/linaria-v4 branch 7 times, most recently from dfbe546 to 1a4de81 Compare January 10, 2023 10:31

This was referenced Jan 10, 2023

module evaluates ESM helpers from SWC output callstack/linaria#1177

Closed

chore(webpack-extraction-plugin): refactor to support aliased imports #315

Merged

layershifter commented Jan 11, 2023

View reviewed changes

layershifter force-pushed the chore/linaria-v4 branch from 1a4de81 to 90a6c0e Compare January 11, 2023 11:59

layershifter commented Jan 11, 2023

View reviewed changes

layershifter force-pushed the chore/linaria-v4 branch from 90a6c0e to c2600b3 Compare January 11, 2023 12:08

layershifter commented Jan 11, 2023

View reviewed changes

packages/babel-preset/src/index.test.ts Outdated Show resolved Hide resolved

layershifter commented Jan 11, 2023

View reviewed changes

layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from 99f2719 to b5a58c8 Compare January 12, 2023 09:13

layershifter mentioned this pull request Jan 12, 2023

make webpack-extraction-plugin and webpack-loader support webpack v4 #274

Closed

layershifter force-pushed the chore/linaria-v4 branch 3 times, most recently from a19e9e5 to b5ccbfa Compare January 12, 2023 17:11

layershifter mentioned this pull request Jan 13, 2023

TS helpers for imports are not fully handled? callstack/linaria#1186

Closed

layershifter force-pushed the chore/linaria-v4 branch from b5ccbfa to a998d86 Compare January 18, 2023 11:16

layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from ea91f83 to 8d36747 Compare January 18, 2023 13:47

layershifter mentioned this pull request Jan 18, 2023

Version 11.x Discussion babel-utils/babel-plugin-tester#139

Closed

TristanWatanabe mentioned this pull request Jan 27, 2023

feat(tools): scripts and generator updates to enable SWC transpilation for v9 packages microsoft/fluentui#26527

Merged

layershifter mentioned this pull request Feb 3, 2023

feat: add Vite plugin #41

Merged

layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from 2384cac to e737178 Compare February 6, 2023 15:16

layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from e9aa068 to d610051 Compare February 20, 2023 16:00

layershifter closed this Feb 20, 2023

layershifter reopened this Feb 20, 2023

layershifter closed this Feb 20, 2023

layershifter reopened this Feb 20, 2023

layershifter closed this Feb 20, 2023

layershifter reopened this Feb 20, 2023

layershifter closed this Feb 20, 2023

layershifter reopened this Feb 20, 2023

layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from ea632ac to cfd2873 Compare February 21, 2023 15:04

TristanWatanabe mentioned this pull request Mar 2, 2023

setup v9 transpilation to be based on browser support minbar microsoft/fluentui#26170

Open

8 tasks

layershifter force-pushed the chore/linaria-v4 branch 3 times, most recently from cd4c944 to 7758dcf Compare July 31, 2023 13:11

chore: upgrade to Linaria v4

fc77183

layershifter force-pushed the chore/linaria-v4 branch 2 times, most recently from fc77183 to aad3473 Compare July 31, 2023 13:39

layershifter closed this Jul 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: upgrade to Linaria v4#309

chore: upgrade to Linaria v4#309
layershifter wants to merge 1 commit intomicrosoft:mainfrom
layershifter:chore/linaria-v4

layershifter commented Jan 7, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Jan 7, 2023 •

edited

Loading

Uh oh!

layershifter Jan 11, 2023

Uh oh!

layershifter Jan 11, 2023

Uh oh!

layershifter Jan 11, 2023

Uh oh!

layershifter Jan 11, 2023

Uh oh!

Uh oh!

layershifter Jan 11, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		"@griffel/linaria-processor/make-styles": ["packages/linaria-processor/src/MakeStylesProcessor.ts"],
		"@griffel/linaria-processor/make-reset-styles": ["packages/linaria-processor/src/MakeResetStylesProcessor.ts"],

		const react_make_styles_1 = require('@griffel/react');
		export const useStyles = react_make_styles_1.__styles(

Conversation

layershifter commented Jan 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

BREAKING CHANGES

@griffel/babel-preset

@griffel/webpack-loader

Details

@griffel/babel-preset

@griffel/webpack-loader

Related issues

TODOs

Uh oh!

github-actions bot commented Jan 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

layershifter Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

layershifter Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

layershifter Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

layershifter Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

layershifter Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

layershifter commented Jan 7, 2023 •

edited

Loading

`@griffel/babel-preset`

`@griffel/webpack-loader`

`@griffel/babel-preset`

`@griffel/webpack-loader`

github-actions bot commented Jan 7, 2023 •

edited

Loading