Pigment CSS is 16.2KB gzipped JavaScript in MUI’s example app
Open
@brijeshb42 is already working on this.
Since Oct 16, 2024.
package: pigment-css
performance
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Steps:
- Clone the repo (it's exactly the same as the vite example from this repo)
- I just added
rollup-plugin-visualizerso you could visualize the resulting bundle
- I just added
- Bundle
npm run build - Your browser will open automatically with the result from
rollup-plugin-visualizer(see example below)
Current behavior
- emotion is still in the final bundle, but takes less space (as expected) 2.32KB gzipped
zero-runtime-theme.jsis 7.16KB gzipped@pigment-css/react/buildis 6.74KB gzipped
Total: 16.22KB gzipped
Expected behavior
Smaller JavaScript footprint
Context
We should evaluate the runtime implications of some PigmentCSS' API usage, such as: styled that results in extra JS output
Your environment
npx @mui/envinfo
System:
OS: macOS 15.0.1
Binaries:
Node: 22.9.0 - /opt/homebrew/bin/node
npm: 10.8.3 - /opt/homebrew/bin/npm
pnpm: 9.9.0 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 129.0.6668.91
Edge: 112.0.1722.39
Safari: 18.0.1
npmPackages:
@emotion/react: 11.13.3
@emotion/styled: 11.13.0
@mui/core-downloads-tracker: 6.1.3
@mui/material: latest => 6.1.3
@mui/material-pigment-css: latest => 6.1.3
@mui/private-theming: 6.1.3
@mui/styled-engine: 6.1.3
@mui/system: 6.1.3
@mui/types: 7.2.18
@mui/utils: 6.1.3
@pigment-css/react: 0.0.24
@pigment-css/vite-plugin: latest => 0.0.24
@types/react: latest => 18.3.11
react: latest => 18.3.1
react-dom: latest => 18.3.1
typescript: latest => 5.6.3
Search keywords: pigmentcss, pigment, bundling, final, emotion, zero runtime
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.