feat(css/prefixer): Implement more prefixing rules (#3905)

crates/swc_stylis/src/prefixer.rs

@@ -361,6 +361,17 @@ impl VisitMut for Prefixer {
                 same_content!("-ms-flex-order");
             }
 
+            "image-rendering" => {
+                if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] {
+                    if &**value == "pixelated" {
+                        simple!("-ms-interpolation-mode", "nearest-neighbor");
+                        same_name!("-webkit-optimize-contrast");
+                        same_name!("-moz-crisp-edges");
+                        same_name!("-o-pixelated");
+                    }
+                }
+            }
+
             "flex-direction" => {
                 same_content!("-webkit-flex-direction");
                 same_content!("-ms-flex-direction");
@@ -370,6 +381,10 @@ impl VisitMut for Prefixer {
                 same_content!("-webkit-filter");
             }
 
+            "backdrop-filter" => {
+                same_content!("-webkit-backdrop-filter");
+            }
+
             "mask" => {
                 same_content!("-webkit-mask");
             }
@@ -435,7 +450,18 @@ impl VisitMut for Prefixer {
             "user-select" => {
                 same_content!("-webkit-user-select");
                 same_content!("-moz-user-select");
-                same_content!("-ms-user-select");
+
+                if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] {
+                    match &**value {
+                        "contain" => {
+                            simple!("-ms-user-select", "element");
+                        }
+                        "all" => {}
+                        _ => {
+                            same_content!("-ms-user-select");
+                        }
+                    }
+                }
             }
 
             "transform" => {

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

@@ -1 +1,18 @@
-body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}
+body {
+color: red;
+}
+:hover {
+color: red;
+display: -webkit-box;
+display: -webkit-flex;
+display: -ms-flexbox;
+display: flex;
+-webkit-animation: foo 1s ease-out;
+animation: foo 1s ease-out;
+}
+div a {
+display: none;
+}
+[data-test] > div {
+color: red;
+}

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

@@ -1 +1,3 @@
-div.jsx-5a206f122d1cb32e>span{color:red}
+div.jsx-5a206f122d1cb32e > span {
+color: red;
+}

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

@@ -1 +1,3 @@
-.container.jsx-c7c3a8e231c9215a>*{color:red}
+.container.jsx-c7c3a8e231c9215a > * {
+color: red;
+}

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

@@ -0,0 +1,3 @@
+a {
+    backdrop-filter: blur(2px);
+}

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

@@ -0,0 +1,4 @@
+a {
+-webkit-backdrop-filter: blur(2px);
+backdrop-filter: blur(2px);
+}

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

@@ -0,0 +1,4 @@
+* {
+    transition: all 1s;
+    -o-transition: all 1s
+}

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

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

crates/swc_stylis/tests/fixture/color-adjust/input.css

@@ -0,0 +1,7 @@
+.a {
+    color-adjust: economy;
+}
+
+.b {
+    color-adjust: exact;
+}

crates/swc_stylis/tests/fixture/color-adjust/output.css

@@ -0,0 +1,8 @@
+.a {
+-webkit-print-color-adjust: economy;
+color-adjust: economy;
+}
+.b {
+-webkit-print-color-adjust: exact;
+color-adjust: exact;
+}

crates/swc_stylis/tests/fixture/image-rendering/input.css

@@ -0,0 +1,14 @@
+img {
+    image-rendering: crisp-edges;
+}
+
+img.other {
+    image-rendering: pixelated;
+}
+
+img.already {
+    -ms-interpolation-mode: nearest-neighbor;
+    display: block;
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+}

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

@@ -0,0 +1,20 @@
+img {
+image-rendering: crisp-edges;
+}
+img.other {
+-ms-interpolation-mode: nearest-neighbor;
+image-rendering: -webkit-optimize-contrast;
+image-rendering: -moz-crisp-edges;
+image-rendering: -o-pixelated;
+image-rendering: pixelated;
+}
+img.already {
+-ms-interpolation-mode: nearest-neighbor;
+display: block;
+image-rendering: crisp-edges;
+-ms-interpolation-mode: nearest-neighbor;
+image-rendering: -webkit-optimize-contrast;
+image-rendering: -moz-crisp-edges;
+image-rendering: -o-pixelated;
+image-rendering: pixelated;
+}

crates/swc_stylis/tests/fixture/user-select/input.css

@@ -0,0 +1,11 @@
+a {
+    user-select: none;
+}
+
+b {
+    user-select: contain;
+}
+
+.all {
+    user-select: all;
+}

crates/swc_stylis/tests/fixture/user-select/output.css

@@ -0,0 +1,17 @@
+a {
+-webkit-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+user-select: none;
+}
+b {
+-webkit-user-select: contain;
+-moz-user-select: contain;
+-ms-user-select: element;
+user-select: contain;
+}
+.all {
+-webkit-user-select: all;
+-moz-user-select: all;
+user-select: all;
+}

crates/swc_stylis/tests/prefixer.rs

@@ -485,6 +485,15 @@ fn error_recovery_1() {
     );
 }
 
+#[test]
+fn image_rendering() {
+    t(
+        "image-rendering: pixelated;",
+        "-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;\
+         image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;",
+    );
+}
+
 /// Test
 fn t(src: &str, expected: &str) {
     testing::run_test2(false, |cm, handler| {
@@ -583,7 +592,7 @@ fn fixture(input: PathBuf) {
         {
             let mut wr = BasicCssWriter::new(&mut s, BasicCssWriterConfig { indent: "  " });
             let mut gen =
-                swc_css_codegen::CodeGenerator::new(&mut wr, CodegenConfig { minify: true });
+                swc_css_codegen::CodeGenerator::new(&mut wr, CodegenConfig { minify: false });
 
             gen.emit(&ss).unwrap();
         }