From 9887180f489a496f35431f3a5ef2069368fadc73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Fri, 6 Jun 2025 13:03:09 -0700 Subject: [PATCH 01/10] Add a test --- .../tests/fixture/svg-strip/input.js | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 packages/styled-jsx/transform/tests/fixture/svg-strip/input.js diff --git a/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js b/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js new file mode 100644 index 000000000..e09eb8256 --- /dev/null +++ b/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js @@ -0,0 +1,34 @@ +const MaskedDivBad = () => { + const CUTOUT_AVATAR_PERCENTAGE_VISIBLE = 0.5; + const HEAD_MARGIN_PERCENTAGE = 0.1; + + return ( + <> +
+
+
+ + + ); +}; \ No newline at end of file From e506e6f329af37d33690465768e4bb57b4904540 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Fri, 6 Jun 2025 13:04:31 -0700 Subject: [PATCH 02/10] fixup --- .../styled-jsx/transform/tests/fixture/svg-strip/input.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js b/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js index e09eb8256..905bb44d3 100644 --- a/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js +++ b/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js @@ -1,6 +1,8 @@ +const CUTOUT_AVATAR_PERCENTAGE_VISIBLE = Math.random(); +const HEAD_MARGIN_PERCENTAGE = Math.random(); + const MaskedDivBad = () => { - const CUTOUT_AVATAR_PERCENTAGE_VISIBLE = 0.5; - const HEAD_MARGIN_PERCENTAGE = 0.1; + return ( <> From 1f2ce0483bdb757bbbfba8db45d231a1046ec68c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Fri, 6 Jun 2025 13:06:40 -0700 Subject: [PATCH 03/10] UTR --- .../tests/fixture/svg-strip/output.swc.js | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 packages/styled-jsx/transform/tests/fixture/svg-strip/output.swc.js diff --git a/packages/styled-jsx/transform/tests/fixture/svg-strip/output.swc.js b/packages/styled-jsx/transform/tests/fixture/svg-strip/output.swc.js new file mode 100644 index 000000000..da3845914 --- /dev/null +++ b/packages/styled-jsx/transform/tests/fixture/svg-strip/output.swc.js @@ -0,0 +1,30 @@ +import _JSXStyle from "styled-jsx/style"; +const CUTOUT_AVATAR_PERCENTAGE_VISIBLE = Math.random(); +const HEAD_MARGIN_PERCENTAGE = Math.random(); +const MaskedDivBad = ()=>{ + return <> +
+
+
+ <_JSXStyle id={"59987c08c9f7d258"} dynamic={[ + 0.5 + HEAD_MARGIN_PERCENTAGE, + 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE + ]}>{`.head.__jsx-style-dynamic-selector{position:relative}.avatar-wrapper.__jsx-style-dynamic-selector{width:40px;height:40px;background:#ff6b6b;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-mask-image:url("data:image/svg+xml,"),url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,"),url("data:image/svg+xml,");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-composite:source-out;mask-composite:subtract}`} + ; +}; From 03b013bae727e1ee689657cc6164a1ab4b7780d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Tue, 10 Jun 2025 15:27:29 -0700 Subject: [PATCH 04/10] fix --- packages/styled-jsx/transform/src/transform_css_lightningcss.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styled-jsx/transform/src/transform_css_lightningcss.rs b/packages/styled-jsx/transform/src/transform_css_lightningcss.rs index 488c33f3e..fda47f8e9 100644 --- a/packages/styled-jsx/transform/src/transform_css_lightningcss.rs +++ b/packages/styled-jsx/transform/src/transform_css_lightningcss.rs @@ -204,7 +204,7 @@ pub fn transform_css( .map(|quasi| { TplElement { cooked: None, // ? Do we need cooked as well - raw: quasi.replace('`', "\\`").into(), + raw: quasi.replace('`', "\\`").replace("\"", "\\\"").into(), span: DUMMY_SP, tail: false, } From e16b0645bd158a2afdc51e093fa7fc7582ff2e38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Tue, 10 Jun 2025 15:28:45 -0700 Subject: [PATCH 05/10] update test refs --- .../fixture/svg-strip/output.lightningcss.js | 30 +++++++++++++++++++ .../tpl-escape-2/output.lightningcss.js | 2 +- 2 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 packages/styled-jsx/transform/tests/fixture/svg-strip/output.lightningcss.js diff --git a/packages/styled-jsx/transform/tests/fixture/svg-strip/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/svg-strip/output.lightningcss.js new file mode 100644 index 000000000..5a7e9d7a8 --- /dev/null +++ b/packages/styled-jsx/transform/tests/fixture/svg-strip/output.lightningcss.js @@ -0,0 +1,30 @@ +import _JSXStyle from "styled-jsx/style"; +const CUTOUT_AVATAR_PERCENTAGE_VISIBLE = Math.random(); +const HEAD_MARGIN_PERCENTAGE = Math.random(); +const MaskedDivBad = ()=>{ + return <> +
+
+
+ <_JSXStyle id={"59987c08c9f7d258"} dynamic={[ + 0.5 + HEAD_MARGIN_PERCENTAGE, + 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE + ]}>{`.head.__jsx-style-dynamic-selector{position:relative}.avatar-wrapper.__jsx-style-dynamic-selector{-webkit-mask-composite:source-out;background:#ff6b6b;border-radius:50%;width:40px;height:40px;-webkit-mask-image:url(\"data:image/svg+xml,\"),url(\"data:image/svg+xml,\");mask-image:url(\"data:image/svg+xml,\"),url(\"data:image/svg+xml,\");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-out;mask-composite:subtract}`} + ; +}; diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.lightningcss.js index 68596e605..053972555 100644 --- a/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.lightningcss.js +++ b/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.lightningcss.js @@ -10,6 +10,6 @@ export default function Home({ fontFamily }) { ])}> <_JSXStyle id={"b45f7ae33801eec9"} dynamic={[ fontFamily - ]}>{`body{font-family:${fontFamily}}code:before,code:after{content:"\`"}`} + ]}>{`body{font-family:${fontFamily}}code:before,code:after{content:\"\`\"}`}
; } From 1bd58bfcce53b36d950e1b067799429365cd172d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Tue, 10 Jun 2025 15:30:44 -0700 Subject: [PATCH 06/10] docs(changeset): Fix interpolation in svg --- .changeset/red-cows-add.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/red-cows-add.md diff --git a/.changeset/red-cows-add.md b/.changeset/red-cows-add.md new file mode 100644 index 000000000..ae069304c --- /dev/null +++ b/.changeset/red-cows-add.md @@ -0,0 +1,5 @@ +--- +"@swc/plugin-styled-jsx": patch +--- + +Fix interpolation in svg From 8c97e7505db96d9481cdb5c43b9deba3e54438d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Tue, 10 Jun 2025 15:30:45 -0700 Subject: [PATCH 07/10] RELEASING: Releasing 1 package(s) Releases: @swc/plugin-styled-jsx@8.0.1 [skip ci] --- .changeset/red-cows-add.md | 5 ----- packages/styled-jsx/CHANGELOG.md | 6 ++++++ packages/styled-jsx/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/red-cows-add.md diff --git a/.changeset/red-cows-add.md b/.changeset/red-cows-add.md deleted file mode 100644 index ae069304c..000000000 --- a/.changeset/red-cows-add.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@swc/plugin-styled-jsx": patch ---- - -Fix interpolation in svg diff --git a/packages/styled-jsx/CHANGELOG.md b/packages/styled-jsx/CHANGELOG.md index e5502c82a..0ddffd8c2 100644 --- a/packages/styled-jsx/CHANGELOG.md +++ b/packages/styled-jsx/CHANGELOG.md @@ -1,5 +1,11 @@ # @swc/plugin-styled-jsx +## 8.0.1 + +### Patch Changes + +- 1bd58bf: Fix interpolation in svg + ## 8.0.0 ### Major Changes diff --git a/packages/styled-jsx/package.json b/packages/styled-jsx/package.json index eab4fb78d..ed3e2f70d 100644 --- a/packages/styled-jsx/package.json +++ b/packages/styled-jsx/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-styled-jsx", - "version": "8.0.0", + "version": "8.0.1", "description": "SWC plugin for styled-jsx", "main": "swc_plugin_styled_jsx.wasm", "scripts": { From b7397a6dd0b17160f58bd1b2eddb5f099771ad16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Tue, 10 Jun 2025 15:30:46 -0700 Subject: [PATCH 08/10] Merge CHANGELOG into README --- packages/styled-jsx/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/styled-jsx/README.md b/packages/styled-jsx/README.md index e1ed358a1..a02ec962e 100644 --- a/packages/styled-jsx/README.md +++ b/packages/styled-jsx/README.md @@ -2,6 +2,12 @@ # @swc/plugin-styled-jsx +## 8.0.1 + +### Patch Changes + +- 1bd58bf: Fix interpolation in svg + ## 8.0.0 ### Major Changes From 2900842ce35661878cd94ecb97bd9f88999d2d03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Tue, 10 Jun 2025 15:30:51 -0700 Subject: [PATCH 09/10] Bump crates --- Cargo.lock | 2 +- packages/styled-jsx/transform/Cargo.toml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index cb184efd3..bbc68a107 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2606,7 +2606,7 @@ dependencies = [ [[package]] name = "styled_jsx" -version = "0.91.0" +version = "0.91.1" dependencies = [ "anyhow", "lightningcss", diff --git a/packages/styled-jsx/transform/Cargo.toml b/packages/styled-jsx/transform/Cargo.toml index 74e1e367f..e2584cded 100644 --- a/packages/styled-jsx/transform/Cargo.toml +++ b/packages/styled-jsx/transform/Cargo.toml @@ -10,7 +10,7 @@ license = { workspace = true } name = "styled_jsx" repository = { workspace = true } rust-version = { workspace = true } -version = "0.91.0" +version = "0.91.1" [features] From 37858b2e222c7c2da59162b7ac7c5a66ca082475 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Tue, 10 Jun 2025 15:31:56 -0700 Subject: [PATCH 10/10] UTR --- .../__tests__/__snapshots__/wasm.test.ts.snap | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap b/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap index 5d0f98c61..a4b38e790 100644 --- a/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap +++ b/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap @@ -1659,6 +1659,42 @@ exports[`Should load swc-confidential wasm plugin correctly > Should transform s " `; +exports[`Should load swc-confidential wasm plugin correctly > Should transform svg-strip correctly 1`] = ` +"import _JSXStyle from "styled-jsx/style"; +const CUTOUT_AVATAR_PERCENTAGE_VISIBLE = Math.random(); +const HEAD_MARGIN_PERCENTAGE = Math.random(); +const MaskedDivBad = ()=>{ + return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "bdb053406d346a78", + [ + 0.5 + HEAD_MARGIN_PERCENTAGE, + 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE + ] + ] + ]) + " " + "head" + }, /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "bdb053406d346a78", + [ + 0.5 + HEAD_MARGIN_PERCENTAGE, + 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE + ] + ] + ]) + " " + "avatar-wrapper" + })), /*#__PURE__*/ React.createElement(_JSXStyle, { + id: "bdb053406d346a78", + dynamic: [ + 0.5 + HEAD_MARGIN_PERCENTAGE, + 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE + ] + }, \`.head.__jsx-style-dynamic-selector{position:relative}.avatar-wrapper.__jsx-style-dynamic-selector{width:40px;height:40px;background:#ff6b6b;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-mask-image:url('data:image/svg+xml,'),url('data:image/svg+xml,');mask-image:url('data:image/svg+xml,'),url('data:image/svg+xml,');-webkit-mask-size:100%100%;mask-size:100%100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-composite:source-out;mask-composite:subtract}\`)); +}; +" +`; + exports[`Should load swc-confidential wasm plugin correctly > Should transform too-many correctly 1`] = ` "import _JSXStyle from "styled-jsx/style"; export const Red = ({ Component = "button" })=>{