Skip to content

Comments

Fix #4395: CSS minifier drops parentheses around nested or in @media rules#4405

Open
cobyfrombrooklyn-bot wants to merge 1 commit intoevanw:mainfrom
cobyfrombrooklyn-bot:fix-issue-4395
Open

Fix #4395: CSS minifier drops parentheses around nested or in @media rules#4405
cobyfrombrooklyn-bot wants to merge 1 commit intoevanw:mainfrom
cobyfrombrooklyn-bot:fix-issue-4395

Conversation

@cobyfrombrooklyn-bot
Copy link

When minifying @media only screen and ((min-width: 10px) or (min-height: 10px)), the outer parentheses around the or condition were dropped, producing invalid CSS:

/* Input */
@media only screen and ((min-width: 10px) or (min-height: 10px)) { color: blue }

/* Before (invalid) */
@media only screen and (min-width:10px)or (min-height:10px){color:blue}

/* After (correct) */
@media only screen and ((min-width:10px)or (min-height:10px)){color:blue}

The CSS spec requires or clauses to be parenthesized when used after a media type with and. Without the outer parens, browsers ignore the entire media query.

Fix

In css_printer.go, when printing MQType.AndOrNull, pass mqNeedsParens if the inner query is an MQBinary with Or operator.

Test

Added 3 test cases in css_printer_test.go for TestAtMedia:

  • Minified: only screen and ((min-width: 10px) or (min-height: 10px)) preserves outer parens
  • Minified: screen and ((a) or (b)) preserves outer parens
  • Pretty-printed: same input preserves structure

All tests fail without the fix, pass with it. Full test suite passes on macOS ARM (Apple Silicon).

Fixes #4395

When minifying @media only screen and ((min-width: 10px) or (min-height: 10px)),
the outer parentheses around the 'or' condition were being dropped, producing
invalid CSS: @media only screen and (min-width:10px)or (min-height:10px).

The CSS spec requires 'or' clauses to be nested inside parentheses when used
after a media type with 'and'. Without the outer parens, browsers ignore the
entire media query.

Fix: when printing MQType.AndOrNull, pass mqNeedsParens if the inner query
is an MQBinary with 'or' operator, ensuring the grouping parentheses are
preserved.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS minifier produces invalid output for @media rules

1 participant