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/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/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 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" })=>{ 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": { 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] 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, } 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..905bb44d3 --- /dev/null +++ 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 ( + <> +
+
+
+ + + ); +}; \ No newline at end of file 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/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}`} + ; +}; 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:\"\`\"}`}
; }