From 18a1d002d9aa22a07d4d10179e0f48b5314f8b7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Mon, 12 May 2025 09:16:04 -0700 Subject: [PATCH 1/7] fix panic --- .../transform/src/visitors/transpile_css_prop/transpile.rs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs b/packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs index f8bd7d6e3..450deca3d 100644 --- a/packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs +++ b/packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs @@ -96,8 +96,7 @@ impl VisitMut for TranspileCssProp<'_> { let id_sym = Atom::from(id_sym); let styled_idx = self.next_styled_idx(id_sym.clone()); - let id = quote_ident!( - SyntaxContext::empty(), + let id = private_ident!( elem.opening.name.span(), append_if_gt_one(&format!("_Styled{id_sym}"), styled_idx) ); From 0d14c35ab26db0cb36670fe8215dfc57b4bd2dcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Mon, 12 May 2025 09:16:28 -0700 Subject: [PATCH 2/7] docs(changeset): Use correct span hygiene --- .changeset/tricky-meals-knock.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tricky-meals-knock.md diff --git a/.changeset/tricky-meals-knock.md b/.changeset/tricky-meals-knock.md new file mode 100644 index 000000000..71afc0b76 --- /dev/null +++ b/.changeset/tricky-meals-knock.md @@ -0,0 +1,5 @@ +--- +"@swc/plugin-styled-components": patch +--- + +Use correct span hygiene From dcde0022691f1adc25093a65c6da069b62a36e13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Mon, 12 May 2025 09:16:29 -0700 Subject: [PATCH 3/7] RELEASING: Releasing 1 package(s) Releases: @swc/plugin-styled-components@7.1.5 [skip ci] --- .changeset/tricky-meals-knock.md | 5 ----- packages/styled-components/CHANGELOG.md | 6 ++++++ packages/styled-components/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/tricky-meals-knock.md diff --git a/.changeset/tricky-meals-knock.md b/.changeset/tricky-meals-knock.md deleted file mode 100644 index 71afc0b76..000000000 --- a/.changeset/tricky-meals-knock.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@swc/plugin-styled-components": patch ---- - -Use correct span hygiene diff --git a/packages/styled-components/CHANGELOG.md b/packages/styled-components/CHANGELOG.md index b4462e447..4b69cdc34 100644 --- a/packages/styled-components/CHANGELOG.md +++ b/packages/styled-components/CHANGELOG.md @@ -1,5 +1,11 @@ # @swc/plugin-styled-components +## 7.1.5 + +### Patch Changes + +- 0d14c35: Use correct span hygiene + ## 7.1.4 ### Patch Changes diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json index 205e9dc7a..880e06122 100644 --- a/packages/styled-components/package.json +++ b/packages/styled-components/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-styled-components", - "version": "7.1.4", + "version": "7.1.5", "description": "SWC plugin for styled-components", "main": "swc_plugin_styled_components.wasm", "scripts": { From b3c72c43e5fd375ffe7941b4c12c371021173f4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Mon, 12 May 2025 09:16:30 -0700 Subject: [PATCH 4/7] Merge CHANGELOG into README --- packages/styled-components/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/styled-components/README.md b/packages/styled-components/README.md index b9d28d0ae..97d47a509 100644 --- a/packages/styled-components/README.md +++ b/packages/styled-components/README.md @@ -28,6 +28,12 @@ Then update your `.swcrc` file like below: # @swc/plugin-styled-components +## 7.1.5 + +### Patch Changes + +- 0d14c35: Use correct span hygiene + ## 7.1.4 ### Patch Changes From a7d4073c457b508f1c848479b079df92c6845c6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Mon, 12 May 2025 09:16:34 -0700 Subject: [PATCH 5/7] Bump crates --- Cargo.lock | 2 +- packages/styled-components/transform/Cargo.toml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 59fa34adc..62aef2985 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2570,7 +2570,7 @@ checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f" [[package]] name = "styled_components" -version = "0.112.0" +version = "0.112.1" dependencies = [ "Inflector", "once_cell", diff --git a/packages/styled-components/transform/Cargo.toml b/packages/styled-components/transform/Cargo.toml index c233abf24..c81691064 100644 --- a/packages/styled-components/transform/Cargo.toml +++ b/packages/styled-components/transform/Cargo.toml @@ -12,7 +12,7 @@ homepage = { workspace = true } license = { workspace = true } repository = { workspace = true } rust-version = { workspace = true } -version = "0.112.0" +version = "0.112.1" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html From 0fd007ac1b033851dfd9d79ae0e0eb347d29282c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Mon, 12 May 2025 09:20:11 -0700 Subject: [PATCH 6/7] fix --- .../transform/src/visitors/transpile_css_prop/transpile.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs b/packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs index 450deca3d..2d8687c80 100644 --- a/packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs +++ b/packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs @@ -7,7 +7,7 @@ use once_cell::sync::Lazy; use regex::Regex; use rustc_hash::{FxHashMap, FxHashSet}; use swc_atoms::Atom; -use swc_common::{util::take::Take, Spanned, SyntaxContext, DUMMY_SP}; +use swc_common::{util::take::Take, Spanned, DUMMY_SP}; use swc_ecma_ast::*; use swc_ecma_utils::{prepend_stmt, private_ident, quote_ident, ExprFactory}; use swc_ecma_visit::{noop_visit_mut_type, visit_mut_pass, VisitMut, VisitMutWith}; From 689c58daa582524b4b40f8bf6090990b99a1e739 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4=20=28Donny=29?= Date: Mon, 12 May 2025 09:26:08 -0700 Subject: [PATCH 7/7] Update jest snapshots --- .../__tests__/__snapshots__/wasm.test.ts.snap | 258 ++++++++++++++++++ 1 file changed, 258 insertions(+) diff --git a/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap b/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap index dbbf74878..c9dfd16c2 100644 --- a/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap +++ b/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap @@ -488,6 +488,46 @@ export const Test11 = ({ color })=>{ " `; +exports[`Should load swc-confidential wasm plugin correctly > Should transform basic-variables-in-css correctly 1`] = ` +"import _JSXStyle from "styled-jsx/style"; +export default function Component() { + const width = 100; + const height = 200; + const color = '#FF0000'; + return /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "dc595e2db5d50f19", + [ + width, + height, + color + ] + ] + ]) + }, /*#__PURE__*/ React.createElement("h1", { + className: _JSXStyle.dynamic([ + [ + "dc595e2db5d50f19", + [ + width, + height, + color + ] + ] + ]) + }, "Basic Variables Test"), /*#__PURE__*/ React.createElement(_JSXStyle, { + id: "dc595e2db5d50f19", + dynamic: [ + width, + height, + color + ] + }, \`.component.__jsx-style-dynamic-selector{width:\${width}px;height:\${height}px;color:\${color}}\`)); +} +" +`; + exports[`Should load swc-confidential wasm plugin correctly > Should transform class correctly 1`] = ` "import _JSXStyle from "styled-jsx/style"; class _class { @@ -505,6 +545,54 @@ export { _class as default }; " `; +exports[`Should load swc-confidential wasm plugin correctly > Should transform complex-animation-keyframes correctly 1`] = ` +"import _JSXStyle from "styled-jsx/style"; +export default function Component() { + const middleOpacity = 0.5; + const rotation = 180; + const duration = 1000; + const easing = 'ease-in-out'; + const delay = 200; + return /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "9a951a50ad92485b", + [ + middleOpacity, + rotation, + duration, + easing, + delay + ] + ] + ]) + " " + "wrapper" + }, /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "9a951a50ad92485b", + [ + middleOpacity, + rotation, + duration, + easing, + delay + ] + ] + ]) + " " + "animated" + }, "Animated Element"), /*#__PURE__*/ React.createElement(_JSXStyle, { + id: "9a951a50ad92485b", + dynamic: [ + middleOpacity, + rotation, + duration, + easing, + delay + ] + }, \`@-webkit-keyframes customAnimation{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}50%{opacity:\${middleOpacity};-webkit-transform:rotate(\${rotation}deg);transform:rotate(\${rotation}deg)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes customAnimation{0%{opacity:0;-moz-transform:scale(0);transform:scale(0)}50%{opacity:\${middleOpacity};-moz-transform:rotate(\${rotation}deg);transform:rotate(\${rotation}deg)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes customAnimation{0%{opacity:0;-o-transform:scale(0);transform:scale(0)}50%{opacity:\${middleOpacity};-o-transform:rotate(\${rotation}deg);transform:rotate(\${rotation}deg)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes customAnimation{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}50%{opacity:\${middleOpacity};-webkit-transform:rotate(\${rotation}deg);-moz-transform:rotate(\${rotation}deg);-o-transform:rotate(\${rotation}deg);transform:rotate(\${rotation}deg)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.wrapper.__jsx-style-dynamic-selector{}.wrapper.__jsx-style-dynamic-selector .animated.__jsx-style-dynamic-selector{-webkit-animation:customAnimation \${duration}ms \${easing} forwards;-moz-animation:customAnimation \${duration}ms \${easing} forwards;-o-animation:customAnimation \${duration}ms \${easing} forwards;animation:customAnimation \${duration}ms \${easing} forwards;-webkit-animation-delay:\${delay}ms;-moz-animation-delay:\${delay}ms;-o-animation-delay:\${delay}ms;animation-delay:\${delay}ms}\`)); +} +" +`; + exports[`Should load swc-confidential wasm plugin correctly > Should transform component-attribute correctly 1`] = ` "import _JSXStyle from "styled-jsx/style"; const Test = ()=>/*#__PURE__*/ React.createElement("div", { @@ -575,6 +663,57 @@ class Test extends React.Component { " `; +exports[`Should load swc-confidential wasm plugin correctly > Should transform css-variables-and-functions correctly 1`] = ` +"import _JSXStyle from "styled-jsx/style"; +export default function Component() { + const dynamicValue = '"dynamic content"'; + const color1 = '#FF0000'; + const color2 = '#0000FF'; + const offset = 5; + const spacing = 10; + return /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "22c978f6faeec16f", + [ + dynamicValue, + color1, + color2, + offset, + offset, + spacing + ] + ] + ]) + " " + "container" + }, /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "22c978f6faeec16f", + [ + dynamicValue, + color1, + color2, + offset, + offset, + spacing + ] + ] + ]) + " " + "item" + }, "CSS Variables and Functions"), /*#__PURE__*/ React.createElement(_JSXStyle, { + id: "22c978f6faeec16f", + dynamic: [ + dynamicValue, + color1, + color2, + offset, + offset, + spacing + ] + }, \`.container.__jsx-style-dynamic-selector{--local-var:\${dynamicValue};color:var(--text-color);background:-webkit-linear-gradient(left,\${color1},\${color2});background:-moz-linear-gradient(left,\${color1},\${color2});background:-o-linear-gradient(left,\${color1},\${color2});background:linear-gradient(to right,\${color1},\${color2})}.container.__jsx-style-dynamic-selector .item.__jsx-style-dynamic-selector{-webkit-transform:translate(-webkit-calc(var(--x) + \${offset}px),-webkit-calc(var(--y) + \${offset}px));-moz-transform:translate(-moz-calc(var(--x) + \${offset}px),-moz-calc(var(--y) + \${offset}px));-ms-transform:translate(calc(var(--x) + \${offset}px),calc(var(--y) + \${offset}px));-o-transform:translate(calc(var(--x) + \${offset}px),calc(var(--y) + \${offset}px));transform:translate(-webkit-calc(var(--x) + \${offset}px),-webkit-calc(var(--y) + \${offset}px));transform:translate(-moz-calc(var(--x) + \${offset}px),-moz-calc(var(--y) + \${offset}px));transform:translate(calc(var(--x) + \${offset}px),calc(var(--y) + \${offset}px))}.container.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{margin:-webkit-calc(10px + \${spacing}px);margin:-moz-calc(10px + \${spacing}px);margin:calc(10px + \${spacing}px)}\`)); +} +" +`; + exports[`Should load swc-confidential wasm plugin correctly > Should transform different-jsx-ids correctly 1`] = ` "import _JSXStyle from "styled-jsx/style"; const color = "red"; @@ -889,6 +1028,68 @@ export default function IndexPage() { " `; +exports[`Should load swc-confidential wasm plugin correctly > Should transform global-styles-with-dynamic-values correctly 1`] = ` +"import _JSXStyle from "styled-jsx/style"; +export default function Component() { + const id = 'theme-1'; + const cssVariables = { + '--primary-color': '#0070f3', + '--secondary-color': '#ff0080' + }; + const stringifyCssVariablesObject = (obj)=>{ + return Object.entries(obj).map(([key, value])=>\`\${key}: \${value};\`).join('\\n'); + }; + const buttonColor = 'var(--primary-color)'; + const backgroundColor = '#f0f0f0'; + return /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "f656cf9d5a360ff0", + [ + id, + stringifyCssVariablesObject(cssVariables), + buttonColor, + backgroundColor + ] + ] + ]) + " " + \`scope-\${id}\` + }, /*#__PURE__*/ React.createElement("button", { + className: _JSXStyle.dynamic([ + [ + "f656cf9d5a360ff0", + [ + id, + stringifyCssVariablesObject(cssVariables), + buttonColor, + backgroundColor + ] + ] + ]) + }, "Global Styled Button"), /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "f656cf9d5a360ff0", + [ + id, + stringifyCssVariablesObject(cssVariables), + buttonColor, + backgroundColor + ] + ] + ]) + }, "Styled Div"), /*#__PURE__*/ React.createElement(_JSXStyle, { + id: "f656cf9d5a360ff0", + dynamic: [ + id, + stringifyCssVariablesObject(cssVariables), + buttonColor, + backgroundColor + ] + }, \`.scope-\${id}{\${stringifyCssVariablesObject(cssVariables)}}.scope-\${id} button{color:\${buttonColor}}.scope-\${id} div{background-color:\${backgroundColor}}\`)); +} +" +`; + exports[`Should load swc-confidential wasm plugin correctly > Should transform issue--317 correctly 1`] = ` "import _JSXStyle from "styled-jsx/style"; export const MyComponent = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { @@ -998,6 +1199,47 @@ export default (()=>/*#__PURE__*/ React.createElement("div", { " `; +exports[`Should load swc-confidential wasm plugin correctly > Should transform media-queries-with-variables correctly 1`] = ` +"import _JSXStyle from "styled-jsx/style"; +export default function Component() { + const ResponsiveBreakpoint = { + mobile: '768px', + tablet: '1024px', + desktop: '1440px' + }; + const breakpoint = 'mobile'; + const mobileWidth = 320; + return /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "3cd101c7fd762502", + [ + ResponsiveBreakpoint[breakpoint], + mobileWidth + ] + ] + ]) + " " + "component" + }, /*#__PURE__*/ React.createElement("div", { + className: _JSXStyle.dynamic([ + [ + "3cd101c7fd762502", + [ + ResponsiveBreakpoint[breakpoint], + mobileWidth + ] + ] + ]) + " " + "active" + }, "Responsive Element"), /*#__PURE__*/ React.createElement(_JSXStyle, { + id: "3cd101c7fd762502", + dynamic: [ + ResponsiveBreakpoint[breakpoint], + mobileWidth + ] + }, \`.component.__jsx-style-dynamic-selector{width:100%}@media(max-width:\${ResponsiveBreakpoint[breakpoint]}){.component.__jsx-style-dynamic-selector{width:\${mobileWidth}px}.component.__jsx-style-dynamic-selector.active.__jsx-style-dynamic-selector{color:blue}.component.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{display:block}}\`)); +} +" +`; + exports[`Should load swc-confidential wasm plugin correctly > Should transform mixed-global-scoped correctly 1`] = ` "import _JSXStyle from "styled-jsx/style"; const Test = ()=>/*#__PURE__*/ React.createElement(_JSXStyle, { @@ -1052,6 +1294,22 @@ export { _class as default }; " `; +exports[`Should load swc-confidential wasm plugin correctly > Should transform nested-selectors correctly 1`] = ` +"import _JSXStyle from "styled-jsx/style"; +export default function Component() { + return /*#__PURE__*/ React.createElement("div", { + className: "jsx-2552bb7cce0bcbcf" + " " + "parent" + }, /*#__PURE__*/ React.createElement("div", { + className: "jsx-2552bb7cce0bcbcf" + " " + "child" + }, "Nested Selectors Test"), /*#__PURE__*/ React.createElement("h1", { + className: "jsx-2552bb7cce0bcbcf" + }, "Heading"), /*#__PURE__*/ React.createElement(_JSXStyle, { + id: "2552bb7cce0bcbcf" + }, ".parent.jsx-2552bb7cce0bcbcf{position:relative}.parent.jsx-2552bb7cce0bcbcf.jsx-2552bb7cce0bcbcf:hover{background-color:red}.parent.jsx-2552bb7cce0bcbcf .child.jsx-2552bb7cce0bcbcf{margin-top:10px}.parent.jsx-2552bb7cce0bcbcf div.jsx-2552bb7cce0bcbcf{padding:15px}.parent.jsx-2552bb7cce0bcbcf h1.jsx-2552bb7cce0bcbcf{font-size:24px}")); +} +" +`; + exports[`Should load swc-confidential wasm plugin correctly > Should transform next-54653 correctly 1`] = ` "const _defaultExport = new String("@media(max-width:870px){th.expiration-date-cell,td.expiration-date-cell{display:none}}"); _defaultExport.__hash = "fd71bf06ba8860bb";