test(transformer/styled-components): add failing test case for comment removal (#12202)

Failing test case which demonstrates a bug with comments removal from CSS. The last 2 expressions are in wrong order.

Problem is likely `swap_remove`, which alters order of the `Vec`'s elements:

https://github.com/oxc-project/oxc/blob/86eb10882eeacbe05a0dc5e0e3adfad9a9890821/crates/oxc_transformer/src/plugins/styled_components.rs#L407-L412

Author: overlookmotel

tasks/transform_conformance/snapshots/oxc.snap.md

@@ -1,6 +1,6 @@
 commit: 1d4546bc
 
-Passed: 176/293
+Passed: 175/293
 
 # All Passed:
 * babel-plugin-transform-class-static-block
@@ -1417,7 +1417,7 @@ after transform: ["Function", "babelHelpers"]
 rebuilt        : ["babelHelpers", "dec"]
 
 
-# plugin-styled-components (20/34)
+# plugin-styled-components (19/34)
 * styled-components/add-identifier-with-top-level-import-paths/input.js
 x Output mismatch
 
@@ -1439,6 +1439,9 @@ 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/input.js

@@ -38,3 +38,10 @@ const Test7 = styled.div`
   ${'green'} // color: ${'red'}${'blue'};
   height: ${p => p.props.height};
 `
+
+const Test8 = styled.div`
+  width: 100%;
+  // color: ${'red'};
+  color: ${'blue'};
+  height: ${123};
+`

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

@@ -14,4 +14,9 @@ const Test7 = styled.div.withConfig({ displayName: "input__Test7", componentId:
   p => p.props.width,
   'green',
   p => p.props.height,
-);
+);
+const Test8 = styled.div.withConfig({ displayName: "input__Test8", componentId: "sc-clieju-7" })(
+  ["width:100%;color:", ";height:", ";"],
+  "blue",
+  123,
+);