Refactor logical properties to use :dir/:lang#131
Merged
devongovett merged 4 commits intomasterfrom Apr 5, 2022
Merged
Conversation
…into logical-refactor # Conflicts: # selectors/builder.rs # selectors/matching.rs # selectors/parser.rs # src/context.rs # src/lib.rs # src/logical.rs # src/properties/border.rs # src/properties/border_radius.rs # src/properties/mod.rs # src/rules/mod.rs # src/selector.rs # src/stylesheet.rs # src/vendor_prefix.rs
|
Hi :), It seems that when using target>0.5%, the following CSS is generated:
text-align: start/end are supported from Safari 3 according to CanIUse, so this should likely not be needed here. Is there a way to keep the simple start/end or at least having a setting here? |
|
EDIT: apparently I was too broad with >0.5%, and this compiled for browser we do not target. I changed it to "safari 13" and the markup is now much more simple :). |
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
2 participants
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.
The previous approach to compiling logical properties used CSS variables with some clever tricks to define conditional styles for ltr and rtl. However, it had an issue where CSS variables that are invalid cause the property using them to be reset to their initial value rather than the cascaded value. This is the invalid at computed value time part of the spec.
This changes our approach to instead use the
:dirselector instead. However, this is not supported by any browsers other than Firefox, so we fall back to:langusing a hard-coded list of RTL languages. This isn't perfect, but it's possibly the best we can do. Using an attribute selector (e.g.[dir="ltr"]) doesn't work right either because it affects nested elements too (e.g. rtl inside ltr inside rtl).:langis inherited correctly, just like:dir, and is much more widely supported.In addition to downleveling
:dirto:lang, we also downlevel:langwhen it is passed a list of languages rather than a single one. Support for multiple languages was added in Selectors Level 4, and is currently only supported in WebKit. For other browsers, we use:iswith multiple:langselectors inside, or:notfor the opposite case.We also now downlevel
:isto the older:-webkit-anyand:-moz-anypseudo classes. However, these only support simple selectors (no combinators), so if a combinator is seen, we bail out. Fixes #19.