Skip to content

Commit 8dd3e22

Browse files
kdy1kdy1
authored
fix(styled-jsx): Fix specificity issue by parsing twice (#464)
1 parent 679955e commit 8dd3e22

File tree

15 files changed

+78
-8
lines changed

15 files changed

+78
-8
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.10
4+
5+
### Patch Changes
6+
7+
- ba14bef: Fix specifity
8+
39
## 7.0.9
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.10
6+
7+
### Patch Changes
8+
9+
- ba14bef: Fix specifity
10+
511
## 7.0.9
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
@@ -1547,6 +1547,16 @@ exports[`Should load swc-confidential wasm plugin correctly > Should transform s
15471547
"
15481548
`;
15491549
1550+
exports[`Should load swc-confidential wasm plugin correctly > Should transform specifity correctly 1`] = `
1551+
"import _JSXStyle from "styled-jsx/style";
1552+
export default function Home() {
1553+
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_JSXStyle, {
1554+
id: "86b7ac1a67e57b1"
1555+
}, "div.jsx-86b7ac1a67e57b1{}div.jsx-86b7ac1a67e57b1.parent.jsx-86b7ac1a67e57b1{color:green}"));
1556+
}
1557+
"
1558+
`;
1559+
15501560
exports[`Should load swc-confidential wasm plugin correctly > Should transform stateless correctly 1`] = `
15511561
"import _JSXStyle from "styled-jsx/style";
15521562
export default (()=>/*#__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.9",
3+
"version": "7.0.10",
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.90.2"
13+
version = "0.90.3"
1414

1515

1616
[features]

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,29 @@ pub fn transform_css(
140140
})
141141
.expect("failed to minify/auto-prefix css");
142142

143+
let css = ss
144+
.to_css(PrinterOptions {
145+
minify: true,
146+
targets,
147+
..Default::default()
148+
})
149+
.context("failed to print css")?;
150+
let mut ss = {
151+
StyleSheet::parse(
152+
&css.code,
153+
ParserOptions {
154+
// We cannot use css_modules for `:global` because lightningcss does not support
155+
// parsing-only mode.
156+
css_modules: None,
157+
error_recovery: true,
158+
warnings: None,
159+
flags: ParserFlags::all(),
160+
..Default::default()
161+
},
162+
)
163+
.unwrap()
164+
};
165+
143166
ss.visit(&mut CssNamespace {
144167
class_name: match class_name {
145168
Some(s) => s.clone(),

‎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 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.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 .child.jsx-2552bb7cce0bcbcf{margin-top:10px}.parent.jsx-2552bb7cce0bcbcf div.jsx-2552bb7cce0bcbcf{padding:15px}.parent.jsx-2552bb7cce0bcbcf h1.jsx-2552bb7cce0bcbcf{font-size:24px}"}</_JSXStyle>
6+
<_JSXStyle id={"2552bb7cce0bcbcf"}>{".parent.jsx-2552bb7cce0bcbcf{position:relative}.parent.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-65064/1/output.lightningcss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function SimplePage() {
66
return <ComponentWithChildAsProp trigger={<>
77
<div className={"jsx-68234eda9c798fae" + " " + "text animated"}>Text</div>
88

9-
<_JSXStyle id={"68234eda9c798fae"}>{".text.jsx-68234eda9c798fae{color:#00f}.text.jsx-68234eda9c798fae.jsx-68234eda9c798fae:hover{color:red}"}</_JSXStyle>
9+
<_JSXStyle id={"68234eda9c798fae"}>{".text.jsx-68234eda9c798fae{color:#00f}.text.jsx-68234eda9c798fae:hover{color:red}"}</_JSXStyle>
1010
</>}/>;
1111
}
1212
const ComponentWithChildAsProp = ({ trigger })=>{

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function SimplePage() {
66
return <ComponentWithChildAsProp trigger={<div className={"jsx-68234eda9c798fae"}>
77
<div className={"jsx-68234eda9c798fae" + " " + "text animated"}>Text</div>
88

9-
<_JSXStyle id={"68234eda9c798fae"}>{".text.jsx-68234eda9c798fae{color:#00f}.text.jsx-68234eda9c798fae.jsx-68234eda9c798fae:hover{color:red}"}</_JSXStyle>
9+
<_JSXStyle id={"68234eda9c798fae"}>{".text.jsx-68234eda9c798fae{color:#00f}.text.jsx-68234eda9c798fae:hover{color:red}"}</_JSXStyle>
1010
</div>}/>;
1111
}
1212
const ComponentWithChildAsProp = ({ trigger })=>{

‎packages/styled-jsx/transform/tests/fixture/pack-2819/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-d3bc3634b8d1b3fb"}>
33
<p className={"jsx-d3bc3634b8d1b3fb"}>test</p>
44
<p className={"jsx-d3bc3634b8d1b3fb"}>woot</p>
55
<p className={"jsx-d3bc3634b8d1b3fb"}>woot</p>
6-
<_JSXStyle id={"d3bc3634b8d1b3fb"}>{".container.jsx-d3bc3634b8d1b3fb{color:#00f;padding:3rem}.container.jsx-d3bc3634b8d1b3fb.inner.jsx-d3bc3634b8d1b3fb{color:#ff0}"}</_JSXStyle>
6+
<_JSXStyle id={"d3bc3634b8d1b3fb"}>{".container.jsx-d3bc3634b8d1b3fb{color:#00f;padding:3rem}.container.inner.jsx-d3bc3634b8d1b3fb{color:#ff0}"}</_JSXStyle>
77
</div>);

‎packages/styled-jsx/transform/tests/fixture/specifity/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+
div {
6+
&.parent {
7+
color: green;
8+
}
9+
}
10+
`}</style>
11+
</>
12+
);
13+
}

‎packages/styled-jsx/transform/tests/fixture/specifity/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={"86b7ac1a67e57b1"}>{"div.parent.jsx-86b7ac1a67e57b1{color:green}"}</_JSXStyle>
5+
</>;
6+
}

‎packages/styled-jsx/transform/tests/fixture/specifity/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={"86b7ac1a67e57b1"}>{"div.jsx-86b7ac1a67e57b1{}div.jsx-86b7ac1a67e57b1.parent.jsx-86b7ac1a67e57b1{color:green}"}</_JSXStyle>
5+
</>;
6+
}

0 commit comments

Comments
 (0)