fix(styled-jsx): Fix content escaping regression (#471)

Author: kdy1

Cargo.lock

@@ -1,5 +1,11 @@
 # @swc/plugin-styled-jsx
 
+## 8.0.2
+
+### Patch Changes
+
+- b28b674: Fix content escaping regression
+
 ## 8.0.1
 
 ### Patch Changes

packages/styled-jsx/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # @swc/plugin-styled-jsx
 
+## 8.0.2
+
+### Patch Changes
+
+- b28b674: Fix content escaping regression
+
 ## 8.0.1
 
 ### Patch Changes

packages/styled-jsx/README.md

@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-styled-jsx",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "SWC plugin for styled-jsx",
   "main": "swc_plugin_styled_jsx.wasm",
   "scripts": {

packages/styled-jsx/package.json

@@ -10,7 +10,7 @@ license      = { workspace = true }
 name         = "styled_jsx"
 repository   = { workspace = true }
 rust-version = { workspace = true }
-version      = "0.91.1"
+version      = "0.91.2"
 
 
 [features]

packages/styled-jsx/transform/Cargo.toml

@@ -204,7 +204,7 @@ pub fn transform_css(
             .map(|quasi| {
                 TplElement {
                     cooked: None, // ? Do we need cooked as well
-                    raw: quasi.replace('`', "\\`").replace("\"", "\\\"").into(),
+                    raw: quasi.replace('`', "\\`").replace("\\\"", "\\\\\"").into(),
                     span: DUMMY_SP,
                     tail: false,
                 }

packages/styled-jsx/transform/src/transform_css_lightningcss.rs

@@ -25,6 +25,6 @@ const MaskedDivBad = ()=>{
             <_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>
+    ]}>{`.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>
         </>;
 };

packages/styled-jsx/transform/tests/fixture/svg-strip/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>;
 }