fix(transformer/styled-components): remove more escaped line breaks in CSS minification (#13380)

The change in approach to whitespace in #13379 means we can remove more escaped line breaks (`\r` and `\n`).

Previously when processing `\r\n`, the next character after `\r` was seen as `\`, and therefore a space was unnecessarily inserted.

Now we only look backwards, not forwards, so this problem goes away. We just treat `\r` and `\n` like any other whitespace.

Author: overlookmotel

crates/oxc_transformer/src/plugins/styled_components.rs

@@ -989,9 +989,7 @@ fn minify_template_literal<'a>(lit: &mut TemplateLiteral<'a>, ast: AstBuilder<'a
                                 continue;
                             }
                             b'n' | b'r' if string_quote == NOT_IN_STRING => {
-                                if output.last().is_some_and(|&last| last != b' ') {
-                                    output.push(b' ');
-                                }
+                                insert_space_if_required(&mut output, quasi_index);
                                 i += 2;
                                 continue;
                             }

tasks/transform_conformance/snapshots/oxc.snap.md

@@ -1,6 +1,6 @@
 commit: 41d96516
 
-Passed: 185/308
+Passed: 186/309
 
 # All Passed:
 * babel-plugin-transform-class-static-block
@@ -1612,7 +1612,7 @@ after transform: ["Function", "babelHelpers"]
 rebuilt        : ["babelHelpers", "dec"]
 
 
-# plugin-styled-components (23/38)
+# plugin-styled-components (24/39)
 * minify-comments/input.js
 Unresolved references mismatch:
 after transform: ["x", "y", "z"]

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-escaped-line-breaks/input.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+// Leading or trailing line breaks
+const A = styled.div`\r\ncolor: blue;\r\n`;
+
+// Line breaks in removal position
+const B = styled.div`
+  color:\r\nblue;
+  .a\r\n{\r\n}
+`;
+
+// Line breaks in non-removal position
+const C = styled.div`thing\r\n:hover;`;
+
+// Line breaks before and after interpolations
+const D = styled.div`
+  foo\r\n${'blue'}\r\n:blah;
+`;

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-escaped-line-breaks/options.json

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ]
+  ],
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-escaped-line-breaks/output.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+const A = styled.div`color:blue;`;
+const B = styled.div`color:blue;.a{}`;
+const C = styled.div`thing :hover;`;
+const D = styled.div`foo ${'blue'} :blah;`;