Skip to content

All CSS for other elements is broken after one invalid rule #405

Open
@o-alexandrov

Description

@o-alexandrov

Steps to reproduce

Steps:

  1. Add width: "calc(" without closing bracket ) as a value to any element that uses classname from Pigment in your project
  2. 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

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions