diff --git a/crates/swc_css_codegen/src/lib.rs b/crates/swc_css_codegen/src/lib.rs
index 80e35b996663..f3ff1339ca58 100644
--- a/crates/swc_css_codegen/src/lib.rs
+++ b/crates/swc_css_codegen/src/lib.rs
@@ -1680,6 +1680,8 @@ where
             let minified = minify_numeric(n.value);
 
             write_raw!(self, n.span, &minified);
+        } else if let Some(raw) = &n.raw {
+            write_raw!(self, n.span, raw);
         } else {
             write_raw!(self, n.span, &n.value.to_string());
         }
diff --git a/crates/swc_css_codegen/tests/fixture/function/1/output.css b/crates/swc_css_codegen/tests/fixture/function/1/output.css
index 113e184b3efc..86b6e1f40cca 100644
--- a/crates/swc_css_codegen/tests/fixture/function/1/output.css
+++ b/crates/swc_css_codegen/tests/fixture/function/1/output.css
@@ -1,6 +1,6 @@
 div {
   color: rgb(255, 255, 255);
-  color: rgb(255, 255, 255, 0.5);
+  color: rgb(255, 255, 255, .5);
   color: rgb(255 255 255);
-  color: rgb(255 255 255/ 0.5);
+  color: rgb(255 255 255/ .5);
 }
diff --git a/crates/swc_css_codegen/tests/fixture/packages/mvp_1_8_0/output.css b/crates/swc_css_codegen/tests/fixture/packages/mvp_1_8_0/output.css
index 0f945df52b08..7758e039460d 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/mvp_1_8_0/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/mvp_1_8_0/output.css
@@ -142,7 +142,7 @@ nav ul li ul {
   display: none;
   height: auto;
   left: -2px;
-  padding: 0.5rem 1rem;
+  padding: .5rem 1rem;
   position: absolute;
   top: 1.7rem;
   white-space: nowrap;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/pure_2_0_6/output.css b/crates/swc_css_codegen/tests/fixture/packages/pure_2_0_6/output.css
index d743f5a0c657..c9a3ff9ae2e8 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/pure_2_0_6/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/pure_2_0_6/output.css
@@ -254,7 +254,7 @@ html {
 }
 .pure-u-1-8, 
 .pure-u-3-24 {
-  width: 12.5%;
+  width: 12.5000%;
 }
 .pure-u-1-6, 
 .pure-u-4-24 {
@@ -279,7 +279,7 @@ html {
 }
 .pure-u-3-8, 
 .pure-u-9-24 {
-  width: 37.5%;
+  width: 37.5000%;
 }
 .pure-u-2-5 {
   width: 40%;
@@ -307,7 +307,7 @@ html {
 }
 .pure-u-5-8, 
 .pure-u-15-24 {
-  width: 62.5%;
+  width: 62.5000%;
 }
 .pure-u-2-3, 
 .pure-u-16-24 {
@@ -332,7 +332,7 @@ html {
 }
 .pure-u-7-8, 
 .pure-u-21-24 {
-  width: 87.5%;
+  width: 87.5000%;
 }
 .pure-u-11-12, 
 .pure-u-22-24 {
@@ -384,7 +384,7 @@ html {
   font-family: inherit;
   font-size: 100%;
   padding: 0.5em 1em;
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, 0.80);
   border: none rgba(0, 0, 0, 0);
   background-color: #e6e6e6;
   text-decoration: none;
@@ -393,16 +393,16 @@ html {
 .pure-button-hover, 
 .pure-button:hover, 
 .pure-button:focus {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
-  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.10)));
+  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.10));
 }
 .pure-button:focus {
   outline: 0;
 }
 .pure-button-active, 
 .pure-button:active {
-  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.20) inset;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.20) inset;
   border-color: #000;
 }
 .pure-button[disabled], 
@@ -412,7 +412,7 @@ html {
 .pure-button-disabled:active {
   border: none;
   background-image: none;
-  opacity: 0.4;
+  opacity: 0.40;
   cursor: not-allowed;
   -webkit-box-shadow: none;
   box-shadow: none;
@@ -845,18 +845,18 @@ a.pure-button-selected {
   white-space: nowrap;
   overflow-y: hidden;
   overflow-x: auto;
-  padding: 0.5em 0;
+  padding: .5em 0;
 }
 .pure-menu-separator, 
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {
   background-color: #ccc;
   height: 1px;
-  margin: 0.3em 0;
+  margin: .3em 0;
 }
 .pure-menu-horizontal .pure-menu-separator {
   width: 1px;
   height: 1.3em;
-  margin: 0 0.3em;
+  margin: 0 .3em;
 }
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {
   display: block;
@@ -874,10 +874,10 @@ a.pure-button-selected {
 }
 .pure-menu-link, 
 .pure-menu-heading {
-  padding: 0.5em 1em;
+  padding: .5em 1em;
 }
 .pure-menu-disabled {
-  opacity: 0.5;
+  opacity: .5;
 }
 .pure-menu-disabled .pure-menu-link:hover {
   background-color: transparent;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/tachyons_4_12_0/output.css b/crates/swc_css_codegen/tests/fixture/packages/tachyons_4_12_0/output.css
index 8b0c99f24cfb..e23030248d79 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/tachyons_4_12_0/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/tachyons_4_12_0/output.css
@@ -7,7 +7,7 @@ body {
 }
 h1 {
   font-size: 2em;
-  margin: 0.67em 0;
+  margin: .67em 0;
 }
 hr {
   box-sizing: content-box;
@@ -94,7 +94,7 @@ button:-moz-focusring,
   outline: 1px dotted ButtonText;
 }
 fieldset {
-  padding: 0.35em 0.75em 0.625em;
+  padding: .35em .75em .625em;
 }
 legend {
   box-sizing: border-box;
@@ -331,76 +331,76 @@ img {
   border-color: #fff;
 }
 .b--white-90 {
-  border-color: rgba(255, 255, 255, 0.9);
+  border-color: rgba(255, 255, 255, .9);
 }
 .b--white-80 {
-  border-color: rgba(255, 255, 255, 0.8);
+  border-color: rgba(255, 255, 255, .8);
 }
 .b--white-70 {
-  border-color: rgba(255, 255, 255, 0.7);
+  border-color: rgba(255, 255, 255, .7);
 }
 .b--white-60 {
-  border-color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, .6);
 }
 .b--white-50 {
-  border-color: rgba(255, 255, 255, 0.5);
+  border-color: rgba(255, 255, 255, .5);
 }
 .b--white-40 {
-  border-color: rgba(255, 255, 255, 0.4);
+  border-color: rgba(255, 255, 255, .4);
 }
 .b--white-30 {
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, .3);
 }
 .b--white-20 {
-  border-color: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, .2);
 }
 .b--white-10 {
-  border-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, .1);
 }
 .b--white-05 {
-  border-color: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, .05);
 }
 .b--white-025 {
-  border-color: rgba(255, 255, 255, 0.025);
+  border-color: rgba(255, 255, 255, .025);
 }
 .b--white-0125 {
-  border-color: rgba(255, 255, 255, 0.0125);
+  border-color: rgba(255, 255, 255, .0125);
 }
 .b--black-90 {
-  border-color: rgba(0, 0, 0, 0.9);
+  border-color: rgba(0, 0, 0, .9);
 }
 .b--black-80 {
-  border-color: rgba(0, 0, 0, 0.8);
+  border-color: rgba(0, 0, 0, .8);
 }
 .b--black-70 {
-  border-color: rgba(0, 0, 0, 0.7);
+  border-color: rgba(0, 0, 0, .7);
 }
 .b--black-60 {
-  border-color: rgba(0, 0, 0, 0.6);
+  border-color: rgba(0, 0, 0, .6);
 }
 .b--black-50 {
-  border-color: rgba(0, 0, 0, 0.5);
+  border-color: rgba(0, 0, 0, .5);
 }
 .b--black-40 {
-  border-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(0, 0, 0, .4);
 }
 .b--black-30 {
-  border-color: rgba(0, 0, 0, 0.3);
+  border-color: rgba(0, 0, 0, .3);
 }
 .b--black-20 {
-  border-color: rgba(0, 0, 0, 0.2);
+  border-color: rgba(0, 0, 0, .2);
 }
 .b--black-10 {
-  border-color: rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, .1);
 }
 .b--black-05 {
-  border-color: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, .05);
 }
 .b--black-025 {
-  border-color: rgba(0, 0, 0, 0.025);
+  border-color: rgba(0, 0, 0, .025);
 }
 .b--black-0125 {
-  border-color: rgba(0, 0, 0, 0.0125);
+  border-color: rgba(0, 0, 0, .0125);
 }
 .b--dark-red {
   border-color: #e7040f;
@@ -493,13 +493,13 @@ img {
   border-radius: 0;
 }
 .br1 {
-  border-radius: 0.125rem;
+  border-radius: .125rem;
 }
 .br2 {
-  border-radius: 0.25rem;
+  border-radius: .25rem;
 }
 .br3 {
-  border-radius: 0.5rem;
+  border-radius: .5rem;
 }
 .br4 {
   border-radius: 1rem;
@@ -551,13 +551,13 @@ img {
   border-width: 0;
 }
 .bw1 {
-  border-width: 0.125rem;
+  border-width: .125rem;
 }
 .bw2 {
-  border-width: 0.25rem;
+  border-width: .25rem;
 }
 .bw3 {
-  border-width: 0.5rem;
+  border-width: .5rem;
 }
 .bw4 {
   border-width: 1rem;
@@ -578,19 +578,19 @@ img {
   border-left-width: 0;
 }
 .shadow-1 {
-  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
 }
 .shadow-2 {
-  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
 }
 .shadow-3 {
-  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
 }
 .shadow-4 {
-  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
 }
 .shadow-5 {
-  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
 }
 .pre {
   overflow-x: auto;
@@ -1017,13 +1017,13 @@ code,
   height: inherit;
 }
 .tracked {
-  letter-spacing: 0.1em;
+  letter-spacing: .1em;
 }
 .tracked-tight {
-  letter-spacing: -0.05em;
+  letter-spacing: -.05em;
 }
 .tracked-mega {
-  letter-spacing: 0.25em;
+  letter-spacing: .25em;
 }
 .lh-solid {
   line-height: 1;
@@ -1036,20 +1036,20 @@ code,
 }
 .link {
   text-decoration: none;
-  transition: color 0.15s ease-in;
+  transition: color .15s ease-in;
 }
 .link:link, 
 .link:visited {
-  transition: color 0.15s ease-in;
+  transition: color .15s ease-in;
 }
 .link:hover {
-  transition: color 0.15s ease-in;
+  transition: color .15s ease-in;
 }
 .link:active {
-  transition: color 0.15s ease-in;
+  transition: color .15s ease-in;
 }
 .link:focus {
-  transition: color 0.15s ease-in;
+  transition: color .15s ease-in;
   outline: 1px dotted currentColor;
 }
 .list {
@@ -1206,37 +1206,37 @@ code,
   opacity: 1;
 }
 .o-90 {
-  opacity: 0.9;
+  opacity: .9;
 }
 .o-80 {
-  opacity: 0.8;
+  opacity: .8;
 }
 .o-70 {
-  opacity: 0.7;
+  opacity: .7;
 }
 .o-60 {
-  opacity: 0.6;
+  opacity: .6;
 }
 .o-50 {
-  opacity: 0.5;
+  opacity: .5;
 }
 .o-40 {
-  opacity: 0.4;
+  opacity: .4;
 }
 .o-30 {
-  opacity: 0.3;
+  opacity: .3;
 }
 .o-20 {
-  opacity: 0.2;
+  opacity: .2;
 }
 .o-10 {
-  opacity: 0.1;
+  opacity: .1;
 }
 .o-05 {
-  opacity: 0.05;
+  opacity: .05;
 }
 .o-025 {
-  opacity: 0.025;
+  opacity: .025;
 }
 .o-0 {
   opacity: 0;
@@ -1270,61 +1270,61 @@ code,
   transform: rotate(315deg);
 }
 .black-90 {
-  color: rgba(0, 0, 0, 0.9);
+  color: rgba(0, 0, 0, .9);
 }
 .black-80 {
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, .8);
 }
 .black-70 {
-  color: rgba(0, 0, 0, 0.7);
+  color: rgba(0, 0, 0, .7);
 }
 .black-60 {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(0, 0, 0, .6);
 }
 .black-50 {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(0, 0, 0, .5);
 }
 .black-40 {
-  color: rgba(0, 0, 0, 0.4);
+  color: rgba(0, 0, 0, .4);
 }
 .black-30 {
-  color: rgba(0, 0, 0, 0.3);
+  color: rgba(0, 0, 0, .3);
 }
 .black-20 {
-  color: rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, .2);
 }
 .black-10 {
-  color: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, .1);
 }
 .black-05 {
-  color: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, .05);
 }
 .white-90 {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, .9);
 }
 .white-80 {
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, .8);
 }
 .white-70 {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, .7);
 }
 .white-60 {
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, .6);
 }
 .white-50 {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, .5);
 }
 .white-40 {
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, .4);
 }
 .white-30 {
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, .3);
 }
 .white-20 {
-  color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, .2);
 }
 .white-10 {
-  color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, .1);
 }
 .black {
   color: #000;
@@ -1438,61 +1438,61 @@ code,
   color: inherit;
 }
 .bg-black-90 {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(0, 0, 0, .9);
 }
 .bg-black-80 {
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, .8);
 }
 .bg-black-70 {
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(0, 0, 0, .7);
 }
 .bg-black-60 {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, .6);
 }
 .bg-black-50 {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, .5);
 }
 .bg-black-40 {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, .4);
 }
 .bg-black-30 {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, .3);
 }
 .bg-black-20 {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, .2);
 }
 .bg-black-10 {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, .1);
 }
 .bg-black-05 {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(0, 0, 0, .05);
 }
 .bg-white-90 {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, .9);
 }
 .bg-white-80 {
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, .8);
 }
 .bg-white-70 {
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, .7);
 }
 .bg-white-60 {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, .6);
 }
 .bg-white-50 {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, .5);
 }
 .bg-white-40 {
-  background-color: rgba(255, 255, 255, 0.4);
+  background-color: rgba(255, 255, 255, .4);
 }
 .bg-white-30 {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, .3);
 }
 .bg-white-20 {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, .2);
 }
 .bg-white-10 {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, .1);
 }
 .bg-black {
   background-color: #000;
@@ -1675,112 +1675,112 @@ code,
   color: #fff;
 }
 .hover-black-90:hover {
-  color: rgba(0, 0, 0, 0.9);
+  color: rgba(0, 0, 0, .9);
 }
 .hover-black-90:focus {
-  color: rgba(0, 0, 0, 0.9);
+  color: rgba(0, 0, 0, .9);
 }
 .hover-black-80:hover {
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, .8);
 }
 .hover-black-80:focus {
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, .8);
 }
 .hover-black-70:hover {
-  color: rgba(0, 0, 0, 0.7);
+  color: rgba(0, 0, 0, .7);
 }
 .hover-black-70:focus {
-  color: rgba(0, 0, 0, 0.7);
+  color: rgba(0, 0, 0, .7);
 }
 .hover-black-60:hover {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(0, 0, 0, .6);
 }
 .hover-black-60:focus {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(0, 0, 0, .6);
 }
 .hover-black-50:hover {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(0, 0, 0, .5);
 }
 .hover-black-50:focus {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(0, 0, 0, .5);
 }
 .hover-black-40:hover {
-  color: rgba(0, 0, 0, 0.4);
+  color: rgba(0, 0, 0, .4);
 }
 .hover-black-40:focus {
-  color: rgba(0, 0, 0, 0.4);
+  color: rgba(0, 0, 0, .4);
 }
 .hover-black-30:hover {
-  color: rgba(0, 0, 0, 0.3);
+  color: rgba(0, 0, 0, .3);
 }
 .hover-black-30:focus {
-  color: rgba(0, 0, 0, 0.3);
+  color: rgba(0, 0, 0, .3);
 }
 .hover-black-20:hover {
-  color: rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, .2);
 }
 .hover-black-20:focus {
-  color: rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, .2);
 }
 .hover-black-10:hover {
-  color: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, .1);
 }
 .hover-black-10:focus {
-  color: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, .1);
 }
 .hover-white-90:hover {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, .9);
 }
 .hover-white-90:focus {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, .9);
 }
 .hover-white-80:hover {
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, .8);
 }
 .hover-white-80:focus {
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, .8);
 }
 .hover-white-70:hover {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, .7);
 }
 .hover-white-70:focus {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, .7);
 }
 .hover-white-60:hover {
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, .6);
 }
 .hover-white-60:focus {
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, .6);
 }
 .hover-white-50:hover {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, .5);
 }
 .hover-white-50:focus {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, .5);
 }
 .hover-white-40:hover {
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, .4);
 }
 .hover-white-40:focus {
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, .4);
 }
 .hover-white-30:hover {
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, .3);
 }
 .hover-white-30:focus {
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, .3);
 }
 .hover-white-20:hover {
-  color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, .2);
 }
 .hover-white-20:focus {
-  color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, .2);
 }
 .hover-white-10:hover {
-  color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, .1);
 }
 .hover-white-10:focus {
-  color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, .1);
 }
 .hover-inherit:hover, 
 .hover-inherit:focus {
@@ -1859,112 +1859,112 @@ code,
   background-color: transparent;
 }
 .hover-bg-black-90:hover {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(0, 0, 0, .9);
 }
 .hover-bg-black-90:focus {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(0, 0, 0, .9);
 }
 .hover-bg-black-80:hover {
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, .8);
 }
 .hover-bg-black-80:focus {
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, .8);
 }
 .hover-bg-black-70:hover {
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(0, 0, 0, .7);
 }
 .hover-bg-black-70:focus {
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(0, 0, 0, .7);
 }
 .hover-bg-black-60:hover {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, .6);
 }
 .hover-bg-black-60:focus {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, .6);
 }
 .hover-bg-black-50:hover {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, .5);
 }
 .hover-bg-black-50:focus {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, .5);
 }
 .hover-bg-black-40:hover {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, .4);
 }
 .hover-bg-black-40:focus {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, .4);
 }
 .hover-bg-black-30:hover {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, .3);
 }
 .hover-bg-black-30:focus {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, .3);
 }
 .hover-bg-black-20:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, .2);
 }
 .hover-bg-black-20:focus {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, .2);
 }
 .hover-bg-black-10:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, .1);
 }
 .hover-bg-black-10:focus {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, .1);
 }
 .hover-bg-white-90:hover {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, .9);
 }
 .hover-bg-white-90:focus {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, .9);
 }
 .hover-bg-white-80:hover {
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, .8);
 }
 .hover-bg-white-80:focus {
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, .8);
 }
 .hover-bg-white-70:hover {
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, .7);
 }
 .hover-bg-white-70:focus {
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, .7);
 }
 .hover-bg-white-60:hover {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, .6);
 }
 .hover-bg-white-60:focus {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, .6);
 }
 .hover-bg-white-50:hover {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, .5);
 }
 .hover-bg-white-50:focus {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, .5);
 }
 .hover-bg-white-40:hover {
-  background-color: rgba(255, 255, 255, 0.4);
+  background-color: rgba(255, 255, 255, .4);
 }
 .hover-bg-white-40:focus {
-  background-color: rgba(255, 255, 255, 0.4);
+  background-color: rgba(255, 255, 255, .4);
 }
 .hover-bg-white-30:hover {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, .3);
 }
 .hover-bg-white-30:focus {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, .3);
 }
 .hover-bg-white-20:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, .2);
 }
 .hover-bg-white-20:focus {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, .2);
 }
 .hover-bg-white-10:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, .1);
 }
 .hover-bg-white-10:focus {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, .1);
 }
 .hover-dark-red:hover {
   color: #e7040f;
@@ -2274,10 +2274,10 @@ code,
   padding: 0;
 }
 .pa1 {
-  padding: 0.25rem;
+  padding: .25rem;
 }
 .pa2 {
-  padding: 0.5rem;
+  padding: .5rem;
 }
 .pa3 {
   padding: 1rem;
@@ -2298,10 +2298,10 @@ code,
   padding-left: 0;
 }
 .pl1 {
-  padding-left: 0.25rem;
+  padding-left: .25rem;
 }
 .pl2 {
-  padding-left: 0.5rem;
+  padding-left: .5rem;
 }
 .pl3 {
   padding-left: 1rem;
@@ -2322,10 +2322,10 @@ code,
   padding-right: 0;
 }
 .pr1 {
-  padding-right: 0.25rem;
+  padding-right: .25rem;
 }
 .pr2 {
-  padding-right: 0.5rem;
+  padding-right: .5rem;
 }
 .pr3 {
   padding-right: 1rem;
@@ -2346,10 +2346,10 @@ code,
   padding-bottom: 0;
 }
 .pb1 {
-  padding-bottom: 0.25rem;
+  padding-bottom: .25rem;
 }
 .pb2 {
-  padding-bottom: 0.5rem;
+  padding-bottom: .5rem;
 }
 .pb3 {
   padding-bottom: 1rem;
@@ -2370,10 +2370,10 @@ code,
   padding-top: 0;
 }
 .pt1 {
-  padding-top: 0.25rem;
+  padding-top: .25rem;
 }
 .pt2 {
-  padding-top: 0.5rem;
+  padding-top: .5rem;
 }
 .pt3 {
   padding-top: 1rem;
@@ -2395,12 +2395,12 @@ code,
   padding-bottom: 0;
 }
 .pv1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-top: .25rem;
+  padding-bottom: .25rem;
 }
 .pv2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
 }
 .pv3 {
   padding-top: 1rem;
@@ -2427,12 +2427,12 @@ code,
   padding-right: 0;
 }
 .ph1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-left: .25rem;
+  padding-right: .25rem;
 }
 .ph2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
 }
 .ph3 {
   padding-left: 1rem;
@@ -2458,10 +2458,10 @@ code,
   margin: 0;
 }
 .ma1 {
-  margin: 0.25rem;
+  margin: .25rem;
 }
 .ma2 {
-  margin: 0.5rem;
+  margin: .5rem;
 }
 .ma3 {
   margin: 1rem;
@@ -2482,10 +2482,10 @@ code,
   margin-left: 0;
 }
 .ml1 {
-  margin-left: 0.25rem;
+  margin-left: .25rem;
 }
 .ml2 {
-  margin-left: 0.5rem;
+  margin-left: .5rem;
 }
 .ml3 {
   margin-left: 1rem;
@@ -2506,10 +2506,10 @@ code,
   margin-right: 0;
 }
 .mr1 {
-  margin-right: 0.25rem;
+  margin-right: .25rem;
 }
 .mr2 {
-  margin-right: 0.5rem;
+  margin-right: .5rem;
 }
 .mr3 {
   margin-right: 1rem;
@@ -2530,10 +2530,10 @@ code,
   margin-bottom: 0;
 }
 .mb1 {
-  margin-bottom: 0.25rem;
+  margin-bottom: .25rem;
 }
 .mb2 {
-  margin-bottom: 0.5rem;
+  margin-bottom: .5rem;
 }
 .mb3 {
   margin-bottom: 1rem;
@@ -2554,10 +2554,10 @@ code,
   margin-top: 0;
 }
 .mt1 {
-  margin-top: 0.25rem;
+  margin-top: .25rem;
 }
 .mt2 {
-  margin-top: 0.5rem;
+  margin-top: .5rem;
 }
 .mt3 {
   margin-top: 1rem;
@@ -2579,12 +2579,12 @@ code,
   margin-bottom: 0;
 }
 .mv1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
+  margin-top: .25rem;
+  margin-bottom: .25rem;
 }
 .mv2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
 }
 .mv3 {
   margin-top: 1rem;
@@ -2611,12 +2611,12 @@ code,
   margin-right: 0;
 }
 .mh1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+  margin-left: .25rem;
+  margin-right: .25rem;
 }
 .mh2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+  margin-left: .5rem;
+  margin-right: .5rem;
 }
 .mh3 {
   margin-left: 1rem;
@@ -2760,10 +2760,10 @@ code,
   background-color: #f4f4f4;
 }
 .stripe-light:nth-child(odd) {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, .1);
 }
 .stripe-dark:nth-child(odd) {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, .1);
 }
 .strike {
   text-decoration: line-through;
@@ -2822,10 +2822,10 @@ code,
   font-size: 1rem;
 }
 .f6 {
-  font-size: 0.875rem;
+  font-size: .875rem;
 }
 .f7 {
-  font-size: 0.75rem;
+  font-size: .75rem;
 }
 .measure {
   max-width: 30em;
@@ -2891,34 +2891,34 @@ code,
 }
 .dim {
   opacity: 1;
-  transition: opacity 0.15s ease-in;
+  transition: opacity .15s ease-in;
 }
 .dim:hover, 
 .dim:focus {
-  opacity: 0.5;
-  transition: opacity 0.15s ease-in;
+  opacity: .5;
+  transition: opacity .15s ease-in;
 }
 .dim:active {
-  opacity: 0.8;
-  transition: opacity 0.15s ease-out;
+  opacity: .8;
+  transition: opacity .15s ease-out;
 }
 .glow {
-  transition: opacity 0.15s ease-in;
+  transition: opacity .15s ease-in;
 }
 .glow:hover, 
 .glow:focus {
   opacity: 1;
-  transition: opacity 0.15s ease-in;
+  transition: opacity .15s ease-in;
 }
 .hide-child .child {
   opacity: 0;
-  transition: opacity 0.15s ease-in;
+  transition: opacity .15s ease-in;
 }
 .hide-child:hover .child, 
 .hide-child:focus .child, 
 .hide-child:active .child {
   opacity: 1;
-  transition: opacity 0.15s ease-in;
+  transition: opacity .15s ease-in;
 }
 .underline-hover:hover, 
 .underline-hover:focus {
@@ -2930,9 +2930,9 @@ code,
   backface-visibility: hidden;
   -webkit-transform: translatez(0);
   transform: translatez(0);
-  transition: -webkit-transform 0.25s ease-out;
-  transition: transform 0.25s ease-out;
-  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
+  transition: -webkit-transform .25s ease-out;
+  transition: transform .25s ease-out;
+  transition: transform .25s ease-out, -webkit-transform .25s ease-out;
 }
 .grow:hover, 
 .grow:focus {
@@ -2940,8 +2940,8 @@ code,
   transform: scale(1.05);
 }
 .grow:active {
-  -webkit-transform: scale(0.9);
-  transform: scale(0.9);
+  -webkit-transform: scale(.90);
+  transform: scale(.90);
 }
 .grow-large {
   -moz-osx-font-smoothing: grayscale;
@@ -2949,9 +2949,9 @@ code,
   backface-visibility: hidden;
   -webkit-transform: translatez(0);
   transform: translatez(0);
-  transition: -webkit-transform 0.25s ease-in-out;
-  transition: transform 0.25s ease-in-out;
-  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
+  transition: -webkit-transform .25s ease-in-out;
+  transition: transform .25s ease-in-out;
+  transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
 }
 .grow-large:hover, 
 .grow-large:focus {
@@ -2959,8 +2959,8 @@ code,
   transform: scale(1.2);
 }
 .grow-large:active {
-  -webkit-transform: scale(0.95);
-  transform: scale(0.95);
+  -webkit-transform: scale(.95);
+  transform: scale(.95);
 }
 .pointer:hover {
   cursor: pointer;
@@ -2968,11 +2968,11 @@ code,
 .shadow-hover {
   cursor: pointer;
   position: relative;
-  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all .5s cubic-bezier(.165, .84, .44, 1);
 }
 .shadow-hover::after {
   content: '';
-  box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 16px 2px rgba(0, 0, 0, .2);
   border-radius: inherit;
   opacity: 0;
   position: absolute;
@@ -2981,7 +2981,7 @@ code,
   width: 100%;
   height: 100%;
   z-index: -1;
-  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: opacity .5s cubic-bezier(.165, .84, .44, 1);
 }
 .shadow-hover:hover::after, 
 .shadow-hover:focus::after {
@@ -2990,7 +2990,7 @@ code,
 .bg-animate, 
 .bg-animate:hover, 
 .bg-animate:focus {
-  transition: background-color 0.15s ease-in-out;
+  transition: background-color .15s ease-in-out;
 }
 .z-0 {
   z-index: 0;
@@ -3062,15 +3062,15 @@ code,
 }
 .nested-links a {
   color: #357edd;
-  transition: color 0.15s ease-in;
+  transition: color .15s ease-in;
 }
 .nested-links a:hover {
   color: #96ccff;
-  transition: color 0.15s ease-in;
+  transition: color .15s ease-in;
 }
 .nested-links a:focus {
   color: #96ccff;
-  transition: color 0.15s ease-in;
+  transition: color .15s ease-in;
 }
 .debug * {
   outline: 1px solid gold;
@@ -3204,13 +3204,13 @@ code,
     border-radius: 0;
   }
   .br1-ns {
-    border-radius: 0.125rem;
+    border-radius: .125rem;
   }
   .br2-ns {
-    border-radius: 0.25rem;
+    border-radius: .25rem;
   }
   .br3-ns {
-    border-radius: 0.5rem;
+    border-radius: .5rem;
   }
   .br4-ns {
     border-radius: 1rem;
@@ -3262,13 +3262,13 @@ code,
     border-width: 0;
   }
   .bw1-ns {
-    border-width: 0.125rem;
+    border-width: .125rem;
   }
   .bw2-ns {
-    border-width: 0.25rem;
+    border-width: .25rem;
   }
   .bw3-ns {
-    border-width: 0.5rem;
+    border-width: .5rem;
   }
   .bw4-ns {
     border-width: 1rem;
@@ -3289,19 +3289,19 @@ code,
     border-left-width: 0;
   }
   .shadow-1-ns {
-    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
   }
   .shadow-2-ns {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
   }
   .shadow-3-ns {
-    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
   }
   .shadow-4-ns {
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
   }
   .shadow-5-ns {
-    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
   }
   .top-0-ns {
     top: 0;
@@ -3660,13 +3660,13 @@ code,
     height: inherit;
   }
   .tracked-ns {
-    letter-spacing: 0.1em;
+    letter-spacing: .1em;
   }
   .tracked-tight-ns {
-    letter-spacing: -0.05em;
+    letter-spacing: -.05em;
   }
   .tracked-mega-ns {
-    letter-spacing: 0.25em;
+    letter-spacing: .25em;
   }
   .lh-solid-ns {
     line-height: 1;
@@ -3856,10 +3856,10 @@ code,
     padding: 0;
   }
   .pa1-ns {
-    padding: 0.25rem;
+    padding: .25rem;
   }
   .pa2-ns {
-    padding: 0.5rem;
+    padding: .5rem;
   }
   .pa3-ns {
     padding: 1rem;
@@ -3880,10 +3880,10 @@ code,
     padding-left: 0;
   }
   .pl1-ns {
-    padding-left: 0.25rem;
+    padding-left: .25rem;
   }
   .pl2-ns {
-    padding-left: 0.5rem;
+    padding-left: .5rem;
   }
   .pl3-ns {
     padding-left: 1rem;
@@ -3904,10 +3904,10 @@ code,
     padding-right: 0;
   }
   .pr1-ns {
-    padding-right: 0.25rem;
+    padding-right: .25rem;
   }
   .pr2-ns {
-    padding-right: 0.5rem;
+    padding-right: .5rem;
   }
   .pr3-ns {
     padding-right: 1rem;
@@ -3928,10 +3928,10 @@ code,
     padding-bottom: 0;
   }
   .pb1-ns {
-    padding-bottom: 0.25rem;
+    padding-bottom: .25rem;
   }
   .pb2-ns {
-    padding-bottom: 0.5rem;
+    padding-bottom: .5rem;
   }
   .pb3-ns {
     padding-bottom: 1rem;
@@ -3952,10 +3952,10 @@ code,
     padding-top: 0;
   }
   .pt1-ns {
-    padding-top: 0.25rem;
+    padding-top: .25rem;
   }
   .pt2-ns {
-    padding-top: 0.5rem;
+    padding-top: .5rem;
   }
   .pt3-ns {
     padding-top: 1rem;
@@ -3977,12 +3977,12 @@ code,
     padding-bottom: 0;
   }
   .pv1-ns {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
+    padding-top: .25rem;
+    padding-bottom: .25rem;
   }
   .pv2-ns {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
   }
   .pv3-ns {
     padding-top: 1rem;
@@ -4009,12 +4009,12 @@ code,
     padding-right: 0;
   }
   .ph1-ns {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
+    padding-left: .25rem;
+    padding-right: .25rem;
   }
   .ph2-ns {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding-left: .5rem;
+    padding-right: .5rem;
   }
   .ph3-ns {
     padding-left: 1rem;
@@ -4040,10 +4040,10 @@ code,
     margin: 0;
   }
   .ma1-ns {
-    margin: 0.25rem;
+    margin: .25rem;
   }
   .ma2-ns {
-    margin: 0.5rem;
+    margin: .5rem;
   }
   .ma3-ns {
     margin: 1rem;
@@ -4064,10 +4064,10 @@ code,
     margin-left: 0;
   }
   .ml1-ns {
-    margin-left: 0.25rem;
+    margin-left: .25rem;
   }
   .ml2-ns {
-    margin-left: 0.5rem;
+    margin-left: .5rem;
   }
   .ml3-ns {
     margin-left: 1rem;
@@ -4088,10 +4088,10 @@ code,
     margin-right: 0;
   }
   .mr1-ns {
-    margin-right: 0.25rem;
+    margin-right: .25rem;
   }
   .mr2-ns {
-    margin-right: 0.5rem;
+    margin-right: .5rem;
   }
   .mr3-ns {
     margin-right: 1rem;
@@ -4112,10 +4112,10 @@ code,
     margin-bottom: 0;
   }
   .mb1-ns {
-    margin-bottom: 0.25rem;
+    margin-bottom: .25rem;
   }
   .mb2-ns {
-    margin-bottom: 0.5rem;
+    margin-bottom: .5rem;
   }
   .mb3-ns {
     margin-bottom: 1rem;
@@ -4136,10 +4136,10 @@ code,
     margin-top: 0;
   }
   .mt1-ns {
-    margin-top: 0.25rem;
+    margin-top: .25rem;
   }
   .mt2-ns {
-    margin-top: 0.5rem;
+    margin-top: .5rem;
   }
   .mt3-ns {
     margin-top: 1rem;
@@ -4161,12 +4161,12 @@ code,
     margin-bottom: 0;
   }
   .mv1-ns {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
+    margin-top: .25rem;
+    margin-bottom: .25rem;
   }
   .mv2-ns {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
   }
   .mv3-ns {
     margin-top: 1rem;
@@ -4193,12 +4193,12 @@ code,
     margin-right: 0;
   }
   .mh1-ns {
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    margin-left: .25rem;
+    margin-right: .25rem;
   }
   .mh2-ns {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
   }
   .mh3-ns {
     margin-left: 1rem;
@@ -4382,10 +4382,10 @@ code,
     font-size: 1rem;
   }
   .f6-ns {
-    font-size: 0.875rem;
+    font-size: .875rem;
   }
   .f7-ns {
-    font-size: 0.75rem;
+    font-size: .75rem;
   }
   .measure-ns {
     max-width: 30em;
@@ -4558,13 +4558,13 @@ code,
     border-radius: 0;
   }
   .br1-m {
-    border-radius: 0.125rem;
+    border-radius: .125rem;
   }
   .br2-m {
-    border-radius: 0.25rem;
+    border-radius: .25rem;
   }
   .br3-m {
-    border-radius: 0.5rem;
+    border-radius: .5rem;
   }
   .br4-m {
     border-radius: 1rem;
@@ -4616,13 +4616,13 @@ code,
     border-width: 0;
   }
   .bw1-m {
-    border-width: 0.125rem;
+    border-width: .125rem;
   }
   .bw2-m {
-    border-width: 0.25rem;
+    border-width: .25rem;
   }
   .bw3-m {
-    border-width: 0.5rem;
+    border-width: .5rem;
   }
   .bw4-m {
     border-width: 1rem;
@@ -4643,19 +4643,19 @@ code,
     border-left-width: 0;
   }
   .shadow-1-m {
-    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
   }
   .shadow-2-m {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
   }
   .shadow-3-m {
-    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
   }
   .shadow-4-m {
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
   }
   .shadow-5-m {
-    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
   }
   .top-0-m {
     top: 0;
@@ -5014,13 +5014,13 @@ code,
     height: inherit;
   }
   .tracked-m {
-    letter-spacing: 0.1em;
+    letter-spacing: .1em;
   }
   .tracked-tight-m {
-    letter-spacing: -0.05em;
+    letter-spacing: -.05em;
   }
   .tracked-mega-m {
-    letter-spacing: 0.25em;
+    letter-spacing: .25em;
   }
   .lh-solid-m {
     line-height: 1;
@@ -5210,10 +5210,10 @@ code,
     padding: 0;
   }
   .pa1-m {
-    padding: 0.25rem;
+    padding: .25rem;
   }
   .pa2-m {
-    padding: 0.5rem;
+    padding: .5rem;
   }
   .pa3-m {
     padding: 1rem;
@@ -5234,10 +5234,10 @@ code,
     padding-left: 0;
   }
   .pl1-m {
-    padding-left: 0.25rem;
+    padding-left: .25rem;
   }
   .pl2-m {
-    padding-left: 0.5rem;
+    padding-left: .5rem;
   }
   .pl3-m {
     padding-left: 1rem;
@@ -5258,10 +5258,10 @@ code,
     padding-right: 0;
   }
   .pr1-m {
-    padding-right: 0.25rem;
+    padding-right: .25rem;
   }
   .pr2-m {
-    padding-right: 0.5rem;
+    padding-right: .5rem;
   }
   .pr3-m {
     padding-right: 1rem;
@@ -5282,10 +5282,10 @@ code,
     padding-bottom: 0;
   }
   .pb1-m {
-    padding-bottom: 0.25rem;
+    padding-bottom: .25rem;
   }
   .pb2-m {
-    padding-bottom: 0.5rem;
+    padding-bottom: .5rem;
   }
   .pb3-m {
     padding-bottom: 1rem;
@@ -5306,10 +5306,10 @@ code,
     padding-top: 0;
   }
   .pt1-m {
-    padding-top: 0.25rem;
+    padding-top: .25rem;
   }
   .pt2-m {
-    padding-top: 0.5rem;
+    padding-top: .5rem;
   }
   .pt3-m {
     padding-top: 1rem;
@@ -5331,12 +5331,12 @@ code,
     padding-bottom: 0;
   }
   .pv1-m {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
+    padding-top: .25rem;
+    padding-bottom: .25rem;
   }
   .pv2-m {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
   }
   .pv3-m {
     padding-top: 1rem;
@@ -5363,12 +5363,12 @@ code,
     padding-right: 0;
   }
   .ph1-m {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
+    padding-left: .25rem;
+    padding-right: .25rem;
   }
   .ph2-m {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding-left: .5rem;
+    padding-right: .5rem;
   }
   .ph3-m {
     padding-left: 1rem;
@@ -5394,10 +5394,10 @@ code,
     margin: 0;
   }
   .ma1-m {
-    margin: 0.25rem;
+    margin: .25rem;
   }
   .ma2-m {
-    margin: 0.5rem;
+    margin: .5rem;
   }
   .ma3-m {
     margin: 1rem;
@@ -5418,10 +5418,10 @@ code,
     margin-left: 0;
   }
   .ml1-m {
-    margin-left: 0.25rem;
+    margin-left: .25rem;
   }
   .ml2-m {
-    margin-left: 0.5rem;
+    margin-left: .5rem;
   }
   .ml3-m {
     margin-left: 1rem;
@@ -5442,10 +5442,10 @@ code,
     margin-right: 0;
   }
   .mr1-m {
-    margin-right: 0.25rem;
+    margin-right: .25rem;
   }
   .mr2-m {
-    margin-right: 0.5rem;
+    margin-right: .5rem;
   }
   .mr3-m {
     margin-right: 1rem;
@@ -5466,10 +5466,10 @@ code,
     margin-bottom: 0;
   }
   .mb1-m {
-    margin-bottom: 0.25rem;
+    margin-bottom: .25rem;
   }
   .mb2-m {
-    margin-bottom: 0.5rem;
+    margin-bottom: .5rem;
   }
   .mb3-m {
     margin-bottom: 1rem;
@@ -5490,10 +5490,10 @@ code,
     margin-top: 0;
   }
   .mt1-m {
-    margin-top: 0.25rem;
+    margin-top: .25rem;
   }
   .mt2-m {
-    margin-top: 0.5rem;
+    margin-top: .5rem;
   }
   .mt3-m {
     margin-top: 1rem;
@@ -5515,12 +5515,12 @@ code,
     margin-bottom: 0;
   }
   .mv1-m {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
+    margin-top: .25rem;
+    margin-bottom: .25rem;
   }
   .mv2-m {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
   }
   .mv3-m {
     margin-top: 1rem;
@@ -5547,12 +5547,12 @@ code,
     margin-right: 0;
   }
   .mh1-m {
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    margin-left: .25rem;
+    margin-right: .25rem;
   }
   .mh2-m {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
   }
   .mh3-m {
     margin-left: 1rem;
@@ -5736,10 +5736,10 @@ code,
     font-size: 1rem;
   }
   .f6-m {
-    font-size: 0.875rem;
+    font-size: .875rem;
   }
   .f7-m {
-    font-size: 0.75rem;
+    font-size: .75rem;
   }
   .measure-m {
     max-width: 30em;
@@ -5912,13 +5912,13 @@ code,
     border-radius: 0;
   }
   .br1-l {
-    border-radius: 0.125rem;
+    border-radius: .125rem;
   }
   .br2-l {
-    border-radius: 0.25rem;
+    border-radius: .25rem;
   }
   .br3-l {
-    border-radius: 0.5rem;
+    border-radius: .5rem;
   }
   .br4-l {
     border-radius: 1rem;
@@ -5970,13 +5970,13 @@ code,
     border-width: 0;
   }
   .bw1-l {
-    border-width: 0.125rem;
+    border-width: .125rem;
   }
   .bw2-l {
-    border-width: 0.25rem;
+    border-width: .25rem;
   }
   .bw3-l {
-    border-width: 0.5rem;
+    border-width: .5rem;
   }
   .bw4-l {
     border-width: 1rem;
@@ -5997,19 +5997,19 @@ code,
     border-left-width: 0;
   }
   .shadow-1-l {
-    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
   }
   .shadow-2-l {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
   }
   .shadow-3-l {
-    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
   }
   .shadow-4-l {
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
   }
   .shadow-5-l {
-    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
   }
   .top-0-l {
     top: 0;
@@ -6368,13 +6368,13 @@ code,
     height: inherit;
   }
   .tracked-l {
-    letter-spacing: 0.1em;
+    letter-spacing: .1em;
   }
   .tracked-tight-l {
-    letter-spacing: -0.05em;
+    letter-spacing: -.05em;
   }
   .tracked-mega-l {
-    letter-spacing: 0.25em;
+    letter-spacing: .25em;
   }
   .lh-solid-l {
     line-height: 1;
@@ -6564,10 +6564,10 @@ code,
     padding: 0;
   }
   .pa1-l {
-    padding: 0.25rem;
+    padding: .25rem;
   }
   .pa2-l {
-    padding: 0.5rem;
+    padding: .5rem;
   }
   .pa3-l {
     padding: 1rem;
@@ -6588,10 +6588,10 @@ code,
     padding-left: 0;
   }
   .pl1-l {
-    padding-left: 0.25rem;
+    padding-left: .25rem;
   }
   .pl2-l {
-    padding-left: 0.5rem;
+    padding-left: .5rem;
   }
   .pl3-l {
     padding-left: 1rem;
@@ -6612,10 +6612,10 @@ code,
     padding-right: 0;
   }
   .pr1-l {
-    padding-right: 0.25rem;
+    padding-right: .25rem;
   }
   .pr2-l {
-    padding-right: 0.5rem;
+    padding-right: .5rem;
   }
   .pr3-l {
     padding-right: 1rem;
@@ -6636,10 +6636,10 @@ code,
     padding-bottom: 0;
   }
   .pb1-l {
-    padding-bottom: 0.25rem;
+    padding-bottom: .25rem;
   }
   .pb2-l {
-    padding-bottom: 0.5rem;
+    padding-bottom: .5rem;
   }
   .pb3-l {
     padding-bottom: 1rem;
@@ -6660,10 +6660,10 @@ code,
     padding-top: 0;
   }
   .pt1-l {
-    padding-top: 0.25rem;
+    padding-top: .25rem;
   }
   .pt2-l {
-    padding-top: 0.5rem;
+    padding-top: .5rem;
   }
   .pt3-l {
     padding-top: 1rem;
@@ -6685,12 +6685,12 @@ code,
     padding-bottom: 0;
   }
   .pv1-l {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
+    padding-top: .25rem;
+    padding-bottom: .25rem;
   }
   .pv2-l {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
   }
   .pv3-l {
     padding-top: 1rem;
@@ -6717,12 +6717,12 @@ code,
     padding-right: 0;
   }
   .ph1-l {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
+    padding-left: .25rem;
+    padding-right: .25rem;
   }
   .ph2-l {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding-left: .5rem;
+    padding-right: .5rem;
   }
   .ph3-l {
     padding-left: 1rem;
@@ -6748,10 +6748,10 @@ code,
     margin: 0;
   }
   .ma1-l {
-    margin: 0.25rem;
+    margin: .25rem;
   }
   .ma2-l {
-    margin: 0.5rem;
+    margin: .5rem;
   }
   .ma3-l {
     margin: 1rem;
@@ -6772,10 +6772,10 @@ code,
     margin-left: 0;
   }
   .ml1-l {
-    margin-left: 0.25rem;
+    margin-left: .25rem;
   }
   .ml2-l {
-    margin-left: 0.5rem;
+    margin-left: .5rem;
   }
   .ml3-l {
     margin-left: 1rem;
@@ -6796,10 +6796,10 @@ code,
     margin-right: 0;
   }
   .mr1-l {
-    margin-right: 0.25rem;
+    margin-right: .25rem;
   }
   .mr2-l {
-    margin-right: 0.5rem;
+    margin-right: .5rem;
   }
   .mr3-l {
     margin-right: 1rem;
@@ -6820,10 +6820,10 @@ code,
     margin-bottom: 0;
   }
   .mb1-l {
-    margin-bottom: 0.25rem;
+    margin-bottom: .25rem;
   }
   .mb2-l {
-    margin-bottom: 0.5rem;
+    margin-bottom: .5rem;
   }
   .mb3-l {
     margin-bottom: 1rem;
@@ -6844,10 +6844,10 @@ code,
     margin-top: 0;
   }
   .mt1-l {
-    margin-top: 0.25rem;
+    margin-top: .25rem;
   }
   .mt2-l {
-    margin-top: 0.5rem;
+    margin-top: .5rem;
   }
   .mt3-l {
     margin-top: 1rem;
@@ -6869,12 +6869,12 @@ code,
     margin-bottom: 0;
   }
   .mv1-l {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
+    margin-top: .25rem;
+    margin-bottom: .25rem;
   }
   .mv2-l {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
   }
   .mv3-l {
     margin-top: 1rem;
@@ -6901,12 +6901,12 @@ code,
     margin-right: 0;
   }
   .mh1-l {
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    margin-left: .25rem;
+    margin-right: .25rem;
   }
   .mh2-l {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
   }
   .mh3-l {
     margin-left: 1rem;
@@ -7090,10 +7090,10 @@ code,
     font-size: 1rem;
   }
   .f6-l {
-    font-size: 0.875rem;
+    font-size: .875rem;
   }
   .f7-l {
-    font-size: 0.75rem;
+    font-size: .75rem;
   }
   .measure-l {
     max-width: 30em;
diff --git a/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.css b/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.css
index 126e0a36e79e..e6e693a97d97 100644
--- a/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.css
+++ b/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.css
@@ -7,7 +7,7 @@
 .selector {
   [;property: value;];}
 @media \\0 screen {}
-@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
   .selector {}
 }
 body:empty .selector {}
@@ -22,8 +22,8 @@ body:not(:-moz-handler-blocked) .selector {}
 @media screen and (min--moz-device-pixel-ratio: 0) {}
 _::-moz-progress-bar, 
 body:last-child .selector {}
-@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {}
-@media all and (-moz-images-in-menus: 0) and (min-resolution: 0.001dpcm) {}
+@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {}
+@media all and (-moz-images-in-menus: 0) and (min-resolution: .001dpcm) {}
 @media all and (min--moz-device-pixel-ratio: 0) {
   @media (min-width: 0px) {}
 }
@@ -39,7 +39,7 @@ body:last-child .selector {}
 @supports (-moz-appearance: meterbar) and (image-orientation: 90deg) {}
 @supports (-moz-appearance: meterbar) and (all: initial) {}
 @supports (-moz-appearance: meterbar) and (list-style-type: japanese-formal) {}
-@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 30dpcm) {}
+@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 3e1dpcm) {}
 @supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {}
 _:-moz-tree-row(hover), 
 .selector {}
@@ -159,12 +159,12 @@ html:first-child .selector {}
 _:-o-prefocus, 
 body:last-child .selector {}
 @media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {}
-@media (min-resolution: 0.001dpcm) {
+@media (min-resolution: .001dpcm) {
   _:-o-prefocus, 
   .selector {}
 }
 *|html[xmlns*=""] .selector {}
-@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
   .selector {}
 }
 .selector:not(*:root) {}
diff --git a/crates/swc_css_codegen/tests/fixture/values/color/function/output.css b/crates/swc_css_codegen/tests/fixture/values/color/function/output.css
index 0193452dd1ea..b2a40ee435eb 100644
--- a/crates/swc_css_codegen/tests/fixture/values/color/function/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/color/function/output.css
@@ -1,12 +1,12 @@
 div {
   color: rgb(255, 255, 255);
   color: hwb(1.5708rad 20% 10% / 0.7);
-  color: hsla(30, 100%, 50%, 0.3);
+  color: hsla(30, 100%, 50%, .3);
   color: hsl(30, 100%, 50%);
   color: rgb(214, 122, 127);
-  border: 4mm ridge rgba(170, 50, 220, 0.6);
-  border-color: red rgba(170, 50, 220, 0.6) green;
-  border-color: red yellow green hsla(60, 90%, 50%, 0.8);
+  border: 4mm ridge rgba(170, 50, 220, .6);
+  border-color: red rgba(170, 50, 220, .6) green;
+  border-color: red yellow green hsla(60, 90%, 50%, .8);
   prop: rgb(255, 255, 255) rgb(255, 255, 255);
 }
 .rgb-and-rgba {
@@ -14,7 +14,7 @@ div {
   color: rgba(34, 12, 64, 0.6);
   color: rgb(34 12 64/ 0.6);
   color: rgba(34 12 64/ 0.3);
-  color: rgb(34 12 64/ 60%);
+  color: rgb(34.0 12 64/ 60%);
   color: rgba(34.6 12 64/ 30%);
 }
 .hsl-and-hsla {
@@ -22,7 +22,7 @@ div {
   color: hsla(30, 100%, 50%, 0.6);
   color: hsl(30 100% 50% / 0.6);
   color: hsla(30 100% 50% / 0.6);
-  color: hsl(30 100% 50% / 60%);
+  color: hsl(30.0 100% 50% / 60%);
   color: hsla(30.2 100% 50% / 60%);
 }
 .hwb {
@@ -30,5 +30,5 @@ div {
   color: hwb(90 10% 10% / 0.5);
   color: hwb(90deg 10% 10%);
   color: hwb(1.5708rad 60% 0%);
-  color: hwb(0.25turn 0% 40% / 50%);
+  color: hwb(.25turn 0% 40% / 50%);
 }
diff --git a/crates/swc_css_codegen/tests/fixture/values/number/output.css b/crates/swc_css_codegen/tests/fixture/values/number/output.css
index 2ce7e95c8338..c15100c7fb07 100644
--- a/crates/swc_css_codegen/tests/fixture/values/number/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/number/output.css
@@ -9,73 +9,73 @@ div {
   property: 10;
   property: -10;
   property: 0.1;
-  property: 0.1;
-  property: -0.1;
+  property: +0.1;
   property: -0.1;
-  property: 0.1;
+  property: -.1;
+  property: +.1;
   property: 0;
   property: 10;
-  property: 0.1;
+  property: .10;
   property: 12.34;
   property: 0.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: 0.012;
+  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: 0.2;
-  property: -0.2;
-  property: 0.2;
-  property: -1200;
-  property: 1.75;
+  property: .2;
+  property: -.2;
+  property: +.2;
+  property: -1.2e3;
   property: 1.75;
-  property: 1;
-  property: 10;
-  property: 10;
-  property: 0.1;
-  property: 0.0000000001;
+  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: 0.6;
-  property: 0.006;
-  property: 10000;
-  property: -0.034;
-  property: 0.56;
-  property: 10000000;
+  property: .60;
+  property: .0060;
+  property: 10e3;
+  property: -3.4e-2;
+  property: 0.5600000000;
+  property: 10e6;
   property: 10000000;
-  property: 0;
-  property: -0;
-  property: 0;
-  property: 0;
-  property: 1;
-  property: 10;
-  property: 100;
-  property: 1000;
-  property: 10000;
-  property: 100000;
-  property: 1;
-  property: 0.1;
-  property: 0.01;
-  property: 0.001;
-  property: 0.0001;
-  property: 0.00001;
-  property: -1;
-  property: -0.1;
-  property: -0.01;
-  property: -0.001;
-  property: -0.0001;
-  property: -0.00001;
+  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;
@@ -90,12 +90,12 @@ div {
   property: 0.000005;
   property: 0.000015;
   property: 0.00001543;
-  property: 0.00001543;
+  property: 0.00001543000;
   property: 0;
   property: 0;
   property: 0;
-  property: 0.001001;
-  property: 0.0001001;
+  property: 100.1e-5;
+  property: 100.1e-6;
   property: 10001000000;
 }
 div {
diff --git a/crates/swc_css_codegen/tests/fixture/values/percentage/output.css b/crates/swc_css_codegen/tests/fixture/values/percentage/output.css
index 9bb405a08060..7c64df461c67 100644
--- a/crates/swc_css_codegen/tests/fixture/values/percentage/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/percentage/output.css
@@ -18,7 +18,7 @@ div {
   background: rgba(0, 0, 0, 0) image-set(url("image.png") 1x) repeat scroll 0% 0%;
 }
 div {
-  width: 100%;
+  width: 100.00%;
   width: 100.01%;
 }
 div {
@@ -26,26 +26,26 @@ div {
   width: 0.1%;
   width: 100%;
   width: 100.5%;
-  width: 100.1%;
-  width: 1%;
-  width: 10%;
-  width: 100%;
-  width: 1%;
-  width: 0.0001%;
-  width: 1000%;
-  width: 1200%;
-  width: 0%;
+  width: 100.1000%;
+  width: 1e0%;
+  width: 1e1%;
+  width: 1e2%;
+  width: 10e-1%;
+  width: 10e-5%;
+  width: 10e+2%;
+  width: 12e+2%;
+  width: +0%;
   width: -0%;
-  width: 0%;
-  width: 0%;
-  width: 10.5%;
+  width: +0000%;
+  width: 0000%;
   width: 10.5%;
-  width: 10%;
-  width: 0%;
-  width: -0%;
-  width: 1000%;
-  width: 1000000%;
-  width: 1000000%;
+  width: 10.5000%;
+  width: 10.0%;
+  width: 0.0%;
+  width: -0.0%;
+  width: 10.0e2%;
+  width: 10.0e5%;
+  width: 10.0E5%;
 }
 .geist-list {
   display: flex;
diff --git a/crates/swc_css_compat/tests/color-legacy/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css
index 6392c3e8d91d..e417fa365515 100644
--- a/crates/swc_css_compat/tests/color-legacy/input.expect.css
+++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css
@@ -1,7 +1,7 @@
 .test-rgb {
   color: rgb(178, 34, 34);
   color: rgba(178, 34, 34, 1);
-  color: rgba(178, 34, 34, 0.5);
+  color: rgba(178, 34, 34, .5);
   color: rgba(178, 34, 34, 1);
   color: rgba(178, 34, 34, 0.5);
   color: rgba(178, 34, 34, var(--alpha-50));
@@ -10,7 +10,7 @@
 .test-rgba {
   color: rgb(178, 34, 34);
   color: rgba(178, 34, 34, 1);
-  color: rgba(178, 34, 34, 0.5);
+  color: rgba(178, 34, 34, .5);
   color: rgba(178, 34, 34, var(--alpha-50));
   color: rgba(178, 34, 34, calc(1 / 2));
 }
@@ -24,7 +24,7 @@
   color: hsl(120, 100%, 50%);
   color: hsl(120, 100%, 50%);
   color: hsla(120, 100%, 50%, 1);
-  color: hsla(120, 100%, 50%, 0.5);
+  color: hsla(120, 100%, 50%, .5);
   color: hsla(120, 100%, 50%, 1);
   color: hsla(120, 100%, 50%, 0.5);
   color: hsl(120, 100%, 50%);
@@ -37,7 +37,7 @@
 .test-hsla {
   color: hsl(120, 100%, 50%);
   color: hsla(120, 100%, 50%, 1);
-  color: hsla(120, 100%, 50%, 0.5);
+  color: hsla(120, 100%, 50%, .5);
   color: hsla(120, 100%, 50%, 1);
   color: hsla(120, 100%, 50%, 0.5);
   color: hsla(120, 100%, 50%, var(--alpha-50));
@@ -47,7 +47,7 @@
   color: hwb(0deg 0% 0%);
   color: hwb(0 0% 0%);
   color: hwb(0 0% 0% / 1);
-  color: hwb(0 0% 0% / 0.5);
+  color: hwb(0 0% 0% / .5);
   color: hwb(0 0% 0% / 100%);
   color: hwb(0 0% 0% / 50%);
 }
diff --git a/crates/swc_css_compat/tests/media-query-ranges/input.expect.css b/crates/swc_css_compat/tests/media-query-ranges/input.expect.css
index ebe4878d5e74..f42502b0c6e7 100644
--- a/crates/swc_css_compat/tests/media-query-ranges/input.expect.css
+++ b/crates/swc_css_compat/tests/media-query-ranges/input.expect.css
@@ -100,7 +100,7 @@
     color: red;
   }
 }
-@media screen and ((min-resolution: 0.5dppx) and (max-resolution: 2.5dppx)) {
+@media screen and ((min-resolution: .5dppx) and (max-resolution: 2.5dppx)) {
   a {
     color: red;
   }
@@ -155,7 +155,7 @@
     color: red;
   }
 }
-@media screen and (min-width: -0.58px) and (max-width: 0.99px) {
+@media screen and (min-width: -0.58px) and (max-width: .99px) {
   a {
     color: red;
   }
@@ -280,7 +280,7 @@
     color: red;
   }
 }
-@media screen and (device-width) and ((min-device-width: 0.08px) and (max-device-width: 0.68px)) {
+@media screen and (device-width) and ((min-device-width: .08px) and (max-device-width: 0.68px)) {
   a {
     color: red;
   }
@@ -300,7 +300,7 @@
     color: red;
   }
 }
-@media screen and (device-height) and ((min-device-height: 0.08px) and (max-device-height: 0.68px)) {
+@media screen and (device-height) and ((min-device-height: .08px) and (max-device-height: 0.68px)) {
   a {
     color: red;
   }
@@ -390,7 +390,7 @@
     color: red;
   }
 }
-@media screen and (width) and ((min-width: 0.08px) and (max-width: 0.68px)) {
+@media screen and (width) and ((min-width: .08px) and (max-width: 0.68px)) {
   a {
     color: red;
   }
@@ -410,7 +410,7 @@
     color: red;
   }
 }
-@media screen and (height) and ((min-height: 0.08px) and (max-height: 0.68px)) {
+@media screen and (height) and ((min-height: .08px) and (max-height: 0.68px)) {
   a {
     color: red;
   }
diff --git a/crates/swc_css_compat/tests/nesting/basic/input.expect.css b/crates/swc_css_compat/tests/nesting/basic/input.expect.css
index 0a9aba106350..3542ee38d433 100644
--- a/crates/swc_css_compat/tests/nesting/basic/input.expect.css
+++ b/crates/swc_css_compat/tests/nesting/basic/input.expect.css
@@ -65,7 +65,7 @@ figure > figcaption {
   background: hsl(0 0% 0% / 50%);
 }
 figure > figcaption > p {
-  font-size: 0.9rem;
+  font-size: .9rem;
 }
 .foo {
   color: blue;
@@ -186,7 +186,7 @@ figure > figcaption {
   background: hsl(0 0% 0% / 50%);
 }
 figure > figcaption > p {
-  font-size: 0.9rem;
+  font-size: .9rem;
 }
 @layer base {
   html {
diff --git a/crates/swc_css_prefixer/tests/fixture/animation/output.css b/crates/swc_css_prefixer/tests/fixture/animation/output.css
index 4f5f0b4c2527..90d7a87a98b4 100644
--- a/crates/swc_css_prefixer/tests/fixture/animation/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/animation/output.css
@@ -23,10 +23,10 @@
   animation-iteration-count: infinite;
 }
 .class {
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
-  -moz-animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
-  -o-animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
-  animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
+  -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+  -moz-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+  -o-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
 }
 .class {
   -webkit-animation-direction: alternate;
diff --git a/crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css
index 955615153a60..4139fb262e19 100644
--- a/crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css
@@ -11,7 +11,7 @@
   animation-iteration-count: infinite;
 }
 .class {
-  animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
+  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
 }
 .class {
   animation-direction: alternate;
diff --git a/crates/swc_css_prefixer/tests/fixture/backdrop/output.css b/crates/swc_css_prefixer/tests/fixture/backdrop/output.css
index 3112ebc4acf6..a0e6f0ada770 100644
--- a/crates/swc_css_prefixer/tests/fixture/backdrop/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/backdrop/output.css
@@ -1,9 +1,9 @@
 dialog::-webkit-backdrop {
-  background: rgba(255, 0, 0, 0.25);
+  background: rgba(255, 0, 0, .25);
 }
 dialog::-ms-backdrop {
-  background: rgba(255, 0, 0, 0.25);
+  background: rgba(255, 0, 0, .25);
 }
 dialog::backdrop {
-  background: rgba(255, 0, 0, 0.25);
+  background: rgba(255, 0, 0, .25);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css
index 526cdf44d23b..4da4b5366dde 100644
--- a/crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css
@@ -1,3 +1,3 @@
 dialog::backdrop {
-  background: rgba(255, 0, 0, 0.25);
+  background: rgba(255, 0, 0, .25);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/cross-fade/output.css b/crates/swc_css_prefixer/tests/fixture/cross-fade/output.css
index 70ea755b19b1..c7bead8d3753 100644
--- a/crates/swc_css_prefixer/tests/fixture/cross-fade/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/cross-fade/output.css
@@ -16,13 +16,13 @@ h2 {
 }
 h3 {
   background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.59);
-  background-image: cross-fade(0.59 url(foo.png), url(bar.png));
+  background-image: cross-fade(.59 url(foo.png), url(bar.png));
 }
 .foo {
   background-image: -webkit-cross-fade(-webkit-linear-gradient(white, black), -webkit-radial-gradient(circle closest-corner, white, black), 0.59);
-  background-image: cross-fade(0.59 -moz-linear-gradient(white, black), -moz-radial-gradient(circle closest-corner, white, black));
-  background-image: cross-fade(0.59 -o-linear-gradient(white, black), -o-radial-gradient(circle closest-corner, white, black));
-  background-image: cross-fade(0.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
+  background-image: cross-fade(.59 -moz-linear-gradient(white, black), -moz-radial-gradient(circle closest-corner, white, black));
+  background-image: cross-fade(.59 -o-linear-gradient(white, black), -o-radial-gradient(circle closest-corner, white, black));
+  background-image: cross-fade(.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
 }
 .class {
   background-image: -webkit-cross-fade(url(white.png), url(black.png), 0);
diff --git a/crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css
index 8acdaf9a500c..9c62441fb9f7 100644
--- a/crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css
@@ -16,11 +16,11 @@ h2 {
 }
 h3 {
   background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.59);
-  background-image: cross-fade(0.59 url(foo.png), url(bar.png));
+  background-image: cross-fade(.59 url(foo.png), url(bar.png));
 }
 .foo {
   background-image: -webkit-cross-fade(linear-gradient(white, black), radial-gradient(circle closest-corner, white, black), 0.59);
-  background-image: cross-fade(0.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
+  background-image: cross-fade(.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
 }
 .class {
   background-image: -webkit-cross-fade(url(white.png), url(black.png), 0);