swc-project/swc
1
1
Fork 0
mirror of https://github.com/swc-project/swc.git synced 2024-10-04 20:28:43 +03:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(css/codegen): Improve output of @supports (#5529)

Browse Source
This commit is contained in:
Alexander Akait 2022-08-17 22:04:06 +03:00 committed by GitHub
parent e28fd34ce7
commit 0f45822410
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 83 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
crates/swc_css_codegen/src/ctx.rs
View File

@ -19,7 +19,9 @@ where
}
#[derive(Debug, Default, Clone, Copy)]
pub(crate) struct Ctx {}
pub(crate) struct Ctx {
pub in_at_rule_prelude: bool,
}
pub(super) struct WithCtx<'w, I: 'w + CssWriter> {
inner: &'w mut CodeGenerator<I>,

36
crates/swc_css_codegen/src/lib.rs
View File

@ -93,7 +93,13 @@ where
emit!(self, n.name);
if let Some(prelude) = &n.prelude {
emit!(self, prelude);
emit!(
&mut *self.with_ctx(Ctx {
in_at_rule_prelude: true,
..self.ctx
}),
prelude
);
}
if n.block.is_some() {
@ -212,7 +218,15 @@ where
}
AtRulePrelude::SupportsPrelude(n) => {
match n.conditions.get(0) {
Some(SupportsConditionType::SupportsInParens(_)) => {
Some(SupportsConditionType::SupportsInParens(
SupportsInParens::SupportsCondition(_),
))
| Some(SupportsConditionType::SupportsInParens(SupportsInParens::Feature(
SupportsFeature::Declaration(_),
)))
| Some(SupportsConditionType::SupportsInParens(
SupportsInParens::GeneralEnclosed(GeneralEnclosed::SimpleBlock(_)),
)) => {
formatting_space!(self);
}
_ => {
@ -525,7 +539,14 @@ where
#[emitter]
fn emit_supports_condition(&mut self, n: &SupportsCondition) -> Result {
self.emit_list(&n.conditions, ListFormat::NotDelimited)?;
self.emit_list(
&n.conditions,
if self.config.minify {
ListFormat::NotDelimited
} else {
ListFormat::SpaceDelimited
},
)?;
}
#[emitter]
@ -540,7 +561,6 @@ where
#[emitter]
fn emit_supports_not(&mut self, n: &SupportsNot) -> Result {
formatting_space!(self);
emit!(self, n.keyword);
space!(self);
emit!(self, n.condition);
@ -548,7 +568,6 @@ where
#[emitter]
fn emit_supports_and(&mut self, n: &SupportsAnd) -> Result {
formatting_space!(self);
emit!(self, n.keyword);
space!(self);
emit!(self, n.condition);
@ -556,7 +575,6 @@ where
#[emitter]
fn emit_support_or(&mut self, n: &SupportsOr) -> Result {
formatting_space!(self);
emit!(self, n.keyword);
space!(self);
emit!(self, n.condition);
@ -1665,7 +1683,7 @@ where
fn emit_selector_list(&mut self, n: &SelectorList) -> Result {
self.emit_list(
&n.children,
if self.config.minify {
if self.config.minify || self.ctx.in_at_rule_prelude {
ListFormat::CommaDelimited
} else {
ListFormat::CommaDelimited | ListFormat::MultiLine
@ -1728,8 +1746,8 @@ where
#[emitter]
fn emit_compound_selector(&mut self, n: &CompoundSelector) -> Result {
emit!(&mut *self.with_ctx(self.ctx), n.nesting_selector);
emit!(&mut *self.with_ctx(self.ctx), n.type_selector);
emit!(self, n.nesting_selector);
emit!(self, n.type_selector);
self.emit_list(&n.subclass_selectors, ListFormat::NotDelimited)?;
}

19
crates/swc_css_codegen/tests/fixture/at-rules/supports/1/input.css
View File

@ -12,3 +12,22 @@
@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}
@supports not (not (display: flex)) {
body {
background: red;
}
}
@supports not (not (not (not (display: flex)))) {
body {
background: red;
}
}
@supports selector(A > B) {}
@supports (display: grid) and (not (display: inline-grid)) {}
@supports (display: table-cell) and (display: list-item) and (display:contents) {}
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}
@supports (--foo: green) {}
@supports not selector(:is(a, b)) {}
@supports selector(:nth-child(1n of a, b)) {}
@supports (display: flex) and selector(:nth-child(1n of a, b)) {}
@supports selector(:nth-child(1n of a, b)) and (display: flex) {}

25
crates/swc_css_codegen/tests/fixture/at-rules/supports/1/output.css
View File

@ -3,10 +3,29 @@
color: hotpink;
}
}
@supports not (display: grid) {
@supports not (display: grid) {
div {
float: right;
}
}
@supports not ( not (transform-origin: 2px)) {}
@supports (display: grid) and ( not (display: inline-grid)) {}
@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}
@supports not (not (display: flex)) {
body {
background: red;
}
}
@supports not (not (not (not (display: flex)))) {
body {
background: red;
}
}
@supports selector(A > B) {}
@supports (display: grid) and (not (display: inline-grid)) {}
@supports (display: table-cell) and (display: list-item) and (display: contents) {}
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}
@supports (--foo: green) {}
@supports not selector(:is(a, b)) {}
@supports selector(:nth-child(1n of a, b)) {}
@supports (display: flex) and selector(:nth-child(1n of a, b)) {}
@supports selector(:nth-child(1n of a, b)) and (display: flex) {}

2
crates/swc_css_codegen/tests/fixture/at-rules/supports/1/output.min.css vendored
View File

@ -1 +1 @@
@supports(display:flex){h1{color:hotpink}}@supports not (display:grid){div{float:right}}@supports not (not (transform-origin:2px)){}@supports(display:grid)and (not (display:inline-grid)){}
@supports(display:flex){h1{color:hotpink}}@supports not (display:grid){div{float:right}}@supports not (not (transform-origin:2px)){}@supports(display:grid)and (not (display:inline-grid)){}@supports not (not (display:flex)){body{background:red}}@supports not (not (not (not (display:flex)))){body{background:red}}@supports selector(A>B){}@supports(display:grid)and (not (display:inline-grid)){}@supports(display:table-cell)and (display:list-item)and (display:contents){}@supports not ((text-align-last:justify)or (-moz-text-align-last:justify)){}@supports(--foo:green){}@supports not selector(:is(a,b)){}@supports selector(:nth-child(n of a,b)){}@supports(display:flex)and selector(:nth-child(n of a,b)){}@supports selector(:nth-child(n of a,b))and (display:flex){}

6
crates/swc_css_codegen/tests/fixture/style-blocks-contents/basic/output.css
View File

@ -31,7 +31,7 @@
}
}
.class {
@supports not (display: grid) {
@supports not (display: grid) {
float: right;
& .class {
color: red;
@ -40,7 +40,7 @@
}
.class {
color: blue;
@supports not (display: grid) {
@supports not (display: grid) {
float: right;
& .class {
color: red;
@ -52,7 +52,7 @@
&.foo {
color: green;
}
@supports not (display: grid) {
@supports not (display: grid) {
float: right;
& .class {
color: red;

4
crates/swc_css_codegen/tests/fixture/style-blocks-contents/recovery/output.css
View File

@ -20,7 +20,7 @@ a {
&.foo {
ident
color: green;}
@supports not (display: grid) {
@supports not (display: grid) {
float: right;
& .class {
ident
@ -33,7 +33,7 @@ a {
&.foo {
ident;color: green;
}
@supports not (display: grid) {
@supports not (display: grid) {
float: right;
& .class {
ident;color: red;

6
crates/swc_css_prefixer/tests/fixture/supports/output.css
View File

@ -7,12 +7,12 @@
display: flex;
}
}
@supports not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) {
@supports not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) {
a {
color: #000;
}
}
@supports not ( not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) {
@supports not (not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) {
a {
color: #000;
}
@ -53,7 +53,7 @@
display: flex;
}
}
@supports (((perspective: 1px) or (-webkit-perspective: 1px) or (-moz-perspective: 1px)) and ( not (-webkit-overflow-scrolling: touch))) {
@supports (((perspective: 1px) or (-webkit-perspective: 1px) or (-moz-perspective: 1px)) and (not (-webkit-overflow-scrolling: touch))) {
a {
color: #000;
}

6
crates/swc_css_prefixer/tests/fixture/supports/output.defaults-not-ie-11.css
View File

@ -3,12 +3,12 @@
display: flex;
}
}
@supports not (display: flex) {
@supports not (display: flex) {
a {
color: #000;
}
}
@supports not ( not (display: flex)) {
@supports not (not (display: flex)) {
a {
color: #000;
}
@ -33,7 +33,7 @@
display: flex;
}
}
@supports ((perspective: 1px) and ( not (-webkit-overflow-scrolling: touch))) {
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
a {
color: #000;
}