From cb86c4ad5b22d9650918273e07c5ffd0c1f9b97b Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 21 Dec 2022 01:36:22 +0300 Subject: [PATCH 1/2] feat(css/prefixer): any-link fallback --- crates/swc_atoms/words.txt | 1 + .../data/prefixes_and_browsers.json | 24 + crates/swc_css_prefixer/src/prefixer.rs | 90 ++- .../tests/fixture/any-link/input.css | 120 +++ .../tests/fixture/any-link/output.css | 700 ++++++++++++++++++ .../any-link/output.defaults-not-ie-11.css | 92 +++ .../tests/fixture/grouping-rule/output.css | 4 + 7 files changed, 1030 insertions(+), 1 deletion(-) diff --git a/crates/swc_atoms/words.txt b/crates/swc_atoms/words.txt index e9caaf1fd916..31505523719b 100644 --- a/crates/swc_atoms/words.txt +++ b/crates/swc_atoms/words.txt @@ -936,6 +936,7 @@ annotation-xml anonymous antiquewhite any +any-link appWorkspace appearance apple-touch-icon diff --git a/crates/swc_css_prefixer/data/prefixes_and_browsers.json b/crates/swc_css_prefixer/data/prefixes_and_browsers.json index 697041032cea..bebde446ce13 100644 --- a/crates/swc_css_prefixer/data/prefixes_and_browsers.json +++ b/crates/swc_css_prefixer/data/prefixes_and_browsers.json @@ -101,6 +101,30 @@ "firefox": "49" } ], + ":any-link-fallback": [ + { + "chrome": "4", + "edge": "12", + "safari": "3", + "firefox": "2", + "opera": "10", + "ie": "6", + "ios": "3.2", + "samsung": "4", + "android": "2.1" + }, + { + "chrome": "14", + "edge": "17", + "safari": "6", + "firefox": "2", + "opera": "21.1", + "ie": "11", + "ios": "5.1", + "samsung": "4", + "android": "4.3" + } + ], ":-webkit-full-screen": [ { diff --git a/crates/swc_css_prefixer/src/prefixer.rs b/crates/swc_css_prefixer/src/prefixer.rs index da1c2a0ac236..9108a66f49af 100644 --- a/crates/swc_css_prefixer/src/prefixer.rs +++ b/crates/swc_css_prefixer/src/prefixer.rs @@ -669,6 +669,70 @@ where node.visit_mut_with(&mut FontFaceFormatOldSyntax {}); } +pub struct PseudoClassSearcher<'a> { + found: &'a mut bool, +} + +impl VisitMut for PseudoClassSearcher<'_> { + fn visit_mut_pseudo_class_selector(&mut self, n: &mut PseudoClassSelector) { + n.visit_mut_children_with(self); + + if n.name.value == js_word!("any-link") { + *self.found = true; + } + } +} + +pub struct PseudoClassAnyLinkFallback {} + +impl VisitMut for PseudoClassAnyLinkFallback { + fn visit_mut_selector_list(&mut self, n: &mut SelectorList) { + n.visit_mut_children_with(self); + + let mut found = false; + + n.visit_mut_with(&mut PseudoClassSearcher { found: &mut found }); + + if !found { + return; + } + + let mut new_children: Vec = vec![]; + + for complex_selector in &n.children { + let mut link_complex_selector = complex_selector.clone(); + + replace_pseudo_class_selector_name(&mut link_complex_selector, "any-link", "link"); + + if link_complex_selector.eq_ignore_span(complex_selector) { + new_children.push(complex_selector.clone()); + + continue; + } + + let mut visited_complex_selectors = complex_selector.clone(); + + replace_pseudo_class_selector_name( + &mut visited_complex_selectors, + "any-link", + "visited", + ); + + new_children.push(link_complex_selector); + new_children.push(visited_complex_selectors); + } + + n.children = new_children; + } +} + +pub fn pseudo_class_any_link_fallback(node: &mut N) +where + N: VisitMutWith, +{ + node.visit_mut_with(&mut PseudoClassAnyLinkFallback {}); +} + macro_rules! to_ident { ($val:expr) => {{ ComponentValue::Ident(Box::new(Ident { @@ -875,7 +939,6 @@ impl VisitMut for Prefixer { fn visit_mut_import_conditions(&mut self, import_conditions: &mut ImportConditions) { import_conditions.visit_mut_children_with(self); - // ComponentValue::Declaration(declaration) if !self.added_declarations.is_empty() { if let Some(supports) = import_conditions.supports.take() { let mut conditions = Vec::with_capacity(1 + self.added_declarations.len()); @@ -1036,6 +1099,31 @@ impl VisitMut for Prefixer { n.visit_mut_children_with(self); + // `:any-link` fallback generates only for old browsers, which doesn't support + // `-webkit and `-moz` prefixes + if should_prefix(":any-link-fallback", self.env, false) { + let mut new_prelude = n.prelude.clone(); + + pseudo_class_any_link_fallback(&mut new_prelude); + + if !n.prelude.eq_ignore_span(&new_prelude) { + let qualified_rule = Box::new(QualifiedRule { + span: DUMMY_SP, + prelude: new_prelude, + block: original_simple_block.clone(), + }); + + // TODO refactor and avoid using prefix + if self.simple_block.is_none() { + self.added_top_rules + .push((Prefix::Webkit, Rule::QualifiedRule(qualified_rule))); + } else { + self.added_qualified_rules + .push((Prefix::Webkit, qualified_rule)); + } + } + } + if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { let mut new_webkit_prelude = n.prelude.clone(); diff --git a/crates/swc_css_prefixer/tests/fixture/any-link/input.css b/crates/swc_css_prefixer/tests/fixture/any-link/input.css index b0bae9142f7f..f29ca3f7f20d 100644 --- a/crates/swc_css_prefixer/tests/fixture/any-link/input.css +++ b/crates/swc_css_prefixer/tests/fixture/any-link/input.css @@ -1,3 +1,123 @@ a:any-link { color: red; } + +nav :any-link > span, foo > bar { + background-color: yellow; +} + +:any-link { + order: 1; +} + +:aNy-LiNK { + order: 1.1; +} + +:any-link, +ul a:any-link > span { + order: 2; +} + +:any-link :any-link { + order: 3; +} + +:any-link(.ignore) { + order: 4; +} + +.foo :any-link { + order: 5; +} + +.foo:any-link { + order: 6; +} + +.foo:is(:any-link) { + order: 7; +} + +:any-link::before, +:any-link:before { + order: 8; +} + +::before:any-link, +:before:any-link { + order: 8.1; +} + +a:any-link { + order: 9; +} + +area:any-link { + order: 10; +} + +[hidden]area:any-link { + order: 10.1; +} + +AREA:any-link { + order: 10.2; +} + +area :any-link { + order: 11; +} + +area > :any-link { + order: 12; +} + +div:any-link { + order: 13; +} + +:any-link + input[type=file]:hover::file-selector-button { + order: 14; +} + +:any-link + input[type=file]::file-selector-button:hover { + order: 15; +} + +a:any-link, +b { + order: 16; +} + +.any > .class:any-link[attr]::before:focus { + order: 100.1; +} + +.any > .class[attr]:any-link::before:focus { + order: 100.2; +} + +.any > .class[attr]:any-link::before:focus { + order: 100.3; +} + +.any > .class:any-link[attr]:focus::before { + order: 101.1; +} + +.any > .class[attr]:any-link:focus::before { + order: 101.2; +} + +.any > .class[attr]:any-link:focus::before { + order: 101.3; +} + +.any > .class[attr]:focus:any-link::before { + order: 101.3; +} + +.any + :any-link + .other { + order: 101.4; +} \ No newline at end of file diff --git a/crates/swc_css_prefixer/tests/fixture/any-link/output.css b/crates/swc_css_prefixer/tests/fixture/any-link/output.css index 5602496495f5..8e4448ba8c3d 100644 --- a/crates/swc_css_prefixer/tests/fixture/any-link/output.css +++ b/crates/swc_css_prefixer/tests/fixture/any-link/output.css @@ -1,3 +1,7 @@ +a:link, +a:visited { + color: red; +} a:-webkit-any-link { color: red; } @@ -7,3 +11,699 @@ a:-moz-any-link { a:any-link { color: red; } +nav :link > span, +nav :visited > span, +foo > bar { + background-color: yellow; +} +nav :-webkit-any-link > span, +foo > bar { + background-color: yellow; +} +nav :-moz-any-link > span, +foo > bar { + background-color: yellow; +} +nav :any-link > span, +foo > bar { + background-color: yellow; +} +:link, +:visited { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + order: 1; +} +:-webkit-any-link { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + order: 1; +} +:-moz-any-link { + -moz-box-ordinal-group: 2; + order: 1; +} +:any-link { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -moz-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; +} +:link, +:visited { + -webkit-box-ordinal-group: 1.1; + -webkit-order: 1.1; + -moz-box-ordinal-group: 1.1; + order: 1.1; +} +:-webkit-any-link { + -webkit-box-ordinal-group: 1.1; + -webkit-order: 1.1; + -moz-box-ordinal-group: 1.1; + order: 1.1; +} +:-moz-any-link { + order: 1.1; +} +:aNy-LiNK { + -webkit-box-ordinal-group: 1.1; + -webkit-order: 1.1; + -moz-box-ordinal-group: 1.1; + -ms-flex-order: 1.1; + order: 1.1; +} +:link, +:visited, +ul a:link > span, +ul a:visited > span { + -webkit-box-ordinal-group: 3; + -webkit-order: 2; + order: 2; +} +:-webkit-any-link, +ul a:-webkit-any-link > span { + -webkit-box-ordinal-group: 3; + -webkit-order: 2; + order: 2; +} +:-moz-any-link, +ul a:-moz-any-link > span { + -moz-box-ordinal-group: 3; + order: 2; +} +:any-link, +ul a:any-link > span { + -webkit-box-ordinal-group: 3; + -webkit-order: 2; + -moz-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; +} +:link :link, +:visited :visited { + -webkit-box-ordinal-group: 4; + -webkit-order: 3; + order: 3; +} +:-webkit-any-link :-webkit-any-link { + -webkit-box-ordinal-group: 4; + -webkit-order: 3; + order: 3; +} +:-moz-any-link :-moz-any-link { + -moz-box-ordinal-group: 4; + order: 3; +} +:any-link :any-link { + -webkit-box-ordinal-group: 4; + -webkit-order: 3; + -moz-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; +} +:link(.ignore), +:visited(.ignore) { + -webkit-box-ordinal-group: 5; + -webkit-order: 4; + order: 4; +} +:-webkit-any-link(.ignore) { + -webkit-box-ordinal-group: 5; + -webkit-order: 4; + order: 4; +} +:-moz-any-link(.ignore) { + -moz-box-ordinal-group: 5; + order: 4; +} +:any-link(.ignore) { + -webkit-box-ordinal-group: 5; + -webkit-order: 4; + -moz-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; +} +.foo :link, +.foo :visited { + -webkit-box-ordinal-group: 6; + -webkit-order: 5; + order: 5; +} +.foo :-webkit-any-link { + -webkit-box-ordinal-group: 6; + -webkit-order: 5; + order: 5; +} +.foo :-moz-any-link { + -moz-box-ordinal-group: 6; + order: 5; +} +.foo :any-link { + -webkit-box-ordinal-group: 6; + -webkit-order: 5; + -moz-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; +} +.foo:link, +.foo:visited { + -webkit-box-ordinal-group: 7; + -webkit-order: 6; + order: 6; +} +.foo:-webkit-any-link { + -webkit-box-ordinal-group: 7; + -webkit-order: 6; + order: 6; +} +.foo:-moz-any-link { + -moz-box-ordinal-group: 7; + order: 6; +} +.foo:any-link { + -webkit-box-ordinal-group: 7; + -webkit-order: 6; + -moz-box-ordinal-group: 7; + -ms-flex-order: 6; + order: 6; +} +.foo:is(:link), +.foo:is(:visited) { + -webkit-box-ordinal-group: 8; + -webkit-order: 7; + order: 7; +} +.foo:is(:-webkit-any-link) { + -webkit-box-ordinal-group: 8; + -webkit-order: 7; + order: 7; +} +.foo:is(:-moz-any-link) { + -moz-box-ordinal-group: 8; + order: 7; +} +.foo:is(:any-link) { + -webkit-box-ordinal-group: 8; + -webkit-order: 7; + -moz-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; +} +:link::before, +:visited::before, +:link:before, +:visited:before { + -webkit-box-ordinal-group: 9; + -webkit-order: 8; + order: 8; +} +:-webkit-any-link::before, +:-webkit-any-link:before { + -webkit-box-ordinal-group: 9; + -webkit-order: 8; + order: 8; +} +:-moz-any-link::before, +:-moz-any-link:before { + -moz-box-ordinal-group: 9; + order: 8; +} +:any-link::before, +:any-link:before { + -webkit-box-ordinal-group: 9; + -webkit-order: 8; + -moz-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; +} +::before:link, +::before:visited, +:before:link, +:before:visited { + -webkit-box-ordinal-group: 8.1; + -webkit-order: 8.1; + -moz-box-ordinal-group: 8.1; + order: 8.1; +} +::before:-webkit-any-link, +:before:-webkit-any-link { + -webkit-box-ordinal-group: 8.1; + -webkit-order: 8.1; + -moz-box-ordinal-group: 8.1; + order: 8.1; +} +::before:-moz-any-link, +:before:-moz-any-link { + order: 8.1; +} +::before:any-link, +:before:any-link { + -webkit-box-ordinal-group: 8.1; + -webkit-order: 8.1; + -moz-box-ordinal-group: 8.1; + -ms-flex-order: 8.1; + order: 8.1; +} +a:link, +a:visited { + -webkit-box-ordinal-group: 10; + -webkit-order: 9; + order: 9; +} +a:-webkit-any-link { + -webkit-box-ordinal-group: 10; + -webkit-order: 9; + order: 9; +} +a:-moz-any-link { + -moz-box-ordinal-group: 10; + order: 9; +} +a:any-link { + -webkit-box-ordinal-group: 10; + -webkit-order: 9; + -moz-box-ordinal-group: 10; + -ms-flex-order: 9; + order: 9; +} +area:link, +area:visited { + -webkit-box-ordinal-group: 11; + -webkit-order: 10; + order: 10; +} +area:-webkit-any-link { + -webkit-box-ordinal-group: 11; + -webkit-order: 10; + order: 10; +} +area:-moz-any-link { + -moz-box-ordinal-group: 11; + order: 10; +} +area:any-link { + -webkit-box-ordinal-group: 11; + -webkit-order: 10; + -moz-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; +} +[hidden] area:link, +[hidden] area:visited { + -webkit-box-ordinal-group: 10.1; + -webkit-order: 10.1; + -moz-box-ordinal-group: 10.1; + order: 10.1; +} +[hidden] area:-webkit-any-link { + -webkit-box-ordinal-group: 10.1; + -webkit-order: 10.1; + -moz-box-ordinal-group: 10.1; + order: 10.1; +} +[hidden] area:-moz-any-link { + order: 10.1; +} +[hidden] area:any-link { + -webkit-box-ordinal-group: 10.1; + -webkit-order: 10.1; + -moz-box-ordinal-group: 10.1; + -ms-flex-order: 10.1; + order: 10.1; +} +AREA:link, +AREA:visited { + -webkit-box-ordinal-group: 10.2; + -webkit-order: 10.2; + -moz-box-ordinal-group: 10.2; + order: 10.2; +} +AREA:-webkit-any-link { + -webkit-box-ordinal-group: 10.2; + -webkit-order: 10.2; + -moz-box-ordinal-group: 10.2; + order: 10.2; +} +AREA:-moz-any-link { + order: 10.2; +} +AREA:any-link { + -webkit-box-ordinal-group: 10.2; + -webkit-order: 10.2; + -moz-box-ordinal-group: 10.2; + -ms-flex-order: 10.2; + order: 10.2; +} +area :link, +area :visited { + -webkit-box-ordinal-group: 12; + -webkit-order: 11; + order: 11; +} +area :-webkit-any-link { + -webkit-box-ordinal-group: 12; + -webkit-order: 11; + order: 11; +} +area :-moz-any-link { + -moz-box-ordinal-group: 12; + order: 11; +} +area :any-link { + -webkit-box-ordinal-group: 12; + -webkit-order: 11; + -moz-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; +} +area > :link, +area > :visited { + -webkit-box-ordinal-group: 13; + -webkit-order: 12; + order: 12; +} +area > :-webkit-any-link { + -webkit-box-ordinal-group: 13; + -webkit-order: 12; + order: 12; +} +area > :-moz-any-link { + -moz-box-ordinal-group: 13; + order: 12; +} +area > :any-link { + -webkit-box-ordinal-group: 13; + -webkit-order: 12; + -moz-box-ordinal-group: 13; + -ms-flex-order: 12; + order: 12; +} +div:link, +div:visited { + -webkit-box-ordinal-group: 14; + -webkit-order: 13; + order: 13; +} +div:-webkit-any-link { + -webkit-box-ordinal-group: 14; + -webkit-order: 13; + order: 13; +} +div:-moz-any-link { + -moz-box-ordinal-group: 14; + order: 13; +} +div:any-link { + -webkit-box-ordinal-group: 14; + -webkit-order: 13; + -moz-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; +} +:link + input[type=file]:hover::file-selector-button, +:visited + input[type=file]:hover::file-selector-button { + -webkit-box-ordinal-group: 15; + -webkit-order: 14; + order: 14; +} +:-webkit-any-link + input[type=file]:hover::-webkit-file-upload-button { + -webkit-box-ordinal-group: 15; + -webkit-order: 14; + order: 14; +} +:-moz-any-link + input[type=file]:hover::file-selector-button { + -moz-box-ordinal-group: 15; + order: 14; +} +:any-link + input[type=file]:hover::-ms-browse { + -ms-flex-order: 14; + order: 14; +} +:any-link + input[type=file]:hover::file-selector-button { + -webkit-box-ordinal-group: 15; + -webkit-order: 14; + -moz-box-ordinal-group: 15; + -ms-flex-order: 14; + order: 14; +} +:link + input[type=file]:hover::-webkit-file-upload-button, +:visited + input[type=file]:hover::-webkit-file-upload-button { + -webkit-box-ordinal-group: 15; + -webkit-order: 14; + order: 14; +} +:link + input[type=file]:hover::-ms-browse, +:visited + input[type=file]:hover::-ms-browse { + -webkit-box-ordinal-group: 15; + -webkit-order: 14; + order: 14; +} +:link + input[type=file]::file-selector-button:hover, +:visited + input[type=file]::file-selector-button:hover { + -webkit-box-ordinal-group: 16; + -webkit-order: 15; + order: 15; +} +:-webkit-any-link + input[type=file]::-webkit-file-upload-button:hover { + -webkit-box-ordinal-group: 16; + -webkit-order: 15; + order: 15; +} +:-moz-any-link + input[type=file]::file-selector-button:hover { + -moz-box-ordinal-group: 16; + order: 15; +} +:any-link + input[type=file]::-ms-browse:hover { + -ms-flex-order: 15; + order: 15; +} +:any-link + input[type=file]::file-selector-button:hover { + -webkit-box-ordinal-group: 16; + -webkit-order: 15; + -moz-box-ordinal-group: 16; + -ms-flex-order: 15; + order: 15; +} +:link + input[type=file]::-webkit-file-upload-button:hover, +:visited + input[type=file]::-webkit-file-upload-button:hover { + -webkit-box-ordinal-group: 16; + -webkit-order: 15; + order: 15; +} +:link + input[type=file]::-ms-browse:hover, +:visited + input[type=file]::-ms-browse:hover { + -webkit-box-ordinal-group: 16; + -webkit-order: 15; + order: 15; +} +a:link, +a:visited, +b { + -webkit-box-ordinal-group: 17; + -webkit-order: 16; + order: 16; +} +a:-webkit-any-link, +b { + -webkit-box-ordinal-group: 17; + -webkit-order: 16; + order: 16; +} +a:-moz-any-link, +b { + -moz-box-ordinal-group: 17; + order: 16; +} +a:any-link, +b { + -webkit-box-ordinal-group: 17; + -webkit-order: 16; + -moz-box-ordinal-group: 17; + -ms-flex-order: 16; + order: 16; +} +.any > .class:link[attr]::before:focus, +.any > .class:visited[attr]::before:focus { + -webkit-box-ordinal-group: 100.1; + -webkit-order: 100.1; + -moz-box-ordinal-group: 100.1; + order: 100.1; +} +.any > .class:-webkit-any-link[attr]::before:focus { + -webkit-box-ordinal-group: 100.1; + -webkit-order: 100.1; + -moz-box-ordinal-group: 100.1; + order: 100.1; +} +.any > .class:-moz-any-link[attr]::before:focus { + order: 100.1; +} +.any > .class:any-link[attr]::before:focus { + -webkit-box-ordinal-group: 100.1; + -webkit-order: 100.1; + -moz-box-ordinal-group: 100.1; + -ms-flex-order: 100.1; + order: 100.1; +} +.any > .class[attr]:link::before:focus, +.any > .class[attr]:visited::before:focus { + -webkit-box-ordinal-group: 100.2; + -webkit-order: 100.2; + -moz-box-ordinal-group: 100.2; + order: 100.2; +} +.any > .class[attr]:-webkit-any-link::before:focus { + -webkit-box-ordinal-group: 100.2; + -webkit-order: 100.2; + -moz-box-ordinal-group: 100.2; + order: 100.2; +} +.any > .class[attr]:-moz-any-link::before:focus { + order: 100.2; +} +.any > .class[attr]:any-link::before:focus { + -webkit-box-ordinal-group: 100.2; + -webkit-order: 100.2; + -moz-box-ordinal-group: 100.2; + -ms-flex-order: 100.2; + order: 100.2; +} +.any > .class[attr]:link::before:focus, +.any > .class[attr]:visited::before:focus { + -webkit-box-ordinal-group: 100.3; + -webkit-order: 100.3; + -moz-box-ordinal-group: 100.3; + order: 100.3; +} +.any > .class[attr]:-webkit-any-link::before:focus { + -webkit-box-ordinal-group: 100.3; + -webkit-order: 100.3; + -moz-box-ordinal-group: 100.3; + order: 100.3; +} +.any > .class[attr]:-moz-any-link::before:focus { + order: 100.3; +} +.any > .class[attr]:any-link::before:focus { + -webkit-box-ordinal-group: 100.3; + -webkit-order: 100.3; + -moz-box-ordinal-group: 100.3; + -ms-flex-order: 100.3; + order: 100.3; +} +.any > .class:link[attr]:focus::before, +.any > .class:visited[attr]:focus::before { + -webkit-box-ordinal-group: 101.1; + -webkit-order: 101.1; + -moz-box-ordinal-group: 101.1; + order: 101.1; +} +.any > .class:-webkit-any-link[attr]:focus::before { + -webkit-box-ordinal-group: 101.1; + -webkit-order: 101.1; + -moz-box-ordinal-group: 101.1; + order: 101.1; +} +.any > .class:-moz-any-link[attr]:focus::before { + order: 101.1; +} +.any > .class:any-link[attr]:focus::before { + -webkit-box-ordinal-group: 101.1; + -webkit-order: 101.1; + -moz-box-ordinal-group: 101.1; + -ms-flex-order: 101.1; + order: 101.1; +} +.any > .class[attr]:link:focus::before, +.any > .class[attr]:visited:focus::before { + -webkit-box-ordinal-group: 101.2; + -webkit-order: 101.2; + -moz-box-ordinal-group: 101.2; + order: 101.2; +} +.any > .class[attr]:-webkit-any-link:focus::before { + -webkit-box-ordinal-group: 101.2; + -webkit-order: 101.2; + -moz-box-ordinal-group: 101.2; + order: 101.2; +} +.any > .class[attr]:-moz-any-link:focus::before { + order: 101.2; +} +.any > .class[attr]:any-link:focus::before { + -webkit-box-ordinal-group: 101.2; + -webkit-order: 101.2; + -moz-box-ordinal-group: 101.2; + -ms-flex-order: 101.2; + order: 101.2; +} +.any > .class[attr]:link:focus::before, +.any > .class[attr]:visited:focus::before { + -webkit-box-ordinal-group: 101.3; + -webkit-order: 101.3; + -moz-box-ordinal-group: 101.3; + order: 101.3; +} +.any > .class[attr]:-webkit-any-link:focus::before { + -webkit-box-ordinal-group: 101.3; + -webkit-order: 101.3; + -moz-box-ordinal-group: 101.3; + order: 101.3; +} +.any > .class[attr]:-moz-any-link:focus::before { + order: 101.3; +} +.any > .class[attr]:any-link:focus::before { + -webkit-box-ordinal-group: 101.3; + -webkit-order: 101.3; + -moz-box-ordinal-group: 101.3; + -ms-flex-order: 101.3; + order: 101.3; +} +.any > .class[attr]:focus:link::before, +.any > .class[attr]:focus:visited::before { + -webkit-box-ordinal-group: 101.3; + -webkit-order: 101.3; + -moz-box-ordinal-group: 101.3; + order: 101.3; +} +.any > .class[attr]:focus:-webkit-any-link::before { + -webkit-box-ordinal-group: 101.3; + -webkit-order: 101.3; + -moz-box-ordinal-group: 101.3; + order: 101.3; +} +.any > .class[attr]:focus:-moz-any-link::before { + order: 101.3; +} +.any > .class[attr]:focus:any-link::before { + -webkit-box-ordinal-group: 101.3; + -webkit-order: 101.3; + -moz-box-ordinal-group: 101.3; + -ms-flex-order: 101.3; + order: 101.3; +} +.any + :link + .other, +.any + :visited + .other { + -webkit-box-ordinal-group: 101.4; + -webkit-order: 101.4; + -moz-box-ordinal-group: 101.4; + order: 101.4; +} +.any + :-webkit-any-link + .other { + -webkit-box-ordinal-group: 101.4; + -webkit-order: 101.4; + -moz-box-ordinal-group: 101.4; + order: 101.4; +} +.any + :-moz-any-link + .other { + order: 101.4; +} +.any + :any-link + .other { + -webkit-box-ordinal-group: 101.4; + -webkit-order: 101.4; + -moz-box-ordinal-group: 101.4; + -ms-flex-order: 101.4; + order: 101.4; +} diff --git a/crates/swc_css_prefixer/tests/fixture/any-link/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/any-link/output.defaults-not-ie-11.css index 8978892b632f..b5c99a735776 100644 --- a/crates/swc_css_prefixer/tests/fixture/any-link/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/any-link/output.defaults-not-ie-11.css @@ -1,3 +1,95 @@ a:any-link { color: red; } +nav :any-link > span, +foo > bar { + background-color: yellow; +} +:any-link { + order: 1; +} +:aNy-LiNK { + order: 1.1; +} +:any-link, +ul a:any-link > span { + order: 2; +} +:any-link :any-link { + order: 3; +} +:any-link(.ignore) { + order: 4; +} +.foo :any-link { + order: 5; +} +.foo:any-link { + order: 6; +} +.foo:is(:any-link) { + order: 7; +} +:any-link::before, +:any-link:before { + order: 8; +} +::before:any-link, +:before:any-link { + order: 8.1; +} +a:any-link { + order: 9; +} +area:any-link { + order: 10; +} +[hidden] area:any-link { + order: 10.1; +} +AREA:any-link { + order: 10.2; +} +area :any-link { + order: 11; +} +area > :any-link { + order: 12; +} +div:any-link { + order: 13; +} +:any-link + input[type=file]:hover::file-selector-button { + order: 14; +} +:any-link + input[type=file]::file-selector-button:hover { + order: 15; +} +a:any-link, +b { + order: 16; +} +.any > .class:any-link[attr]::before:focus { + order: 100.1; +} +.any > .class[attr]:any-link::before:focus { + order: 100.2; +} +.any > .class[attr]:any-link::before:focus { + order: 100.3; +} +.any > .class:any-link[attr]:focus::before { + order: 101.1; +} +.any > .class[attr]:any-link:focus::before { + order: 101.2; +} +.any > .class[attr]:any-link:focus::before { + order: 101.3; +} +.any > .class[attr]:focus:any-link::before { + order: 101.3; +} +.any + :any-link + .other { + order: 101.4; +} diff --git a/crates/swc_css_prefixer/tests/fixture/grouping-rule/output.css b/crates/swc_css_prefixer/tests/fixture/grouping-rule/output.css index 998f86210b2e..693e2e8fa1ed 100644 --- a/crates/swc_css_prefixer/tests/fixture/grouping-rule/output.css +++ b/crates/swc_css_prefixer/tests/fixture/grouping-rule/output.css @@ -63,6 +63,10 @@ .g:read-write { background: #fff; } +.example:link:read-only, +.example:visited:read-only { + color: red; +} .example:-webkit-any-link:read-only { color: red; } From 2060d56e8b1209cd8d98a524dd81d463a5dc23a3 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 21 Dec 2022 01:42:48 +0300 Subject: [PATCH 2/2] fix: duplicates in atoms --- crates/swc_atoms/words.txt | 9 --------- 1 file changed, 9 deletions(-) diff --git a/crates/swc_atoms/words.txt b/crates/swc_atoms/words.txt index 31505523719b..f281a5e8c382 100644 --- a/crates/swc_atoms/words.txt +++ b/crates/swc_atoms/words.txt @@ -1,5 +1,4 @@ * -* -infinity -moz-activehyperlinktext -moz-animation @@ -12,8 +11,6 @@ -moz-animation-play-state -moz-animation-timing-function -moz-any --moz-any --moz-any -moz-appearance -moz-backface-visibility -moz-background-origin @@ -38,8 +35,6 @@ -moz-buttonhoverface -moz-buttonhovertext -moz-calc --moz-calc --moz-calc -moz-cellhighlight -moz-cellhighlighttext -moz-column-count @@ -59,8 +54,6 @@ -moz-dialog -moz-dialogtext -moz-document --moz-document --moz-document -moz-dragtargetzone -moz-eventreerow -moz-font-feature-settings @@ -71,8 +64,6 @@ -moz-hyperlinktext -moz-hyphens -moz-keyframes --moz-keyframes --moz-keyframes -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface