feat(css/codegen): Improve minification of numbers (#3423)

crates/swc_css_codegen/src/lib.rs

@@ -764,7 +764,11 @@ where
 
     #[emitter]
     fn emit_str(&mut self, n: &Str) -> Result {
-        self.wr.write_raw(Some(n.span), &n.raw)?;
+        if self.config.minify {
+            self.wr.write_str(Some(n.span), &n.value)?;
+        } else {
+            self.wr.write_raw(Some(n.span), &n.raw)?;
+        }
     }
 
     #[emitter]
@@ -938,15 +942,64 @@ where
 
     #[emitter]
     fn emit_number(&mut self, n: &Number) -> Result {
-        self.wr.write_raw(Some(n.span), &n.raw)?;
+        if self.config.minify {
+            if n.value.is_sign_negative() && n.value == 0.0 {
+                self.wr.write_raw(Some(n.span), "-0")?;
+            } else {
+                let mut minified = n.value.to_string();
+
+                if minified.starts_with("0.") {
+                    minified.replace_range(0..1, "");
+                } else if minified.starts_with("-0.") {
+                    minified.replace_range(1..2, "");
+                }
+
+                if minified.starts_with(".000") {
+                    let mut cnt = 3;
+
+                    for &v in minified.as_bytes().iter().skip(4) {
+                        if v == b'0' {
+                            cnt += 1;
+                        } else {
+                            break;
+                        }
+                    }
+
+                    minified.replace_range(0..cnt + 1, "");
+
+                    let remain_len = minified.len();
+
+                    minified.push_str("e-");
+                    minified.push_str(&(remain_len + cnt).to_string());
+                } else if minified.ends_with("000") {
+                    let mut cnt = 3;
+
+                    for &v in minified.as_bytes().iter().rev().skip(3) {
+                        if v == b'0' {
+                            cnt += 1;
+                        } else {
+                            break;
+                        }
+                    }
+
+                    minified.truncate(minified.len() - cnt);
+                    minified.push('e');
+                    minified.push_str(&cnt.to_string());
+                }
+
+                self.wr.write_raw(Some(n.span), &minified)?;
+            }
+        } else {
+            self.wr.write_raw(Some(n.span), &n.raw)?;
+        }
     }
 
     #[emitter]
     fn emit_ration(&mut self, n: &Ratio) -> Result {
         emit!(self, n.left);
-        punct!(self, "/");
 
         if let Some(right) = &n.right {
+            punct!(self, "/");
             emit!(self, right);
         }
     }

crates/swc_css_codegen/src/writer/basic.rs

@@ -1,5 +1,8 @@
 use super::CssWriter;
-use std::fmt::{Result, Write};
+use std::{
+    fmt::{Result, Write},
+    str::from_utf8,
+};
 use swc_common::Span;
 
 pub struct BasicCssWriterConfig<'a> {
@@ -67,10 +70,81 @@ where
         self.w.write_char(' ')
     }
 
-    fn write_raw(&mut self, _span: Option<Span>, text: &str) -> Result {
+    fn write_str(&mut self, span: Option<Span>, text: &str) -> Result {
-        for (_, s) in text.chars().enumerate() {
+        let mut new_string = String::new();
-            self.col += 1;
+
-            self.w.write_char(s)?;
+        let mut dq = 0;
+        let mut sq = 0;
+
+        for char in text.chars() {
+            match char {
+                // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD).
+                '\0' => {
+                    new_string.push('\u{FFFD}');
+                }
+                // If the character is in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, the
+                // character escaped as code point.
+                '\x01'..='\x1F' | '\x7F' => {
+                    static HEX_DIGITS: &[u8; 16] = b"0123456789abcdef";
+
+                    let b3;
+                    let b4;
+                    let char_as_u8 = char as u8;
+
+                    let bytes = if char_as_u8 > 0x0F {
+                        let high = (char_as_u8 >> 4) as usize;
+                        let low = (char_as_u8 & 0x0F) as usize;
+
+                        b4 = [b'\\', HEX_DIGITS[high], HEX_DIGITS[low], b' '];
+
+                        &b4[..]
+                    } else {
+                        b3 = [b'\\', HEX_DIGITS[char as usize], b' '];
+
+                        &b3[..]
+                    };
+
+                    new_string.push_str(from_utf8(bytes).unwrap());
+                }
+                // If the character is '"' (U+0022) or "\" (U+005C), the escaped character.
+                // We avoid escaping `"` to better string compression - we count the quantity of
+                // quotes to choose the best default quotes
+                '\\' => {
+                    new_string.push_str("\\\\");
+                }
+                '"' => {
+                    dq += 1;
+
+                    new_string.push(char);
+                }
+                '\'' => {
+                    sq += 1;
+
+                    new_string.push(char);
+                }
+                // Otherwise, the character itself.
+                _ => {
+                    new_string.push(char);
+                }
+            };
+        }
+
+        if dq > sq {
+            self.write_raw_char(span, '\'')?;
+            self.write_raw(span, &new_string.replace('\'', "\\'"))?;
+            self.write_raw_char(span, '\'')?;
+        } else {
+            self.write_raw_char(span, '"')?;
+            self.write_raw(span, &new_string.replace('"', "\\\""))?;
+            self.write_raw_char(span, '"')?;
+        }
+
+        Ok(())
+    }
+
+    fn write_raw(&mut self, span: Option<Span>, text: &str) -> Result {
+        for char in text.chars() {
+            self.write_raw_char(span, char)?;
         }
 
         Ok(())

crates/swc_css_codegen/src/writer/mod.rs

@@ -13,6 +13,8 @@ pub trait CssWriter {
 
     fn write_raw(&mut self, span: Option<Span>, text: &str) -> Result;
 
+    fn write_str(&mut self, span: Option<Span>, text: &str) -> Result;
+
     fn write_raw_char(&mut self, span: Option<Span>, c: char) -> Result;
 
     fn write_newline(&mut self) -> Result;

crates/swc_css_codegen/tests/fixture/at-rules/color-profile/output.min.css

@@ -1 +1 @@
-@color-profile --swop5c{src:url('https://example.org/SWOP2006_Coated5v2.icc')}
+@color-profile --swop5c{src:url("https://example.org/SWOP2006_Coated5v2.icc")}

crates/swc_css_codegen/tests/fixture/at-rules/import/1/output.min.css

@@ -1 +1 @@
-@import'custom.css';@import url("chrome://communicator/skin/");@import url("fineprint.css")print;@import url("bluish.css")speech;@import"common.css"screen;@import url('landscape.css')screen and (orientation:landscape);@import url("narrow.css")handheld and (max-width:400px);@import"narrow.css"handheld and (max-width:400px);@import url("tabs.css")layer(framework);@import url("override.css")layer();@import url("override.css")layer;@import url("fineprint.css")print;@import url("bluish.css")projection,tv;@import url("narrow.css")handheld and (max-width:400px);@import"mystyle.css"supports(display:flex);@import"mystyle.css"supports((display:flex));@import url("override.css")layer supports(display:flex);@import url("override.css")layer screen and (orientation:landscape);@import url("override.css")layer supports(display:flex)screen and (orientation:landscape);
+@import"custom.css";@import url("chrome://communicator/skin/");@import url("fineprint.css")print;@import url("bluish.css")speech;@import"common.css"screen;@import url("landscape.css")screen and (orientation:landscape);@import url("narrow.css")handheld and (max-width:400px);@import"narrow.css"handheld and (max-width:400px);@import url("tabs.css")layer(framework);@import url("override.css")layer();@import url("override.css")layer;@import url("fineprint.css")print;@import url("bluish.css")projection,tv;@import url("narrow.css")handheld and (max-width:400px);@import"mystyle.css"supports(display:flex);@import"mystyle.css"supports((display:flex));@import url("override.css")layer supports(display:flex);@import url("override.css")layer screen and (orientation:landscape);@import url("override.css")layer supports(display:flex)screen and (orientation:landscape);

crates/swc_css_codegen/tests/fixture/at-rules/layer/1/output.min.css

@@ -1 +1 @@
-@layer framework,override,foo,bar.baz;@layer override{@keyframes slide-left{from{translate:0}to{translate:-100%0}}}@layer framework{@keyframes slide-left{from{margin-left:0}to{margin-left:-100%}}}.sidebar{animation:slide-left 300ms}@layer{}@layer{}@layer reset.type{strong{font-weight:bold}}@layer framework{.title{font-weight:100}@layer theme{h1,h2{color:maroon}}}@layer reset{[hidden]{display:none}}@layer framework{@layer default{p{margin-block:0.75em}}@layer theme{p{color:#222}}}@layer framework.theme{blockquote{color:rebeccapurple}}
+@layer framework,override,foo,bar.baz;@layer override{@keyframes slide-left{from{translate:0}to{translate:-100%0}}}@layer framework{@keyframes slide-left{from{margin-left:0}to{margin-left:-100%}}}.sidebar{animation:slide-left 300ms}@layer{}@layer{}@layer reset.type{strong{font-weight:bold}}@layer framework{.title{font-weight:100}@layer theme{h1,h2{color:maroon}}}@layer reset{[hidden]{display:none}}@layer framework{@layer default{p{margin-block:.75em}}@layer theme{p{color:#222}}}@layer framework.theme{blockquote{color:rebeccapurple}}

crates/swc_css_codegen/tests/fixture/at-rules/media/4/input.css

@@ -112,3 +112,4 @@
 @media {}
 @media    {}
 @media not (min-width: 100px) {}
+@media ((color) or (hover)) and (min-width:1024px){.a{color:green}}

crates/swc_css_codegen/tests/fixture/at-rules/media/4/output.css

@@ -97,3 +97,4 @@
 @media {}
 @media {}
 @media  not (min-width: 100px) {}
+@media ((color) or (hover)) and (min-width: 1024px) {.a {color: green}}

crates/swc_css_codegen/tests/fixture/at-rules/media/4/output.min.css

@@ -1 +1 @@
-@media screen{}@media \screen{}@media all{}@media screen{}@media print{}@media screen and (color){}@media screen and (color),projection and (color){}@media screen and (color),projection and (color){}@media print and (min-resolution:118dpcm){}@media all{}@media screen and (color){}@media screen and (color){}@media not all and (monochrome){}@media not screen and (color),print and (color){}@media not (device-aspect-ratio:16/9){}@media not (device-aspect-ratio:16/9){}@media not all{}@media not all{}@media only screen and (color){}@media only screen and (color){}@media(min-width:20px){}@media(min-width:20px){}@media(min-width:20px){}@media(device-aspect-ratio:16/9){}@media(device-aspect-ratio:16/9){}@media(grid)and (max-width:15em){}@media(monochrome){}@media(min-width:20em)and (min-width:20em){}@media(min-width:20em)and (min-width:20em){}@media(min-width:1024px)and (min-width:1024px)and (min-width:1024px){}@media(min-width:20em)and (min-width:20em){}@media(min-width:20em)and (min-width:20em){}@media(update:slow)or (hover:none){}@media(update:slow)or (hover:none){}@media(update:slow)or (hover:none){}@media(height<600px){}@media(height<=600px){}@media(height>600px){}@media(height>=600px){}@media(height=600px){}@media(height<600px){}@media(height<=600px){}@media(height>600px){}@media(height>=600px){}@media(height=600px){}@media(height=600px){}@media(height>=600px){}@media(600px<height){}@media(600px<=height){}@media(600px>height){}@media(600px>=height){}@media(600px=height){}@media(600px<height){}@media(600px<=height){}@media(600px>height){}@media(600px>=height){}@media(600px=height){}@media(600px=height){}@media(600px>=height){}@media(400px<width<700px){}@media(400px<=width<700px){}@media(400px<width<=700px){}@media(400px<=width<=700px){}@media(400px<width<700px){}@media(400px<=width<=700px){}@media(400px<width<700px){}@media(400px<=width<700px){}@media(400px<width<=700px){}@media(400px<=width<=700px){}@media(400px<width<700px){}@media(400px<=width<=700px){}@media(400px>width>700px){}@media(400px>=width>700px){}@media(400px>width>=700px){}@media(400px>=width>=700px){}@media(400px>width>700px){}@media(400px>=width>=700px){}@media(400px>width>700px){}@media(400px>=width>700px){}@media(400px>width>=700px){}@media(400px>=width>=700px){}@media(400px>width>700px){}@media(400px>=width>=700px){}@media(--modern)and (min-width:1024px){}@media(not (color))or (hover){}@media(not (color))or (hover){}@media((color)or (hover))and (width>1024px){}@media(((color))or ((hover)))and (width>1024px){}@media(((((color))or ((hover)))))and (width>1024px){}@media(((((color))or ((hover)))))and (width>1024px){}@media((min-width:800px)and (min-width:800px))or (min-width:800px){}@media(min-width:800px)and ((min-width:800px)or (min-width:800px)){}@media NOT all{}@media ONLY screen and (color){}@media((min-width:800px)and (min-width:800px))or (min-width:800px){}@media(min-width:800px)and ((min-width:800px)or (min-width:800px)){}@media{}@media{}@media not (min-width:100px){}
+@media screen{}@media \screen{}@media all{}@media screen{}@media print{}@media screen and (color){}@media screen and (color),projection and (color){}@media screen and (color),projection and (color){}@media print and (min-resolution:118dpcm){}@media all{}@media screen and (color){}@media screen and (color){}@media not all and (monochrome){}@media not screen and (color),print and (color){}@media not (device-aspect-ratio:16/9){}@media not (device-aspect-ratio:16/9){}@media not all{}@media not all{}@media only screen and (color){}@media only screen and (color){}@media(min-width:20px){}@media(min-width:20px){}@media(min-width:20px){}@media(device-aspect-ratio:16/9){}@media(device-aspect-ratio:16/9){}@media(grid)and (max-width:15em){}@media(monochrome){}@media(min-width:20em)and (min-width:20em){}@media(min-width:20em)and (min-width:20em){}@media(min-width:1024px)and (min-width:1024px)and (min-width:1024px){}@media(min-width:20em)and (min-width:20em){}@media(min-width:20em)and (min-width:20em){}@media(update:slow)or (hover:none){}@media(update:slow)or (hover:none){}@media(update:slow)or (hover:none){}@media(height<600px){}@media(height<=600px){}@media(height>600px){}@media(height>=600px){}@media(height=600px){}@media(height<600px){}@media(height<=600px){}@media(height>600px){}@media(height>=600px){}@media(height=600px){}@media(height=600px){}@media(height>=600px){}@media(600px<height){}@media(600px<=height){}@media(600px>height){}@media(600px>=height){}@media(600px=height){}@media(600px<height){}@media(600px<=height){}@media(600px>height){}@media(600px>=height){}@media(600px=height){}@media(600px=height){}@media(600px>=height){}@media(400px<width<700px){}@media(400px<=width<700px){}@media(400px<width<=700px){}@media(400px<=width<=700px){}@media(400px<width<700px){}@media(400px<=width<=700px){}@media(400px<width<700px){}@media(400px<=width<700px){}@media(400px<width<=700px){}@media(400px<=width<=700px){}@media(400px<width<700px){}@media(400px<=width<=700px){}@media(400px>width>700px){}@media(400px>=width>700px){}@media(400px>width>=700px){}@media(400px>=width>=700px){}@media(400px>width>700px){}@media(400px>=width>=700px){}@media(400px>width>700px){}@media(400px>=width>700px){}@media(400px>width>=700px){}@media(400px>=width>=700px){}@media(400px>width>700px){}@media(400px>=width>=700px){}@media(--modern)and (min-width:1024px){}@media(not (color))or (hover){}@media(not (color))or (hover){}@media((color)or (hover))and (width>1024px){}@media(((color))or ((hover)))and (width>1024px){}@media(((((color))or ((hover)))))and (width>1024px){}@media(((((color))or ((hover)))))and (width>1024px){}@media((min-width:800px)and (min-width:800px))or (min-width:800px){}@media(min-width:800px)and ((min-width:800px)or (min-width:800px)){}@media NOT all{}@media ONLY screen and (color){}@media((min-width:800px)and (min-width:800px))or (min-width:800px){}@media(min-width:800px)and ((min-width:800px)or (min-width:800px)){}@media{}@media{}@media not (min-width:100px){}@media((color)or (hover))and (min-width:1024px){.a{color:green}}

crates/swc_css_codegen/tests/fixture/at-rules/viewport/1/output.min.css

@@ -1 +1 @@
-@viewport{width:100vw}@viewport{min-width:640px;max-width:800px}@viewport{zoom:0.75;min-zoom:0.5;max-zoom:0.9}@viewport{orientation:landscape}
+@viewport{width:100vw}@viewport{min-width:640px;max-width:800px}@viewport{zoom:.75;min-zoom:.5;max-zoom:.9}@viewport{orientation:landscape}

crates/swc_css_codegen/tests/fixture/packages/normalize/output.min.css

@@ -1 +1 @@
-html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

crates/swc_css_codegen/tests/fixture/packages/sanitize_css_13_0_0/output.min.css

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box;background-repeat:no-repeat}::before,::after{text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(body){margin:0}:where(h1){font-size:2em;margin:0.67em 0}:where(dl, ol, ul) :where(dl, ol, ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol, ul){list-style-type:none;padding:0}:where(nav li)::before{content:"\200B";float:left}:where(pre){font-family:monospace,monospace;font-size:1em;overflow:auto}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b, strong){font-weight:bolder}:where(code, kbd, samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(audio, canvas, iframe, img, svg, video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:currentColor;text-indent:0}:where(button, input, select){margin:0}:where(button, [type="button" i], [type="reset" i], [type="submit" i]){-webkit-appearance:button}:where(fieldset){border:1px solid#a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){margin:0;resize:vertical}:where([type="search" i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){background-color:white;border:solid;color:black;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(details > summary:first-of-type){display:list-item}:where([aria-busy="true" i]){cursor:progress}:where([aria-disabled="true" i], [disabled]){cursor:not-allowed}:where([aria-hidden="false" i][hidden]){display:initial}:where([aria-hidden="false" i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}
+*,::before,::after{box-sizing:border-box;background-repeat:no-repeat}::before,::after{text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(body){margin:0}:where(h1){font-size:2em;margin:.67em 0}:where(dl, ol, ul) :where(dl, ol, ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol, ul){list-style-type:none;padding:0}:where(nav li)::before{content:"​";float:left}:where(pre){font-family:monospace,monospace;font-size:1em;overflow:auto}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b, strong){font-weight:bolder}:where(code, kbd, samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(audio, canvas, iframe, img, svg, video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:currentColor;text-indent:0}:where(button, input, select){margin:0}:where(button, [type="button" i], [type="reset" i], [type="submit" i]){-webkit-appearance:button}:where(fieldset){border:1px solid#a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){margin:0;resize:vertical}:where([type="search" i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){background-color:white;border:solid;color:black;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(details > summary:first-of-type){display:list-item}:where([aria-busy="true" i]){cursor:progress}:where([aria-disabled="true" i], [disabled]){cursor:not-allowed}:where([aria-hidden="false" i][hidden]){display:initial}:where([aria-hidden="false" i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}

crates/swc_css_codegen/tests/fixture/packages/tailwindcss/collapse-adjacent-rules/output.min.css

@@ -1 +1 @@
-@font-face{font-family:'Poppins';src:url('/fonts/Poppins.woff2')format('woff2'),url('/fonts/Poppins.woff')format('woff')}@font-face{font-family:'Proxima Nova';src:url('/fonts/ProximaNova.woff2')format('woff2'),url('/fonts/ProximaNova.woff')format('woff')}*,::before,::after{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }@font-face{font-family:'Inter';src:url('/fonts/Inter.woff2')format('woff2'),url('/fonts/Inter.woff')format('woff')}@font-face{font-family:'Gilroy';src:url('/fonts/Gilroy.woff2')format('woff2'),url('/fonts/Gilroy.woff')format('woff')}@page {margin:1cm;}.font-bold{font-weight:700}.foo,.bar{color:black;font-weight:700}@media(min-width:640px){.sm\:text-center{text-align:center}.sm\:font-bold{font-weight:700}}@media(min-width:768px){.md\:text-center{text-align:center}.md\:font-bold{font-weight:700}}@media(min-width:1024px){.lg\:text-center{text-align:center}.lg\:font-bold{font-weight:700}}
+@font-face{font-family:"Poppins";src:url("/fonts/Poppins.woff2")format("woff2"),url("/fonts/Poppins.woff")format("woff")}@font-face{font-family:"Proxima Nova";src:url("/fonts/ProximaNova.woff2")format("woff2"),url("/fonts/ProximaNova.woff")format("woff")}*,::before,::after{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }@font-face{font-family:"Inter";src:url("/fonts/Inter.woff2")format("woff2"),url("/fonts/Inter.woff")format("woff")}@font-face{font-family:"Gilroy";src:url("/fonts/Gilroy.woff2")format("woff2"),url("/fonts/Gilroy.woff")format("woff")}@page {margin:1cm;}.font-bold{font-weight:700}.foo,.bar{color:black;font-weight:700}@media(min-width:640px){.sm\:text-center{text-align:center}.sm\:font-bold{font-weight:700}}@media(min-width:768px){.md\:text-center{text-align:center}.md\:font-bold{font-weight:700}}@media(min-width:1024px){.lg\:text-center{text-align:center}.lg\:font-bold{font-weight:700}}

crates/swc_css_codegen/tests/fixture/values/comma/output.min.css

@@ -1 +1 @@
-div{box-shadow:3px 3px red,-1em 0 0.4em olive}
+div{box-shadow:3px 3px red,-1em 0 .4em olive}

crates/swc_css_codegen/tests/fixture/values/dimension/output.min.css

@@ -1 +1 @@
-div{padding:10px 10px;border:1px solid black;transition:top 1s ease-out 0.5s;text-shadow:1px 1px 2px black,0 0 1em red}
+div{padding:10px 10px;border:1px solid black;transition:top 1s ease-out .5s;text-shadow:1px 1px 2px black,0 0 1em red}

crates/swc_css_codegen/tests/fixture/values/function/output.min.css

@@ -1 +1 @@
-div{transform:rotate(9deg)translate(0px,71px)scale(1.5);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);filter:drop-shadow(0.25rem 0 0.75rem#ef9035);animation:2s infinite alternate steps(10);background-image:image-set("image.png"1x,"image-2x.png"2x,"image-print.png"600dpi);padding:env(safe-area-inset-top,20px)env(safe-area-inset-right,20px)env(safe-area-inset-bottom,20px)env(safe-area-inset-left,20px)}li::after{content:"["counter(listCounter)"] == ["counter(listCounter,upper-roman)"]"}li::before{content:counters(listCounter,".")" == "counters(listCounter,".",lower-roman)}div{grid-template-columns:fit-content(8ch)fit-content(8ch)1fr}@font-face{font-family:examplefont;src:local(Example Font),url('examplefont.woff')format("woff"),url('examplefont.otf')format("opentype")}.three{background-color:var(--my-var,var(--my-background,pink))}img,input[type="image"],video,embed,iframe,marquee,object,table{aspect-ratio:attr(width)/attr(height)}div{prop:func(foo),func(foo)}
+div{transform:rotate(9deg)translate(0px,71px)scale(1.5);box-shadow:2px 2px 2px 1px rgba(0,0,0,.2);filter:drop-shadow(.25rem 0 .75rem#ef9035);animation:2s infinite alternate steps(10);background-image:image-set("image.png"1x,"image-2x.png"2x,"image-print.png"600dpi);padding:env(safe-area-inset-top,20px)env(safe-area-inset-right,20px)env(safe-area-inset-bottom,20px)env(safe-area-inset-left,20px)}li::after{content:"["counter(listCounter)"] == ["counter(listCounter,upper-roman)"]"}li::before{content:counters(listCounter,".")" == "counters(listCounter,".",lower-roman)}div{grid-template-columns:fit-content(8ch)fit-content(8ch)1fr}@font-face{font-family:examplefont;src:local(Example Font),url("examplefont.woff")format("woff"),url("examplefont.otf")format("opentype")}.three{background-color:var(--my-var,var(--my-background,pink))}img,input[type="image"],video,embed,iframe,marquee,object,table{aspect-ratio:attr(width)/attr(height)}div{prop:func(foo),func(foo)}

crates/swc_css_codegen/tests/fixture/values/keyword/output.min.css

@@ -1 +1 @@
-div{background:center/contain no-repeat url("../../media/examples/firefox-logo.svg"),#eee 35%url("../../media/examples/lizard.png");border:medium dashed green}div{border:0.5rem outset pink;outline:0.5rem solid khaki;box-shadow:0 0 0 2rem skyblue;border-radius:12px;font:bold 1rem sans-serif;margin:2rem;padding:1rem;outline-offset:0.5rem}p{width:70px;height:70px;border:solid 30px;border-color:orange orange silver silver;border-top-right-radius:100%}
+div{background:center/contain no-repeat url("../../media/examples/firefox-logo.svg"),#eee 35%url("../../media/examples/lizard.png");border:medium dashed green}div{border:.5rem outset pink;outline:.5rem solid khaki;box-shadow:0 0 0 2rem skyblue;border-radius:12px;font:bold 1rem sans-serif;margin:2rem;padding:1rem;outline-offset:.5rem}p{width:70px;height:70px;border:solid 30px;border-color:orange orange silver silver;border-top-right-radius:100%}

crates/swc_css_codegen/tests/fixture/values/number/input.css

@@ -3,4 +3,99 @@ div {
     margin: 20 30;
     margin: 20 30px;
     margin: 20px 30;
-}
+}
+
+div {
+    property: 10;
+    property: +10;
+    property: -10;
+    property: 0.1;
+    property: +0.1;
+    property: -0.1;
+    property: -.1;
+    property: +.1;
+    property: 0;
+    property: 10;
+    property: .10;
+    property: 12.34;
+    property: 0.1;
+    property: 1.0;
+    property: 0.0;
+    property: +0.0;
+    property: -0.0;
+    property: .0;
+    property: 1.200000;
+    property: 1.2e2;
+    property: 1e2;
+    property: .2e2;
+    property: 1.2E2;
+    property: 1.2e+2;
+    property: 1.2e-2;
+    property: -1;
+    property: -1.2;
+    property: .2;
+    property: -.2;
+    property: +.2;
+    property: -1.2e3;
+    property: 1.75;
+    property: +1.75;
+    property: 1e0;
+    property: 1e1;
+    property: 1e+1;
+    property: 1e-1;
+    property: 1e-10;
+    property: 1+2;
+    property: 1-2;
+    property: 4.01;
+    property: -456.8;
+    property: .60;
+    property: .0060;
+    property: 10e3;
+    property: -3.4e-2;
+    property: 0.5600000000;
+    property: 10e6;
+    property: 10000000;
+    property: 0.0;
+    property: -0.0;
+    property: +0.0;
+    property: 0.00;
+    property: 1e0;
+    property: 1e1;
+    property: 1e2;
+    property: 1e3;
+    property: 1e4;
+    property: 1e5;
+    property: 1e-0;
+    property: 1e-1;
+    property: 1e-2;
+    property: 1e-3;
+    property: 1e-4;
+    property: 1e-5;
+    property: -1e-0;
+    property: -1e-1;
+    property: -1e-2;
+    property: -1e-3;
+    property: -1e-4;
+    property: -1e-5;
+    property: 0.1;
+    property: 0.01;
+    property: 0.001;
+    property: 0.0001;
+    property: 0.00001;
+    property: 0.000001;
+    property: 0.5;
+    property: 0.05;
+    property: 0.005;
+    property: 0.0005;
+    property: 0.00005;
+    property: 0.000005;
+    property: 0.000015;
+    property: 0.00001543;
+    property: 0.00001543000;
+    property: 000000;
+    property: +000000;
+    property: -000000;
+    property: 100.1e-5;
+    property: 100.1e-6;
+    property: 10001000000;
+}

crates/swc_css_codegen/tests/fixture/values/number/output.css

@@ -2,3 +2,95 @@ div {line-height: 100;
 margin: 20 30;
 margin: 20 30px;
 margin: 20px 30}
+div {property: 10;
+property: +10;
+property: -10;
+property: 0.1;
+property: +0.1;
+property: -0.1;
+property: -.1;
+property: +.1;
+property: 0;
+property: 10;
+property: .10;
+property: 12.34;
+property: 0.1;
+property: 1.0;
+property: 0.0;
+property: +0.0;
+property: -0.0;
+property: .0;
+property: 1.200000;
+property: 1.2e2;
+property: 1e2;
+property: .2e2;
+property: 1.2E2;
+property: 1.2e+2;
+property: 1.2e-2;
+property: -1;
+property: -1.2;
+property: .2;
+property: -.2;
+property: +.2;
+property: -1.2e3;
+property: 1.75;
+property: +1.75;
+property: 1e0;
+property: 1e1;
+property: 1e+1;
+property: 1e-1;
+property: 1e-10;
+property: 1 +2;
+property: 1 -2;
+property: 4.01;
+property: -456.8;
+property: .60;
+property: .0060;
+property: 10e3;
+property: -3.4e-2;
+property: 0.5600000000;
+property: 10e6;
+property: 10000000;
+property: 0.0;
+property: -0.0;
+property: +0.0;
+property: 0.00;
+property: 1e0;
+property: 1e1;
+property: 1e2;
+property: 1e3;
+property: 1e4;
+property: 1e5;
+property: 1e-0;
+property: 1e-1;
+property: 1e-2;
+property: 1e-3;
+property: 1e-4;
+property: 1e-5;
+property: -1e-0;
+property: -1e-1;
+property: -1e-2;
+property: -1e-3;
+property: -1e-4;
+property: -1e-5;
+property: 0.1;
+property: 0.01;
+property: 0.001;
+property: 0.0001;
+property: 0.00001;
+property: 0.000001;
+property: 0.5;
+property: 0.05;
+property: 0.005;
+property: 0.0005;
+property: 0.00005;
+property: 0.000005;
+property: 0.000015;
+property: 0.00001543;
+property: 0.00001543000;
+property: 000000;
+property: +000000;
+property: -000000;
+property: 100.1e-5;
+property: 100.1e-6;
+property: 10001000000}

crates/swc_css_codegen/tests/fixture/values/number/output.min.css

@@ -1 +1 @@
-div{line-height:100;margin:20 30;margin:20 30px;margin:20px 30}
+div{line-height:100;margin:20 30;margin:20 30px;margin:20px 30}div{property:10;property:10;property:-10;property:.1;property:.1;property:-.1;property:-.1;property:.1;property:0;property:10;property:.1;property:12.34;property:.1;property:1;property:0;property:0;property:-0;property:0;property:1.2;property:120;property:100;property:20;property:120;property:120;property:.012;property:-1;property:-1.2;property:.2;property:-.2;property:.2;property:-1200;property:1.75;property:1.75;property:1;property:10;property:10;property:.1;property:1e-10;property:1 2;property:1 -2;property:4.01;property:-456.8;property:.6;property:.006;property:1e4;property:-.034;property:.56;property:1e7;property:1e7;property:0;property:-0;property:0;property:0;property:1;property:10;property:100;property:1e3;property:1e4;property:1e5;property:1;property:.1;property:.01;property:.001;property:1e-4;property:1e-5;property:-1;property:-.1;property:-.01;property:-.001;property:-.0001;property:-.00001;property:.1;property:.01;property:.001;property:1e-4;property:1e-5;property:1e-6;property:.5;property:.05;property:.005;property:5e-4;property:5e-5;property:5e-6;property:15e-6;property:1543e-8;property:1543e-8;property:0;property:0;property:-0;property:.001001;property:1001e-7;property:10001e6}

crates/swc_css_codegen/tests/fixture/values/percentage/input.css

@@ -21,3 +21,23 @@ div {
 div { 
     background: rgba(0, 0, 0, 0) image-set(url("image.png") 1x) repeat scroll 0% 0%; 
 }
+
+div {
+    width:100.00%;
+    width:100.01%;
+}
+
+div {
+    width: 0%;
+    width: 0.1%;
+    width: 100%;
+    width: 100.5%;
+    width: 100.1000%;
+    width: 1e0%;
+    width: 1e1%;
+    width: 1e2%;
+    width: 10e-1%;
+    width: 10e-5%;
+    width: 10e+2%;
+    width: 12e+2%;
+}

crates/swc_css_codegen/tests/fixture/values/percentage/output.css

@@ -7,3 +7,17 @@ background: 100% image-set(url("image.png") 1x)}
 div {background: 50% red}
 div {margin: 100% 20px 100% 40em}
 div {background: rgba(0, 0, 0, 0) image-set(url("image.png") 1x) repeat scroll 0% 0%}
+div {width: 100.00%;
+width: 100.01%}
+div {width: 0%;
+width: 0.1%;
+width: 100%;
+width: 100.5%;
+width: 100.1000%;
+width: 1e0%;
+width: 1e1%;
+width: 1e2%;
+width: 10e-1%;
+width: 10e-5%;
+width: 10e+2%;
+width: 12e+2%}

crates/swc_css_codegen/tests/fixture/values/percentage/output.min.css

@@ -1 +1 @@
-div{padding:100%20%;margin:100%20px;background-position:50%50%,calc(50% + 20px)calc(50% + 20px);margin:20px 100%}div{background:image-set(url("image.png")1x)100%;background:100%image-set(url("image.png")1x)}div{background:50%red}div{margin:100%20px 100%40em}div{background:rgba(0,0,0,0)image-set(url("image.png")1x)repeat scroll 0%0%}
+div{padding:100%20%;margin:100%20px;background-position:50%50%,calc(50% + 20px)calc(50% + 20px);margin:20px 100%}div{background:image-set(url("image.png")1x)100%;background:100%image-set(url("image.png")1x)}div{background:50%red}div{margin:100%20px 100%40em}div{background:rgba(0,0,0,0)image-set(url("image.png")1x)repeat scroll 0%0%}div{width:100%;width:100.01%}div{width:0%;width:.1%;width:100%;width:100.5%;width:100.1%;width:1%;width:10%;width:100%;width:1%;width:1e-4%;width:1e3%;width:1200%}

crates/swc_css_codegen/tests/fixture/values/string/input.css

@@ -1,7 +1,50 @@
 div {
-    quotes: "\00ab" "\00bb"
+    content: '⬇️';
-}
+    content: "😀";
+    content: "\'test\'";
+    content: "\\'test\'";
+    content: "\\\\'test\'";
 
-div {
+    content: '"string" is string';
-    prop: "string", "string";
+    content: "'string' is string";
+    content: '\"string\" is string';
+    content: '\'string\' is string';
+    content: "\"string\" is string";
+    content: "\'string\' is string";
+
+    content: '\'string\' is \"string\"';
+    content: "\'string\' is \"string\"";
+    content: "'test' \'test\'";
+    content: '"test" \"test\"';
+    
+    content: "'test'";
+    content: "\'test\'";
+    content: "\"test\"";
+    content: '\'test\'';
+    content: '\'test\'';
+    content: '\"test\"';
+    
+    
+    content: "\22string\22";
+    content: '\27string\27';
+    
+    content: "This string has a \Aline break in it.";
+    content: "This string has a \A line break in it.";
+    content: "This string has a \00000Aline break in it.";
+    content: "This string has a \00000A line break in it.";
+
+    content: "\"test\" \"test\" \"test\" 'test'";
+    content: "\"test\" \"test\" \"test\" \'test\'";
+    content: "\'test\' \'test\' \'test\' \"test\"";
+    content: '\"test\" \"test\" \"test\" \'test\'';
+    content: '\'test\' \'test\' \'test\' "test"';
+    content: '\'test\' \'test\' \'test\' \"test\"';
+    
+    content: '\\\'test\\\' \\\'test\\\' \\\'test\\\' \\\"test\\\"';
+
+    background: url('http://example.com/foo\'bar.jpg');
+    background: url('http://example.com/foo\"bar.jpg');
+
+    background: url("http://example.com/foo\'bar.jpg");
+    background: url("http://example.com/foo\"bar.jpg");
 }

crates/swc_css_codegen/tests/fixture/values/string/output.css

@@ -1,2 +1,38 @@
-div {quotes: "\00ab" "\00bb"}
+div {content: '⬇️';
-div {prop: "string", "string"}
+content: "😀";
+content: "\'test\'";
+content: "\\'test\'";
+content: "\\\\'test\'";
+content: '"string" is string';
+content: "'string' is string";
+content: '\"string\" is string';
+content: '\'string\' is string';
+content: "\"string\" is string";
+content: "\'string\' is string";
+content: '\'string\' is \"string\"';
+content: "\'string\' is \"string\"";
+content: "'test' \'test\'";
+content: '"test" \"test\"';
+content: "'test'";
+content: "\'test\'";
+content: "\"test\"";
+content: '\'test\'';
+content: '\'test\'';
+content: '\"test\"';
+content: "\22string\22";
+content: '\27string\27';
+content: "This string has a \Aline break in it.";
+content: "This string has a \A line break in it.";
+content: "This string has a \00000Aline break in it.";
+content: "This string has a \00000A line break in it.";
+content: "\"test\" \"test\" \"test\" 'test'";
+content: "\"test\" \"test\" \"test\" \'test\'";
+content: "\'test\' \'test\' \'test\' \"test\"";
+content: '\"test\" \"test\" \"test\" \'test\'';
+content: '\'test\' \'test\' \'test\' "test"';
+content: '\'test\' \'test\' \'test\' \"test\"';
+content: '\\\'test\\\' \\\'test\\\' \\\'test\\\' \\\"test\\\"';
+background: url('http://example.com/foo\'bar.jpg');
+background: url('http://example.com/foo\"bar.jpg');
+background: url("http://example.com/foo\'bar.jpg");
+background: url("http://example.com/foo\"bar.jpg")}

crates/swc_css_codegen/tests/fixture/values/string/output.min.css

@@ -1 +1 @@
-div{quotes:"\00ab""\00bb"}div{prop:"string","string"}
+div{content:"⬇️";content:"😀";content:"'test'";content:"\\'test'";content:"\\\\'test'";content:'"string" is string';content:"'string' is string";content:'"string" is string';content:"'string' is string";content:'"string" is string';content:"'string' is string";content:"'string' is \"string\"";content:"'string' is \"string\"";content:"'test' 'test'";content:'"test" "test"';content:"'test'";content:"'test'";content:'"test"';content:"'test'";content:"'test'";content:'"test"';content:'"string"';content:"'string'";content:"This string has a \a line break in it.";content:"This string has a \a line break in it.";content:"This string has a \a line break in it.";content:"This string has a \a line break in it.";content:'"test" "test" "test" \'test\'';content:'"test" "test" "test" \'test\'';content:"'test' 'test' 'test' \"test\"";content:'"test" "test" "test" \'test\'';content:"'test' 'test' 'test' \"test\"";content:"'test' 'test' 'test' \"test\"";content:"\\'test\\' \\'test\\' \\'test\\' \\\"test\\\"";background:url("http://example.com/foo'bar.jpg");background:url('http://example.com/foo"bar.jpg');background:url("http://example.com/foo'bar.jpg");background:url('http://example.com/foo"bar.jpg')}

crates/swc_css_codegen/tests/fixture/values/url/1/output.min.css

@@ -1 +1 @@
-div{background:url(https://example.com/image.png);background:URL(https://example.com/image.png);background:\URL(https://example.com/image.png);background:url("https://example.com/image.png");background:url('https://example.com/image.png');background:URL('https://example.com/image.png');background:\URL('https://example.com/image.png');background:url(data:image/png;base64,iRxVB0);background:url(#IDofSVGpath);background:url("//aa.com/img.svg"prefetch);background:url("//aa.com/img.svg"foo bar baz func(test));background:url("http://example.com/image.svg"param(--color var(--primary-color)));background:url();background:url("");background:url('');--foo:"http://www.example.com/pinkish.gif";background:src("http://www.example.com/pinkish.gif");background:SRC("http://www.example.com/pinkish.gif");background:src(var(--foo))}div{background:url(foo.img)red}
+div{background:url(https://example.com/image.png);background:URL(https://example.com/image.png);background:\URL(https://example.com/image.png);background:url("https://example.com/image.png");background:url("https://example.com/image.png");background:URL("https://example.com/image.png");background:\URL("https://example.com/image.png");background:url(data:image/png;base64,iRxVB0);background:url(#IDofSVGpath);background:url("//aa.com/img.svg"prefetch);background:url("//aa.com/img.svg"foo bar baz func(test));background:url("http://example.com/image.svg"param(--color var(--primary-color)));background:url();background:url("");background:url("");--foo:"http://www.example.com/pinkish.gif";background:src("http://www.example.com/pinkish.gif");background:SRC("http://www.example.com/pinkish.gif");background:src(var(--foo))}div{background:url(foo.img)red}

crates/swc_css_parser/tests/fixture/number/input.css

@@ -26,13 +26,34 @@ div {
     property: 1.2e-2;
     property: -1;
     property: -1.2;
-    property: -.2;
+    property: .2;
     property: -.2;
     property: +.2;
     property: -1.2e3;
     property: 1.75;
     property: +1.75;
-    property: 1e;
+    property: 1e0;
+    property: 1e1;
+    property: 1e+1;
+    property: 1e-1;
+    property: 1e-10;
     property: 1+2;
     property: 1-2;
+    property: 4.01;
+    property: -456.8;
+    property: .60;
+    property: .0060;
+    property: 10e3;
+    property: -3.4e-2;
+    property: 0.5600000000;
+    property: 10e6;
+    property: 10000000;
+    property: 0.0;
+    property: -0.0;
+    property: +0.0;
+    property: 1e1;
+    property: 1e2;
+    property: 1e3;
+    property: 1e4;
+    property: 100.1e-6;
 }

crates/swc_css_parser/tests/fixture/number/output.json

@@ -2,7 +2,7 @@
   "type": "Stylesheet",
   "span": {
     "start": 0,
-    "end": 714,
+    "end": 1150,
     "ctxt": 0
   },
   "rules": [
@@ -10,7 +10,7 @@
       "type": "QualifiedRule",
       "span": {
         "start": 0,
-        "end": 713,
+        "end": 1149,
         "ctxt": 0
       },
       "prelude": {
@@ -66,7 +66,7 @@
         "type": "Block",
         "span": {
           "start": 4,
-          "end": 713,
+          "end": 1149,
           "ctxt": 0
         },
         "value": [
@@ -911,7 +911,7 @@
             "type": "Declaration",
             "span": {
               "start": 540,
-              "end": 553,
+              "end": 552,
               "ctxt": 0
             },
             "name": {
@@ -929,7 +929,38 @@
                 "type": "Number",
                 "span": {
                   "start": 550,
-                  "end": 553,
+                  "end": 552,
+                  "ctxt": 0
+                },
+                "value": 0.2,
+                "raw": ".2"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 558,
+              "end": 571,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 558,
+                "end": 566,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 568,
+                  "end": 571,
                   "ctxt": 0
                 },
                 "value": -0.2,
@@ -941,15 +972,15 @@
           {
             "type": "Declaration",
             "span": {
-              "start": 559,
+              "start": 577,
-              "end": 572,
+              "end": 590,
               "ctxt": 0
             },
             "name": {
               "type": "Identifier",
               "span": {
-                "start": 559,
+                "start": 577,
-                "end": 567,
+                "end": 585,
                 "ctxt": 0
               },
               "value": "property",
@@ -959,39 +990,8 @@
               {
                 "type": "Number",
                 "span": {
-                  "start": 569,
+                  "start": 587,
-                  "end": 572,
+                  "end": 590,
-                  "ctxt": 0
-                },
-                "value": -0.2,
-                "raw": "-.2"
-              }
-            ],
-            "important": null
-          },
-          {
-            "type": "Declaration",
-            "span": {
-              "start": 578,
-              "end": 591,
-              "ctxt": 0
-            },
-            "name": {
-              "type": "Identifier",
-              "span": {
-                "start": 578,
-                "end": 586,
-                "ctxt": 0
-              },
-              "value": "property",
-              "raw": "property"
-            },
-            "value": [
-              {
-                "type": "Number",
-                "span": {
-                  "start": 588,
-                  "end": 591,
                   "ctxt": 0
                 },
                 "value": 0.2,
@@ -1003,15 +1003,15 @@
           {
             "type": "Declaration",
             "span": {
-              "start": 597,
+              "start": 596,
-              "end": 613,
+              "end": 612,
               "ctxt": 0
             },
             "name": {
               "type": "Identifier",
               "span": {
-                "start": 597,
+                "start": 596,
-                "end": 605,
+                "end": 604,
                 "ctxt": 0
               },
               "value": "property",
@@ -1021,8 +1021,8 @@
               {
                 "type": "Number",
                 "span": {
-                  "start": 607,
+                  "start": 606,
-                  "end": 613,
+                  "end": 612,
                   "ctxt": 0
                 },
                 "value": -1200.0,
@@ -1034,15 +1034,15 @@
           {
             "type": "Declaration",
             "span": {
-              "start": 619,
+              "start": 618,
-              "end": 633,
+              "end": 632,
               "ctxt": 0
             },
             "name": {
               "type": "Identifier",
               "span": {
-                "start": 619,
+                "start": 618,
-                "end": 627,
+                "end": 626,
                 "ctxt": 0
               },
               "value": "property",
@@ -1052,8 +1052,8 @@
               {
                 "type": "Number",
                 "span": {
-                  "start": 629,
+                  "start": 628,
-                  "end": 633,
+                  "end": 632,
                   "ctxt": 0
                 },
                 "value": 1.75,
@@ -1065,15 +1065,15 @@
           {
             "type": "Declaration",
             "span": {
-              "start": 639,
+              "start": 638,
-              "end": 654,
+              "end": 653,
               "ctxt": 0
             },
             "name": {
               "type": "Identifier",
               "span": {
-                "start": 639,
+                "start": 638,
-                "end": 647,
+                "end": 646,
                 "ctxt": 0
               },
               "value": "property",
@@ -1083,8 +1083,8 @@
               {
                 "type": "Number",
                 "span": {
-                  "start": 649,
+                  "start": 648,
-                  "end": 654,
+                  "end": 653,
                   "ctxt": 0
                 },
                 "value": 1.75,
@@ -1096,15 +1096,15 @@
           {
             "type": "Declaration",
             "span": {
-              "start": 660,
+              "start": 659,
               "end": 672,
               "ctxt": 0
             },
             "name": {
               "type": "Identifier",
               "span": {
-                "start": 660,
+                "start": 659,
-                "end": 668,
+                "end": 667,
                 "ctxt": 0
               },
               "value": "property",
@@ -1112,32 +1112,14 @@
             },
             "value": [
               {
-                "type": "Dimension",
+                "type": "Number",
                 "span": {
-                  "start": 670,
+                  "start": 669,
                   "end": 672,
                   "ctxt": 0
                 },
-                "value": {
+                "value": 1.0,
-                  "type": "Number",
+                "raw": "1e0"
-                  "span": {
-                    "start": 670,
-                    "end": 671,
-                    "ctxt": 0
-                  },
-                  "value": 1.0,
-                  "raw": "1"
-                },
-                "unit": {
-                  "type": "Identifier",
-                  "span": {
-                    "start": 671,
-                    "end": 672,
-                    "ctxt": 0
-                  },
-                  "value": "e",
-                  "raw": "e"
-                }
               }
             ],
             "important": null
@@ -1164,21 +1146,11 @@
                 "type": "Number",
                 "span": {
                   "start": 688,
-                  "end": 689,
-                  "ctxt": 0
-                },
-                "value": 1.0,
-                "raw": "1"
-              },
-              {
-                "type": "Number",
-                "span": {
-                  "start": 689,
                   "end": 691,
                   "ctxt": 0
                 },
-                "value": 2.0,
+                "value": 10.0,
-                "raw": "+2"
+                "raw": "1e1"
               }
             ],
             "important": null
@@ -1187,7 +1159,7 @@
             "type": "Declaration",
             "span": {
               "start": 697,
-              "end": 710,
+              "end": 711,
               "ctxt": 0
             },
             "name": {
@@ -1205,7 +1177,100 @@
                 "type": "Number",
                 "span": {
                   "start": 707,
-                  "end": 708,
+                  "end": 711,
+                  "ctxt": 0
+                },
+                "value": 10.0,
+                "raw": "1e+1"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 717,
+              "end": 731,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 717,
+                "end": 725,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 727,
+                  "end": 731,
+                  "ctxt": 0
+                },
+                "value": 0.1,
+                "raw": "1e-1"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 737,
+              "end": 752,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 737,
+                "end": 745,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 747,
+                  "end": 752,
+                  "ctxt": 0
+                },
+                "value": 1e-10,
+                "raw": "1e-10"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 758,
+              "end": 771,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 758,
+                "end": 766,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 768,
+                  "end": 769,
                   "ctxt": 0
                 },
                 "value": 1.0,
@@ -1214,8 +1279,49 @@
               {
                 "type": "Number",
                 "span": {
-                  "start": 708,
+                  "start": 769,
-                  "end": 710,
+                  "end": 771,
+                  "ctxt": 0
+                },
+                "value": 2.0,
+                "raw": "+2"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 777,
+              "end": 790,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 777,
+                "end": 785,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 787,
+                  "end": 788,
+                  "ctxt": 0
+                },
+                "value": 1.0,
+                "raw": "1"
+              },
+              {
+                "type": "Number",
+                "span": {
+                  "start": 788,
+                  "end": 790,
                   "ctxt": 0
                 },
                 "value": -2.0,
@@ -1223,6 +1329,533 @@
               }
             ],
             "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 796,
+              "end": 810,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 796,
+                "end": 804,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 806,
+                  "end": 810,
+                  "ctxt": 0
+                },
+                "value": 4.01,
+                "raw": "4.01"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 816,
+              "end": 832,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 816,
+                "end": 824,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 826,
+                  "end": 832,
+                  "ctxt": 0
+                },
+                "value": -456.8,
+                "raw": "-456.8"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 838,
+              "end": 851,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 838,
+                "end": 846,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 848,
+                  "end": 851,
+                  "ctxt": 0
+                },
+                "value": 0.6,
+                "raw": ".60"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 857,
+              "end": 872,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 857,
+                "end": 865,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 867,
+                  "end": 872,
+                  "ctxt": 0
+                },
+                "value": 0.006,
+                "raw": ".0060"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 878,
+              "end": 892,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 878,
+                "end": 886,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 888,
+                  "end": 892,
+                  "ctxt": 0
+                },
+                "value": 10000.0,
+                "raw": "10e3"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 898,
+              "end": 915,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 898,
+                "end": 906,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 908,
+                  "end": 915,
+                  "ctxt": 0
+                },
+                "value": -0.034,
+                "raw": "-3.4e-2"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 921,
+              "end": 943,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 921,
+                "end": 929,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 931,
+                  "end": 943,
+                  "ctxt": 0
+                },
+                "value": 0.56,
+                "raw": "0.5600000000"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 949,
+              "end": 963,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 949,
+                "end": 957,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 959,
+                  "end": 963,
+                  "ctxt": 0
+                },
+                "value": 10000000.0,
+                "raw": "10e6"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 969,
+              "end": 987,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 969,
+                "end": 977,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 979,
+                  "end": 987,
+                  "ctxt": 0
+                },
+                "value": 10000000.0,
+                "raw": "10000000"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 993,
+              "end": 1006,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 993,
+                "end": 1001,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 1003,
+                  "end": 1006,
+                  "ctxt": 0
+                },
+                "value": 0.0,
+                "raw": "0.0"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 1012,
+              "end": 1026,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 1012,
+                "end": 1020,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 1022,
+                  "end": 1026,
+                  "ctxt": 0
+                },
+                "value": -0.0,
+                "raw": "-0.0"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 1032,
+              "end": 1046,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 1032,
+                "end": 1040,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 1042,
+                  "end": 1046,
+                  "ctxt": 0
+                },
+                "value": 0.0,
+                "raw": "+0.0"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 1052,
+              "end": 1065,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 1052,
+                "end": 1060,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 1062,
+                  "end": 1065,
+                  "ctxt": 0
+                },
+                "value": 10.0,
+                "raw": "1e1"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 1071,
+              "end": 1084,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 1071,
+                "end": 1079,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 1081,
+                  "end": 1084,
+                  "ctxt": 0
+                },
+                "value": 100.0,
+                "raw": "1e2"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 1090,
+              "end": 1103,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 1090,
+                "end": 1098,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 1100,
+                  "end": 1103,
+                  "ctxt": 0
+                },
+                "value": 1000.0,
+                "raw": "1e3"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 1109,
+              "end": 1122,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 1109,
+                "end": 1117,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 1119,
+                  "end": 1122,
+                  "ctxt": 0
+                },
+                "value": 10000.0,
+                "raw": "1e4"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 1128,
+              "end": 1146,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 1128,
+                "end": 1136,
+                "ctxt": 0
+              },
+              "value": "property",
+              "raw": "property"
+            },
+            "value": [
+              {
+                "type": "Number",
+                "span": {
+                  "start": 1138,
+                  "end": 1146,
+                  "ctxt": 0
+                },
+                "value": 0.0001001,
+                "raw": "100.1e-6"
+              }
+            ],
+            "important": null
           }
         ]
       }

crates/swc_css_parser/tests/fixture/number/span.rust-debug

@@ -6,8 +6,8 @@ error: Stylesheet
 3  | |     property: +10;
 4  | |     property: -10;
 ...  |
-37 | |     property: 1-2;
+58 | |     property: 100.1e-6;
-38 | | }
+59 | | }
    | |__^
 
 error: Rule
@@ -18,8 +18,8 @@ error: Rule
 3  | |     property: +10;
 4  | |     property: -10;
 ...  |
-37 | |     property: 1-2;
+58 | |     property: 100.1e-6;
-38 | | }
+59 | | }
    | |_^
 
 error: QualifiedRule
@@ -30,8 +30,8 @@ error: QualifiedRule
 3  | |     property: +10;
 4  | |     property: -10;
 ...  |
-37 | |     property: 1-2;
+58 | |     property: 100.1e-6;
-38 | | }
+59 | | }
    | |_^
 
 error: SelectorList
@@ -73,8 +73,8 @@ error: Block
 3  | |     property: +10;
 4  | |     property: -10;
 ...  |
-37 | |     property: 1-2;
+58 | |     property: 100.1e-6;
-38 | | }
+59 | | }
    | |_^
 
 error: Declaration
@@ -890,32 +890,32 @@ error: Number
 error: Declaration
   --> $DIR/tests/fixture/number/input.css:29:5
    |
-29 |     property: -.2;
+29 |     property: .2;
-   |     ^^^^^^^^^^^^^
+   |     ^^^^^^^^^^^^
 
 error: DeclarationName
   --> $DIR/tests/fixture/number/input.css:29:5
    |
-29 |     property: -.2;
+29 |     property: .2;
    |     ^^^^^^^^
 
 error: Ident
   --> $DIR/tests/fixture/number/input.css:29:5
    |
-29 |     property: -.2;
+29 |     property: .2;
    |     ^^^^^^^^
 
 error: Value
   --> $DIR/tests/fixture/number/input.css:29:15
    |
-29 |     property: -.2;
+29 |     property: .2;
-   |               ^^^
+   |               ^^
 
 error: Number
   --> $DIR/tests/fixture/number/input.css:29:15
    |
-29 |     property: -.2;
+29 |     property: .2;
-   |               ^^^
+   |               ^^
 
 error: Declaration
   --> $DIR/tests/fixture/number/input.css:30:5
@@ -1070,126 +1070,744 @@ error: Number
 error: Declaration
   --> $DIR/tests/fixture/number/input.css:35:5
    |
-35 |     property: 1e;
+35 |     property: 1e0;
-   |     ^^^^^^^^^^^^
+   |     ^^^^^^^^^^^^^
 
 error: DeclarationName
   --> $DIR/tests/fixture/number/input.css:35:5
    |
-35 |     property: 1e;
+35 |     property: 1e0;
    |     ^^^^^^^^
 
 error: Ident
   --> $DIR/tests/fixture/number/input.css:35:5
    |
-35 |     property: 1e;
+35 |     property: 1e0;
    |     ^^^^^^^^
 
 error: Value
   --> $DIR/tests/fixture/number/input.css:35:15
    |
-35 |     property: 1e;
+35 |     property: 1e0;
-   |               ^^
+   |               ^^^
-
-error: Dimension
-  --> $DIR/tests/fixture/number/input.css:35:15
-   |
-35 |     property: 1e;
-   |               ^^
 
 error: Number
   --> $DIR/tests/fixture/number/input.css:35:15
    |
-35 |     property: 1e;
+35 |     property: 1e0;
-   |               ^
+   |               ^^^
-
-error: Ident
-  --> $DIR/tests/fixture/number/input.css:35:16
-   |
-35 |     property: 1e;
-   |                ^
 
 error: Declaration
   --> $DIR/tests/fixture/number/input.css:36:5
    |
-36 |     property: 1+2;
+36 |     property: 1e1;
    |     ^^^^^^^^^^^^^
 
 error: DeclarationName
   --> $DIR/tests/fixture/number/input.css:36:5
    |
-36 |     property: 1+2;
+36 |     property: 1e1;
    |     ^^^^^^^^
 
 error: Ident
   --> $DIR/tests/fixture/number/input.css:36:5
    |
-36 |     property: 1+2;
+36 |     property: 1e1;
    |     ^^^^^^^^
 
 error: Value
   --> $DIR/tests/fixture/number/input.css:36:15
    |
-36 |     property: 1+2;
+36 |     property: 1e1;
-   |               ^
+   |               ^^^
 
 error: Number
   --> $DIR/tests/fixture/number/input.css:36:15
    |
-36 |     property: 1+2;
+36 |     property: 1e1;
-   |               ^
+   |               ^^^
-
-error: Value
-  --> $DIR/tests/fixture/number/input.css:36:16
-   |
-36 |     property: 1+2;
-   |                ^^
-
-error: Number
-  --> $DIR/tests/fixture/number/input.css:36:16
-   |
-36 |     property: 1+2;
-   |                ^^
 
 error: Declaration
   --> $DIR/tests/fixture/number/input.css:37:5
    |
-37 |     property: 1-2;
+37 |     property: 1e+1;
-   |     ^^^^^^^^^^^^^
+   |     ^^^^^^^^^^^^^^
 
 error: DeclarationName
   --> $DIR/tests/fixture/number/input.css:37:5
    |
-37 |     property: 1-2;
+37 |     property: 1e+1;
    |     ^^^^^^^^
 
 error: Ident
   --> $DIR/tests/fixture/number/input.css:37:5
    |
-37 |     property: 1-2;
+37 |     property: 1e+1;
    |     ^^^^^^^^
 
 error: Value
   --> $DIR/tests/fixture/number/input.css:37:15
    |
-37 |     property: 1-2;
+37 |     property: 1e+1;
-   |               ^
+   |               ^^^^
 
 error: Number
   --> $DIR/tests/fixture/number/input.css:37:15
    |
-37 |     property: 1-2;
+37 |     property: 1e+1;
+   |               ^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:38:5
+   |
+38 |     property: 1e-1;
+   |     ^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:38:5
+   |
+38 |     property: 1e-1;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:38:5
+   |
+38 |     property: 1e-1;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:38:15
+   |
+38 |     property: 1e-1;
+   |               ^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:38:15
+   |
+38 |     property: 1e-1;
+   |               ^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:39:5
+   |
+39 |     property: 1e-10;
+   |     ^^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:39:5
+   |
+39 |     property: 1e-10;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:39:5
+   |
+39 |     property: 1e-10;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:39:15
+   |
+39 |     property: 1e-10;
+   |               ^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:39:15
+   |
+39 |     property: 1e-10;
+   |               ^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:40:5
+   |
+40 |     property: 1+2;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:40:5
+   |
+40 |     property: 1+2;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:40:5
+   |
+40 |     property: 1+2;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:40:15
+   |
+40 |     property: 1+2;
+   |               ^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:40:15
+   |
+40 |     property: 1+2;
    |               ^
 
 error: Value
-  --> $DIR/tests/fixture/number/input.css:37:16
+  --> $DIR/tests/fixture/number/input.css:40:16
    |
-37 |     property: 1-2;
+40 |     property: 1+2;
    |                ^^
 
 error: Number
-  --> $DIR/tests/fixture/number/input.css:37:16
+  --> $DIR/tests/fixture/number/input.css:40:16
    |
-37 |     property: 1-2;
+40 |     property: 1+2;
    |                ^^
 
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:41:5
+   |
+41 |     property: 1-2;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:41:5
+   |
+41 |     property: 1-2;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:41:5
+   |
+41 |     property: 1-2;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:41:15
+   |
+41 |     property: 1-2;
+   |               ^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:41:15
+   |
+41 |     property: 1-2;
+   |               ^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:41:16
+   |
+41 |     property: 1-2;
+   |                ^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:41:16
+   |
+41 |     property: 1-2;
+   |                ^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:42:5
+   |
+42 |     property: 4.01;
+   |     ^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:42:5
+   |
+42 |     property: 4.01;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:42:5
+   |
+42 |     property: 4.01;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:42:15
+   |
+42 |     property: 4.01;
+   |               ^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:42:15
+   |
+42 |     property: 4.01;
+   |               ^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:43:5
+   |
+43 |     property: -456.8;
+   |     ^^^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:43:5
+   |
+43 |     property: -456.8;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:43:5
+   |
+43 |     property: -456.8;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:43:15
+   |
+43 |     property: -456.8;
+   |               ^^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:43:15
+   |
+43 |     property: -456.8;
+   |               ^^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:44:5
+   |
+44 |     property: .60;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:44:5
+   |
+44 |     property: .60;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:44:5
+   |
+44 |     property: .60;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:44:15
+   |
+44 |     property: .60;
+   |               ^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:44:15
+   |
+44 |     property: .60;
+   |               ^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:45:5
+   |
+45 |     property: .0060;
+   |     ^^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:45:5
+   |
+45 |     property: .0060;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:45:5
+   |
+45 |     property: .0060;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:45:15
+   |
+45 |     property: .0060;
+   |               ^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:45:15
+   |
+45 |     property: .0060;
+   |               ^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:46:5
+   |
+46 |     property: 10e3;
+   |     ^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:46:5
+   |
+46 |     property: 10e3;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:46:5
+   |
+46 |     property: 10e3;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:46:15
+   |
+46 |     property: 10e3;
+   |               ^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:46:15
+   |
+46 |     property: 10e3;
+   |               ^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:47:5
+   |
+47 |     property: -3.4e-2;
+   |     ^^^^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:47:5
+   |
+47 |     property: -3.4e-2;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:47:5
+   |
+47 |     property: -3.4e-2;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:47:15
+   |
+47 |     property: -3.4e-2;
+   |               ^^^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:47:15
+   |
+47 |     property: -3.4e-2;
+   |               ^^^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:48:5
+   |
+48 |     property: 0.5600000000;
+   |     ^^^^^^^^^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:48:5
+   |
+48 |     property: 0.5600000000;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:48:5
+   |
+48 |     property: 0.5600000000;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:48:15
+   |
+48 |     property: 0.5600000000;
+   |               ^^^^^^^^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:48:15
+   |
+48 |     property: 0.5600000000;
+   |               ^^^^^^^^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:49:5
+   |
+49 |     property: 10e6;
+   |     ^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:49:5
+   |
+49 |     property: 10e6;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:49:5
+   |
+49 |     property: 10e6;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:49:15
+   |
+49 |     property: 10e6;
+   |               ^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:49:15
+   |
+49 |     property: 10e6;
+   |               ^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:50:5
+   |
+50 |     property: 10000000;
+   |     ^^^^^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:50:5
+   |
+50 |     property: 10000000;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:50:5
+   |
+50 |     property: 10000000;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:50:15
+   |
+50 |     property: 10000000;
+   |               ^^^^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:50:15
+   |
+50 |     property: 10000000;
+   |               ^^^^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:51:5
+   |
+51 |     property: 0.0;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:51:5
+   |
+51 |     property: 0.0;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:51:5
+   |
+51 |     property: 0.0;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:51:15
+   |
+51 |     property: 0.0;
+   |               ^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:51:15
+   |
+51 |     property: 0.0;
+   |               ^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:52:5
+   |
+52 |     property: -0.0;
+   |     ^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:52:5
+   |
+52 |     property: -0.0;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:52:5
+   |
+52 |     property: -0.0;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:52:15
+   |
+52 |     property: -0.0;
+   |               ^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:52:15
+   |
+52 |     property: -0.0;
+   |               ^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:53:5
+   |
+53 |     property: +0.0;
+   |     ^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:53:5
+   |
+53 |     property: +0.0;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:53:5
+   |
+53 |     property: +0.0;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:53:15
+   |
+53 |     property: +0.0;
+   |               ^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:53:15
+   |
+53 |     property: +0.0;
+   |               ^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:54:5
+   |
+54 |     property: 1e1;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:54:5
+   |
+54 |     property: 1e1;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:54:5
+   |
+54 |     property: 1e1;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:54:15
+   |
+54 |     property: 1e1;
+   |               ^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:54:15
+   |
+54 |     property: 1e1;
+   |               ^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:55:5
+   |
+55 |     property: 1e2;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:55:5
+   |
+55 |     property: 1e2;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:55:5
+   |
+55 |     property: 1e2;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:55:15
+   |
+55 |     property: 1e2;
+   |               ^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:55:15
+   |
+55 |     property: 1e2;
+   |               ^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:56:5
+   |
+56 |     property: 1e3;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:56:5
+   |
+56 |     property: 1e3;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:56:5
+   |
+56 |     property: 1e3;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:56:15
+   |
+56 |     property: 1e3;
+   |               ^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:56:15
+   |
+56 |     property: 1e3;
+   |               ^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:57:5
+   |
+57 |     property: 1e4;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:57:5
+   |
+57 |     property: 1e4;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:57:5
+   |
+57 |     property: 1e4;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:57:15
+   |
+57 |     property: 1e4;
+   |               ^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:57:15
+   |
+57 |     property: 1e4;
+   |               ^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/number/input.css:58:5
+   |
+58 |     property: 100.1e-6;
+   |     ^^^^^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/number/input.css:58:5
+   |
+58 |     property: 100.1e-6;
+   |     ^^^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/number/input.css:58:5
+   |
+58 |     property: 100.1e-6;
+   |     ^^^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/number/input.css:58:15
+   |
+58 |     property: 100.1e-6;
+   |               ^^^^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/number/input.css:58:15
+   |
+58 |     property: 100.1e-6;
+   |               ^^^^^^^^
+

crates/swc_css_parser/tests/fixture/value/percentage/input.css

@@ -0,0 +1,18 @@
+div {
+    width: 0%;
+    width: 0.1%;
+    width: 100%;
+    width: 100.5%;
+    width: 100.1000%;
+    width: 1e0%;
+    width: 1e1%;
+    width: 1e2%;
+    width: 10e-1%;
+    width: 10e-5%;
+    width: 10e+2%;
+}
+
+div {
+    margin: -5%;
+    margin: -5.5%;
+}

crates/swc_css_parser/tests/fixture/value/percentage/output.json

@@ -0,0 +1,651 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 0,
+    "end": 251,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "QualifiedRule",
+      "span": {
+        "start": 0,
+        "end": 205,
+        "ctxt": 0
+      },
+      "prelude": {
+        "type": "SelectorList",
+        "span": {
+          "start": 0,
+          "end": 3,
+          "ctxt": 0
+        },
+        "children": [
+          {
+            "type": "ComplexSelector",
+            "span": {
+              "start": 0,
+              "end": 3,
+              "ctxt": 0
+            },
+            "children": [
+              {
+                "type": "CompoundSelector",
+                "span": {
+                  "start": 0,
+                  "end": 3,
+                  "ctxt": 0
+                },
+                "nestingSelector": null,
+                "typeSelector": {
+                  "type": "TypeSelector",
+                  "span": {
+                    "start": 0,
+                    "end": 3,
+                    "ctxt": 0
+                  },
+                  "prefix": null,
+                  "name": {
+                    "type": "Identifier",
+                    "span": {
+                      "start": 0,
+                      "end": 3,
+                      "ctxt": 0
+                    },
+                    "value": "div",
+                    "raw": "div"
+                  }
+                },
+                "subclassSelectors": []
+              }
+            ]
+          }
+        ]
+      },
+      "block": {
+        "type": "Block",
+        "span": {
+          "start": 4,
+          "end": 205,
+          "ctxt": 0
+        },
+        "value": [
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 10,
+              "end": 19,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 10,
+                "end": 15,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 17,
+                  "end": 19,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 17,
+                    "end": 18,
+                    "ctxt": 0
+                  },
+                  "value": 0.0,
+                  "raw": "0"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 25,
+              "end": 36,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 25,
+                "end": 30,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 32,
+                  "end": 36,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 32,
+                    "end": 35,
+                    "ctxt": 0
+                  },
+                  "value": 0.1,
+                  "raw": "0.1"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 42,
+              "end": 53,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 42,
+                "end": 47,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 49,
+                  "end": 53,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 49,
+                    "end": 52,
+                    "ctxt": 0
+                  },
+                  "value": 100.0,
+                  "raw": "100"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 59,
+              "end": 72,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 59,
+                "end": 64,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 66,
+                  "end": 72,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 66,
+                    "end": 71,
+                    "ctxt": 0
+                  },
+                  "value": 100.5,
+                  "raw": "100.5"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 78,
+              "end": 94,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 78,
+                "end": 83,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 85,
+                  "end": 94,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 85,
+                    "end": 93,
+                    "ctxt": 0
+                  },
+                  "value": 100.1,
+                  "raw": "100.1000"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 100,
+              "end": 111,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 100,
+                "end": 105,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 107,
+                  "end": 111,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 107,
+                    "end": 110,
+                    "ctxt": 0
+                  },
+                  "value": 1.0,
+                  "raw": "1e0"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 117,
+              "end": 128,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 117,
+                "end": 122,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 124,
+                  "end": 128,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 124,
+                    "end": 127,
+                    "ctxt": 0
+                  },
+                  "value": 10.0,
+                  "raw": "1e1"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 134,
+              "end": 145,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 134,
+                "end": 139,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 141,
+                  "end": 145,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 141,
+                    "end": 144,
+                    "ctxt": 0
+                  },
+                  "value": 100.0,
+                  "raw": "1e2"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 151,
+              "end": 164,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 151,
+                "end": 156,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 158,
+                  "end": 164,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 158,
+                    "end": 163,
+                    "ctxt": 0
+                  },
+                  "value": 1.0,
+                  "raw": "10e-1"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 170,
+              "end": 183,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 170,
+                "end": 175,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 177,
+                  "end": 183,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 177,
+                    "end": 182,
+                    "ctxt": 0
+                  },
+                  "value": 0.0001,
+                  "raw": "10e-5"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 189,
+              "end": 202,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 189,
+                "end": 194,
+                "ctxt": 0
+              },
+              "value": "width",
+              "raw": "width"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 196,
+                  "end": 202,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 196,
+                    "end": 201,
+                    "ctxt": 0
+                  },
+                  "value": 1000.0,
+                  "raw": "10e+2"
+                }
+              }
+            ],
+            "important": null
+          }
+        ]
+      }
+    },
+    {
+      "type": "QualifiedRule",
+      "span": {
+        "start": 207,
+        "end": 250,
+        "ctxt": 0
+      },
+      "prelude": {
+        "type": "SelectorList",
+        "span": {
+          "start": 207,
+          "end": 210,
+          "ctxt": 0
+        },
+        "children": [
+          {
+            "type": "ComplexSelector",
+            "span": {
+              "start": 207,
+              "end": 210,
+              "ctxt": 0
+            },
+            "children": [
+              {
+                "type": "CompoundSelector",
+                "span": {
+                  "start": 207,
+                  "end": 210,
+                  "ctxt": 0
+                },
+                "nestingSelector": null,
+                "typeSelector": {
+                  "type": "TypeSelector",
+                  "span": {
+                    "start": 207,
+                    "end": 210,
+                    "ctxt": 0
+                  },
+                  "prefix": null,
+                  "name": {
+                    "type": "Identifier",
+                    "span": {
+                      "start": 207,
+                      "end": 210,
+                      "ctxt": 0
+                    },
+                    "value": "div",
+                    "raw": "div"
+                  }
+                },
+                "subclassSelectors": []
+              }
+            ]
+          }
+        ]
+      },
+      "block": {
+        "type": "Block",
+        "span": {
+          "start": 211,
+          "end": 250,
+          "ctxt": 0
+        },
+        "value": [
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 217,
+              "end": 228,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 217,
+                "end": 223,
+                "ctxt": 0
+              },
+              "value": "margin",
+              "raw": "margin"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 225,
+                  "end": 228,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 225,
+                    "end": 227,
+                    "ctxt": 0
+                  },
+                  "value": -5.0,
+                  "raw": "-5"
+                }
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 234,
+              "end": 247,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Identifier",
+              "span": {
+                "start": 234,
+                "end": 240,
+                "ctxt": 0
+              },
+              "value": "margin",
+              "raw": "margin"
+            },
+            "value": [
+              {
+                "type": "Percent",
+                "span": {
+                  "start": 242,
+                  "end": 247,
+                  "ctxt": 0
+                },
+                "value": {
+                  "type": "Number",
+                  "span": {
+                    "start": 242,
+                    "end": 246,
+                    "ctxt": 0
+                  },
+                  "value": -5.5,
+                  "raw": "-5.5"
+                }
+              }
+            ],
+            "important": null
+          }
+        ]
+      }
+    }
+  ]
+}

crates/swc_css_parser/tests/fixture/value/percentage/span.rust-debug

@@ -0,0 +1,605 @@
+error: Stylesheet
+  --> $DIR/tests/fixture/value/percentage/input.css:1:1
+   |
+1  | / div {
+2  | |     width: 0%;
+3  | |     width: 0.1%;
+4  | |     width: 100%;
+...  |
+17 | |     margin: -5.5%;
+18 | | }
+   | |__^
+
+error: Rule
+  --> $DIR/tests/fixture/value/percentage/input.css:1:1
+   |
+1  | / div {
+2  | |     width: 0%;
+3  | |     width: 0.1%;
+4  | |     width: 100%;
+...  |
+12 | |     width: 10e+2%;
+13 | | }
+   | |_^
+
+error: QualifiedRule
+  --> $DIR/tests/fixture/value/percentage/input.css:1:1
+   |
+1  | / div {
+2  | |     width: 0%;
+3  | |     width: 0.1%;
+4  | |     width: 100%;
+...  |
+12 | |     width: 10e+2%;
+13 | | }
+   | |_^
+
+error: SelectorList
+ --> $DIR/tests/fixture/value/percentage/input.css:1:1
+  |
+1 | div {
+  | ^^^
+
+error: ComplexSelector
+ --> $DIR/tests/fixture/value/percentage/input.css:1:1
+  |
+1 | div {
+  | ^^^
+
+error: CompoundSelector
+ --> $DIR/tests/fixture/value/percentage/input.css:1:1
+  |
+1 | div {
+  | ^^^
+
+error: TypeSelector
+ --> $DIR/tests/fixture/value/percentage/input.css:1:1
+  |
+1 | div {
+  | ^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:1:1
+  |
+1 | div {
+  | ^^^
+
+error: Block
+  --> $DIR/tests/fixture/value/percentage/input.css:1:5
+   |
+1  |   div {
+   |  _____^
+2  | |     width: 0%;
+3  | |     width: 0.1%;
+4  | |     width: 100%;
+...  |
+12 | |     width: 10e+2%;
+13 | | }
+   | |_^
+
+error: Declaration
+ --> $DIR/tests/fixture/value/percentage/input.css:2:5
+  |
+2 |     width: 0%;
+  |     ^^^^^^^^^
+
+error: DeclarationName
+ --> $DIR/tests/fixture/value/percentage/input.css:2:5
+  |
+2 |     width: 0%;
+  |     ^^^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:2:5
+  |
+2 |     width: 0%;
+  |     ^^^^^
+
+error: Value
+ --> $DIR/tests/fixture/value/percentage/input.css:2:12
+  |
+2 |     width: 0%;
+  |            ^^
+
+error: Percent
+ --> $DIR/tests/fixture/value/percentage/input.css:2:12
+  |
+2 |     width: 0%;
+  |            ^^
+
+error: Number
+ --> $DIR/tests/fixture/value/percentage/input.css:2:12
+  |
+2 |     width: 0%;
+  |            ^
+
+error: Declaration
+ --> $DIR/tests/fixture/value/percentage/input.css:3:5
+  |
+3 |     width: 0.1%;
+  |     ^^^^^^^^^^^
+
+error: DeclarationName
+ --> $DIR/tests/fixture/value/percentage/input.css:3:5
+  |
+3 |     width: 0.1%;
+  |     ^^^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:3:5
+  |
+3 |     width: 0.1%;
+  |     ^^^^^
+
+error: Value
+ --> $DIR/tests/fixture/value/percentage/input.css:3:12
+  |
+3 |     width: 0.1%;
+  |            ^^^^
+
+error: Percent
+ --> $DIR/tests/fixture/value/percentage/input.css:3:12
+  |
+3 |     width: 0.1%;
+  |            ^^^^
+
+error: Number
+ --> $DIR/tests/fixture/value/percentage/input.css:3:12
+  |
+3 |     width: 0.1%;
+  |            ^^^
+
+error: Declaration
+ --> $DIR/tests/fixture/value/percentage/input.css:4:5
+  |
+4 |     width: 100%;
+  |     ^^^^^^^^^^^
+
+error: DeclarationName
+ --> $DIR/tests/fixture/value/percentage/input.css:4:5
+  |
+4 |     width: 100%;
+  |     ^^^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:4:5
+  |
+4 |     width: 100%;
+  |     ^^^^^
+
+error: Value
+ --> $DIR/tests/fixture/value/percentage/input.css:4:12
+  |
+4 |     width: 100%;
+  |            ^^^^
+
+error: Percent
+ --> $DIR/tests/fixture/value/percentage/input.css:4:12
+  |
+4 |     width: 100%;
+  |            ^^^^
+
+error: Number
+ --> $DIR/tests/fixture/value/percentage/input.css:4:12
+  |
+4 |     width: 100%;
+  |            ^^^
+
+error: Declaration
+ --> $DIR/tests/fixture/value/percentage/input.css:5:5
+  |
+5 |     width: 100.5%;
+  |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+ --> $DIR/tests/fixture/value/percentage/input.css:5:5
+  |
+5 |     width: 100.5%;
+  |     ^^^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:5:5
+  |
+5 |     width: 100.5%;
+  |     ^^^^^
+
+error: Value
+ --> $DIR/tests/fixture/value/percentage/input.css:5:12
+  |
+5 |     width: 100.5%;
+  |            ^^^^^^
+
+error: Percent
+ --> $DIR/tests/fixture/value/percentage/input.css:5:12
+  |
+5 |     width: 100.5%;
+  |            ^^^^^^
+
+error: Number
+ --> $DIR/tests/fixture/value/percentage/input.css:5:12
+  |
+5 |     width: 100.5%;
+  |            ^^^^^
+
+error: Declaration
+ --> $DIR/tests/fixture/value/percentage/input.css:6:5
+  |
+6 |     width: 100.1000%;
+  |     ^^^^^^^^^^^^^^^^
+
+error: DeclarationName
+ --> $DIR/tests/fixture/value/percentage/input.css:6:5
+  |
+6 |     width: 100.1000%;
+  |     ^^^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:6:5
+  |
+6 |     width: 100.1000%;
+  |     ^^^^^
+
+error: Value
+ --> $DIR/tests/fixture/value/percentage/input.css:6:12
+  |
+6 |     width: 100.1000%;
+  |            ^^^^^^^^^
+
+error: Percent
+ --> $DIR/tests/fixture/value/percentage/input.css:6:12
+  |
+6 |     width: 100.1000%;
+  |            ^^^^^^^^^
+
+error: Number
+ --> $DIR/tests/fixture/value/percentage/input.css:6:12
+  |
+6 |     width: 100.1000%;
+  |            ^^^^^^^^
+
+error: Declaration
+ --> $DIR/tests/fixture/value/percentage/input.css:7:5
+  |
+7 |     width: 1e0%;
+  |     ^^^^^^^^^^^
+
+error: DeclarationName
+ --> $DIR/tests/fixture/value/percentage/input.css:7:5
+  |
+7 |     width: 1e0%;
+  |     ^^^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:7:5
+  |
+7 |     width: 1e0%;
+  |     ^^^^^
+
+error: Value
+ --> $DIR/tests/fixture/value/percentage/input.css:7:12
+  |
+7 |     width: 1e0%;
+  |            ^^^^
+
+error: Percent
+ --> $DIR/tests/fixture/value/percentage/input.css:7:12
+  |
+7 |     width: 1e0%;
+  |            ^^^^
+
+error: Number
+ --> $DIR/tests/fixture/value/percentage/input.css:7:12
+  |
+7 |     width: 1e0%;
+  |            ^^^
+
+error: Declaration
+ --> $DIR/tests/fixture/value/percentage/input.css:8:5
+  |
+8 |     width: 1e1%;
+  |     ^^^^^^^^^^^
+
+error: DeclarationName
+ --> $DIR/tests/fixture/value/percentage/input.css:8:5
+  |
+8 |     width: 1e1%;
+  |     ^^^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:8:5
+  |
+8 |     width: 1e1%;
+  |     ^^^^^
+
+error: Value
+ --> $DIR/tests/fixture/value/percentage/input.css:8:12
+  |
+8 |     width: 1e1%;
+  |            ^^^^
+
+error: Percent
+ --> $DIR/tests/fixture/value/percentage/input.css:8:12
+  |
+8 |     width: 1e1%;
+  |            ^^^^
+
+error: Number
+ --> $DIR/tests/fixture/value/percentage/input.css:8:12
+  |
+8 |     width: 1e1%;
+  |            ^^^
+
+error: Declaration
+ --> $DIR/tests/fixture/value/percentage/input.css:9:5
+  |
+9 |     width: 1e2%;
+  |     ^^^^^^^^^^^
+
+error: DeclarationName
+ --> $DIR/tests/fixture/value/percentage/input.css:9:5
+  |
+9 |     width: 1e2%;
+  |     ^^^^^
+
+error: Ident
+ --> $DIR/tests/fixture/value/percentage/input.css:9:5
+  |
+9 |     width: 1e2%;
+  |     ^^^^^
+
+error: Value
+ --> $DIR/tests/fixture/value/percentage/input.css:9:12
+  |
+9 |     width: 1e2%;
+  |            ^^^^
+
+error: Percent
+ --> $DIR/tests/fixture/value/percentage/input.css:9:12
+  |
+9 |     width: 1e2%;
+  |            ^^^^
+
+error: Number
+ --> $DIR/tests/fixture/value/percentage/input.css:9:12
+  |
+9 |     width: 1e2%;
+  |            ^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/value/percentage/input.css:10:5
+   |
+10 |     width: 10e-1%;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/value/percentage/input.css:10:5
+   |
+10 |     width: 10e-1%;
+   |     ^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/value/percentage/input.css:10:5
+   |
+10 |     width: 10e-1%;
+   |     ^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/value/percentage/input.css:10:12
+   |
+10 |     width: 10e-1%;
+   |            ^^^^^^
+
+error: Percent
+  --> $DIR/tests/fixture/value/percentage/input.css:10:12
+   |
+10 |     width: 10e-1%;
+   |            ^^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/value/percentage/input.css:10:12
+   |
+10 |     width: 10e-1%;
+   |            ^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/value/percentage/input.css:11:5
+   |
+11 |     width: 10e-5%;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/value/percentage/input.css:11:5
+   |
+11 |     width: 10e-5%;
+   |     ^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/value/percentage/input.css:11:5
+   |
+11 |     width: 10e-5%;
+   |     ^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/value/percentage/input.css:11:12
+   |
+11 |     width: 10e-5%;
+   |            ^^^^^^
+
+error: Percent
+  --> $DIR/tests/fixture/value/percentage/input.css:11:12
+   |
+11 |     width: 10e-5%;
+   |            ^^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/value/percentage/input.css:11:12
+   |
+11 |     width: 10e-5%;
+   |            ^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/value/percentage/input.css:12:5
+   |
+12 |     width: 10e+2%;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/value/percentage/input.css:12:5
+   |
+12 |     width: 10e+2%;
+   |     ^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/value/percentage/input.css:12:5
+   |
+12 |     width: 10e+2%;
+   |     ^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/value/percentage/input.css:12:12
+   |
+12 |     width: 10e+2%;
+   |            ^^^^^^
+
+error: Percent
+  --> $DIR/tests/fixture/value/percentage/input.css:12:12
+   |
+12 |     width: 10e+2%;
+   |            ^^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/value/percentage/input.css:12:12
+   |
+12 |     width: 10e+2%;
+   |            ^^^^^
+
+error: Rule
+  --> $DIR/tests/fixture/value/percentage/input.css:15:1
+   |
+15 | / div {
+16 | |     margin: -5%;
+17 | |     margin: -5.5%;
+18 | | }
+   | |_^
+
+error: QualifiedRule
+  --> $DIR/tests/fixture/value/percentage/input.css:15:1
+   |
+15 | / div {
+16 | |     margin: -5%;
+17 | |     margin: -5.5%;
+18 | | }
+   | |_^
+
+error: SelectorList
+  --> $DIR/tests/fixture/value/percentage/input.css:15:1
+   |
+15 | div {
+   | ^^^
+
+error: ComplexSelector
+  --> $DIR/tests/fixture/value/percentage/input.css:15:1
+   |
+15 | div {
+   | ^^^
+
+error: CompoundSelector
+  --> $DIR/tests/fixture/value/percentage/input.css:15:1
+   |
+15 | div {
+   | ^^^
+
+error: TypeSelector
+  --> $DIR/tests/fixture/value/percentage/input.css:15:1
+   |
+15 | div {
+   | ^^^
+
+error: Ident
+  --> $DIR/tests/fixture/value/percentage/input.css:15:1
+   |
+15 | div {
+   | ^^^
+
+error: Block
+  --> $DIR/tests/fixture/value/percentage/input.css:15:5
+   |
+15 |   div {
+   |  _____^
+16 | |     margin: -5%;
+17 | |     margin: -5.5%;
+18 | | }
+   | |_^
+
+error: Declaration
+  --> $DIR/tests/fixture/value/percentage/input.css:16:5
+   |
+16 |     margin: -5%;
+   |     ^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/value/percentage/input.css:16:5
+   |
+16 |     margin: -5%;
+   |     ^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/value/percentage/input.css:16:5
+   |
+16 |     margin: -5%;
+   |     ^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/value/percentage/input.css:16:13
+   |
+16 |     margin: -5%;
+   |             ^^^
+
+error: Percent
+  --> $DIR/tests/fixture/value/percentage/input.css:16:13
+   |
+16 |     margin: -5%;
+   |             ^^^
+
+error: Number
+  --> $DIR/tests/fixture/value/percentage/input.css:16:13
+   |
+16 |     margin: -5%;
+   |             ^^
+
+error: Declaration
+  --> $DIR/tests/fixture/value/percentage/input.css:17:5
+   |
+17 |     margin: -5.5%;
+   |     ^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/value/percentage/input.css:17:5
+   |
+17 |     margin: -5.5%;
+   |     ^^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/value/percentage/input.css:17:5
+   |
+17 |     margin: -5.5%;
+   |     ^^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/value/percentage/input.css:17:13
+   |
+17 |     margin: -5.5%;
+   |             ^^^^^
+
+error: Percent
+  --> $DIR/tests/fixture/value/percentage/input.css:17:13
+   |
+17 |     margin: -5.5%;
+   |             ^^^^^
+
+error: Number
+  --> $DIR/tests/fixture/value/percentage/input.css:17:13
+   |
+17 |     margin: -5.5%;
+   |             ^^^^
+

crates/swc_stylis/tests/prefixer.rs

@@ -443,7 +443,7 @@ fn appearance() {
     );
     t(
         "animation-duration:0.6s;",
-        "-webkit-animation-duration:0.6s;animation-duration:0.6s;",
+        "-webkit-animation-duration:.6s;animation-duration:.6s;",
     );
     t(
         "animation-name:slidein;",
@@ -455,8 +455,8 @@ fn appearance() {
     );
     t(
         "animation-timing-function:cubic-bezier(0.1,0.7,1.0,0.1);",
-        "-webkit-animation-timing-function:cubic-bezier(0.1,0.7,1.0,0.1);\
+        "-webkit-animation-timing-function:cubic-bezier(.1,.7,1,.1);animation-timing-function:\
-         animation-timing-function:cubic-bezier(0.1,0.7,1.0,0.1);",
+         cubic-bezier(.1,.7,1,.1);",
     );
 }