mirror of
https://github.com/swc-project/swc.git
synced 2024-11-28 02:29:04 +03:00
feat(css/prefixer): Prefix percentage with opacity
(#6638)
This commit is contained in:
parent
292c3388b5
commit
2fee4d167a
@ -3873,5 +3873,23 @@
|
||||
"firefox": "3"
|
||||
},
|
||||
{}
|
||||
],
|
||||
"opacity": [
|
||||
{
|
||||
"chrome": "4",
|
||||
"edge": "12",
|
||||
"firefox": "2",
|
||||
"samsung": "4",
|
||||
"ios": "3.2",
|
||||
"opera": "10",
|
||||
"safari": "3.1",
|
||||
"ie": "6"
|
||||
},
|
||||
{
|
||||
"chrome": "77",
|
||||
"edge": "78",
|
||||
"firefox": "69",
|
||||
"samsung": "11.2"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -535,6 +535,16 @@ macro_rules! to_integer {
|
||||
}};
|
||||
}
|
||||
|
||||
macro_rules! to_number {
|
||||
($val:expr) => {{
|
||||
ComponentValue::Number(Box::new(Number {
|
||||
span: DUMMY_SP,
|
||||
value: $val,
|
||||
raw: None,
|
||||
}))
|
||||
}};
|
||||
}
|
||||
|
||||
#[derive(Debug, PartialEq, Eq, Clone, Copy)]
|
||||
pub enum Prefix {
|
||||
Webkit,
|
||||
@ -1431,6 +1441,36 @@ impl VisitMut for Prefixer {
|
||||
}
|
||||
}
|
||||
}};
|
||||
|
||||
($property:expr, $value:expr) => {{
|
||||
if should_prefix($property, self.env, true) {
|
||||
// Check we don't have prefixed property
|
||||
|
||||
let name = DeclarationName::Ident(Ident {
|
||||
span: DUMMY_SP,
|
||||
value: $property.into(),
|
||||
raw: None,
|
||||
});
|
||||
|
||||
let value: Option<Box<dyn Fn() -> Vec<ComponentValue>>> = $value;
|
||||
|
||||
if let Some(value) = value {
|
||||
self.added_declarations.push(Box::new(Declaration {
|
||||
span: n.span,
|
||||
name,
|
||||
value: value(),
|
||||
important: n.important.clone(),
|
||||
}));
|
||||
} else {
|
||||
self.added_declarations.push(Box::new(Declaration {
|
||||
span: n.span,
|
||||
name,
|
||||
value: n.value.clone(),
|
||||
important: n.important.clone(),
|
||||
}));
|
||||
}
|
||||
}
|
||||
}};
|
||||
}
|
||||
|
||||
let property_name = &*name.to_ascii_lowercase();
|
||||
@ -1970,6 +2010,22 @@ impl VisitMut for Prefixer {
|
||||
);
|
||||
}
|
||||
|
||||
"opacity" if should_prefix("opacity", self.env, true) => {
|
||||
let old_value = match n.value.get(0) {
|
||||
Some(ComponentValue::Percentage(percentage)) => Some(percentage.value.value),
|
||||
_ => None,
|
||||
};
|
||||
|
||||
if let Some(old_value) = old_value {
|
||||
let rounded_alpha = (old_value * 1000.0).round() / 100000.0;
|
||||
|
||||
add_declaration!(
|
||||
"opacity",
|
||||
Some(Box::new(|| { vec![to_number!(rounded_alpha)] }))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
"order" => {
|
||||
let old_spec_num = match n.value.get(0) {
|
||||
Some(ComponentValue::Integer(integer)) => Some(integer.value + 1),
|
||||
|
18
crates/swc_css_prefixer/tests/fixture/opacity/input.css
Normal file
18
crates/swc_css_prefixer/tests/fixture/opacity/input.css
Normal file
@ -0,0 +1,18 @@
|
||||
.class {
|
||||
opacity: 0%;
|
||||
opacity: 45%;
|
||||
opacity: 0.45%;
|
||||
opacity: 0.045%;
|
||||
opacity: 0.00000000000045%;
|
||||
opacity: 0.33%;
|
||||
opacity: 0.3333333333%;
|
||||
opacity: 99%;
|
||||
opacity: 100%;
|
||||
opacity: 120%;
|
||||
opacity: 0.9999999999%;
|
||||
}
|
||||
|
||||
.bar {
|
||||
opacity: 0.3;
|
||||
opacity: initial;
|
||||
}
|
28
crates/swc_css_prefixer/tests/fixture/opacity/output.css
Normal file
28
crates/swc_css_prefixer/tests/fixture/opacity/output.css
Normal file
@ -0,0 +1,28 @@
|
||||
.class {
|
||||
opacity: 0;
|
||||
opacity: 0%;
|
||||
opacity: 0.45;
|
||||
opacity: 45%;
|
||||
opacity: 0.0045;
|
||||
opacity: 0.45%;
|
||||
opacity: 0.00045;
|
||||
opacity: 0.045%;
|
||||
opacity: 0;
|
||||
opacity: 0.00000000000045%;
|
||||
opacity: 0.0033;
|
||||
opacity: 0.33%;
|
||||
opacity: 0.00333;
|
||||
opacity: 0.3333333333%;
|
||||
opacity: 0.99;
|
||||
opacity: 99%;
|
||||
opacity: 1;
|
||||
opacity: 100%;
|
||||
opacity: 1.2;
|
||||
opacity: 120%;
|
||||
opacity: 0.01;
|
||||
opacity: 0.9999999999%;
|
||||
}
|
||||
.bar {
|
||||
opacity: 0.3;
|
||||
opacity: initial;
|
||||
}
|
@ -0,0 +1,28 @@
|
||||
.class {
|
||||
opacity: 0;
|
||||
opacity: 0%;
|
||||
opacity: 0.45;
|
||||
opacity: 45%;
|
||||
opacity: 0.0045;
|
||||
opacity: 0.45%;
|
||||
opacity: 0.00045;
|
||||
opacity: 0.045%;
|
||||
opacity: 0;
|
||||
opacity: 0.00000000000045%;
|
||||
opacity: 0.0033;
|
||||
opacity: 0.33%;
|
||||
opacity: 0.00333;
|
||||
opacity: 0.3333333333%;
|
||||
opacity: 0.99;
|
||||
opacity: 99%;
|
||||
opacity: 1;
|
||||
opacity: 100%;
|
||||
opacity: 1.2;
|
||||
opacity: 120%;
|
||||
opacity: 0.01;
|
||||
opacity: 0.9999999999%;
|
||||
}
|
||||
.bar {
|
||||
opacity: 0.3;
|
||||
opacity: initial;
|
||||
}
|
Loading…
Reference in New Issue
Block a user