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

add own class name hashing #220

Draft
wants to merge 19 commits into
base: main
Choose a base branch
from
Draft

add own class name hashing #220

wants to merge 19 commits into from

Conversation

jantimon
Copy link
Owner

@jantimon jantimon commented Nov 25, 2024

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

Copy link

changeset-bot bot commented Nov 25, 2024

🦋 Changeset detected

Latest commit: 7ffa69b

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

Copy link

codspeed-hq bot commented Nov 25, 2024

CodSpeed Performance Report

Merging #220 will not alter performance

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

Summary

✅ 2 untouched benchmarks

@jantimon jantimon force-pushed the custom-class-naming branch from 6eeed5a to 5a043c2 Compare November 25, 2024 12:49
@jantimon jantimon force-pushed the custom-class-naming branch from b80af04 to e6dfbfe Compare November 25, 2024 13:05
@jantimon
Copy link
Owner Author

jantimon commented Dec 12, 2024

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)

size change

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