swc-project/swc
1
1
Fork 0
mirror of https://github.com/swc-project/swc.git synced 2024-11-23 09:38:16 +03:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix(css/prefixer): FIx a bug related to writing-mode (#4278)

Browse Source
This commit is contained in:
Alexander Akait 2022-04-08 09:53:38 +03:00 committed by GitHub
parent 1211a34618
commit 7f38e06e02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 127 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -430,7 +430,7 @@ struct Prefixer {
in_stylesheet: bool,
in_media_query_list: bool,
in_keyframe_block: bool,
in_simple_block: bool,
simple_block: Option<SimpleBlock>,
added_rules: Vec<Rule>,
added_declarations: Vec<Declaration>,
}
@ -468,6 +468,43 @@ impl Prefixer {
important: n.important.clone(),
});
}
fn get_declaration_by_name(&mut self, name: &str) -> Option<Declaration> {
match &self.simple_block {
Some(SimpleBlock { value, .. }) => {
let mut found = None;
for n in value.iter().rev() {
match n {
ComponentValue::DeclarationOrAtRule(DeclarationOrAtRule::Declaration(
declaration @ Declaration {
name: DeclarationName::Ident(Ident { value, .. }),
..
},
)) if value.as_ref().eq_ignore_ascii_case(name) => {
found = Some(declaration.clone());
break;
}
ComponentValue::StyleBlock(StyleBlock::Declaration(
declaration @ Declaration {
name: DeclarationName::Ident(Ident { value, .. }),
..
},
)) if value.as_ref().eq_ignore_ascii_case(name) => {
found = Some(declaration.clone());
break;
}
_ => {}
}
}
found
}
_ => None,
}
}
}
pub enum Prefix {
@ -694,7 +731,7 @@ impl VisitMut for Prefixer {
fn visit_mut_declaration(&mut self, n: &mut Declaration) {
n.visit_mut_children_with(self);
if !self.in_simple_block {
if self.simple_block.is_none() {
return;
}
@ -1911,31 +1948,71 @@ impl VisitMut for Prefixer {
same_content!(Prefix::O, "-o-transition-timing-function");
}
// TODO fix me, we should look at `direction` property https://github.com/postcss/autoprefixer/blob/main/lib/hacks/writing-mode.js
"writing-mode" if n.value.len() == 1 => {
let direction = match self.get_declaration_by_name("direction") {
Some(Declaration { value, .. }) => match value.get(0) {
Some(ComponentValue::Ident(Ident { value, .. }))
if value.as_ref().eq_ignore_ascii_case("rtl") =>
{
Some("rtl")
}
_ => Some("ltr"),
},
_ => Some("ltr"),
};
if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] {
match &*value.to_lowercase() {
"none" => {
"vertical-lr" => {
same_content!(Prefix::Webkit, "-webkit-writing-mode");
same_content!(Prefix::Ms, "-ms-writing-mode");
match direction {
Some("ltr") => {
simple!("-ms-writing-mode", "tb-lr");
}
Some("rtl") => {
simple!("-ms-writing-mode", "bt-lr");
}
_ => {}
}
}
"vertical-lr" | "sideways-lr" => {
"vertical-rl" => {
same_content!(Prefix::Webkit, "-webkit-writing-mode");
simple!("-ms-writing-mode", "tb");
}
"vertical-rl" | "sideways-rl" => {
same_content!(Prefix::Webkit, "-webkit-writing-mode");
match direction {
Some("ltr") => {
simple!("-ms-writing-mode", "tb-rl");
}
Some("rtl") => {
simple!("-ms-writing-mode", "bt-rl");
}
_ => {}
}
}
"horizontal-tb" => {
same_content!(Prefix::Webkit, "-webkit-writing-mode");
simple!("-ms-writing-mode", "lr");
match direction {
Some("ltr") => {
simple!("-ms-writing-mode", "lr-tb");
}
Some("rtl") => {
simple!("-ms-writing-mode", "rl-tb");
}
_ => {}
}
}
_ => {}
"sideways-rl" | "sideways-lr" => {
same_content!(Prefix::Webkit, "-webkit-writing-mode");
}
_ => {
same_content!(Prefix::Webkit, "-webkit-writing-mode");
same_content!(Prefix::Ms, "-ms-writing-mode");
}
}
}
}
@ -2306,9 +2383,9 @@ impl VisitMut for Prefixer {
}
fn visit_mut_simple_block(&mut self, simple_block: &mut SimpleBlock) {
let old_in_simple_block = self.in_simple_block;
let old_simple_block = self.simple_block.clone();
self.in_simple_block = true;
self.simple_block = Some(simple_block.clone());
let mut new = vec![];
@ -2326,6 +2403,6 @@ impl VisitMut for Prefixer {
simple_block.value = new;
self.in_simple_block = old_in_simple_block;
self.simple_block = old_simple_block;
}
}

12
crates/swc_css_prefixer/tests/fixture/writing-mode/input.css
View File

@ -54,3 +54,15 @@
.class {
writing-mode: sideways-lr;
}
@viewport {
writing-mode: horizontal-tb;
direction: rtl;
}
@keyframes test {
100% {
writing-mode: horizontal-tb;
direction: rtl;
}
}

32
crates/swc_css_prefixer/tests/fixture/writing-mode/output.css
View File

@ -1,6 +1,6 @@
.one {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
.two {
@ -10,30 +10,30 @@
}
.three {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
.rtl-vertical-rl {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: bt-rl;
writing-mode: vertical-rl;
direction: rtl;
}
.rtl-vertical-lr {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb;
-ms-writing-mode: bt-lr;
writing-mode: vertical-lr;
direction: rtl;
}
.rtl-horizontal-tb {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr;
-ms-writing-mode: rl-tb;
writing-mode: horizontal-tb;
direction: rtl;
}
.rtl-horizontal-tb-override-direction {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
direction: rtl;
direction: ltr;
@ -45,7 +45,7 @@
}
.class {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
.class {
@ -55,16 +55,28 @@
}
.class {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
.class {
-webkit-writing-mode: sideways-rl;
-ms-writing-mode: tb-rl;
writing-mode: sideways-rl;
}
.class {
-webkit-writing-mode: sideways-lr;
-ms-writing-mode: tb;
writing-mode: sideways-lr;
}
@viewport{
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: rl-tb;
writing-mode: horizontal-tb;
direction: rtl;
}
@keyframes test {
100% {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: rl-tb;
writing-mode: horizontal-tb;
direction: rtl;
}
}