@swc/plugin-styled-jsx 1.5.73 → 1.5.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Cargo.toml +3 -3
- package/package.json +1 -1
- package/swc_plugin_styled_jsx.wasm +0 -0
- package/transform/Cargo.toml +4 -5
- package/transform/src/transform_css.rs +16 -11
- package/transform/src/utils.rs +1 -1
- package/transform/tests/fixture/next-54653/input.js +10 -0
- package/transform/tests/fixture/next-54653/output.js +3 -0
- package/transform/tests/fixture/transform-css/output.js +1 -1
- package/transform/tests/fixture/transform-css-complex-selector/output.js +1 -1
- package/transform/tests/fixture/transform-css-global/input.js +6 -6
- package/transform/tests/fixture/transform-css-global/output.js +3 -3
package/Cargo.toml
CHANGED
|
@@ -16,7 +16,7 @@ custom_transform = ["swc_core/common_concurrent"]
|
|
|
16
16
|
[dependencies]
|
|
17
17
|
easy-error = "1.0.0"
|
|
18
18
|
styled_jsx = { path = "./transform" }
|
|
19
|
-
swc_core = { version = "0.
|
|
19
|
+
swc_core = { version = "0.82.10", features = [
|
|
20
20
|
"common",
|
|
21
21
|
"ecma_ast",
|
|
22
22
|
"ecma_plugin_transform",
|
|
@@ -28,5 +28,5 @@ swc_core = { version = "0.81.5", features = [
|
|
|
28
28
|
tracing = { version = "0.1.37", features = ["release_max_level_off"] }
|
|
29
29
|
|
|
30
30
|
[dev-dependencies]
|
|
31
|
-
swc_core = { features = ["testing_transform"], version = "0.
|
|
32
|
-
testing = "0.34.
|
|
31
|
+
swc_core = { features = ["testing_transform"], version = "0.82.10" }
|
|
32
|
+
testing = "0.34.1"
|
package/package.json
CHANGED
|
Binary file
|
package/transform/Cargo.toml
CHANGED
|
@@ -4,7 +4,7 @@ description = "AST transforms visitor for styled-jsx"
|
|
|
4
4
|
edition = "2021"
|
|
5
5
|
license = "Apache-2.0"
|
|
6
6
|
name = "styled_jsx"
|
|
7
|
-
version = "0.
|
|
7
|
+
version = "0.42.0"
|
|
8
8
|
|
|
9
9
|
[features]
|
|
10
10
|
custom_transform = ["swc_core/common_concurrent"]
|
|
@@ -18,8 +18,7 @@ lightningcss = { version = "1.0.0-alpha.44", features = [
|
|
|
18
18
|
] }
|
|
19
19
|
parcel_selectors = "0.26.0"
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
swc_core = { version = "0.81.5", features = [
|
|
21
|
+
swc_core = { version = "0.82.10", features = [
|
|
23
22
|
"common",
|
|
24
23
|
"ecma_ast",
|
|
25
24
|
"ecma_parser",
|
|
@@ -29,5 +28,5 @@ swc_core = { version = "0.81.5", features = [
|
|
|
29
28
|
] }
|
|
30
29
|
|
|
31
30
|
[dev-dependencies]
|
|
32
|
-
testing = "0.34.
|
|
33
|
-
swc_core = { features = ["testing_transform"], version = "0.
|
|
31
|
+
testing = "0.34.1"
|
|
32
|
+
swc_core = { features = ["testing_transform"], version = "0.82.10" }
|
|
@@ -74,12 +74,6 @@ pub fn transform_css(
|
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
|
|
77
|
-
// Apply auto prefixer
|
|
78
|
-
// TODO:
|
|
79
|
-
ss.minify(MinifyOptions {
|
|
80
|
-
..Default::default()
|
|
81
|
-
})
|
|
82
|
-
.expect("failed to minify/auto-prefix css");
|
|
83
77
|
ss.visit(&mut CssNamespace {
|
|
84
78
|
class_name: match class_name {
|
|
85
79
|
Some(s) => s.clone(),
|
|
@@ -90,6 +84,13 @@ pub fn transform_css(
|
|
|
90
84
|
})
|
|
91
85
|
.expect("failed to transform css");
|
|
92
86
|
|
|
87
|
+
// Apply auto prefixer
|
|
88
|
+
// TODO:
|
|
89
|
+
ss.minify(MinifyOptions {
|
|
90
|
+
..Default::default()
|
|
91
|
+
})
|
|
92
|
+
.expect("failed to minify/auto-prefix css");
|
|
93
|
+
|
|
93
94
|
let res = ss
|
|
94
95
|
.to_css(PrinterOptions {
|
|
95
96
|
minify: true,
|
|
@@ -377,15 +378,12 @@ impl CssNamespace {
|
|
|
377
378
|
|
|
378
379
|
let mut complex_selectors =
|
|
379
380
|
children.iter_raw_match_order().cloned().collect::<Vec<_>>();
|
|
381
|
+
|
|
380
382
|
// Remove `a`
|
|
381
383
|
complex_selectors.pop();
|
|
384
|
+
|
|
382
385
|
if let Some(Component::Combinator(Combinator::Descendant)) = complex_selectors.last() {
|
|
383
386
|
complex_selectors.pop();
|
|
384
|
-
} else if let Some(Component::Combinator(c)) = complex_selectors.last() {
|
|
385
|
-
let c = *c;
|
|
386
|
-
complex_selectors.pop();
|
|
387
|
-
|
|
388
|
-
complex_selectors.insert(0, Component::Combinator(c))
|
|
389
387
|
}
|
|
390
388
|
|
|
391
389
|
if let Component::Combinator(Combinator::Descendant) = complex_selectors[0] {
|
|
@@ -402,6 +400,8 @@ impl CssNamespace {
|
|
|
402
400
|
|
|
403
401
|
// result.push(Component::Combinator(Combinator::Descendant));
|
|
404
402
|
|
|
403
|
+
complex_selectors.reverse();
|
|
404
|
+
|
|
405
405
|
result.extend(complex_selectors);
|
|
406
406
|
result.extend(node.into_iter().skip(i + 1));
|
|
407
407
|
|
|
@@ -499,6 +499,11 @@ fn parse_token_list<'i>(tokens: &TokenList<'i>) -> Selector<'i> {
|
|
|
499
499
|
}
|
|
500
500
|
}
|
|
501
501
|
}
|
|
502
|
+
|
|
503
|
+
if cfg!(debug_assertions) {
|
|
504
|
+
debug!("Parsing: {:?}", buf)
|
|
505
|
+
}
|
|
506
|
+
|
|
502
507
|
let selector = Selector::parse_string_with_options(&buf, Default::default())
|
|
503
508
|
.expect("failed to parse selector list");
|
|
504
509
|
|
package/transform/src/utils.rs
CHANGED
|
@@ -296,7 +296,7 @@ pub fn get_usable_import_specifier(_items: &[ModuleItem]) -> String {
|
|
|
296
296
|
|
|
297
297
|
pub fn styled_jsx_import_decl(style_import_name: &str) -> ModuleItem {
|
|
298
298
|
ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
|
|
299
|
-
|
|
299
|
+
with: None,
|
|
300
300
|
span: DUMMY_SP,
|
|
301
301
|
type_only: false,
|
|
302
302
|
specifiers: vec![ImportSpecifier::Default(ImportDefaultSpecifier {
|
|
@@ -3,6 +3,6 @@ export default (()=><div className={"jsx-4a27e5cf1c34b3df"}>
|
|
|
3
3
|
|
|
4
4
|
<p className={"jsx-4a27e5cf1c34b3df"}>test</p>
|
|
5
5
|
|
|
6
|
-
<_JSXStyle id={"4a27e5cf1c34b3df"}>{"html.jsx-4a27e5cf1c34b3df{background-image:linear-gradient(#fffc,#fffc),url(/static/background.svg)}p{color:#002}a.jsx-4a27e5cf1c34b3df{color:#003}
|
|
6
|
+
<_JSXStyle id={"4a27e5cf1c34b3df"}>{"html.jsx-4a27e5cf1c34b3df{background-image:linear-gradient(#fffc,#fffc),url(/static/background.svg)}p{color:#002}p,a.jsx-4a27e5cf1c34b3df{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}p.jsx-4a27e5cf1c34b3df{color:#006}.jsx-4a27e5cf1c34b3df{color:#007}[href=woot].jsx-4a27e5cf1c34b3df{color:#008}p.jsx-4a27e5cf1c34b3df a.jsx-4a27e5cf1c34b3df span.jsx-4a27e5cf1c34b3df{color:#009}p.jsx-4a27e5cf1c34b3df span{background:#00a}p.jsx-4a27e5cf1c34b3df a[title=\"'w ' ' t'\"].jsx-4a27e5cf1c34b3df{margin:auto}p.jsx-4a27e5cf1c34b3df span:not(.test){color:#00b}p.jsx-4a27e5cf1c34b3df,h1.jsx-4a27e5cf1c34b3df{color:#00c;animation:3s .1s infinite forwards hahaha}p.jsx-4a27e5cf1c34b3df{animation:1s hahaha,2s hehehe}p.jsx-4a27e5cf1c34b3df:hover{color:#00d}p.jsx-4a27e5cf1c34b3df:before{color:#00e}:hover{color:#00f}:before{color:#010}:hoverp.jsx-4a27e5cf1c34b3df{color:#011}p.jsx-4a27e5cf1c34b3df+a.jsx-4a27e5cf1c34b3df{color:#012}p.jsx-4a27e5cf1c34b3df~a.jsx-4a27e5cf1c34b3df{color:#013}p.jsx-4a27e5cf1c34b3df>a.jsx-4a27e5cf1c34b3df{color:#014}@keyframes hahaha{0%{top:0}to{top:100px}}@keyframes hehehe{0%{left:0}to{left:100px}}@media (width>=500px){.test.jsx-4a27e5cf1c34b3df{color:#015}}.test.jsx-4a27e5cf1c34b3df{display:block}.inline-flex.jsx-4a27e5cf1c34b3df{display:inline-flex}.flex.jsx-4a27e5cf1c34b3df{display:flex}.test.jsx-4a27e5cf1c34b3df{box-shadow:0 0 10px #000,inset 0 0 5px #000}.test[title=\\,].jsx-4a27e5cf1c34b3df{display:inline-block}.test.is-status.jsx-4a27e5cf1c34b3df .test.jsx-4a27e5cf1c34b3df{color:#016}.a-selector.jsx-4a27e5cf1c34b3df:hover,.a-selector.jsx-4a27e5cf1c34b3df:focus{outline:none}@media (width>=1px) and (width<=768px){[class*=grid__col--].jsx-4a27e5cf1c34b3df{margin-top:12px;margin-bottom:12px}}@media (width<=64em){.test.jsx-4a27e5cf1c34b3df{margin-bottom:1em}@supports ((-moz-appearance:none)) and (display:contents){.test.jsx-4a27e5cf1c34b3df{margin-bottom:2rem}}}"}</_JSXStyle>
|
|
7
7
|
|
|
8
8
|
</div>);
|
|
@@ -3,6 +3,6 @@ export default (()=><div className={"jsx-713499aa363d6373"}>
|
|
|
3
3
|
|
|
4
4
|
<p className={"jsx-713499aa363d6373"}>test</p>
|
|
5
5
|
|
|
6
|
-
<_JSXStyle id={"713499aa363d6373"}>{"p.jsx-713499aa363d6373 a.jsx-713499aa363d6373 span.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373 span{background:#00f}p.jsx-713499aa363d6373 a[title=\"'w ' ' t'\"].jsx-713499aa363d6373{margin:auto}p.jsx-713499aa363d6373 :not(.test)
|
|
6
|
+
<_JSXStyle id={"713499aa363d6373"}>{"p.jsx-713499aa363d6373 a.jsx-713499aa363d6373 span.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373 span{background:#00f}p.jsx-713499aa363d6373 a[title=\"'w ' ' t'\"].jsx-713499aa363d6373{margin:auto}p.jsx-713499aa363d6373 span:not(.test){color:green}p.jsx-713499aa363d6373,h1.jsx-713499aa363d6373{color:#00f;animation:3s .1s infinite forwards hahaha}p.jsx-713499aa363d6373{animation:1s hahaha,2s hehehe}p.jsx-713499aa363d6373:hover,p.jsx-713499aa363d6373:before,:hover,:before,:hoverp.jsx-713499aa363d6373,p.jsx-713499aa363d6373+a.jsx-713499aa363d6373,p.jsx-713499aa363d6373~a.jsx-713499aa363d6373,p.jsx-713499aa363d6373>a.jsx-713499aa363d6373{color:red}@keyframes hahaha{0%{top:0}to{top:100px}}@keyframes hehehe{0%{left:0}to{left:100px}}@media (width>=500px){.test.jsx-713499aa363d6373{color:red}}.test.jsx-713499aa363d6373{display:block}.inline-flex.jsx-713499aa363d6373{display:inline-flex}.flex.jsx-713499aa363d6373{display:flex}.test.jsx-713499aa363d6373{box-shadow:0 0 10px #000,inset 0 0 5px #000}.test[title=\\,].jsx-713499aa363d6373{display:inline-block}.test.is-status.jsx-713499aa363d6373 .test.jsx-713499aa363d6373{color:red}.a-selector.jsx-713499aa363d6373:hover,.a-selector.jsx-713499aa363d6373:focus{outline:none}"}</_JSXStyle>
|
|
7
7
|
|
|
8
8
|
</div>);
|
|
@@ -9,19 +9,19 @@ export default () => (
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
:global(p) {
|
|
12
|
-
color:
|
|
12
|
+
color: #001
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
:global(
|
|
16
|
-
color:
|
|
15
|
+
:global(h1){
|
|
16
|
+
color: #002;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
:global(
|
|
20
|
-
color:
|
|
19
|
+
:global(h2), a {
|
|
20
|
+
color: #003;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
:global(.foo + a) {
|
|
24
|
-
color:
|
|
24
|
+
color: #004;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
:global(body) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
|
-
export default (()=><div className={"jsx-
|
|
2
|
+
export default (()=><div className={"jsx-6881055ff9b1aeb6"}>
|
|
3
3
|
|
|
4
|
-
<p className={"jsx-
|
|
4
|
+
<p className={"jsx-6881055ff9b1aeb6"}>test</p>
|
|
5
5
|
|
|
6
|
-
<_JSXStyle id={"
|
|
6
|
+
<_JSXStyle id={"6881055ff9b1aeb6"}>{"html.jsx-6881055ff9b1aeb6{background-image:linear-gradient(#fffc,#fffc),url(/static/background.svg)}p{color:#001}h1{color:#002}h2,a.jsx-6881055ff9b1aeb6{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}"}</_JSXStyle>
|
|
7
7
|
|
|
8
8
|
</div>);
|