From a7a06b790221ce31580c47ee2912bc4e8a165f7e Mon Sep 17 00:00:00 2001 From: overlookmotel <557937+overlookmotel@users.noreply.github.com> Date: Fri, 29 Aug 2025 03:15:28 +0000 Subject: [PATCH] fix(transformer/styled-components): fix block comment containing expression in CSS minification (#13370) Fix handling block comments which contain an expression. Previously if that block comment ended exactly before another expression, the comment wouldn't be considered closed, and all remaining parts of the template literal would be removed. Input: ```js styled.div`${x}/* ${y} */${z}` ``` Previous output post-minification: ```js styled.div`${x}` ``` After this PR: ```js styled.div`${x}${z}` ``` This bug was introduced way back in #12224 (my fault!), but had gone unnoticed. --- .../src/plugins/styled_components.rs | 1 + .../snapshots/oxc.snap.md | 9 +++++++-- .../test/fixtures/minify-comments/input.js | 3 +++ .../test/fixtures/minify-comments/options.json | 18 ++++++++++++++++++ .../test/fixtures/minify-comments/output.js | 2 ++ 5 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js create mode 100644 tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/options.json create mode 100644 tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js diff --git a/crates/oxc_transformer/src/plugins/styled_components.rs b/crates/oxc_transformer/src/plugins/styled_components.rs index 90bee5c40122e..fbc6808a220d1 100644 --- a/crates/oxc_transformer/src/plugins/styled_components.rs +++ b/crates/oxc_transformer/src/plugins/styled_components.rs @@ -928,6 +928,7 @@ fn minify_template_literal<'a>(lit: &mut TemplateLiteral<'a>, ast: AstBuilder<'a pos += 2; if pos == bytes.len() { // Comment ends at end of quasi + comment_type = None; continue; } diff --git a/tasks/transform_conformance/snapshots/oxc.snap.md b/tasks/transform_conformance/snapshots/oxc.snap.md index 94c6c09a414d6..359c4db0eaa4a 100644 --- a/tasks/transform_conformance/snapshots/oxc.snap.md +++ b/tasks/transform_conformance/snapshots/oxc.snap.md @@ -1,6 +1,6 @@ commit: 41d96516 -Passed: 184/307 +Passed: 184/308 # All Passed: * babel-plugin-transform-class-static-block @@ -1612,7 +1612,12 @@ after transform: ["Function", "babelHelpers"] rebuilt : ["babelHelpers", "dec"] -# plugin-styled-components (22/37) +# plugin-styled-components (22/38) +* minify-comments/input.js +Unresolved references mismatch: +after transform: ["x", "y", "z"] +rebuilt : ["x", "z"] + * styled-components/add-identifier-with-top-level-import-paths/input.js x Output mismatch diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js new file mode 100644 index 0000000000000..8a73f3048cba6 --- /dev/null +++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js @@ -0,0 +1,3 @@ +import styled from 'styled-components'; + +const Button = styled.div`${x}/* ${y} */${z}`; diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/options.json new file mode 100644 index 0000000000000..92abfec80959e --- /dev/null +++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/options.json @@ -0,0 +1,18 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": false, + "targets": "defaults" + } + ] + ], + "plugins": [ + ["styled-components", { + "ssr": false, + "displayName": false, + "transpileTemplateLiterals": false + }] + ] +} diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js new file mode 100644 index 0000000000000..444c1452ea385 --- /dev/null +++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js @@ -0,0 +1,2 @@ +import styled from 'styled-components'; +const Button = styled.div`${x}${z}`;