swc-project/swc
1
1
Fork 0
mirror of https://github.com/swc-project/swc.git synced 2024-12-24 22:22:34 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(css/prefixer): Reduce duplicates (#5537)

Browse Source
This commit is contained in:
Alexander Akait 2022-08-18 01:06:18 +03:00 committed by GitHub
parent a9aadbe800
commit 0985c1546b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 133 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
crates/swc_css_prefixer/src/prefixer.rs
View File

@ -482,9 +482,9 @@ impl VisitMut for MediaFeatureResolutionReplacerOnLegacyVariant<'_> {
n.visit_mut_children_with(self);
if let MediaFeatureValue::Dimension(Dimension::Resolution(Resolution {
span: resolution_span,
value: resolution_value,
unit: resolution_unit,
..
})) = &n.value
{
let MediaFeatureName::Ident(Ident {
@ -506,14 +506,10 @@ impl VisitMut for MediaFeatureResolutionReplacerOnLegacyVariant<'_> {
_ => resolution_value.value,
};
n.value = MediaFeatureValue::Ratio(Ratio {
span: *resolution_span,
left: Number {
span: resolution_value.span,
value: left,
raw: None,
},
right: None,
n.value = MediaFeatureValue::Number(Number {
span: resolution_value.span,
value: left,
raw: None,
});
}
}
@ -572,13 +568,12 @@ impl Prefixer {
impl VisitMut for Prefixer {
fn visit_mut_stylesheet(&mut self, stylesheet: &mut Stylesheet) {
let mut new_rules = Vec::with_capacity(stylesheet.rules.len());
let original_rules = stylesheet.rules.clone();
for mut rule in take(&mut stylesheet.rules) {
rule.visit_mut_children_with(self);
for mut added_rule in take(&mut self.added_top_rules) {
let need_skip = original_rules
let need_skip = new_rules
.iter()
.any(|existing_rule| added_rule.1.eq_ignore_span(existing_rule));
@ -603,7 +598,6 @@ impl VisitMut for Prefixer {
stylesheet.rules = new_rules;
}
// TODO `@import` test
// TODO `selector()` supports
fn visit_mut_at_rule(&mut self, at_rule: &mut AtRule) {
let original_simple_block = at_rule.block.clone();
@ -611,16 +605,16 @@ impl VisitMut for Prefixer {
at_rule.visit_mut_children_with(self);
match &at_rule.name {
AtRuleName::Ident(Ident { value, .. })
AtRuleName::Ident(Ident { span, value, .. })
if value.as_ref().eq_ignore_ascii_case("viewport") =>
{
if should_prefix("@-o-viewport", self.env, false) {
self.add_at_rule(
Prefix::Ms,
&AtRule {
span: DUMMY_SP,
span: at_rule.span,
name: AtRuleName::Ident(Ident {
span: DUMMY_SP,
span: *span,
value: "-ms-viewport".into(),
raw: None,
}),
@ -634,9 +628,9 @@ impl VisitMut for Prefixer {
self.add_at_rule(
Prefix::O,
&AtRule {
span: DUMMY_SP,
span: at_rule.span,
name: AtRuleName::Ident(Ident {
span: DUMMY_SP,
span: *span,
value: "-o-viewport".into(),
raw: None,
}),
@ -646,16 +640,16 @@ impl VisitMut for Prefixer {
);
}
}
AtRuleName::Ident(Ident { value, .. })
AtRuleName::Ident(Ident { span, value, .. })
if value.as_ref().eq_ignore_ascii_case("keyframes") =>
{
if should_prefix("@-webkit-keyframes", self.env, false) {
self.add_at_rule(
Prefix::Webkit,
&AtRule {
span: DUMMY_SP,
span: at_rule.span,
name: AtRuleName::Ident(Ident {
span: DUMMY_SP,
span: *span,
value: "-webkit-keyframes".into(),
raw: None,
}),
@ -669,9 +663,9 @@ impl VisitMut for Prefixer {
self.add_at_rule(
Prefix::Moz,
&AtRule {
span: DUMMY_SP,
span: at_rule.span,
name: AtRuleName::Ident(Ident {
span: DUMMY_SP,
span: *span,
value: "-moz-keyframes".into(),
raw: None,
}),
@ -685,7 +679,7 @@ impl VisitMut for Prefixer {
self.add_at_rule(
Prefix::O,
&AtRule {
span: DUMMY_SP,
span: at_rule.span,
name: AtRuleName::Ident(Ident {
span: DUMMY_SP,
value: "-o-keyframes".into(),
@ -701,6 +695,41 @@ impl VisitMut for Prefixer {
}
}
fn visit_mut_import_prelude(&mut self, import_prelude: &mut ImportPrelude) {
import_prelude.visit_mut_children_with(self);
if !self.added_declarations.is_empty() {
if let Some(ImportPreludeSupportsType::Declaration(declaration)) =
import_prelude.supports.take()
{
let span = declaration.span;
let mut conditions = Vec::with_capacity(1 + self.added_declarations.len());
conditions.push(SupportsConditionType::SupportsInParens(
SupportsInParens::Feature(SupportsFeature::Declaration(declaration)),
));
for n in take(&mut self.added_declarations) {
let supports_condition_type = SupportsConditionType::Or(SupportsOr {
span: DUMMY_SP,
keyword: Ident {
span: DUMMY_SP,
value: js_word!("or"),
raw: None,
},
condition: SupportsInParens::Feature(SupportsFeature::Declaration(n)),
});
conditions.push(supports_condition_type);
}
import_prelude.supports = Some(ImportPreludeSupportsType::SupportsCondition(
SupportsCondition { span, conditions },
));
}
}
}
fn visit_mut_supports_condition(&mut self, supports_condition: &mut SupportsCondition) {
let old_supports_condition = self.supports_condition.take();
@ -765,54 +794,59 @@ impl VisitMut for Prefixer {
fn visit_mut_media_query_list(&mut self, media_query_list: &mut MediaQueryList) {
media_query_list.visit_mut_children_with(self);
let mut new_queries = Vec::with_capacity(media_query_list.queries.len());
let mut new_queries = vec![];
for n in take(&mut media_query_list.queries) {
// TODO avoid duplicates
for n in &media_query_list.queries {
if should_prefix("-webkit-min-device-pixel-ratio", self.env, false) {
let mut new_webkit_value = n.clone();
let mut new_media_query = n.clone();
replace_media_feature_resolution_on_legacy_variant(
&mut new_webkit_value,
&mut new_media_query,
"min-resolution",
"-webkit-min-device-pixel-ratio",
);
replace_media_feature_resolution_on_legacy_variant(
&mut new_webkit_value,
&mut new_media_query,
"max-resolution",
"-webkit-max-device-pixel-ratio",
);
if n != new_webkit_value {
new_queries.push(new_webkit_value);
let need_skip = media_query_list.queries.iter().any(|existing_media_query| {
new_media_query.eq_ignore_span(existing_media_query)
});
if !need_skip {
new_queries.push(new_media_query);
}
}
if should_prefix("min--moz-device-pixel-ratio", self.env, false) {
let mut new_moz_value = n.clone();
let mut new_media_query = n.clone();
replace_media_feature_resolution_on_legacy_variant(
&mut new_moz_value,
&mut new_media_query,
"min-resolution",
"min--moz-device-pixel-ratio",
);
replace_media_feature_resolution_on_legacy_variant(
&mut new_moz_value,
&mut new_media_query,
"max-resolution",
"max--moz-device-pixel-ratio",
);
if n != new_moz_value {
new_queries.push(new_moz_value);
let need_skip = media_query_list.queries.iter().any(|existing_media_query| {
new_media_query.eq_ignore_span(existing_media_query)
});
if !need_skip {
new_queries.push(new_media_query);
}
}
// TODO opera support
new_queries.push(n);
}
media_query_list.queries = new_queries;
media_query_list.queries.extend(new_queries);
}
fn visit_mut_qualified_rule(&mut self, n: &mut QualifiedRule) {

3
crates/swc_css_prefixer/tests/fixture/autofill/output.css
View File

@ -4,9 +4,6 @@ input:-webkit-autofill {
input:autofill {
border: 3px solid blue;
}
input:-webkit-autofill {
border: 3px solid blue;
}
input:AUTOFILL {
border: 3px solid blue;
}

3
crates/swc_css_prefixer/tests/fixture/autofill/output.defaults-not-ie-11.css
View File

@ -4,9 +4,6 @@ input:-webkit-autofill {
input:autofill {
border: 3px solid blue;
}
input:-webkit-autofill {
border: 3px solid blue;
}
input:AUTOFILL {
border: 3px solid blue;
}

1
crates/swc_css_prefixer/tests/fixture/duplicate-at-rule-3/output.css
View File

@ -1,3 +1,4 @@
@-webkit-keyframes anim {}
@-moz-keyframes anim {}
@-o-keyframes anim {}
@keyframes anim {}

11
crates/swc_css_prefixer/tests/fixture/resolution/input.css
View File

@ -1,3 +1,8 @@
@import url('styles.css') screen and (min-resolution: 2dppx);
@import url("styles.css") supports(display: flex) screen and (max-width: 400px);
@import url("styles.css") supports(not (display: flex)) screen and (max-width: 400px);
@import url('styles.css') supports(display: flex) screen and (min-resolution: 2dppx);
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
.class {
color: red;
@ -87,4 +92,8 @@
@media only screen and (min-resolution: 124.8dpi) { }
@media (min-resolution: 113.38dpcm) { }
@media (min-resolution: 113.38dpcm) { }
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}

42
crates/swc_css_prefixer/tests/fixture/resolution/output.css
View File

@ -1,39 +1,43 @@
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@import url('styles.css') screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2);
@import url("styles.css") supports((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) screen and (max-width: 400px);
@import url("styles.css") supports(not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) screen and (max-width: 400px);
@import url('styles.css') supports((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2);
@media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2x) {
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
@media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
.class {
color: red;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {
@media only screen and (min-resolution: 124.8dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {
@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3) {
.class {
color: red;
}
@ -59,26 +63,28 @@
.image {
background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
.image {
background-image: url(image@2x.png);
}
}
@media (-webkit-min-device-pixel-ratio: 0.34), (min--moz-device-pixel-ratio: 0.34), (min-resolution: 33dpi) {
@media (min-resolution: 33dpi), (-webkit-min-device-pixel-ratio: 0.34), (min--moz-device-pixel-ratio: 0.34) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0), (min-resolution: 0dpi) {
@media (min-resolution: 0dpi), (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi) {}
@media (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2x) {}
@media (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {}
@media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5) {}
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) {}
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
@media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25) {}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
@media only screen and (min-resolution: 124.8dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3) {}
@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3) {}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {}
@media (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}

44
crates/swc_css_prefixer/tests/fixture/resolution/output.defaults-not-ie-11.css
View File

@ -1,39 +1,43 @@
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@import url('styles.css') screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2);
@import url("styles.css") supports(display: flex) screen and (max-width: 400px);
@import url("styles.css") supports(not (display: flex)) screen and (max-width: 400px);
@import url('styles.css') supports(display: flex) screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2);
@media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2x) {
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
@media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
.class {
color: red;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {
@media only screen and (min-resolution: 124.8dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {
@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3) {
.class {
color: red;
}
@ -47,26 +51,28 @@
.image {
background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
.image {
background-image: url(image@2x.png);
}
}
@media (-webkit-min-device-pixel-ratio: 0.34), (min-resolution: 33dpi) {
@media (min-resolution: 33dpi), (-webkit-min-device-pixel-ratio: 0.34) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 0), (min-resolution: 0dpi) {
@media (min-resolution: 0dpi), (-webkit-min-device-pixel-ratio: 0) {
.class {
color: red;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {}
@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2x) {}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {}
@media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {}
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {}
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {}
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {}
@media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25) {}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {}
@media only screen and (min-resolution: 124.8dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3) {}
@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3) {}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}

3
crates/swc_css_prefixer/tests/fixture/selection/output.css
View File

@ -10,9 +10,6 @@
::selection {
color: red;
}
::-moz-selection {
color: red;
}
::SeLeCtIoN {
color: red;
}