swc-project · kdy1 · Jun 10, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
diff --git a/Cargo.lock b/Cargo.lock
diff --git 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/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

diff --git 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="\${0.5 + HEAD_MARGIN_PERCENTAGE}" cx="\${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}" cy="0.5"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="\${0.5 + HEAD_MARGIN_PERCENTAGE}" cx="\${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}" cy="0.5"/></svg>');-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" })=>{

diff --git 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": {

diff --git 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]

diff --git 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,
                 }

diff --git a/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js b/packages/styled-jsx/transform/tests/fixture/svg-strip/input.js
@@ -0,0 +1,36 @@
+const CUTOUT_AVATAR_PERCENTAGE_VISIBLE = Math.random();
+const HEAD_MARGIN_PERCENTAGE = Math.random();
+
+const MaskedDivBad = () => {
+
+
+    return (
+        <>
+            <div className="head">
+                <div className="avatar-wrapper" />
+            </div>
+            <style jsx>{`
+          .head {
+            position: relative;
+          }
+          .avatar-wrapper {
+            width: 40px;
+            height: 40px;
+            background: #ff6b6b;
+            border-radius: 50%;
+            mask-image:
+              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'),
+              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="${0.5 +
+                HEAD_MARGIN_PERCENTAGE}" cx="${0.5 +
+                CUTOUT_AVATAR_PERCENTAGE_VISIBLE +
+                HEAD_MARGIN_PERCENTAGE}" cy="0.5"/></svg>');
+            mask-size: 100% 100%;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            -webkit-mask-composite: source-out;
+            mask-composite: subtract;
+          }
+        `}</style>
+        </>
+    );
+};
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
@@ -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 <>
+            <div className={_JSXStyle.dynamic([
+        [
+            "59987c08c9f7d258",
+            [
+                0.5 + HEAD_MARGIN_PERCENTAGE,
+                0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
+            ]
+        ]
+    ]) + " " + "head"}>
+                <div className={_JSXStyle.dynamic([
+        [
+            "59987c08c9f7d258",
+            [
+                0.5 + HEAD_MARGIN_PERCENTAGE,
+                0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
+            ]
+        ]
+    ]) + " " + "avatar-wrapper"}/>
+            </div>
+            <_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,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1 1\\"><circle r=\\"0.5\\" cx=\\"0.5\\" cy=\\"0.5\\"/></svg>\"),url(\"data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1 1\\"><circle r=\\"${0.5 + HEAD_MARGIN_PERCENTAGE}\\" cx=\\"${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}\\" cy=\\"0.5\\"/></svg>\");mask-image:url(\"data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1 1\\"><circle r=\\"0.5\\" cx=\\"0.5\\" cy=\\"0.5\\"/></svg>\"),url(\"data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1 1\\"><circle r=\\"${0.5 + HEAD_MARGIN_PERCENTAGE}\\" cx=\\"${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}\\" cy=\\"0.5\\"/></svg>\");-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}`}</_JSXStyle>
+        </>;
+};
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
@@ -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 <>
+            <div className={_JSXStyle.dynamic([
+        [
+            "59987c08c9f7d258",
+            [
+                0.5 + HEAD_MARGIN_PERCENTAGE,
+                0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
+            ]
+        ]
+    ]) + " " + "head"}>
+                <div className={_JSXStyle.dynamic([
+        [
+            "59987c08c9f7d258",
+            [
+                0.5 + HEAD_MARGIN_PERCENTAGE,
+                0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
+            ]
+        ]
+    ]) + " " + "avatar-wrapper"}/>
+            </div>
+            <_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,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"0.5\" cx=\"0.5\" cy=\"0.5\"/></svg>"),url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"${0.5 + HEAD_MARGIN_PERCENTAGE}\" cx=\"${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}\" cy=\"0.5\"/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"0.5\" cx=\"0.5\" cy=\"0.5\"/></svg>"),url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"${0.5 + HEAD_MARGIN_PERCENTAGE}\" cx=\"${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}\" cy=\"0.5\"/></svg>");-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}`}</_JSXStyle>
+        </>;
+};
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
@@ -10,6 +10,6 @@ export default function Home({ fontFamily }) {
     ])}>
       <_JSXStyle id={"b45f7ae33801eec9"} dynamic={[
         fontFamily
-    ]}>{`body{font-family:${fontFamily}}code:before,code:after{content:"\`"}`}</_JSXStyle>
+    ]}>{`body{font-family:${fontFamily}}code:before,code:after{content:\"\`\"}`}</_JSXStyle>
     </div>;
 }