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

fix(css/parser): Improve handling of math functions in at-rules (#6140)

Browse Source
This commit is contained in:
Alexander Akait 2022-10-14 17:46:36 +03:00 committed by GitHub
parent a50b5aeeb1
commit 26aeb18c0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 3193 additions and 782 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
crates/swc_css_minifier/src/compressor/calc_sum.rs
View File

@ -1,15 +1,10 @@
use std::collections::HashMap;
use swc_atoms::{js_word, JsWord};
use swc_atoms::JsWord;
use swc_css_ast::*;
use super::{unit::*, Compressor};
fn is_calc_function_name(ident: &Ident) -> bool {
ident.value.to_ascii_lowercase() == js_word!("calc")
|| ident.value.to_ascii_lowercase() == js_word!("-webkit-calc")
|| ident.value.to_ascii_lowercase() == js_word!("-moz-calc")
}
use crate::compressor::math::{is_calc_function_name, transform_calc_value_into_component_value};
// transform "(simple calc-value)" into "simple calc-value"
fn remove_unnecessary_nesting_from_calc_sum(calc_sum: &mut CalcSum) {
@ -50,76 +45,6 @@ fn try_to_extract_into_calc_value(calc_sum: &CalcSum) -> Option<CalcValue> {
None
}
fn transform_calc_value_into_component_value(calc_value: &CalcValue) -> ComponentValue {
match &calc_value {
CalcValue::Number(n) => ComponentValue::Number(n.clone()),
CalcValue::Dimension(Dimension::Length(l)) => {
ComponentValue::Dimension(Dimension::Length(Length {
span: l.span,
value: l.value.clone(),
unit: l.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Angle(a)) => {
ComponentValue::Dimension(Dimension::Angle(Angle {
span: a.span,
value: a.value.clone(),
unit: a.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Time(t)) => {
ComponentValue::Dimension(Dimension::Time(Time {
span: t.span,
value: t.value.clone(),
unit: t.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Frequency(f)) => {
ComponentValue::Dimension(Dimension::Frequency(Frequency {
span: f.span,
value: f.value.clone(),
unit: f.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Resolution(r)) => {
ComponentValue::Dimension(Dimension::Resolution(Resolution {
span: r.span,
value: r.value.clone(),
unit: r.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Flex(f)) => {
ComponentValue::Dimension(Dimension::Flex(Flex {
span: f.span,
value: f.value.clone(),
unit: f.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::UnknownDimension(u)) => {
ComponentValue::Dimension(Dimension::UnknownDimension(UnknownDimension {
span: u.span,
value: u.value.clone(),
unit: u.unit.clone(),
}))
}
CalcValue::Percentage(p) => ComponentValue::Percentage(Percentage {
span: p.span,
value: p.value.clone(),
}),
CalcValue::Function(f) => ComponentValue::Function(Function {
span: f.span,
name: f.name.clone(),
value: f.value.to_vec(),
}),
CalcValue::Constant(_) => {
unreachable!("CalcValue::Constant cannot be transformed into a ComponentValue per spec")
}
CalcValue::Sum(_) => {
unreachable!("CalcValue::Sum cannot be transformed into a ComponentValue")
}
}
}
// We want to track the position of data (dimension, percentage, operator...) in
// a Vec<CalcProductOrOperator>
#[derive(Debug, Clone)]
@ -1064,7 +989,11 @@ impl Compressor {
// they’re treated like any other
// keyword"
}
CalcValueOrOperator::Value(calc_value) => {
// `calc` and other math functions can be used in `@supports` to
// check availability, we should leave them as is
CalcValueOrOperator::Value(calc_value)
if !self.in_supports_conidition =>
{
*component_value =
transform_calc_value_into_component_value(calc_value);
}

62
crates/swc_css_minifier/src/compressor/container.rs Normal file
View File

@ -0,0 +1,62 @@
use swc_css_ast::*;
use super::Compressor;
use crate::compressor::math::{is_calc_function_name, transform_calc_value_into_component_value};
impl Compressor {
pub(super) fn compress_calc_sum_in_size_feature_value(&mut self, n: &mut SizeFeatureValue) {
match n {
SizeFeatureValue::Function(Function { name, value, .. })
if is_calc_function_name(name) && value.len() == 1 =>
{
match &value[0] {
ComponentValue::CalcSum(CalcSum {
expressions: calc_sum_expressions,
..
}) if calc_sum_expressions.len() == 1 => {
match &calc_sum_expressions[0] {
CalcProductOrOperator::Product(CalcProduct {
expressions: calc_product_expressions,
..
}) if calc_product_expressions.len() == 1 => {
match &calc_product_expressions[0] {
CalcValueOrOperator::Value(CalcValue::Sum(_)) => {
// Do nothing, we cannot transform a
// CalcSum into a ComponentValue
}
CalcValueOrOperator::Value(CalcValue::Constant(_)) => {
// https://www.w3.org/TR/css-values-4/#calc-constants
// "These keywords are only usable
// within a calculation"
// "If used outside of a calculation,
// they’re treated like any other
// keyword"
}
CalcValueOrOperator::Value(calc_value) => {
match transform_calc_value_into_component_value(calc_value)
{
ComponentValue::Function(function) => {
*n = SizeFeatureValue::Function(function);
}
ComponentValue::Dimension(dimension) => {
*n = SizeFeatureValue::Dimension(dimension);
}
ComponentValue::Number(number) => {
*n = SizeFeatureValue::Number(number);
}
_ => {}
}
}
_ => {}
}
}
_ => {}
}
}
_ => {}
}
}
_ => {}
}
}
}

78
crates/swc_css_minifier/src/compressor/math/mod.rs Normal file
View File

@ -0,0 +1,78 @@
use swc_atoms::js_word;
use swc_css_ast::*;
pub fn is_calc_function_name(ident: &Ident) -> bool {
ident.value.to_ascii_lowercase() == js_word!("calc")
|| ident.value.to_ascii_lowercase() == js_word!("-webkit-calc")
|| ident.value.to_ascii_lowercase() == js_word!("-moz-calc")
}
pub fn transform_calc_value_into_component_value(calc_value: &CalcValue) -> ComponentValue {
match &calc_value {
CalcValue::Number(n) => ComponentValue::Number(n.clone()),
CalcValue::Dimension(Dimension::Length(l)) => {
ComponentValue::Dimension(Dimension::Length(Length {
span: l.span,
value: l.value.clone(),
unit: l.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Angle(a)) => {
ComponentValue::Dimension(Dimension::Angle(Angle {
span: a.span,
value: a.value.clone(),
unit: a.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Time(t)) => {
ComponentValue::Dimension(Dimension::Time(Time {
span: t.span,
value: t.value.clone(),
unit: t.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Frequency(f)) => {
ComponentValue::Dimension(Dimension::Frequency(Frequency {
span: f.span,
value: f.value.clone(),
unit: f.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Resolution(r)) => {
ComponentValue::Dimension(Dimension::Resolution(Resolution {
span: r.span,
value: r.value.clone(),
unit: r.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::Flex(f)) => {
ComponentValue::Dimension(Dimension::Flex(Flex {
span: f.span,
value: f.value.clone(),
unit: f.unit.clone(),
}))
}
CalcValue::Dimension(Dimension::UnknownDimension(u)) => {
ComponentValue::Dimension(Dimension::UnknownDimension(UnknownDimension {
span: u.span,
value: u.value.clone(),
unit: u.unit.clone(),
}))
}
CalcValue::Percentage(p) => ComponentValue::Percentage(Percentage {
span: p.span,
value: p.value.clone(),
}),
CalcValue::Function(f) => ComponentValue::Function(Function {
span: f.span,
name: f.name.clone(),
value: f.value.to_vec(),
}),
CalcValue::Constant(_) => {
unreachable!("CalcValue::Constant cannot be transformed into a ComponentValue per spec")
}
CalcValue::Sum(_) => {
unreachable!("CalcValue::Sum cannot be transformed into a ComponentValue")
}
}
}

61
crates/swc_css_minifier/src/compressor/media.rs
View File

@ -4,7 +4,10 @@ use swc_common::DUMMY_SP;
use swc_css_ast::*;
use super::Compressor;
use crate::util::dedup;
use crate::{
compressor::math::{is_calc_function_name, transform_calc_value_into_component_value},
util::dedup,
};
impl Compressor {
fn is_first_media_in_parens(&self, media_condition: &MediaCondition) -> bool {
@ -326,4 +329,60 @@ impl Compressor {
_ => {}
}
}
pub(super) fn compress_calc_sum_in_media_feature_value(&mut self, n: &mut MediaFeatureValue) {
match n {
MediaFeatureValue::Function(Function { name, value, .. })
if is_calc_function_name(name) && value.len() == 1 =>
{
match &value[0] {
ComponentValue::CalcSum(CalcSum {
expressions: calc_sum_expressions,
..
}) if calc_sum_expressions.len() == 1 => {
match &calc_sum_expressions[0] {
CalcProductOrOperator::Product(CalcProduct {
expressions: calc_product_expressions,
..
}) if calc_product_expressions.len() == 1 => {
match &calc_product_expressions[0] {
CalcValueOrOperator::Value(CalcValue::Sum(_)) => {
// Do nothing, we cannot transform a
// CalcSum into a ComponentValue
}
CalcValueOrOperator::Value(CalcValue::Constant(_)) => {
// https://www.w3.org/TR/css-values-4/#calc-constants
// "These keywords are only usable
// within a calculation"
// "If used outside of a calculation,
// they’re treated like any other
// keyword"
}
CalcValueOrOperator::Value(calc_value) => {
match transform_calc_value_into_component_value(calc_value)
{
ComponentValue::Function(function) => {
*n = MediaFeatureValue::Function(function);
}
ComponentValue::Dimension(dimension) => {
*n = MediaFeatureValue::Dimension(dimension);
}
ComponentValue::Number(number) => {
*n = MediaFeatureValue::Number(number);
}
_ => {}
}
}
_ => {}
}
}
_ => {}
}
}
_ => {}
}
}
_ => {}
}
}
}

23
crates/swc_css_minifier/src/compressor/mod.rs
View File

@ -9,6 +9,7 @@ mod alpha_value;
mod angle;
mod calc_sum;
mod color;
mod container;
mod ctx;
mod declaration;
mod easing_function;
@ -17,6 +18,7 @@ mod frequency;
mod import;
mod keyframes;
mod length;
mod math;
mod media;
mod selector;
mod supports;
@ -34,6 +36,7 @@ pub fn compressor() -> impl VisitMut {
struct Compressor {
ctx: Ctx,
need_utf8_at_rule: bool,
in_supports_conidition: bool,
}
impl Compressor {
@ -166,9 +169,21 @@ impl VisitMut for Compressor {
self.compress_media_in_parens(n);
}
fn visit_mut_supports_condition(&mut self, n: &mut SupportsCondition) {
fn visit_mut_media_feature_value(&mut self, n: &mut MediaFeatureValue) {
n.visit_mut_children_with(self);
self.compress_calc_sum_in_media_feature_value(n);
}
fn visit_mut_supports_condition(&mut self, n: &mut SupportsCondition) {
let old_in_support_condition = self.in_supports_conidition;
self.in_supports_conidition = true;
n.visit_mut_children_with(self);
self.in_supports_conidition = old_in_support_condition;
self.compress_supports_condition(n);
}
@ -178,6 +193,12 @@ impl VisitMut for Compressor {
self.compress_supports_in_parens(n);
}
fn visit_mut_size_feature_value(&mut self, n: &mut SizeFeatureValue) {
n.visit_mut_children_with(self);
self.compress_calc_sum_in_size_feature_value(n);
}
fn visit_mut_keyframe_selector(&mut self, n: &mut KeyframeSelector) {
n.visit_mut_children_with(self);

2
crates/swc_css_minifier/tests/fixture/compress-at-rule/media/output.min.css vendored
View File

@ -1 +1 @@
@media print{body{font-size:10pt}}@media print{body{font-size:10pt}}@media(min-width:900px){a{color:red}}@media only screen and (min-width:320px){body{line-height:1.4}}@media(400px<=width<=700px){body{line-height:1.4}}@media screen and (min-width:900px){article{padding:1rem 3rem}}@media(height>600px){body{line-height:1.4}}@media(400px<=width<=700px){body{line-height:1.4}}@media(foo:bar){body{line-height:1.4}}@media(min-width:30em)and (orientation:landscape){.test{color:red}}@media screen and (min-width:30em)and (orientation:landscape){.test{color:red}}@media screen and (min-width:30em)and (max-width:300px)and (orientation:landscape){.test{color:red}}@media(min-height:680px),screen and (orientation:portrait){.test{color:red}}@media(not (color))or (hover){.test{color:red}}@media only screen and ((min-width:320px)and (max-width:1480px)){body{background:red}}@media((min-width:320px)and (max-width:1480px)){body{background:red}}@media((min-width:320px)or (max-width:1480px)){body{background:red}}@media(min-width:320px)and (max-width:1480px)and (orientation:landscape){body{background:red}}@media(min-width:320px)and (max-width:1480px)and (orientation:landscape){body{background:red}}@media(min-width:320px)or (max-width:1480px)or (orientation:landscape){body{background:red}}@media(min-width:320px)or (max-width:1480px)or (orientation:landscape){body{background:red}}@media screen and (min-width:320px)and (max-width:1480px)and (orientation:landscape){body{background:red}}@media screen and (min-width:320px)and (max-width:1480px)and (orientation:landscape){body{background:red}}@media not (resolution:-300dpi){body{background:green}}@media(grid)and (max-width:15em){body{background:green}}@media(max-width:calc(5px + 1rem)){body{color:red}}@media(-webkit-calc(10px + 100px)<width<=calc(1000px + 10px)){body{color:red}}
@media print{body{font-size:10pt}}@media print{body{font-size:10pt}}@media(min-width:900px){a{color:red}}@media only screen and (min-width:320px){body{line-height:1.4}}@media(400px<=width<=700px){body{line-height:1.4}}@media screen and (min-width:900px){article{padding:1rem 3rem}}@media(height>600px){body{line-height:1.4}}@media(400px<=width<=700px){body{line-height:1.4}}@media(foo:bar){body{line-height:1.4}}@media(min-width:30em)and (orientation:landscape){.test{color:red}}@media screen and (min-width:30em)and (orientation:landscape){.test{color:red}}@media screen and (min-width:30em)and (max-width:300px)and (orientation:landscape){.test{color:red}}@media(min-height:680px),screen and (orientation:portrait){.test{color:red}}@media(not (color))or (hover){.test{color:red}}@media only screen and ((min-width:320px)and (max-width:1480px)){body{background:red}}@media((min-width:320px)and (max-width:1480px)){body{background:red}}@media((min-width:320px)or (max-width:1480px)){body{background:red}}@media(min-width:320px)and (max-width:1480px)and (orientation:landscape){body{background:red}}@media(min-width:320px)and (max-width:1480px)and (orientation:landscape){body{background:red}}@media(min-width:320px)or (max-width:1480px)or (orientation:landscape){body{background:red}}@media(min-width:320px)or (max-width:1480px)or (orientation:landscape){body{background:red}}@media screen and (min-width:320px)and (max-width:1480px)and (orientation:landscape){body{background:red}}@media screen and (min-width:320px)and (max-width:1480px)and (orientation:landscape){body{background:red}}@media not (resolution:-300dpi){body{background:green}}@media(grid)and (max-width:15em){body{background:green}}@media(max-width:calc(5px + 1rem)){body{color:red}}@media(110px<width<=1010px){body{color:red}}

4
crates/swc_css_minifier/tests/fixture/compress-calc/container-condition/input.css Normal file
View File

@ -0,0 +1,4 @@
@container (inline-size >= calc(100px + 100px)) {
/* only applies when an inline-size container is available */
h2 { font-size: calc(1.2em + 1cqi); }
}

1
crates/swc_css_minifier/tests/fixture/compress-calc/container-condition/output.min.css vendored Normal file
View File

@ -0,0 +1 @@
@container(inline-size>=200px){h2{font-size:calc(1.2em + 1cqi)}}

31
crates/swc_css_minifier/tests/fixture/compress-calc/container/input.css Normal file
View File

@ -0,0 +1,31 @@
@container (inline-size >= 0px) {
h2 { font-size: calc(1cqw + 1cqw); }
}
@container (inline-size >= 0px) {
h2 { font-size: calc(1cqh + 1cqh); }
}
@container (inline-size >= 0px) {
h2 { font-size: calc(1cqi + 1cqi); }
}
@container (inline-size >= 0px) {
h2 { font-size: calc(1cqb + 1cqb); }
}
@container (inline-size >= 0px) {
h2 { font-size: calc(1cqmin + 1cqmin); }
}
@container (inline-size >= 0px) {
h2 { font-size: calc(1cqmax + 1cqmax); }
}
@container (inline-size >= calc(100px + 100px)) {
h2 { font-size: calc(1cqw + 1cqw); }
}
@container (inline-size >= calc(calc(100px + 100px))) {
h2 { font-size: calc(1cqw + 1cqw); }
}

1
crates/swc_css_minifier/tests/fixture/compress-calc/container/output.min.css vendored Normal file
View File

@ -0,0 +1 @@
@container(inline-size>=0px){h2{font-size:2cqw}}@container(inline-size>=0px){h2{font-size:2cqh}}@container(inline-size>=0px){h2{font-size:2cqi}}@container(inline-size>=0px){h2{font-size:2cqb}}@container(inline-size>=0px){h2{font-size:2cqmin}}@container(inline-size>=0px){h2{font-size:2cqmax}}@container(inline-size>=200px){h2{font-size:2cqw}}@container(inline-size>=calc(200px)){h2{font-size:2cqw}}

12
crates/swc_css_minifier/tests/fixture/compress-calc/media-query/input.css
View File

@ -3,3 +3,15 @@
color: red;
}
}
@media (min-width: calc(calc(10px + 10px))) {
.class1 {
color: red;
}
}
@media (color: calc(0 + 1)) {
.class1 {
color: red;
}
}

2
crates/swc_css_minifier/tests/fixture/compress-calc/media-query/output.min.css vendored
View File

@ -1 +1 @@
@media(min-width:calc(10px + 10px)){.class1{color:red}}
@media(min-width:20px){.class1{color:red}}@media(min-width:calc(20px)){.class1{color:red}}@media(color:1){.class1{color:red}}

4
crates/swc_css_minifier/tests/fixture/compress-calc/simple-calc/input.css
View File

@ -148,3 +148,7 @@
.class36 {
width: calc(1.1E+1px + 1.1E+1px);
}
.class37 {
width: calc(calc(calc(100px + 100px)));
}

2
crates/swc_css_minifier/tests/fixture/compress-calc/simple-calc/output.min.css vendored
View File

@ -1 +1 @@
.class1{width:2px}.class2{width:2px;height:5px}.class3{width:1.5rem}.class4{width:2em}.class5{width:calc(2ex/2)}.class6{width:60px}.class7{width:calc(-0px + 100%)}.class8{width:calc(200px - 100%)}.class9{width:2px}.class10{width:2px}.class11{width:3rem}.class12{width:calc(100% + 1px)}.class13{width:calc(2rem - .14285em)}@supports(width:calc(100% - constant(safe-area-inset-left))){.class14{width:calc(100% - constant(safe-area-inset-left))}}.class15{width:calc(100% + 1163.5px - 75.37%)}.class16{width:calc(((100% + 123.5px)/.7537 - 100vw + 60px)/2 + 30px)}.class17{width:calc(75.37% - 763.5px)}.class18{width:calc(1163.5px - 10%)}.class19{width:calc((1em - calc(10px + 1em))/2)}.class20{width:200px}.class21{width:0}.class22{width:200px}.class23{width:calc(200px/1)}.class24{width:-200px}.class25{width:0}.class26{width:-200px}.class27{width:calc(200px/-1)}.class28{width:200px}.class29{width:200px}.class30{width:200px}.class31{width:22px}.class32{width:200px}.class33{width:22e9px}.class34{width:90px}.class35{width:100%}.class36{width:22px}
.class1{width:2px}.class2{width:2px;height:5px}.class3{width:1.5rem}.class4{width:2em}.class5{width:calc(2ex/2)}.class6{width:60px}.class7{width:calc(-0px + 100%)}.class8{width:calc(200px - 100%)}.class9{width:2px}.class10{width:2px}.class11{width:3rem}.class12{width:calc(100% + 1px)}.class13{width:calc(2rem - .14285em)}@supports(width:calc(100% - constant(safe-area-inset-left))){.class14{width:calc(100% - constant(safe-area-inset-left))}}.class15{width:calc(100% + 1163.5px - 75.37%)}.class16{width:calc(((100% + 123.5px)/.7537 - 100vw + 60px)/2 + 30px)}.class17{width:calc(75.37% - 763.5px)}.class18{width:calc(1163.5px - 10%)}.class19{width:calc((1em - calc(10px + 1em))/2)}.class20{width:200px}.class21{width:0}.class22{width:200px}.class23{width:calc(200px/1)}.class24{width:-200px}.class25{width:0}.class26{width:-200px}.class27{width:calc(200px/-1)}.class28{width:200px}.class29{width:200px}.class30{width:200px}.class31{width:22px}.class32{width:200px}.class33{width:22e9px}.class34{width:90px}.class35{width:100%}.class36{width:22px}.class37{width:calc(calc(200px))}

11
crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/input.css Normal file
View File

@ -0,0 +1,11 @@
@supports (width: calc(100px + 100px)) {
div {
background: red;
}
}
@supports (width: calc(calc(100px + 100px))) {
div {
background: red;
}
}

1
crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/output.min.css vendored Normal file
View File

@ -0,0 +1 @@
@supports(width:calc(200px)){div{background:red}}@supports(width:calc(calc(200px))){div{background:red}}

18
crates/swc_css_parser/src/parser/at_rule.rs
View File

@ -1879,7 +1879,14 @@ where
tok!("ident") => Ok(MediaFeatureValue::Ident(self.parse()?)),
tok!("dimension") => Ok(MediaFeatureValue::Dimension(self.parse()?)),
Token::Function { value, .. } if is_math_function(value) => {
Ok(MediaFeatureValue::Function(self.parse()?))
let ctx = Ctx {
block_contents_grammar: BlockContentsGrammar::DeclarationValue,
..self.ctx
};
Ok(MediaFeatureValue::Function(
self.with_ctx(ctx).parse_as::<Function>()?,
))
}
_ => Err(Error::new(
span,
@ -2492,7 +2499,14 @@ where
tok!("ident") => Ok(SizeFeatureValue::Ident(self.parse()?)),
tok!("dimension") => Ok(SizeFeatureValue::Dimension(self.parse()?)),
Token::Function { value, .. } if is_math_function(value) => {
Ok(SizeFeatureValue::Function(self.parse()?))
let ctx = Ctx {
block_contents_grammar: BlockContentsGrammar::DeclarationValue,
..self.ctx
};
Ok(SizeFeatureValue::Function(
self.with_ctx(ctx).parse_as::<Function>()?,
))
}
_ => Err(Error::new(
span,

2
crates/swc_css_parser/tests/fixture/at-rule/container/input.css
View File

@ -129,3 +129,5 @@ main, aside {
}
}
}
@container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}

365
crates/swc_css_parser/tests/fixture/at-rule/container/output.json
View File

@ -2,7 +2,7 @@
"type": "Stylesheet",
"span": {
"start": 1,
"end": 2395,
"end": 2467,
"ctxt": 0
},
"rules": [
@ -6787,6 +6787,369 @@
}
]
}
},
{
"type": "AtRule",
"span": {
"start": 2396,
"end": 2466,
"ctxt": 0
},
"name": {
"type": "Ident",
"span": {
"start": 2397,
"end": 2406,
"ctxt": 0
},
"value": "container",
"raw": "container"
},
"prelude": {
"type": "ContainerCondition",
"span": {
"start": 2406,
"end": 2432,
"ctxt": 0
},
"name": null,
"query": {
"type": "ContainerQuery",
"span": {
"start": 2406,
"end": 2432,
"ctxt": 0
},
"queries": [
{
"type": "SizeFeatureRange",
"span": {
"start": 2406,
"end": 2432,
"ctxt": 0
},
"left": {
"type": "Ident",
"span": {
"start": 2407,
"end": 2418,
"ctxt": 0
},
"value": "inline-size",
"raw": "inline-size"
},
"comparison": ">=",
"right": {
"type": "Function",
"span": {
"start": 2420,
"end": 2431,
"ctxt": 0
},
"name": {
"type": "Ident",
"span": {
"start": 2420,
"end": 2424,
"ctxt": 0
},
"value": "calc",
"raw": "calc"
},
"value": [
{
"type": "CalcSum",
"span": {
"start": 2425,
"end": 2430,
"ctxt": 0
},
"expressions": [
{
"type": "CalcProduct",
"span": {
"start": 2425,
"end": 2430,
"ctxt": 0
},
"expressions": [
{
"type": "Length",
"span": {
"start": 2425,
"end": 2430,
"ctxt": 0
},
"value": {
"type": "Number",
"span": {
"start": 2425,
"end": 2428,
"ctxt": 0
},
"value": 200.0,
"raw": "200"
},
"unit": {
"type": "Ident",
"span": {
"start": 2428,
"end": 2430,
"ctxt": 0
},
"value": "px",
"raw": "px"
}
}
]
}
]
}
]
}
}
]
}
},
"block": {
"type": "SimpleBlock",
"span": {
"start": 2432,
"end": 2466,
"ctxt": 0
},
"name": {
"type": "PreservedToken",
"span": {
"start": 2432,
"end": 2433,
"ctxt": 0
},
"token": "LBrace"
},
"value": [
{
"type": "QualifiedRule",
"span": {
"start": 2433,
"end": 2465,
"ctxt": 0
},
"prelude": {
"type": "SelectorList",
"span": {
"start": 2433,
"end": 2435,
"ctxt": 0
},
"children": [
{
"type": "ComplexSelector",
"span": {
"start": 2433,
"end": 2435,
"ctxt": 0
},
"children": [
{
"type": "CompoundSelector",
"span": {
"start": 2433,
"end": 2435,
"ctxt": 0
},
"nestingSelector": null,
"typeSelector": {
"type": "TagNameSelector",
"span": {
"start": 2433,
"end": 2435,
"ctxt": 0
},
"name": {
"type": "WqName",
"span": {
"start": 2433,
"end": 2435,
"ctxt": 0
},
"prefix": null,
"value": {
"type": "Ident",
"span": {
"start": 2433,
"end": 2435,
"ctxt": 0
},
"value": "h2",
"raw": "h2"
}
}
},
"subclassSelectors": []
}
]
}
]
},
"block": {
"type": "SimpleBlock",
"span": {
"start": 2435,
"end": 2465,
"ctxt": 0
},
"name": {
"type": "PreservedToken",
"span": {
"start": 2435,
"end": 2436,
"ctxt": 0
},
"token": "LBrace"
},
"value": [
{
"type": "Declaration",
"span": {
"start": 2436,
"end": 2464,
"ctxt": 0
},
"name": {
"type": "Ident",
"span": {
"start": 2436,
"end": 2445,
"ctxt": 0
},
"value": "font-size",
"raw": "font-size"
},
"value": [
{
"type": "Function",
"span": {
"start": 2446,
"end": 2464,
"ctxt": 0
},
"name": {
"type": "Ident",
"span": {
"start": 2446,
"end": 2450,
"ctxt": 0
},
"value": "calc",
"raw": "calc"
},
"value": [
{
"type": "CalcSum",
"span": {
"start": 2451,
"end": 2463,
"ctxt": 0
},
"expressions": [
{
"type": "CalcProduct",
"span": {
"start": 2451,
"end": 2456,
"ctxt": 0
},
"expressions": [
{
"type": "Length",
"span": {
"start": 2451,
"end": 2456,
"ctxt": 0
},
"value": {
"type": "Number",
"span": {
"start": 2451,
"end": 2454,
"ctxt": 0
},
"value": 1.2,
"raw": "1.2"
},
"unit": {
"type": "Ident",
"span": {
"start": 2454,
"end": 2456,
"ctxt": 0
},
"value": "em",
"raw": "em"
}
}
]
},
{
"type": "CalcOperator",
"span": {
"start": 2457,
"end": 2458,
"ctxt": 0
},
"value": "+"
},
{
"type": "CalcProduct",
"span": {
"start": 2459,
"end": 2463,
"ctxt": 0
},
"expressions": [
{
"type": "Length",
"span": {
"start": 2459,
"end": 2463,
"ctxt": 0
},
"value": {
"type": "Number",
"span": {
"start": 2459,
"end": 2460,
"ctxt": 0
},
"value": 1.0,
"raw": "1"
},
"unit": {
"type": "Ident",
"span": {
"start": 2460,
"end": 2463,
"ctxt": 0
},
"value": "cqi",
"raw": "cqi"
}
}
]
}
]
}
]
}
],
"important": null
}
]
}
}
]
}
}
]
}

358
crates/swc_css_parser/tests/fixture/at-rule/container/span.rust-debug
View File

@ -131,7 +131,9 @@
128 | | background-color: skyblue;
129 | | }
130 | | }
131 | `-> }
131 | | }
132 | |
133 | `-> @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
`----
x Rule
@ -6392,3 +6394,357 @@
128 | background-color: skyblue;
: ^^^^^^^
`----
x Rule
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x AtRule
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x AtRuleName
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^
`----
x Function
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^
`----
x ComponentValue
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x CalcSum
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x CalcProductOrOperator
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x CalcProduct
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x CalcValueOrOperator
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x CalcValue
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x Dimension
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x Length
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x Number
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x SimpleBlock
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x LBrace
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^
`----
x ComponentValue
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x Rule
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x QualifiedRule
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x SelectorList
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x ComplexSelector
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x CompoundSelector
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x TypeSelector
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x TagNameSelector
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x WqName
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x SimpleBlock
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x LBrace
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^
`----
x ComponentValue
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x StyleBlock
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x Declaration
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`----
x DeclarationName
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^
`----
x ComponentValue
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^
`----
x Function
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^^^^^^^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^
`----
x ComponentValue
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^
`----
x CalcSum
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^^^^^^^^
`----
x CalcProductOrOperator
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x CalcProduct
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x CalcValueOrOperator
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x CalcValue
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x Dimension
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x Length
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^^
`----
x Number
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^
`----
x CalcProductOrOperator
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^
`----
x CalcOperator
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^
`----
x CalcProductOrOperator
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^
`----
x CalcProduct
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^
`----
x CalcValueOrOperator
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^
`----
x CalcValue
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^
`----
x Dimension
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^
`----
x Length
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^^
`----
x Number
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^
`----
x Ident
,-[$DIR/tests/fixture/at-rule/container/input.css:133:1]
133 | @container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}
: ^^^
`----

2
crates/swc_css_parser/tests/fixture/at-rule/media/input.css
View File

@ -147,3 +147,5 @@
@media (aspect-ratio: 12/) {}
@media func(100px) {}
@media screen and func(100px) {}
@media(min-width:calc(10px + 10px)) {}
@media (width > calc(220px + 100px)) {}

1588
crates/swc_css_parser/tests/fixture/at-rule/media/output.json
View File

File diff suppressed because it is too large Load Diff

1262
crates/swc_css_parser/tests/fixture/at-rule/media/span.rust-debug
View File

File diff suppressed because it is too large Load Diff