feat(css/prefixer): Implement more rules for prefixer (#4013)

crates/swc_css_utils/src/lib.rs

@@ -48,3 +48,49 @@ where
 {
     node.visit_mut_with(&mut FunctionNameReplacer { from, to });
 }
+
+pub struct PseudoClassSelectorNameReplacer<'a> {
+    from: &'a str,
+    to: &'a str,
+}
+
+impl VisitMut for PseudoClassSelectorNameReplacer<'_> {
+    fn visit_mut_pseudo_class_selector(&mut self, n: &mut PseudoClassSelector) {
+        n.visit_mut_children_with(self);
+
+        if &*n.name.value.to_lowercase() == self.from {
+            n.name.value = self.to.into();
+            n.name.raw = self.to.into();
+        }
+    }
+}
+
+pub fn replace_pseudo_class_selector_name<N>(node: &mut N, from: &str, to: &str)
+where
+    N: for<'aa> VisitMutWith<PseudoClassSelectorNameReplacer<'aa>>,
+{
+    node.visit_mut_with(&mut PseudoClassSelectorNameReplacer { from, to });
+}
+
+pub struct PseudoElementSelectorNameReplacer<'a> {
+    from: &'a str,
+    to: &'a str,
+}
+
+impl VisitMut for PseudoElementSelectorNameReplacer<'_> {
+    fn visit_mut_pseudo_element_selector(&mut self, n: &mut PseudoElementSelector) {
+        n.visit_mut_children_with(self);
+
+        if &*n.name.value.to_lowercase() == self.from {
+            n.name.value = self.to.into();
+            n.name.raw = self.to.into();
+        }
+    }
+}
+
+pub fn replace_pseudo_element_selector_name<N>(node: &mut N, from: &str, to: &str)
+where
+    N: for<'aa> VisitMutWith<PseudoElementSelectorNameReplacer<'aa>>,
+{
+    node.visit_mut_with(&mut PseudoElementSelectorNameReplacer { from, to });
+}

crates/swc_stylis/tests/fixture/advanced-filter/input.css

@@ -0,0 +1,11 @@
+div {
+    backdrop-filter: blur(2px);
+}
+
+div {
+    background: filter(url('image.jpg'), blur(2px));
+}
+
+div {
+    background: url(image.jpg), filter(url('image.jpg'), blur(2px));
+}

crates/swc_stylis/tests/fixture/advanced-filter/output.css

@@ -0,0 +1,12 @@
+div {
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+div {
+  background: -webkit-filter(url('image.jpg'), blur(2px));
+  background: filter(url('image.jpg'), blur(2px));
+}
+div {
+  background: url(image.jpg), -webkit-filter(url('image.jpg'), blur(2px));
+  background: url(image.jpg), filter(url('image.jpg'), blur(2px));
+}

crates/swc_stylis/tests/fixture/animation/input.css

@@ -28,3 +28,7 @@
     animation: test reverse;
     animation: reverse test;
 }
+
+div {
+    animation-direction: var(--test);
+}

crates/swc_stylis/tests/fixture/animation/output.css

@@ -44,3 +44,6 @@
   animation: test reverse;
   animation: reverse test;
 }
+div {
+  animation-direction: var(--test);
+}

crates/swc_stylis/tests/fixture/any-link/input.css

@@ -0,0 +1,3 @@
+a:any-link {
+    color: red;
+}

crates/swc_stylis/tests/fixture/any-link/output.css

@@ -0,0 +1,9 @@
+a:-webkit-any-link {
+  color: red;
+}
+a:-moz-any-link {
+  color: red;
+}
+a:any-link {
+  color: red;
+}

crates/swc_stylis/tests/fixture/autofill/input.css

@@ -0,0 +1,7 @@
+input:autofill {
+    border: 3px solid blue;
+}
+
+input:AUTOFILL {
+    border: 3px solid blue;
+}

crates/swc_stylis/tests/fixture/autofill/output.css

@@ -0,0 +1,12 @@
+input:-webkit-autofill {
+  border: 3px solid blue;
+}
+input:autofill {
+  border: 3px solid blue;
+}
+input:-webkit-autofill {
+  border: 3px solid blue;
+}
+input:AUTOFILL {
+  border: 3px solid blue;
+}

crates/swc_stylis/tests/fixture/backdrop/input.css

@@ -0,0 +1,3 @@
+dialog::backdrop {
+    background: rgba(255,0,0,.25);
+}

crates/swc_stylis/tests/fixture/backdrop/output.css

@@ -0,0 +1,9 @@
+dialog::-ms-backdrop {
+  background: rgba(255, 0, 0, .25);
+}
+dialog::-webkit-backdrop {
+  background: rgba(255, 0, 0, .25);
+}
+dialog::backdrop {
+  background: rgba(255, 0, 0, .25);
+}

crates/swc_stylis/tests/fixture/background-size/input.css

@@ -0,0 +1,7 @@
+a {
+    background-size: 20px
+}
+
+b {
+    background-size: contain
+}

crates/swc_stylis/tests/fixture/background-size/output.css

@@ -0,0 +1,10 @@
+a {
+  -webkit-background-size: 20px;
+  -o-background-size: 20px;
+  background-size: 20px;
+}
+b {
+  -webkit-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+}

crates/swc_stylis/tests/fixture/background/output.css

@@ -10,11 +10,14 @@
   background-image: image-set(url(foo.jpg) 2x);
 }
 .class {
+  background: -webkit-filter(url('image.jpg'), blur(2px));
   background: filter(url('image.jpg'), blur(2px));
 }
 .class {
+  background: -webkit-filter(url('image.jpg'), blur(2px));
   background: filter(url('image.jpg'), blur(2px));
 }
 .class {
+  background: url(image.jpg), -webkit-filter(url('image.jpg'), blur(2px));
   background: url(image.jpg), filter(url('image.jpg'), blur(2px));
 }

crates/swc_stylis/tests/fixture/border-radius/input.css

@@ -0,0 +1,7 @@
+a {
+    border-radius: 5px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+}

crates/swc_stylis/tests/fixture/border-radius/output.css

@@ -0,0 +1,17 @@
+a {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-border-top-left-radius: 3px;
+  -moz-border-radius-topleft: 3px;
+  border-top-left-radius: 3px;
+  -webkit-border-top-right-radius: 3px;
+  -moz-border-radius-topright: 3px;
+  border-top-right-radius: 3px;
+  -webkit-border-bottom-right-radius: 3px;
+  -moz-border-radius-bottomright: 3px;
+  border-bottom-right-radius: 3px;
+  -webkit-border-bottom-left-radius: 3px;
+  -moz-border-radius-bottomleft: 3px;
+  border-bottom-left-radius: 3px;
+}

crates/swc_stylis/tests/fixture/calc/input.css

@@ -0,0 +1,11 @@
+.class {
+    width: calc(20px + 40px);
+}
+
+.class {
+    margin: calc(5% + 5px) calc(10% + 10px);
+}
+
+div {
+    background-size: calc(20px);
+}

crates/swc_stylis/tests/fixture/calc/output.css

@@ -0,0 +1,17 @@
+.class {
+  width: -webkit-calc(20px + 40px);
+  width: -moz-calc(20px + 40px);
+  width: calc(20px + 40px);
+}
+.class {
+  margin: -webkit-calc(5% + 5px) -webkit-calc(10% + 10px);
+  margin: -moz-calc(5% + 5px) -moz-calc(10% + 10px);
+  margin: calc(5% + 5px) calc(10% + 10px);
+}
+div {
+  -webkit-background-size: -webkit-calc(20px);
+  -o-background-size: calc(20px);
+  background-size: -webkit-calc(20px);
+  background-size: -moz-calc(20px);
+  background-size: calc(20px);
+}

crates/swc_stylis/tests/fixture/check-down/output.css

@@ -1,5 +1,7 @@
 * {
   -webkit-transition: all 1s;
+  -moz-transition: all 1s;
+  -o-transition: all 1s;
   transition: all 1s;
   -o-transition: all 1s;
 }

crates/swc_stylis/tests/fixture/element/input.css

@@ -0,0 +1,11 @@
+div {
+    background: element(#id);
+}
+
+div {
+    background: url(image.jpg), element(#id);
+}
+
+div {
+    background: image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x), element(#id);
+}

crates/swc_stylis/tests/fixture/element/output.css

@@ -0,0 +1,13 @@
+div {
+  background: -moz-element(#id);
+  background: element(#id);
+}
+div {
+  background: url(image.jpg), -moz-element(#id);
+  background: url(image.jpg), element(#id);
+}
+div {
+  background: -webkit-image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x), element(#id);
+  background: image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x), -moz-element(#id);
+  background: image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x), element(#id);
+}

crates/swc_stylis/tests/fixture/file-selector-button/input.css

@@ -0,0 +1,7 @@
+input[type=file]::file-selector-button {
+    border: 2px solid #6c5ce7;
+}
+
+input[type=file]::file-selector-button:hover {
+    border: 2px solid #00cec9;
+}

crates/swc_stylis/tests/fixture/file-selector-button/output.css

@@ -0,0 +1,18 @@
+input[type=file]::-webkit-file-upload-button {
+  border: 2px solid #6c5ce7;
+}
+input[type=file]::-ms-browse {
+  border: 2px solid #6c5ce7;
+}
+input[type=file]::file-selector-button {
+  border: 2px solid #6c5ce7;
+}
+input[type=file]::-webkit-file-upload-button:hover {
+  border: 2px solid #00cec9;
+}
+input[type=file]::-ms-browse:hover {
+  border: 2px solid #00cec9;
+}
+input[type=file]::file-selector-button:hover {
+  border: 2px solid #00cec9;
+}

crates/swc_stylis/tests/fixture/filter/output.css

@@ -7,6 +7,8 @@ a {
   -webkit-filter: blur(10px);
   filter: blur(10px);
   -webkit-transition: filter 2s;
+  -moz-transition: filter 2s;
+  -o-transition: filter 2s;
   transition: filter 2s;
 }
 div {

crates/swc_stylis/tests/fixture/flex/output.css

@@ -15,6 +15,8 @@ a {
   -ms-flex: 0 1 2;
   flex: 0 1 2;
   -webkit-transition: flex 200ms;
+  -moz-transition: flex 200ms;
+  -o-transition: flex 200ms;
   transition: flex 200ms;
 }
 .inline {
@@ -169,8 +171,10 @@ a {
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: calc(1em + 1px) 0 0;
+  -webkit-flex: -webkit-calc(1em + 1px) 0 0;
   -ms-flex: calc(1em + 1px) 0 0;
+  flex: -webkit-calc(1em + 1px) 0 0;
+  flex: -moz-calc(1em + 1px) 0 0;
   flex: calc(1em + 1px) 0 0;
 }
 .h {

crates/swc_stylis/tests/fixture/fullscreen/input.css

@@ -0,0 +1,3 @@
+:fullscreen a {
+    color: red;
+}

crates/swc_stylis/tests/fixture/fullscreen/output.css

@@ -0,0 +1,12 @@
+:-webkit-full-screen a {
+  color: red;
+}
+:-moz-full-screen a {
+  color: red;
+}
+:-ms-fullscreen a {
+  color: red;
+}
+:fullscreen a {
+  color: red;
+}

crates/swc_stylis/tests/fixture/grouping-rule/input.css

@@ -0,0 +1,37 @@
+.grid {
+    display: grid;
+}
+
+.a,
+.b,
+.c::selection,
+.d:read-only,
+.e::placeholder {
+    color: yellow;
+}
+
+::selection {
+    color: red;
+}
+
+:read-only {
+    color: black;
+}
+
+.f:read-write, .g:read-write {
+    background: #fff;
+}
+
+.example:any-link:read-only {
+    color: red;
+}
+
+.element1:focus,
+.element1:read-only {
+    background-color: red;
+}
+
+/* TODO fix me */
+.c::selection {
+    backface-visibility: visible;
+}

crates/swc_stylis/tests/fixture/grouping-rule/output.css

@@ -0,0 +1,78 @@
+.grid {
+  display: grid;
+}
+.a, 
+.b, 
+.c::selection, 
+.d:read-only, 
+.e::-ms-input-placeholder {
+  color: yellow;
+}
+.a, 
+.b, 
+.c::-moz-selection, 
+.d:-moz-read-only, 
+.e::-moz-placeholder {
+  color: yellow;
+}
+.a, 
+.b, 
+.c::selection, 
+.d:read-only, 
+.e::-webkit-input-placeholder {
+  color: yellow;
+}
+.a, 
+.b, 
+.c::selection, 
+.d:read-only, 
+.e::placeholder {
+  color: yellow;
+}
+::-moz-selection {
+  color: red;
+}
+::selection {
+  color: red;
+}
+:-moz-read-only {
+  color: black;
+}
+:read-only {
+  color: black;
+}
+.f:-moz-read-write, 
+.g:-moz-read-write {
+  background: #fff;
+}
+.f:read-write, 
+.g:read-write {
+  background: #fff;
+}
+.example:-webkit-any-link:read-only {
+  color: red;
+}
+.example:-moz-any-link:-moz-read-only {
+  color: red;
+}
+.example:any-link:read-only {
+  color: red;
+}
+.element1:focus, 
+.element1:-moz-read-only {
+  background-color: red;
+}
+.element1:focus, 
+.element1:read-only {
+  background-color: red;
+}
+.c::-moz-selection {
+  -webkit-backface-visibility: visible;
+  -moz-backface-visibility: visible;
+  backface-visibility: visible;
+}
+.c::selection {
+  -webkit-backface-visibility: visible;
+  -moz-backface-visibility: visible;
+  backface-visibility: visible;
+}

crates/swc_stylis/tests/fixture/image-set/output.css

@@ -14,14 +14,17 @@ h1 {
   -webkit-border-image: -webkit-image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
   -moz-border-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
   -o-border-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  border-image: -webkit-image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
   border-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
 }
 .class {
   -webkit-mask: -webkit-image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  mask: -webkit-image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
   mask: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
 }
 .class {
   -webkit-mask-image: -webkit-image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  mask-image: -webkit-image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
   mask-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
 }
 .class {

crates/swc_stylis/tests/fixture/keyframes/input.css

@@ -0,0 +1,20 @@
+@keyframes anim {
+    from {
+        top: calc(10% + 10px);
+        transform: rotate(10deg)
+    }
+    50% {
+        top: 0;
+        display: flex
+    }
+    to {
+        top: calc(10%);
+        transform: rotate(0)
+    }
+}
+
+@media screen {
+    @keyframes inside {}
+}
+
+@keyframes spaces { from { color: black } to { color: white } }

crates/swc_stylis/tests/fixture/keyframes/output.css

@@ -0,0 +1,41 @@
+@keyframes anim {
+  from {
+    top: -webkit-calc(10% + 10px);
+    top: -moz-calc(10% + 10px);
+    top: calc(10% + 10px);
+    -webkit-transform: rotate(10deg);
+    -moz-transform: rotate(10deg);
+    -ms-transform: rotate(10deg);
+    -o-transform: rotate(10deg);
+    transform: rotate(10deg);
+  }
+  50% {
+    top: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  to {
+    top: -webkit-calc(10%);
+    top: -moz-calc(10%);
+    top: calc(10%);
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -ms-transform: rotate(0);
+    -o-transform: rotate(0);
+    transform: rotate(0);
+  }
+}
+@media screen {
+  @keyframes inside {}
+}
+@keyframes spaces {
+  from {
+    color: black;
+  }
+  to {
+    color: white;
+  }
+}

crates/swc_stylis/tests/fixture/placeholder-shown/input.css

@@ -0,0 +1,3 @@
+a:placeholder-shown {
+    color: red;
+}

crates/swc_stylis/tests/fixture/placeholder-shown/output.css

@@ -0,0 +1,9 @@
+a:-moz-placeholder-shown {
+  color: red;
+}
+a:-ms-input-placeholder {
+  color: red;
+}
+a:placeholder-shown {
+  color: red;
+}

crates/swc_stylis/tests/fixture/placeholder/input.css

@@ -0,0 +1,3 @@
+input::placeholder {
+    color: red;
+}

crates/swc_stylis/tests/fixture/placeholder/output.css

@@ -0,0 +1,12 @@
+input::-ms-input-placeholder {
+  color: red;
+}
+input::-moz-placeholder {
+  color: red;
+}
+input::-webkit-input-placeholder {
+  color: red;
+}
+input::placeholder {
+  color: red;
+}

crates/swc_stylis/tests/fixture/read-only/input.css

@@ -0,0 +1,3 @@
+.d:read-only {
+    color: red;
+}

crates/swc_stylis/tests/fixture/read-only/output.css

@@ -0,0 +1,6 @@
+.d:-moz-read-only {
+  color: red;
+}
+.d:read-only {
+  color: red;
+}

crates/swc_stylis/tests/fixture/read-write/input.css

@@ -0,0 +1,7 @@
+.f:read-write {
+    color: red;
+}
+
+.f:read-write, .g:read-write {
+    color: red;
+}

crates/swc_stylis/tests/fixture/read-write/output.css

@@ -0,0 +1,14 @@
+.f:-moz-read-write {
+  color: red;
+}
+.f:read-write {
+  color: red;
+}
+.f:-moz-read-write, 
+.g:-moz-read-write {
+  color: red;
+}
+.f:read-write, 
+.g:read-write {
+  color: red;
+}

crates/swc_stylis/tests/fixture/selection/input.css

@@ -0,0 +1,11 @@
+.c::selection {
+    color: red;
+}
+
+::selection {
+    color: red;
+}
+
+::SeLeCtIoN {
+    color: red;
+}

crates/swc_stylis/tests/fixture/selection/output.css

@@ -0,0 +1,18 @@
+.c::-moz-selection {
+  color: red;
+}
+.c::selection {
+  color: red;
+}
+::-moz-selection {
+  color: red;
+}
+::selection {
+  color: red;
+}
+::-moz-selection {
+  color: red;
+}
+::SeLeCtIoN {
+  color: red;
+}

crates/swc_stylis/tests/fixture/transform/input.css

@@ -22,3 +22,7 @@ em {
 .class {
     transform-style: flat;
 }
+
+.class {
+    transform: perspective(500px) rotateY(3deg);
+}

crates/swc_stylis/tests/fixture/transform/output.css

@@ -7,11 +7,14 @@
 }
 a {
   -webkit-transition: -webkit-transform 1s;
+  -moz-transition: -moz-transform 1s;
+  -o-transition: -o-transform 1s;
+  transition: -webkit-transform 1s;
+  transition: -moz-transform 1s;
+  transition: -o-transform 1s;
   transition: transform 1s;
   -webkit-transform: rotateX(45deg);
   -moz-transform: rotateX(45deg);
-  -ms-transform: rotateX(45deg);
-  -o-transform: rotateX(45deg);
   transform: rotateX(45deg);
 }
 b {
@@ -29,8 +32,6 @@ b {
 em {
   -webkit-transform: rotateZ(45deg);
   -moz-transform: rotateZ(45deg);
-  -ms-transform: rotateZ(45deg);
-  -o-transform: rotateZ(45deg);
   transform: rotateZ(45deg);
 }
 @keyframes anim {
@@ -47,3 +48,8 @@ em {
   -moz-transform-style: flat;
   transform-style: flat;
 }
+.class {
+  -webkit-transform: perspective(500px) rotateY(3deg);
+  -moz-transform: perspective(500px) rotateY(3deg);
+  transform: perspective(500px) rotateY(3deg);
+}

crates/swc_stylis/tests/fixture/transition/input.css

@@ -89,3 +89,12 @@ button::-webkit-search-cancel-button {
     transition-duration: 1s, 2s;
 }
 
+div {
+    transition-property: transform;
+    transform: rotate(10deg);
+}
+
+div {
+    transition: calc(1s);
+}
+

crates/swc_stylis/tests/fixture/transition/output.css

@@ -1,5 +1,10 @@
 a {
   -webkit-transition: color 200ms, -webkit-transform 200ms;
+  -moz-transition: color 200ms, -moz-transform 200ms;
+  -o-transition: color 200ms, -o-transform 200ms;
+  transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -moz-transform 200ms;
+  transition: color 200ms, -o-transform 200ms;
   transition: color 200ms, transform 200ms;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
@@ -49,10 +54,20 @@ div {
 }
 .revert {
   -webkit-transition: 200ms -webkit-transform;
+  -moz-transition: 200ms -moz-transform;
+  -o-transition: 200ms -o-transform;
+  transition: 200ms -webkit-transform;
+  transition: 200ms -moz-transform;
+  transition: 200ms -o-transform;
   transition: 200ms transform;
 }
 input[type=range]::-moz-range-thumb {
   -webkit-transition: color 200ms, -webkit-transform 200ms;
+  -moz-transition: color 200ms, -moz-transform 200ms;
+  -o-transition: color 200ms, -o-transform 200ms;
+  transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -moz-transform 200ms;
+  transition: color 200ms, -o-transform 200ms;
   transition: color 200ms, transform 200ms;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
@@ -62,6 +77,8 @@ input[type=range]::-moz-range-thumb {
 }
 input[type=range]::-webkit-slider-thumb {
   -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
   transition: none;
   -webkit-transition-property: all;
   -moz-transition-timing-function: all;
@@ -76,6 +93,11 @@ button::-moz-submit-invalid {
   -o-transform: translateX(45px);
   transform: translateX(45px);
   -webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
+  -moz-transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
+  -o-transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
+  transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
+  transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
+  transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
   transition: opacity 0.5s 2s, transform 0.5s 0.5s;
 }
 @supports (transition: opacity 0.5s 2s, transform 0.5s 0.5s) {
@@ -87,6 +109,11 @@ button::-moz-submit-invalid {
     -o-transform: translateX(45px);
     transform: translateX(45px);
     -webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
+    -moz-transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
+    -o-transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
     transition: opacity 0.5s 2s, transform 0.5s 0.5s;
   }
   button {
@@ -97,6 +124,11 @@ button::-moz-submit-invalid {
     -o-transform: translateX(45px);
     transform: translateX(45px);
     -webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
+    -moz-transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
+    -o-transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
     transition: opacity 0.5s 2s, transform 0.5s 0.5s;
   }
 }
@@ -107,6 +139,11 @@ button::-webkit-search-cancel-button {
   display: -ms-flexbox;
   display: flex;
   -webkit-transition: color 200ms, -webkit-transform 200ms;
+  -moz-transition: color 200ms, -moz-transform 200ms;
+  -o-transition: color 200ms, -o-transform 200ms;
+  transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -moz-transform 200ms;
+  transition: color 200ms, -o-transform 200ms;
   transition: color 200ms, transform 200ms;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
@@ -124,10 +161,22 @@ button::-webkit-search-cancel-button {
   display: flex;
   -webkit-transition: color 200ms, -webkit-transform 200ms;
   -webkit-transition: color 200ms, -webkit-transform 200ms;
+  -moz-transition: color 200ms, -webkit-transform 200ms;
+  -o-transition: color 200ms, -webkit-transform 200ms;
   transition: color 200ms, -webkit-transform 200ms;
   -webkit-transition: color 200ms, -webkit-transform 200ms;
+  -moz-transition: color 200ms, -moz-transform 200ms;
+  -o-transition: color 200ms, -o-transform 200ms;
+  transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -moz-transform 200ms;
+  transition: color 200ms, -o-transform 200ms;
   transition: color 200ms, transform 200ms;
   -webkit-transition: color 200ms, -webkit-transform 200ms, -webkit-transform 200ms;
+  -moz-transition: color 200ms, -moz-transform 200ms, -webkit-transform 200ms;
+  -o-transition: color 200ms, -o-transform 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -webkit-transform 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -moz-transform 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -o-transform 200ms, -webkit-transform 200ms;
   transition: color 200ms, transform 200ms, -webkit-transform 200ms;
   -webkit-transform: rotate(10deg);
   -webkit-transform: rotate(10deg);
@@ -152,6 +201,8 @@ button::-webkit-search-cancel-button {
   -ms-flex: 0 1 2;
   flex: 0 1 2;
   -webkit-transition: flex 200ms;
+  -moz-transition: flex 200ms;
+  -o-transition: flex 200ms;
   transition: flex 200ms;
 }
 .no-warn {
@@ -164,3 +215,25 @@ button::-webkit-search-cancel-button {
   -o-transition-duration: 1s, 2s;
   transition-duration: 1s, 2s;
 }
+div {
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-timing-function: -moz-transform;
+  -o-transition-timing-function: -o-transform;
+  transition-property: -webkit-transform;
+  transition-property: -moz-transform;
+  transition-property: -o-transform;
+  transition-property: transform;
+  -webkit-transform: rotate(10deg);
+  -moz-transform: rotate(10deg);
+  -ms-transform: rotate(10deg);
+  -o-transform: rotate(10deg);
+  transform: rotate(10deg);
+}
+div {
+  -webkit-transition: -webkit-calc(1s);
+  -moz-transition: -moz-calc(1s);
+  -o-transition: calc(1s);
+  transition: -webkit-calc(1s);
+  transition: -moz-calc(1s);
+  transition: calc(1s);
+}

crates/swc_stylis/tests/fixture/width-size/input.css

@@ -0,0 +1,69 @@
+div {
+    width: fit-content;
+    width: max-content;
+    width: min-content;
+    width: fill-available;
+    width: stretch;
+
+    min-width: fit-content;
+    max-width: fit-content;
+    height: fit-content;
+    min-height: fit-content;
+    max-height: fit-content;
+    inline-size: fit-content;
+    min-inline-size: fit-content;
+    max-inline-size: fit-content;
+    block-size: fit-content;
+    min-block-size: fit-content;
+    max-block-size: fit-content;
+}
+
+.outdated {
+    width: fill;
+}
+
+a {
+    width: stretch;
+}
+
+b {
+    height: max-content;
+}
+
+p {
+    block-size: min-content;
+    min-inline-size: fit-content;
+}
+
+.outdated {
+    width: fill;
+}
+
+.old {
+    width: fill-available;
+}
+
+.ok {
+    width: calc(100% - var(--jqx-circular-progress-bar-fill-size));
+}
+
+.grid {
+    grid: min-content max-content / fit-content(500px);
+}
+
+.grid-template {
+    grid-template: min-content / fit-content(10px) max-content;
+    grid-template: max-content 1fr max-content max-content / max-content 1fr;
+}
+
+.grid-template-columns {
+    grid-template-columns: minmax(100px, min-content);
+}
+
+.grid-auto-columns {
+    grid-auto-columns: min-content max-content;
+}
+
+.ignore {
+    width: -webkit-fill-available;
+}

crates/swc_stylis/tests/fixture/width-size/output.css

@@ -0,0 +1,106 @@
+div {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: fill-available;
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: fill-available;
+  width: stretch;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  max-width: -webkit-fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  min-height: -webkit-fit-content;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+  max-height: -webkit-fit-content;
+  max-height: -moz-fit-content;
+  max-height: fit-content;
+  inline-size: -webkit-fit-content;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+  min-inline-size: -webkit-fit-content;
+  min-inline-size: -moz-fit-content;
+  min-inline-size: fit-content;
+  max-inline-size: -webkit-fit-content;
+  max-inline-size: -moz-fit-content;
+  max-inline-size: fit-content;
+  block-size: -webkit-fit-content;
+  block-size: -moz-fit-content;
+  block-size: fit-content;
+  min-block-size: -webkit-fit-content;
+  min-block-size: -moz-fit-content;
+  min-block-size: fit-content;
+  max-block-size: -webkit-fit-content;
+  max-block-size: -moz-fit-content;
+  max-block-size: fit-content;
+}
+.outdated {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: fill;
+}
+a {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: fill-available;
+  width: stretch;
+}
+b {
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+p {
+  block-size: -webkit-min-content;
+  block-size: -moz-min-content;
+  block-size: min-content;
+  min-inline-size: -webkit-fit-content;
+  min-inline-size: -moz-fit-content;
+  min-inline-size: fit-content;
+}
+.outdated {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: fill;
+}
+.old {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: fill-available;
+}
+.ok {
+  width: -webkit-calc(100% - var(--jqx-circular-progress-bar-fill-size));
+  width: -moz-calc(100% - var(--jqx-circular-progress-bar-fill-size));
+  width: calc(100% - var(--jqx-circular-progress-bar-fill-size));
+}
+.grid {
+  grid: min-content max-content/ fit-content(500px);
+}
+.grid-template {
+  grid-template: min-content/ fit-content(10px) max-content;
+  grid-template: max-content 1fr max-content max-content/ max-content 1fr;
+}
+.grid-template-columns {
+  grid-template-columns: minmax(100px, min-content);
+}
+.grid-auto-columns {
+  grid-auto-columns: min-content max-content;
+}
+.ignore {
+  width: -webkit-fill-available;
+}