Skip to content

Commit 98eeeef

Browse files
kdy1kdy1
authored
fix(styled-jsx): Fix lightningcss mode (#457)
Closes #456
1 parent 51cc7e0 commit 98eeeef

File tree

20 files changed

+77
-24
lines changed

20 files changed

+77
-24
lines changed

‎Cargo.lock

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/styled-jsx/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @swc/plugin-styled-jsx
22

3+
## 7.0.7
4+
5+
### Patch Changes
6+
7+
- d8020c7: Fix lightningcss mode
8+
39
## 7.0.6
410

511
### Patch Changes

‎packages/styled-jsx/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
# @swc/plugin-styled-jsx
44

5+
## 7.0.7
6+
7+
### Patch Changes
8+
9+
- d8020c7: Fix lightningcss mode
10+
511
## 7.0.6
612

713
### Patch Changes

‎packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1124,6 +1124,16 @@ export default function Home() {
11241124
"
11251125
`;
11261126
1127+
exports[`Should load swc-confidential wasm plugin correctly > Should transform issue-456 correctly 1`] = `
1128+
"import _JSXStyle from "styled-jsx/style";
1129+
export default function Home() {
1130+
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_JSXStyle, {
1131+
id: "c717b7da8095da63"
1132+
}, ".theme-root{}.theme-root .parent.jsx-c717b7da8095da63{color:green}"));
1133+
}
1134+
"
1135+
`;
1136+
11271137
exports[`Should load swc-confidential wasm plugin correctly > Should transform issue-30480 correctly 1`] = `
11281138
"import _JSXStyle from "styled-jsx/style";
11291139
export default (({ breakPoint })=>/*#__PURE__*/ React.createElement("div", {

‎packages/styled-jsx/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@swc/plugin-styled-jsx",
3-
"version": "7.0.6",
3+
"version": "7.0.7",
44
"description": "SWC plugin for styled-jsx",
55
"main": "swc_plugin_styled_jsx.wasm",
66
"scripts": {

‎packages/styled-jsx/transform/Cargo.toml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ license = { workspace = true }
1010
name = "styled_jsx"
1111
repository = { workspace = true }
1212
rust-version = { workspace = true }
13-
version = "0.89.0"
13+
version = "0.89.1"
1414

1515

1616
[features]

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

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -124,18 +124,9 @@ pub fn transform_css(
124124
}
125125
};
126126

127-
ss.visit(&mut CssNamespace {
128-
class_name: match class_name {
129-
Some(s) => s.clone(),
130-
None => format!("jsx-{}", &hash_string(&style_info.hash)),
131-
},
132-
is_global,
133-
is_dynamic: style_info.is_dynamic,
134-
})
135-
.expect("failed to transform css");
136-
137127
let targets = Targets {
138128
browsers: Some(convert_browsers(browsers)),
129+
include: Features::Nesting,
139130
..Default::default()
140131
};
141132

@@ -149,6 +140,16 @@ pub fn transform_css(
149140
})
150141
.expect("failed to minify/auto-prefix css");
151142

143+
ss.visit(&mut CssNamespace {
144+
class_name: match class_name {
145+
Some(s) => s.clone(),
146+
None => format!("jsx-{}", &hash_string(&style_info.hash)),
147+
},
148+
is_global,
149+
is_dynamic: style_info.is_dynamic,
150+
})
151+
.expect("failed to transform css");
152+
152153
let mut res = ss
153154
.to_css(PrinterOptions {
154155
minify: true,
@@ -293,7 +294,7 @@ impl<'i> Visitor<'i> for CssNamespace {
293294
let _tracing = tracing::span!(
294295
tracing::Level::ERROR,
295296
"visit_selector",
296-
len = selector.len()
297+
selector = ?selector
297298
)
298299
.entered();
299300

@@ -501,6 +502,11 @@ impl CssNamespace {
501502

502503
let mut node: Vec<Component<'i>> = node.clone();
503504

505+
if result.is_empty() && node.len() == 1 && matches!(node[0], Component::Nesting) {
506+
node.push(Component::Combinator(Combinator::Descendant));
507+
return Ok(node);
508+
}
509+
504510
let subclass_selector = match self.is_dynamic {
505511
true => Cow::Borrowed("__jsx-style-dynamic-selector"),
506512
false => Cow::Owned(self.class_name.clone()),

‎packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,6 @@ export default function Component() {
3535
duration,
3636
easing,
3737
delay
38-
]}>{`@keyframes customAnimation{0%{opacity:0;transform:scale(0)}50%{opacity:${middleOpacity};transform:rotate(${rotation}deg)}to{opacity:1;transform:scale(1)}}.wrapper.__jsx-style-dynamic-selector.__jsx-style-dynamic-selector .animated.__jsx-style-dynamic-selector{animation:customAnimation ${duration}ms ${easing} forwards;animation-delay:${delay}ms}`}</_JSXStyle>
38+
]}>{`@keyframes customAnimation{0%{opacity:0;transform:scale(0)}50%{opacity:${middleOpacity};transform:rotate(${rotation}deg)}to{opacity:1;transform:scale(1)}}.wrapper.__jsx-style-dynamic-selector .animated.__jsx-style-dynamic-selector{animation:customAnimation ${duration}ms ${easing} forwards;animation-delay:${delay}ms}`}</_JSXStyle>
3939
</div>;
4040
}

‎packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,6 @@ export default function Component() {
3838
offset,
3939
offset,
4040
spacing
41-
]}>{`.container.__jsx-style-dynamic-selector{--local-var:${dynamicValue};color:var(--text-color);background:linear-gradient(to right,${color1},${color2})}.container.__jsx-style-dynamic-selector.__jsx-style-dynamic-selector .item.__jsx-style-dynamic-selector{transform:translate(calc(var(--x) + ${offset}px),calc(var(--y) + ${offset}px))}.container.__jsx-style-dynamic-selector.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{margin:calc(10px + ${spacing}px)}`}</_JSXStyle>
41+
]}>{`.container.__jsx-style-dynamic-selector{--local-var:${dynamicValue};color:var(--text-color);background:linear-gradient(to right,${color1},${color2})}.container.__jsx-style-dynamic-selector .item.__jsx-style-dynamic-selector{transform:translate(calc(var(--x) + ${offset}px),calc(var(--y) + ${offset}px))}.container.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{margin:calc(10px + ${spacing}px)}`}</_JSXStyle>
4242
</div>;
4343
}

‎packages/styled-jsx/transform/tests/fixture/interpolation/1/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ export default function Home() {
99
</div>
1010
</div>
1111

12-
<_JSXStyle id={"f3f9c604d7103d8c"}>{`.container.jsx-f3f9c604d7103d8c{color:#00f;padding:3rem}@media (max-width:${breakpoint}){.container.jsx-f3f9c604d7103d8c.jsx-f3f9c604d7103d8c .responsive.jsx-f3f9c604d7103d8c{color:purple}}`}</_JSXStyle>
12+
<_JSXStyle id={"f3f9c604d7103d8c"}>{`.container.jsx-f3f9c604d7103d8c{color:#00f;padding:3rem}@media (max-width:${breakpoint}){.container.jsx-f3f9c604d7103d8c .responsive.jsx-f3f9c604d7103d8c{color:purple}}`}</_JSXStyle>
1313
</>;
1414
}

‎packages/styled-jsx/transform/tests/fixture/interpolation/2/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ export default function Home() {
99
</div>
1010
</div>
1111

12-
<_JSXStyle id={"f3f9c604d7103d8c"}>{`.container.jsx-f3f9c604d7103d8c{color:#00f;padding:3rem}@media (max-width:${breakpoint}){.container.jsx-f3f9c604d7103d8c.jsx-f3f9c604d7103d8c .responsive.jsx-f3f9c604d7103d8c{color:purple}}`}</_JSXStyle>
12+
<_JSXStyle id={"f3f9c604d7103d8c"}>{`.container.jsx-f3f9c604d7103d8c{color:#00f;padding:3rem}@media (max-width:${breakpoint}){.container.jsx-f3f9c604d7103d8c .responsive.jsx-f3f9c604d7103d8c{color:purple}}`}</_JSXStyle>
1313
</div>;
1414
}

‎packages/styled-jsx/transform/tests/fixture/issue-456/input.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function Home() {
2+
return (
3+
<>
4+
<style jsx>{`
5+
:global(.theme-root) {
6+
.parent {
7+
color: green;
8+
}
9+
}
10+
`}</style>
11+
</>
12+
);
13+
}

‎packages/styled-jsx/transform/tests/fixture/issue-456/output.lightningcss.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import _JSXStyle from "styled-jsx/style";
2+
export default function Home() {
3+
return <>
4+
<_JSXStyle id={"c717b7da8095da63"}>{".theme-root .parent.jsx-c717b7da8095da63{color:green}"}</_JSXStyle>
5+
</>;
6+
}

‎packages/styled-jsx/transform/tests/fixture/issue-456/output.swc.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import _JSXStyle from "styled-jsx/style";
2+
export default function Home() {
3+
return <>
4+
<_JSXStyle id={"c717b7da8095da63"}>{".theme-root{}.theme-root .parent.jsx-c717b7da8095da63{color:green}"}</_JSXStyle>
5+
</>;
6+
}

‎packages/styled-jsx/transform/tests/fixture/legacy-nesting/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ export default (()=><div className={"jsx-3b0234e9651851cb"}>
33
<p className={"jsx-3b0234e9651851cb"}>test</p>
44
<p className={"jsx-3b0234e9651851cb"}>woot</p>
55
<p className={"jsx-3b0234e9651851cb"}>woot</p>
6-
<_JSXStyle id={"3b0234e9651851cb"}>{".container.jsx-3b0234e9651851cb{color:#00f;padding:3rem}.container.jsx-3b0234e9651851cb.jsx-3b0234e9651851cb .inner.jsx-3b0234e9651851cb{color:#ff0}"}</_JSXStyle>
6+
<_JSXStyle id={"3b0234e9651851cb"}>{".container.jsx-3b0234e9651851cb{color:#00f;padding:3rem}.container.jsx-3b0234e9651851cb .inner.jsx-3b0234e9651851cb{color:#ff0}"}</_JSXStyle>
77
</div>);

‎packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@ export default function Component() {
2828
<_JSXStyle id={"3ee1174a56442a12"} dynamic={[
2929
ResponsiveBreakpoint[breakpoint],
3030
mobileWidth
31-
]}>{`.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:#00f}.component.__jsx-style-dynamic-selector.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{display:block}}`}</_JSXStyle>
31+
]}>{`.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:#00f}.component.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{display:block}}`}</_JSXStyle>
3232
</div>;
3333
}

‎packages/styled-jsx/transform/tests/fixture/nested-selectors/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ export default function Component() {
33
return <div className={"jsx-2552bb7cce0bcbcf" + " " + "parent"}>
44
<div className={"jsx-2552bb7cce0bcbcf" + " " + "child"}>Nested Selectors Test</div>
55
<h1 className={"jsx-2552bb7cce0bcbcf"}>Heading</h1>
6-
<_JSXStyle id={"2552bb7cce0bcbcf"}>{".parent.jsx-2552bb7cce0bcbcf{position:relative}.parent.jsx-2552bb7cce0bcbcf.jsx-2552bb7cce0bcbcf:hover{background-color:red}.parent.jsx-2552bb7cce0bcbcf.jsx-2552bb7cce0bcbcf .child.jsx-2552bb7cce0bcbcf{margin-top:10px}.parent.jsx-2552bb7cce0bcbcf.jsx-2552bb7cce0bcbcf div.jsx-2552bb7cce0bcbcf{padding:15px}.parent.jsx-2552bb7cce0bcbcf.jsx-2552bb7cce0bcbcf h1.jsx-2552bb7cce0bcbcf{font-size:24px}"}</_JSXStyle>
6+
<_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}"}</_JSXStyle>
77
</div>;
88
}

‎packages/styled-jsx/transform/tests/fixture/next-54653/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
const _defaultExport = new String("@media (max-width:870px){th.expiration-date-cell,td.expiration-date-cell{display:none}}");
1+
const _defaultExport = new String("@media (max-width:870px){th.expiration-date-cell{display:none}td.expiration-date-cell{display:none}}");
22
_defaultExport.__hash = "fd71bf06ba8860bb";
33
export default _defaultExport;

‎packages/styled-jsx/transform/tests/fixture/transform-css-global/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import _JSXStyle from "styled-jsx/style";
22
export default (()=><div className={"jsx-13e06bb770708a4c"}>
33
<p className={"jsx-13e06bb770708a4c"}>test</p>
4-
<_JSXStyle id={"13e06bb770708a4c"}>{"html.jsx-13e06bb770708a4c{background-image:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg)}p{color:#001}h1{color:#002}h2,a.jsx-13e06bb770708a4c{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}"}</_JSXStyle>
4+
<_JSXStyle id={"13e06bb770708a4c"}>{"html.jsx-13e06bb770708a4c{background-image:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg)}p{color:#001}h1{color:#002}a.jsx-13e06bb770708a4c{color:#003}h2{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}"}</_JSXStyle>
55
</div>);

‎packages/styled-jsx/transform/tests/fixture/transform-css/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)