Skip to content

Commit

Permalink
feat(css): Supports more color notations (#4009)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait authored Mar 14, 2022
1 parent afa97f6 commit a4bc092
Show file tree
Hide file tree
Showing 12 changed files with 7,513 additions and 62 deletions.
18 changes: 17 additions & 1 deletion crates/swc_css_ast/src/value.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,25 @@ pub struct Function {
pub value: Vec<ComponentValue>,
}

// TODO small AST improve for `CurrentColorOrSystemColor` and
// `NamedColorOrTransparent`
#[ast_node]
pub enum Color {
// TODO more
#[tag("AbsoluteColorBase")]
AbsoluteColorBase(AbsoluteColorBase),
#[tag("Ident")]
CurrentColorOrSystemColor(Ident),
// <device-cmyk()> only
#[tag("Function")]
Function(Function),
}

#[ast_node]
pub enum AbsoluteColorBase {
#[tag("HexColor")]
HexColor(HexColor),
#[tag("Ident")]
NamedColorOrTransparent(Ident),
#[tag("Function")]
Function(Function),
}
Expand Down Expand Up @@ -98,6 +112,8 @@ pub enum CmykComponent {
Number(Number),
#[tag("Percentage")]
Percentage(Percentage),
#[tag("Function")]
Function(Function),
}

#[ast_node]
Expand Down
24 changes: 21 additions & 3 deletions crates/swc_css_codegen/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -728,6 +728,9 @@ where
ComponentValue::SimpleBlock(_)
| ComponentValue::Function(_)
| ComponentValue::Color(Color::Function(_))
| ComponentValue::Color(Color::AbsoluteColorBase(
AbsoluteColorBase::Function(_),
))
| ComponentValue::Delimiter(_)
| ComponentValue::Str(_)
| ComponentValue::Url(_)
Expand All @@ -746,7 +749,9 @@ where
!self.config.minify
}
}
Some(ComponentValue::Color(Color::HexColor(_)))
Some(ComponentValue::Color(Color::AbsoluteColorBase(
AbsoluteColorBase::HexColor(_),
)))
| Some(ComponentValue::Str(_)) => !self.config.minify,
Some(ComponentValue::Delimiter(_)) => false,
Some(ComponentValue::Number(n)) => {
Expand Down Expand Up @@ -781,7 +786,9 @@ where
},
_ => match next {
Some(ComponentValue::SimpleBlock(_))
| Some(ComponentValue::Color(Color::HexColor(_))) => !self.config.minify,
| Some(ComponentValue::Color(Color::AbsoluteColorBase(
AbsoluteColorBase::HexColor(_),
))) => !self.config.minify,
Some(ComponentValue::Delimiter(_)) => false,
_ => true,
},
Expand Down Expand Up @@ -1207,11 +1214,21 @@ where
#[emitter]
fn emit_color(&mut self, n: &Color) -> Result {
match n {
Color::HexColor(n) => emit!(self, n),
Color::AbsoluteColorBase(n) => emit!(self, n),
Color::CurrentColorOrSystemColor(n) => emit!(self, n),
Color::Function(n) => emit!(self, n),
}
}

#[emitter]
fn emit_absolute_color_base(&mut self, n: &AbsoluteColorBase) -> Result {
match n {
AbsoluteColorBase::HexColor(n) => emit!(self, n),
AbsoluteColorBase::NamedColorOrTransparent(n) => emit!(self, n),
AbsoluteColorBase::Function(n) => emit!(self, n),
}
}

#[emitter]
fn emit_hex_color(&mut self, n: &HexColor) -> Result {
let mut hex_color = String::new();
Expand Down Expand Up @@ -1250,6 +1267,7 @@ where
match n {
CmykComponent::Number(n) => emit!(self, n),
CmykComponent::Percentage(n) => emit!(self, n),
CmykComponent::Function(n) => emit!(self, n),
}
}

Expand Down
46 changes: 46 additions & 0 deletions crates/swc_css_codegen/tests/fixture/declaration/custom-properties/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,49 @@ div {
0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
}

*{--x:}
*{--x: }
* { --x:; }
* { --x: ; }
*{--x:!important}
*{--x: !important}
*{ --x:!important }
*{ --x: !important }
* { --x:!important; }
* { --x: !important; }
* { --x:! important ; }
* { --x: ! important ; }
* { --x:y; }
* { --x: y; }
* { --x:y ; }
* { --x:y, ; }
* { --x: var(y,); }
* { --x: var(y, ); }
* { --x:(y); }
* { --x:(y) ; }
* { --x: (y); }
* { --x:(y ); }
* { --x:( y); }
* { --x:f(y); }
* { --x:f(y) ; }
* { --x: f(y); }
* { --x:f(y ); }
* { --x:f( y); }
* { --x:[y]; }
* { --x:[y] ; }
* { --x: [y]; }
* { --x:[y ]; }
* { --x:[ y]; }
* { --x:{y}; }
* { --x:{y} ; }
* { --x: {y}; }
* { --x:{y }; }
* { --x:{ y}; }

@supports ( --x : y , z ) { a { color: red; } }
@supports ( --x : ) { a { color: red; } }
@supports (--x: ) { a { color: red; } }
@supports ( --x ) { a { color: red; } }
@supports ( ) { a { color: red; } }
@supports ( . --x : y , z ) { a { color: red; } }
144 changes: 144 additions & 0 deletions crates/swc_css_codegen/tests/fixture/declaration/custom-properties/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,147 @@ div {
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
}
* {
--x: ;
}
* {
--x: ;
}
* {
--x: ;
}
* {
--x: ;
}
* {
--x: !important;
}
* {
--x: !important;
}
* {
--x: !important;
}
* {
--x: !important;
}
* {
--x: !important;
}
* {
--x: !important;
}
* {
--x: !important;
}
* {
--x: !important;
}
* {
--x: y;
}
* {
--x: y;
}
* {
--x: y ;
}
* {
--x: y, ;
}
* {
--x: var(y,);
}
* {
--x: var(y, );
}
* {
--x: (y);
}
* {
--x: (y) ;
}
* {
--x: (y);
}
* {
--x: (y );
}
* {
--x: ( y);
}
* {
--x: f(y);
}
* {
--x: f(y) ;
}
* {
--x: f(y);
}
* {
--x: f(y );
}
* {
--x: f( y);
}
* {
--x: [y];
}
* {
--x: [y] ;
}
* {
--x: [y];
}
* {
--x: [y ];
}
* {
--x: [ y];
}
* {
--x: {y};
}
* {
--x: {y} ;
}
* {
--x: {y};
}
* {
--x: {y };
}
* {
--x: { y};
}
@supports (--x: y , z ) {
a {
color: red;
}
}
@supports (--x: ) {
a {
color: red;
}
}
@supports (--x: ) {
a {
color: red;
}
}
@supports ( --x ) {
a {
color: red;
}
}
@supports ( ) {
a {
color: red;
}
}
@supports ( . --x : y , z ) {
a {
color: red;
}
}
2 changes: 1 addition & 1 deletion crates/swc_css_codegen/tests/fixture/declaration/custom-properties/output.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion crates/swc_css_parser/src/parser/base.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,7 @@ where
}

tok!("#") => {
return Ok(ComponentValue::Color(Color::HexColor(self.parse()?)));
return Ok(ComponentValue::Color(self.parse()?));
}

_ => {}
Expand Down
Loading

1 comment on commit a4bc092

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Benchmark

Benchmark suite Current: a4bc092 Previous: 0ad13d9 Ratio
base_tr_fixer 20887 ns/iter (± 586) 33283 ns/iter (± 11848) 0.63
base_tr_resolver_and_hygiene 93684 ns/iter (± 20946) 143732 ns/iter (± 51122) 0.65
codegen_es2015 27400 ns/iter (± 134) 37616 ns/iter (± 10584) 0.73
codegen_es2016 27446 ns/iter (± 130) 36517 ns/iter (± 5479) 0.75
codegen_es2017 27482 ns/iter (± 527) 37353 ns/iter (± 13919) 0.74
codegen_es2018 27436 ns/iter (± 237) 37020 ns/iter (± 15620) 0.74
codegen_es2019 27390 ns/iter (± 150) 37371 ns/iter (± 13676) 0.73
codegen_es2020 27454 ns/iter (± 169) 37461 ns/iter (± 16052) 0.73
codegen_es3 27479 ns/iter (± 108) 36881 ns/iter (± 8315) 0.75
codegen_es5 27531 ns/iter (± 205) 37102 ns/iter (± 17954) 0.74
full_es2015 124930291 ns/iter (± 3411458) 181723159 ns/iter (± 19341728) 0.69
full_es2016 125393290 ns/iter (± 5776532) 177811118 ns/iter (± 16595819) 0.71
full_es2017 124628670 ns/iter (± 3933413) 178253461 ns/iter (± 15144480) 0.70
full_es2018 123237905 ns/iter (± 3420693) 178534660 ns/iter (± 19993234) 0.69
full_es2019 122380853 ns/iter (± 3610348) 175229531 ns/iter (± 15650747) 0.70
full_es2020 117165520 ns/iter (± 4451327) 166167677 ns/iter (± 15124600) 0.71
full_es3 176884224 ns/iter (± 5949839) 239593322 ns/iter (± 13130503) 0.74
full_es5 165662790 ns/iter (± 5435053) 224889871 ns/iter (± 19540549) 0.74
parser 534422 ns/iter (± 8091) 768611 ns/iter (± 245845) 0.70
ser_ast_node 149 ns/iter (± 2) 192 ns/iter (± 40) 0.78
ser_serde 144 ns/iter (± 1) 198 ns/iter (± 37) 0.73
emit_colors 10461255 ns/iter (± 6841776) 5838985 ns/iter (± 4017194) 1.79
emit_large 98727067 ns/iter (± 145499463) 68228754 ns/iter (± 96320993) 1.45
base_clone 2292896 ns/iter (± 44969) 2922367 ns/iter (± 867665) 0.78
fold_span 4045895 ns/iter (± 161259) 5536717 ns/iter (± 1785317) 0.73
fold_span_panic 4215132 ns/iter (± 207543) 5546736 ns/iter (± 1958430) 0.76
visit_mut_span 2757156 ns/iter (± 52940) 3688542 ns/iter (± 1930742) 0.75
visit_mut_span_panic 2803120 ns/iter (± 60028) 3649537 ns/iter (± 910879) 0.77
usage_builtin_type 15397240 ns/iter (± 9885729) 19971443 ns/iter (± 11897631) 0.77
usage_property 361404 ns/iter (± 3104) 474928 ns/iter (± 66955) 0.76
boxing_boxed 151 ns/iter (± 1) 178 ns/iter (± 64) 0.85
boxing_boxed_clone 74 ns/iter (± 1) 94 ns/iter (± 30) 0.79
boxing_unboxed 118 ns/iter (± 2) 149 ns/iter (± 31) 0.79
boxing_unboxed_clone 62 ns/iter (± 1) 83 ns/iter (± 19) 0.75
time_10 286 ns/iter (± 1) 386 ns/iter (± 74) 0.74
time_15 589 ns/iter (± 1) 849 ns/iter (± 327) 0.69
time_20 1191 ns/iter (± 29) 1494 ns/iter (± 432) 0.80
time_40 5403 ns/iter (± 17) 5615 ns/iter (± 1063) 0.96
time_5 111 ns/iter (± 0) 125 ns/iter (± 36) 0.89
time_60 11890 ns/iter (± 70) 11726 ns/iter (± 3364) 1.01
total 0 ns/iter (± 0) 0 ns/iter (± 0) NaN

This comment was automatically generated by workflow using github-action-benchmark.

Please sign in to comment.