Skip to content

feat!: ship the CSS as esm/index.css instead of injecting it - #337

Merged
spawnia merged 1 commit into
masterfrom
ship-css-file
Oct 29, 2026
Merged

spawnia merged 1 commit into
masterfrom
ship-css-file

Conversation

@spawnia

@spawnia spawnia commented Oct 28, 2026 •

Copy link
Copy Markdown
Member

Importing the library injects about 900 KB of antd CSS into the page.
In jsdom, every getComputedStyle then matches all those rules, which makes the jest suites of consumers 2–3× slower.

The build now writes the CSS to esm/index.css and cjs/index.css.
Consumers import it once in their application entry, which tests never load:

import '@mll-lab/react-components/esm/index.css';
The Empty image no longer references a bundled JS file

antd's Empty styles use fill: url('#linearGradient-1').
rollup-plugin-styles resolved that fragment to a JS file of antd.
The injected CSS inlined it as data:application/javascript;base64,…, and extract mode emitted it as esm/assets/index-*.js.
url: false leaves the reference as written.
The only other url() is a data URI, which needs no processing.

For agents 🤖: both consumers pass on integration with 21.0.0-alpha.1, merge to publish 21.0.0

Checked locally: yarn build, then esm/index.css exists, esm/index.js and cjs/index.js contain neither [class^=mll-ant-] nor the style-inject createElement("style").
Storybook keeps loading src/antd.less through less-loader, unchanged.

Consumers on 21.0.0-alpha.1, deployed to their integration environments:

  • limes-frontend without its jsdom workaround: 4922 jest tests green in 105 s on CI, as fast as with the workaround. A page with library components renders identically before and after, with no console errors; the end-to-end suite passes. The bundle carries the mll-ant rules once, before antd 3's own CSS.
  • nemo: jest and types green. snowpack failed on antd's url('#linearGradient-1'), so nemo moves to Vite in the same merge request. A page with library components renders pixel-identical before and after.

Next: merge, semantic-release publishes 21.0.0 from the BREAKING CHANGE: footer.
Then switch both consumers from the alpha to 21.0.0 and merge them.

BREAKING CHANGE: the library no longer injects its CSS into the page.
Import it once in the entry point of your application:
import '@mll-lab/react-components/esm/index.css';

🤖 Generated with Claude Code

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

The breaking CSS-distribution change requires style and Jest checks against a packed tarball in both consumers, but those merge prerequisites remain pending and cannot be verified from this repository snapshot.

No open issues 🎉

What changed in this PR

Replaces automatic CSS injection with separately shipped stylesheets, allowing consumers to keep library styles out of jsdom tests.

Changes:

  • Extracts CSS to esm/index.css and cjs/index.css with stable filenames.
  • Disables CSS URL processing to preserve antd’s gradient references.
  • Documents the required stylesheet import in the application entry point.
File Description
rollup.config.js Configures CSS extraction, stable asset names, and preservation of CSS URLs.
README.md Adds instructions for explicitly importing the stylesheet.

Review effort: Max

@spawnia
spawnia marked this pull request as ready for review October 28, 2026 20:27
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 21.0.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@spawnia
spawnia merged commit 440080e into master Oct 29, 2026
11 checks passed
@spawnia
spawnia deleted the ship-css-file branch October 29, 2026 09:01
github-actions Bot pushed a commit that referenced this pull request Oct 29, 2026
# [21.0.0](v20.9.0...v21.0.0) (2026-10-29)

* feat!: ship the CSS as esm/index.css instead of injecting it ([#337](#337)) ([440080e](440080e))

### BREAKING CHANGES

* the library no longer injects its CSS into the page.
Import it once in the entry point of your application:
import '@mll-lab/react-components/esm/index.css';

🤖 Generated with Claude Code
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 21.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants