Open
Description
Steps to reproduce
Steps:
- Add
width: "calc("
without closing bracket)
as a value to any element that uses classname from Pigment in your project - Notice all other CSS for other HTML elements (used after an element with an invalid width) now also have broken CSS
Current behavior
Silently generates invalid CSS
Expected behavior
PigmentCSS adds ;
to the end of each value to prevent breaking other CSS
Context
Goal is safer DX
Your environment
npx @mui/envinfo
System:
OS: macOS 15.5
Binaries:
Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
npm: 11.3.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
pnpm: 10.6.5 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 136.0.7103.114
Edge: 112.0.1722.39
Safari: 18.5
npmPackages:
@emotion/react: 11.14.0
@emotion/styled: 11.14.0
@mui/core-downloads-tracker: 7.1.0
@mui/icons-material: 7.1.0
@mui/material: 7.1.0
@mui/material-pigment-css: 7.1.0
@mui/private-theming: 7.1.0
@mui/styled-engine: 7.1.0
@mui/system: 7.1.0
@mui/types: 7.4.2
@mui/utils: 7.1.0
@pigment-css/react: 0.0.30
@pigment-css/vite-plugin: 0.0.30
@types/react: 19.1.4
react: 19.1.0
react-dom: 19.1.0
typescript: 5.8.3
Search keywords: invalid value