Skip to content

Commit efa63b1

Browse files
owjs3901owjs3901
authored
Merge pull request #232 from dev-five-git/fix-classname-2
Fix classname
2 parents d7d7ef4 + e73fe8d commit efa63b1

File tree

6 files changed

+265
-29
lines changed

6 files changed

+265
-29
lines changed

‎.changeset/silver-teeth-stand.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/wasm": patch
3+
---
4+
5+
Fix className

‎libs/extractor/src/lib.rs‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2673,6 +2673,45 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
26732673
));
26742674
}
26752675

2676+
#[test]
2677+
#[serial]
2678+
fn props_multi_expression() {
2679+
reset_class_map();
2680+
assert_debug_snapshot!(ToBTreeSet::from(
2681+
extract(
2682+
"test.jsx",
2683+
r#"import {
2684+
Box,
2685+
Button as DevupButton,
2686+
Center,
2687+
css,
2688+
} from '@devup-ui/core'
2689+
2690+
<DevupButton
2691+
border={
2692+
{
2693+
primary: 'none',
2694+
default: '1px solid var(--border, #E4E4E4)',
2695+
}[variant]
2696+
}
2697+
className={className}
2698+
px={
2699+
{
2700+
false: { sm: '12px', md: '16px', lg: '20px' }[size],
2701+
true: { sm: '24px', md: '28px', lg: '32px' }[size],
2702+
}[(!!icon).toString()]
2703+
}
2704+
/>
2705+
"#,
2706+
ExtractOption {
2707+
package: "@devup-ui/core".to_string(),
2708+
css_file: None
2709+
}
2710+
)
2711+
.unwrap()
2712+
));
2713+
}
2714+
26762715
#[test]
26772716
#[serial]
26782717
fn props_direct_object_select() {
@@ -3161,6 +3200,40 @@ import {Button} from '@devup/ui'
31613200
)
31623201
.unwrap()
31633202
));
3203+
3204+
reset_class_map();
3205+
assert_debug_snapshot!(ToBTreeSet::from(
3206+
extract(
3207+
"test.jsx",
3208+
r#"import {Box} from '@devup-ui/core'
3209+
<Box className={` ${1} ${2} `} />
3210+
"#,
3211+
ExtractOption {
3212+
package: "@devup-ui/core".to_string(),
3213+
css_file: None
3214+
}
3215+
)
3216+
.unwrap()
3217+
));
3218+
3219+
reset_class_map();
3220+
assert_debug_snapshot!(ToBTreeSet::from(
3221+
extract(
3222+
"test.jsx",
3223+
r#"import {Box} from '@devup-ui/core'
3224+
<Box className={` ${1} ${2} `}
3225+
_hover={{bg:"red"}}
3226+
_themeDark={{ _hover:{bg:"black"} }}
3227+
3228+
/>
3229+
"#,
3230+
ExtractOption {
3231+
package: "@devup-ui/core".to_string(),
3232+
css_file: None
3233+
}
3234+
)
3235+
.unwrap()
3236+
));
31643237
}
31653238

31663239
#[test]

‎libs/extractor/src/prop_modify_utils.rs‎

Lines changed: 63 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -233,49 +233,83 @@ fn merge_string_expressions<'a>(
233233
if expressions.is_empty() {
234234
return None;
235235
}
236-
if expressions.len() == 1 {
236+
if expressions.len() == 1
237+
&& !matches!(
238+
expressions.first().unwrap(),
239+
Expression::StringLiteral(_) | Expression::TemplateLiteral(_)
240+
)
241+
{
237242
return Some(expressions.first().unwrap().clone_in(ast_builder.allocator));
238243
}
239244

240245
let mut string_literals: std::vec::Vec<String> = vec![];
241246
let mut other_expressions = vec![];
242247
let mut prev_str = String::new();
243248
for (idx, ex) in expressions.iter().enumerate() {
244-
if let Expression::StringLiteral(literal) = ex {
245-
if !prev_str.trim().is_empty() {
246-
prev_str.push(' ');
249+
match ex {
250+
Expression::StringLiteral(literal) => {
251+
prev_str.push_str(
252+
format!(
253+
"{}{}",
254+
if prev_str.trim().is_empty() && other_expressions.is_empty() {
255+
""
256+
} else {
257+
" "
258+
},
259+
literal.value.trim()
260+
)
261+
.as_str(),
262+
);
247263
}
248-
prev_str.push_str(literal.value.trim());
249-
} else if let Expression::TemplateLiteral(template) = ex {
250-
for (idx, q) in template.quasis.iter().enumerate() {
251-
if idx == 0 {
252-
if !prev_str.trim().is_empty() {
253-
prev_str.push(' ');
254-
}
255-
prev_str.push_str(&q.value.raw);
256-
} else {
257-
if !prev_str.trim().is_empty() {
258-
string_literals.push(prev_str.clone());
259-
}
260-
if q.tail {
261-
prev_str = format!("{} ", q.value.raw);
264+
Expression::TemplateLiteral(template) => {
265+
for (idx, q) in template.quasis.iter().enumerate() {
266+
if !prev_str.is_empty() {
267+
string_literals.push(format!(
268+
"{}{}{}{}",
269+
prev_str.trim(),
270+
if !prev_str.trim().is_empty() { " " } else { "" },
271+
q.value.raw.trim(),
272+
if idx == template.quasis.len() - 1 {
273+
""
274+
} else {
275+
" "
276+
}
277+
));
278+
prev_str = String::new();
279+
} else if q.tail {
280+
prev_str = q.value.raw.trim().to_string();
262281
} else {
263-
string_literals.push(q.value.raw.into());
282+
string_literals.push(format!(
283+
"{}{}{}",
284+
if idx == 0
285+
&& other_expressions.is_empty()
286+
&& string_literals.is_empty()
287+
{
288+
""
289+
} else {
290+
" "
291+
},
292+
q.value.raw.trim(),
293+
if q.value.raw.trim().is_empty() || !q.value.raw.ends_with(' ') {
294+
""
295+
} else {
296+
" "
297+
}
298+
));
264299
prev_str = String::new();
265300
}
266301
}
302+
other_expressions.extend(template.expressions.clone_in(ast_builder.allocator));
267303
}
268-
other_expressions.extend(template.expressions.clone_in(ast_builder.allocator));
269-
} else {
270-
if !prev_str.ends_with(' ') {
271-
string_literals.push(format!("{}{}", prev_str, if idx > 0 { " " } else { "" }));
272-
} else if idx > 0 {
273-
string_literals.push(" ".to_string());
274-
} else {
275-
string_literals.push("".to_string());
304+
ex => {
305+
string_literals.push(format!(
306+
"{}{}",
307+
prev_str.trim(),
308+
if idx > 0 { " " } else { "" }
309+
));
310+
other_expressions.push(ex.clone_in(ast_builder.allocator));
311+
prev_str = String::new();
276312
}
277-
other_expressions.push(ex.clone_in(ast_builder.allocator));
278-
prev_str = " ".to_string();
279313
}
280314
}
281315
if !prev_str.is_empty() {

‎libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {\n Box,\n Button as DevupButton,\n Center,\n css,\n} from '@devup-ui/core'\n\n<DevupButton\n border={\n {\n primary: 'none',\n default: '1px solid var(--border, #E4E4E4)',\n }[variant]\n }\n className={className}\n px={\n {\n false: { sm: '12px', md: '16px', lg: '20px' }[size],\n true: { sm: '24px', md: '28px', lg: '32px' }[size],\n }[(!!icon).toString()]\n }\n/>\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "border",
10+
value: "1px solid var(--border,#E4E4E4)",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "border",
19+
value: "none",
20+
level: 0,
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
Static(
26+
ExtractStaticStyle {
27+
property: "px",
28+
value: "12px",
29+
level: 0,
30+
selector: None,
31+
style_order: None,
32+
},
33+
),
34+
Static(
35+
ExtractStaticStyle {
36+
property: "px",
37+
value: "16px",
38+
level: 0,
39+
selector: None,
40+
style_order: None,
41+
},
42+
),
43+
Static(
44+
ExtractStaticStyle {
45+
property: "px",
46+
value: "20px",
47+
level: 0,
48+
selector: None,
49+
style_order: None,
50+
},
51+
),
52+
Static(
53+
ExtractStaticStyle {
54+
property: "px",
55+
value: "24px",
56+
level: 0,
57+
selector: None,
58+
style_order: None,
59+
},
60+
),
61+
Static(
62+
ExtractStaticStyle {
63+
property: "px",
64+
value: "28px",
65+
level: 0,
66+
selector: None,
67+
style_order: None,
68+
},
69+
),
70+
Static(
71+
ExtractStaticStyle {
72+
property: "px",
73+
value: "32px",
74+
level: 0,
75+
selector: None,
76+
style_order: None,
77+
},
78+
),
79+
},
80+
code: "import \"@devup-ui/core/devup-ui.css\";\n<button className={`${className || \"\"} ${{\n\t\"default\": \"d0\",\n\t\"primary\": \"d1\"\n}[variant] || \"\"} ${{\n\t\"false\": {\n\t\t\"lg\": \"d2\",\n\t\t\"md\": \"d3\",\n\t\t\"sm\": \"d4\"\n\t}[size] || \"\",\n\t\"true\": {\n\t\t\"lg\": \"d5\",\n\t\t\"md\": \"d6\",\n\t\t\"sm\": \"d7\"\n\t}[size] || \"\"\n}[(!!icon).toString()]}`} />;\n",
81+
}

‎libs/extractor/src/snapshots/extractor__tests__template_literal_props-5.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box className={` ${1} ${2} `} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {},
7+
code: "<div className={`${1} ${2}`} />;\n",
8+
}

‎libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box className={` ${1} ${2} `}\n _hover={{bg:\"red\"}}\n _themeDark={{ _hover:{bg:\"black\"} }}\n \n />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "background",
10+
value: "black",
11+
level: 0,
12+
selector: Some(
13+
Selector(
14+
":root[data-theme=dark] &:hover",
15+
),
16+
),
17+
style_order: None,
18+
},
19+
),
20+
Static(
21+
ExtractStaticStyle {
22+
property: "background",
23+
value: "red",
24+
level: 0,
25+
selector: Some(
26+
Selector(
27+
"&:hover",
28+
),
29+
),
30+
style_order: None,
31+
},
32+
),
33+
},
34+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${1} ${2} d0 d1`} />;\n",
35+
}

0 commit comments

Comments
 (0)