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

Support for scoping variables in CSS modules #8122

Merged
merged 7 commits into from
May 25, 2022
Merged

Conversation

devongovett
Copy link
Member

This adds opt-in support for scoping variables and other dashed identifiers in CSS modules. It also registers variables as symbols, and automatically removes unused variables. See parcel-bundler/lightningcss#183 for details.

This is enabled in package.json via the new object config for cssModules, which also supports custom pattern config to specify how names are generated. Due to this, there is also a global option to enable CSS modules globally when using this object config.

{
  "@parcel/transformer-css": {
    "global": true,
    "pattern": "foo-[hash]-[local]",
    "dashedIdents": true
  }
}

@parcel-benchmark
Copy link

parcel-benchmark commented May 22, 2022

Benchmark Results

Kitchen Sink 🚨

Timings

Description Time Difference
Cold FAILED -0.00ms
Cached FAILED -0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

React HackerNews ✅

Timings

Description Time Difference
Cold 9.62s +14.00ms
Cached 480.00ms +4.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 1.71m -1.10s
Cached 2.67s -28.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/esm.c7dc1640.js 61.96kb +0.00b 1.27m +34.28s ⚠️
dist/workerHasher.e50d242f.js 1.72kb +0.00b 1.27m +34.29s ⚠️
dist/16.1969624f.js 1.08kb +0.00b 41.37s +3.29s ⚠️
dist/16.069344b7.js 905.00b +0.00b 41.37s +3.29s ⚠️
dist/simpleHasher.46d6f2e5.js 742.00b +0.00b 1.27m +34.29s ⚠️
dist/index.html 240.00b +0.00b 1.27m +42.94s ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/esm.c7dc1640.js 61.96kb +0.00b 42.13s -34.69s 🚀
dist/workerHasher.e50d242f.js 1.72kb +0.00b 42.13s -34.69s 🚀
dist/16.1969624f.js 1.08kb +0.00b 37.93s -3.76s 🚀
dist/index.html 240.00b +0.00b 36.68s -40.19s 🚀

Three.js ✅

Timings

Description Time Difference
Cold 6.93s -0.00ms
Cached 285.00ms +13.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

@devongovett devongovett merged commit 03cc465 into v2 May 25, 2022
@devongovett devongovett deleted the css-modules-vars branch May 25, 2022 13:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants