fix(transformer/styled-components): remove unnecessary whitespace when removing block comments in CSS minification (#13390)

Remove special logic for inserting spaces when removing comments. Instead, treat comments as equivalent to whitespace, and apply the same rules.

This fixes 2 problems:

1. Don't add unnecessary space when a block comment appears after a character like `{`.
2. *Do* add a space when a block comment is the whole quasi between 2 interpolations, to prevent them being merged.

Simplifying this logic also gives 1%-2% speed-up on transformer benchmarks.

Input:

```js
styled.div`.a {/* blah */color: green; }`;
styled.div`${x}/* blah */${y}`;
```

Previous output post-minification:

```js
styled.div`.a{ color:green;}`;
styled.div`${x}${y}`;
```

After this PR:

```js
styled.div`.a{color:green;}`;
styled.div`${x} ${y}`;
```

Author: overlookmotel

crates/oxc_transformer/src/plugins/styled_components.rs

@@ -920,34 +920,24 @@ fn minify_template_literal<'a>(lit: &mut TemplateLiteral<'a>, ast: AstBuilder<'a
 
                 // Find end of comment
                 let start_index = if is_block_comment {
-                    let Some(mut pos) = bytes.windows(2).position(|q| q == b"*/") else {
+                    let Some(pos) = bytes.windows(2).position(|q| q == b"*/") else {
                         // Comment contains whole of this quasi
                         continue;
                     };
-
-                    pos += 2;
-                    if pos == bytes.len() {
-                        // Comment ends at end of quasi
-                        comment_type = None;
-                        continue;
-                    }
-
-                    // Add a space when this is a own line block comment
-                    if !bytes[pos].is_ascii_whitespace()
-                        && output.last().is_some_and(|&last| last != b' ')
-                    {
-                        output.push(b' ');
-                    }
-
-                    pos
+                    pos + 2 // After `*/`
                 } else {
                     let Some(pos) = bytes.iter().position(|&b| matches!(b, b'\n' | b'\r')) else {
                         // Comment contains whole of this quasi
                         continue;
                     };
-                    pos
+                    pos + 1 // After `\n` or `\r`
                 };
 
+                // Comments behave like whitespace.
+                // Block comments: `padding: 10/* */0` is equivalent to `padding: 10 0`, not `padding: 100`.
+                // Line comments: End with a newline (whitespace).
+                insert_space_if_required(&mut output, quasi_index);
+
                 // Trim off to end of comment
                 bytes = &bytes[start_index..];
 
@@ -1018,19 +1008,11 @@ fn minify_template_literal<'a>(lit: &mut TemplateLiteral<'a>, ast: AstBuilder<'a
                                         let end_index =
                                             bytes[i + 2..].windows(2).position(|q| q == b"*/");
                                         if let Some(end_index) = end_index {
-                                            i += end_index + 4; // After `*/`
+                                            // Block comments behave like whitespace.
+                                            // `padding: 10/* */0` is equivalent to `padding: 10 0`, not `padding: 100`.
+                                            insert_space_if_required(&mut output, quasi_index);
 
-                                            if i == bytes.len() {
-                                                // Comment ends at end of quasi
-                                                break;
-                                            }
-
-                                            // Add a space when this is a own line block comment
-                                            if !bytes[i].is_ascii_whitespace()
-                                                && output.last().is_some_and(|&last| last != b' ')
-                                            {
-                                                output.push(b' ');
-                                            }
+                                            i += end_index + 4; // After `*/`
                                             continue;
                                         }
 
@@ -1046,7 +1028,10 @@ fn minify_template_literal<'a>(lit: &mut TemplateLiteral<'a>, ast: AstBuilder<'a
                                 let end_index =
                                     bytes[i + 2..].iter().position(|&b| matches!(b, b'\n' | b'\r'));
                                 if let Some(end_index) = end_index {
-                                    i += end_index + 2; // On `\n` or `\r`
+                                    // Insert space in place of `\n` / `\r`
+                                    insert_space_if_required(&mut output, quasi_index);
+
+                                    i += end_index + 3; // After `\n` or `\r`
                                     continue;
                                 }
 

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js

@@ -15,9 +15,11 @@ const Bar = styled.div`
 const Qux = styled.div`
   color: /* blah */ red;
   .a /* blah */ { color: blue; }
+  .b {/* blah */color: green; }
 `;
 
 const Bing = styled.div`
   color: /* ${123} */ red;
   .a /* ${123} */ { color: blue; }
+  .b {/* ${123} */color: green; }
 `;

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-const Button = styled.div`${x}${z}`;
+const Button = styled.div`${x} ${z}`;
 const Foo = styled.div`.a{color:red;}`;
 const Bar = styled.div`.a{color:red;}`;
-const Qux = styled.div`color:red;.a{color:blue;}`;
-const Bing = styled.div`color:red;.a{color:blue;}`;
+const Qux = styled.div`color:red;.a{color:blue;}.b{color:green;}`;
+const Bing = styled.div`color:red;.a{color:blue;}.b{color:green;}`;