Fix #4395: CSS minifier drops parentheses around nested or in @media rules#4405
Open
cobyfrombrooklyn-bot wants to merge 1 commit intoevanw:mainfrom
Open
Fix #4395: CSS minifier drops parentheses around nested or in @media rules#4405cobyfrombrooklyn-bot wants to merge 1 commit intoevanw:mainfrom
cobyfrombrooklyn-bot wants to merge 1 commit intoevanw:mainfrom
Conversation
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When minifying
@media only screen and ((min-width: 10px) or (min-height: 10px)), the outer parentheses around theorcondition were dropped, producing invalid CSS:The CSS spec requires
orclauses to be parenthesized when used after a media type withand. Without the outer parens, browsers ignore the entire media query.Fix
In
css_printer.go, when printingMQType.AndOrNull, passmqNeedsParensif the inner query is anMQBinarywithOroperator.Test
Added 3 test cases in
css_printer_test.goforTestAtMedia:only screen and ((min-width: 10px) or (min-height: 10px))preserves outer parensscreen and ((a) or (b))preserves outer parensAll tests fail without the fix, pass with it. Full test suite passes on macOS ARM (Apple Silicon).
Fixes #4395