fix: Correctly enclose negated downleveled interval media queries in parens#332
Closed
LeoniePhiline wants to merge 3 commits intoparcel-bundler:masterfrom
Closed
fix: Correctly enclose negated downleveled interval media queries in parens#332LeoniePhiline wants to merge 3 commits intoparcel-bundler:masterfrom
LeoniePhiline wants to merge 3 commits intoparcel-bundler:masterfrom
Conversation
Merged
Member
|
Thanks for putting together all these options and sorry for my slow response. I decided to completely remove the |
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.
Fixes #320
Changes
Tests
Targets and range syntax
I changed relevant tests in
lib.rsfrom firefox 60 and 85 to firefox 62 and 63, as media feature range syntax was introduced with firefox 63.This takes into account that lightningcss currently treats range syntax and interval syntax as two different features. See also #331
It might be that some browsers first implemented range syntax without interval syntax, and added interval syntax later. However, this is not documented in the compatibility tables. Lightningcss considers interval syntax as not supported anywhere, even though, in reality, current Gecko and Blink (but not WebKit, apparently) do support interval syntax today.
As interval syntax is now (if this PR be merged) implemented by rendering a
MediaCondition::Operationof twoMediaFeature::Rangefeatures, the output depends on the range syntax target support. Therefore, there are now two versions of each interval media feature query test - one using range syntax (firefox >= 63) and one using traditional syntax (firefox <= 62).Test placement
I had been unsure where to put the new, initially failing test reproducing #320. Placing it right in the
media_querymodule seemed to be the right thing, but there is otherwise only a test forand(). All other tests - including media query tests - appear to be located inlib.rs. Should my added tests frommedia_query.rsbe migrated over intolib.rs?Complex implementation, benefits and possible alternatives
The implementation of the fix might appear somewhat contrived at first sight. Yet in terms of behavior it seems to me to be the cleanest solution.
The issue is that if the downleveling only happens in
impl<'i> ToCss for MediaFeature<'i>(as before the PR), then we cannot know if the feature is negated, the trait contract does not offer passing further options, except for the printerdest.Alternatives
A) Add a field to Printer
The
Printerstruct does have anin_calcboolean already - would it be the right thing to add anin_negated_media_conditionfield? This looks a little like abuse to me. However, is the implementation in this PR the better choice?Adding
in_negated_media_conditiontostruct Printerwould be an option. Feels wrong, but less complex.B) Always wrap expanded interval in parens in
impl<'i> ToCss for MediaFeature<'i>Any expanded media feature interval could be enclosed in parens.
However: This outputs unnecessary parens for non-negated queries.
E.g.
@media (200px >= width >= 100px)would result in@media ((max-width: 200px) and (min-width: 100px)), where@media (max-width: 200px) and (min-width: 100px)would be sufficient.C) Using the solution provided in the PR you are currently looking at
Complex code, but clean output.