add own class name hashing #220

jantimon · 2024-11-25T12:11:01Z

This PR is a first draft for minified CSS class names in production by generating deterministic but unique class names directly in the SWC plugin

The change will:

reduce the class name size in css file (upto 20% gzip file size savings)
reduce the ssr html size (because the class names are also used there)
reduce the js bundle size (because we can skip the mappings and the class names are also there)

The generated code from the SWC plugin changes from

import styleYak from "./input.yak.module.css"; 
styled.button(styleYak.Button);

to the following:

```tsx
import "./input.yak.module.css";
styled.button("Button_m7uBBu");

The PR will only work for Next.js versions with a postcss-modules-local-by-default version 4.1 or newer

Still todo:

Test if single line comments // work for postcss ignore markers
Update css-loader imports from cross-file selectors and mixins to use the new class naming scheme

changeset-bot · 2024-11-25T12:11:05Z

🦋 Changeset detected

Latest commit: 1ca44c9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
yak-swc	Minor
next-yak	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codspeed-hq · 2024-11-25T12:13:12Z

CodSpeed Performance Report

Merging #220 will not alter performance

_{Comparing custom-class-naming (7ffa69b) with main (07bed79)}

Summary

✅ 2 untouched benchmarks

packages/next-yak/loaders/css-loader.ts

packages/yak-swc/yak_swc/src/naming_convention.rs

packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx

packages/yak-swc/yak_swc/src/naming_convention.rs

# Conflicts: # packages/yak-swc/yak_swc/src/utils/ast_helper.rs

jantimon · 2024-12-12T10:02:34Z

This PR reduces CSS by over 20% it also reduces the js size

Overall it saves 10% after gzip for the example app (excluding next.js framework files)

# Conflicts: # package.json # packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx # packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx # packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx # packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx # packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx # packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx # packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx # packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx # packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx # packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx # packages/yak-swc/yak_swc/src/yak_transforms.rs # packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/css-prop/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx # packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx # packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx # pnpm-lock.yaml

jantimon · 2025-04-02T18:41:56Z

This PR requires

next 15.3.0-canary.30 (for CI pipelines)
next 15.3.0 (for stable release)

packages/next-yak/loaders/css-loader.ts

packages/yak-swc/yak_swc/src/naming_convention.rs

packages/yak-swc/yak_swc/src/yak_transforms.rs

Mad-Kat

LGTM

jantimon added 2 commits November 25, 2024 21:48

add own class name hashing

f5f71c7

add changeset

5a043c2

jantimon force-pushed the custom-class-naming branch from 6eeed5a to 5a043c2 Compare November 25, 2024 12:49

update snapshots

e6dfbfe

jantimon force-pushed the custom-class-naming branch from b80af04 to e6dfbfe Compare November 25, 2024 13:05

jantimon and others added 3 commits November 25, 2024 22:58

minify numbers

9a38b02

[autofix.ci] apply automated fixes

6a2e6f9

fix css prop

ff93c6b

Mad-Kat requested changes Nov 29, 2024

View reviewed changes

packages/next-yak/loaders/css-loader.ts Outdated Show resolved Hide resolved

packages/yak-swc/yak_swc/src/naming_convention.rs Outdated Show resolved Hide resolved

packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx Outdated Show resolved Hide resolved

Mad-Kat reviewed Nov 29, 2024

View reviewed changes

packages/yak-swc/yak_swc/src/naming_convention.rs Show resolved Hide resolved

jantimon added 2 commits December 3, 2024 12:26

Merge branch 'main' into custom-class-naming

085bcbb

improve test

c04d4ee

jantimon mentioned this pull request Dec 3, 2024

allow to define the prefix for generated names #225

Merged

jantimon added 11 commits December 3, 2024 21:36

Merge remote-tracking branch 'origin/main' into custom-class-naming

1da9dbe

no prefix

23f7474

Merge remote-tracking branch 'origin/main' into custom-class-naming

8c37f74

update snapshots

e49039b

prefix keyframes with :global

8b07840

fmt

ce8a175

Merge branch 'main' into custom-class-naming

4b0a757

Merge branch 'main' into custom-class-naming

d533da5

Merge branch 'main' into custom-class-naming

53a888a

# Conflicts: # packages/yak-swc/yak_swc/src/utils/ast_helper.rs

Merge branch 'main' into custom-class-naming

76ad638

us cssmodules-pure-no-check

7ffa69b

jantimon mentioned this pull request Apr 1, 2025

Make devMode configurable #302

Merged

jantimon force-pushed the custom-class-naming branch 2 times, most recently from 489d3fd to 8d1d4d9 Compare April 2, 2025 18:03

jantimon force-pushed the custom-class-naming branch from 8d1d4d9 to ec4c658 Compare April 2, 2025 18:06

keep filename in class name

bfab4b6

jantimon marked this pull request as ready for review April 2, 2025 18:41

Merge branch 'main' into custom-class-naming

87e1d07

jantimon added 3 commits April 2, 2025 20:46

update cross-file-tests

3e408f2

update snapshots

f55ac48

update to canary

54035a7

jantimon requested a review from Mad-Kat April 3, 2025 06:03

Mad-Kat reviewed Apr 3, 2025

View reviewed changes

packages/next-yak/loaders/css-loader.ts Show resolved Hide resolved

packages/yak-swc/yak_swc/src/naming_convention.rs Outdated Show resolved Hide resolved

chklauser reviewed Apr 3, 2025

View reviewed changes

packages/yak-swc/yak_swc/src/yak_transforms.rs Show resolved Hide resolved

jantimon added 2 commits April 3, 2025 15:28

fix css prop

0392bbd

use std::path::Path for file stem

1ca44c9

jantimon requested review from Mad-Kat and chklauser April 3, 2025 14:52

Mad-Kat approved these changes Apr 4, 2025

View reviewed changes

jantimon merged commit d018370 into main Apr 4, 2025
6 checks passed

jantimon deleted the custom-class-naming branch April 4, 2025 05:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

add own class name hashing #220

add own class name hashing #220

Uh oh!

jantimon commented Nov 25, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 25, 2024 •

edited

Loading

Uh oh!

codspeed-hq bot commented Nov 25, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jantimon commented Dec 12, 2024 •

edited

Loading

Uh oh!

jantimon commented Apr 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Mad-Kat left a comment

Uh oh!

Uh oh!

Uh oh!

add own class name hashing #220

add own class name hashing #220

Uh oh!

Conversation

jantimon commented Nov 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Nov 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codspeed-hq bot commented Nov 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #220 will not alter performance

Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jantimon commented Dec 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jantimon commented Apr 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Mad-Kat left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jantimon commented Nov 25, 2024 •

edited

Loading

changeset-bot bot commented Nov 25, 2024 •

edited

Loading

codspeed-hq bot commented Nov 25, 2024 •

edited

Loading

jantimon commented Dec 12, 2024 •

edited

Loading