styled-components/styled-components styled-components@6.3.5

on GitHub

Patch Changes

• 7ff7002: Fix: Line comments (//) in multiline CSS declarations no longer cause parsing errors (fixes #5613)

  JS-style line comments (//) placed after multiline declarations like calc() were not being properly stripped, causing CSS parsing issues. Comments are now correctly removed anywhere in the CSS while preserving valid syntax.

  Example that now works:

  const Box = styled.div`
    max-height: calc(100px + 200px + 300px); // This comment no longer breaks parsing
    background-color: green;
  `;

• 7ff7002: Fix: Contain invalid CSS syntax to just the affected line

  In styled-components v6, invalid CSS syntax (like unbalanced braces) could cause all subsequent styles to be ignored. This fix ensures that malformed CSS only affects the specific declaration, not subsequent valid styles.

  Example that now works:

  const Circle = styled.div`
    width: 100px;
    line-height: ${() => '14px}'}; // ⛔️ This malformed line is dropped
    background-color: green; // ✅ Now preserved (was ignored in v6)
  `;