fix(transformer/styled-components): template literal expressions order is wrong after minification (#12211)

Related: #12202

`swap_remove` will swap the last element to the index you want to remove, so this will cause the expression's order to be incorrect. Here is order sensitive, so we can't use `swap_remove`.

Author: Dunqing

crates/oxc_transformer/src/plugins/styled_components.rs

@@ -407,28 +407,31 @@ impl<'a> StyledComponents<'a, '_> {
 
         let (new_raws, remained_expression_indices) = CssMinifier::minify_quasis(quasis, ctx.ast);
 
-        // Remove expressions that are not kept after minification.
-        for i in (0..expressions.len()).rev() {
-            if !remained_expression_indices.contains(&i) {
-                expressions.swap_remove(i);
-            }
-        }
-
         // Update the quasis with the new raw values.
         for (new_raw, quais) in new_raws.into_iter().zip(quasis.iter_mut()) {
             quais.value.raw = new_raw;
         }
 
-        // SAFETY:
-        // This is safe because template literal has ensured that `quasis` always
-        // has one more element than `expressions`, and the `CSSMinifier` guarantees that
-        // once a expression is removed, the corresponding quasi will also be removed.
-        // Therefore, the length of `quasis` will always be one more than `expressions`.
-        // So we can safely set the length of `quasis` to `expressions.len() + 1`.
-        unsafe {
-            // Set the length of `quasis` to `expressions.len() + 1` to truncate the quasis that
-            // have been minified out.
-            quasis.set_len(expressions.len() + 1);
+        // Keep expressions that are still present after minification.
+        if expressions.len() != remained_expression_indices.len() {
+            let mut i = 0;
+            expressions.retain(|_| {
+                let keep = remained_expression_indices.contains(&i);
+                i += 1;
+                keep
+            });
+
+            // SAFETY:
+            // This is safe because template literal has ensured that `quasis` always
+            // has one more element than `expressions`, and the `CSSMinifier` guarantees that
+            // once a expression is removed, the corresponding quasi will also be removed.
+            // Therefore, the length of `quasis` will always be one more than `expressions`.
+            // So we can safely set the length of `quasis` to `expressions.len() + 1`.
+            unsafe {
+                // Set the length of `quasis` to `expressions.len() + 1` to truncate the quasis that
+                // have been minified out.
+                quasis.set_len(expressions.len() + 1);
+            }
         }
     }
 

tasks/transform_conformance/snapshots/oxc.snap.md

@@ -1,6 +1,6 @@
 commit: 1d4546bc
 
-Passed: 175/293
+Passed: 176/293
 
 # All Passed:
 * babel-plugin-transform-class-static-block
@@ -1417,7 +1417,7 @@ after transform: ["Function", "babelHelpers"]
 rebuilt        : ["babelHelpers", "dec"]
 
 
-# plugin-styled-components (19/34)
+# plugin-styled-components (20/34)
 * styled-components/add-identifier-with-top-level-import-paths/input.js
 x Output mismatch
 
@@ -1439,9 +1439,6 @@ x Output mismatch
 * styled-components/does-not-replace-native-with-no-tags/input.js
 x Output mismatch
 
-* styled-components/minify-single-line-comments-with-interpolations/input.js
-x Output mismatch
-
 * styled-components/pre-transpiled/input.js
 x Output mismatch
 

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/output.js

@@ -1,21 +1,21 @@
 import styled from 'styled-components';
 
-const Test1 = styled.div.withConfig({ displayName: "input__Test1", componentId: "sc-4bekfz-0" })(["width:100%;"]);
-const Test2 = styled.div.withConfig({ displayName: "input__Test2", componentId: "sc-4bekfz-1" })(["width:100%;"]);
-const Test3 = styled.div.withConfig({ displayName: "input__Test3", componentId: "sc-4bekfz-2" })(["width:100%;", ";"], 'red');
-const Test4 = styled.div.withConfig({ displayName: "input__Test4", componentId: "sc-4bekfz-3" })(["width:100%;"]);
-const Test5 = styled.div.withConfig({ displayName: "input__Test5", componentId: "sc-4bekfz-4" })(["width:100%;"]);
-const Test6 = styled.div.withConfig({ displayName: "input__Test6", componentId: "sc-4bekfz-5" })(
+const Test1 = styled.div.withConfig({ displayName: "input__Test1", componentId: "sc-lh68ek-0" })(["width:100%;"]);
+const Test2 = styled.div.withConfig({ displayName: "input__Test2", componentId: "sc-lh68ek-1" })(["width:100%;"]);
+const Test3 = styled.div.withConfig({ displayName: "input__Test3", componentId: "sc-lh68ek-2" })(["width:100%;", ";"], 'red');
+const Test4 = styled.div.withConfig({ displayName: "input__Test4", componentId: "sc-lh68ek-3" })(["width:100%;"]);
+const Test5 = styled.div.withConfig({ displayName: "input__Test5", componentId: "sc-lh68ek-4" })(["width:100%;"]);
+const Test6 = styled.div.withConfig({ displayName: "input__Test6", componentId: "sc-lh68ek-5" })(
   ["background:url(\"https://google.com\");width:100%;", ""],
   'green',
 );
-const Test7 = styled.div.withConfig({ displayName: "input__Test7", componentId: "sc-4bekfz-6" })(
+const Test7 = styled.div.withConfig({ displayName: "input__Test7", componentId: "sc-lh68ek-6" })(
   ["background:url(\"https://google.com\");width:", ";", "height:", ";"],
   p => p.props.width,
   'green',
   p => p.props.height,
 );
-const Test8 = styled.div.withConfig({ displayName: "input__Test8", componentId: "sc-clieju-7" })(
+const Test8 = styled.div.withConfig({ displayName: "input__Test8", componentId: "sc-lh68ek-7" })(
   ["width:100%;color:", ";height:", ";"],
   "blue",
   123,