Skip to content

Commit 00b14ca

Browse files
owjs3901owjs3901
committed
Update
1 parent 33586fc commit 00b14ca

20 files changed

+650
-175
lines changed

‎.changeset/itchy-dolphins-talk.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/react": patch
3+
---
4+
5+
Support optional args in css

‎.changeset/soft-islands-compete.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+
Support destructing, Support to direct selection of object with theme, Support for template literal on as prop

‎libs/extractor/src/gen_class_name.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ pub fn gen_class_names<'a>(
1616
style_props
1717
.iter()
1818
.filter_map(|st| gen_class_name(ast_builder, st))
19+
.rev()
1920
.collect(),
2021
)
2122
}

‎libs/extractor/src/lib.rs‎

Lines changed: 171 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,92 @@ mod tests {
181181
)
182182
.unwrap());
183183
}
184+
185+
#[test]
186+
#[serial]
187+
fn convert_tag() {
188+
reset_class_map();
189+
assert_debug_snapshot!(extract(
190+
"test.tsx",
191+
r#"import {Box} from '@devup-ui/core'
192+
<Box as="secton" />
193+
"#,
194+
ExtractOption {
195+
package: "@devup-ui/core".to_string(),
196+
css_file: None
197+
}
198+
)
199+
.unwrap());
200+
201+
reset_class_map();
202+
assert_debug_snapshot!(extract(
203+
"test.tsx",
204+
r#"import {Box} from '@devup-ui/core'
205+
<Box as={"secton"} />
206+
"#,
207+
ExtractOption {
208+
package: "@devup-ui/core".to_string(),
209+
css_file: None
210+
}
211+
)
212+
.unwrap());
213+
assert_debug_snapshot!(extract(
214+
"test.tsx",
215+
r#"import {Box} from '@devup-ui/core'
216+
<Box as={`secton`} />
217+
"#,
218+
ExtractOption {
219+
package: "@devup-ui/core".to_string(),
220+
css_file: None
221+
}
222+
)
223+
.unwrap());
224+
// assert_debug_snapshot!(extract(
225+
// "test.tsx",
226+
// r#"import {Box} from '@devup-ui/core'
227+
// <Box as={b ? "div":"secton"} />
228+
// "#,
229+
// ExtractOption {
230+
// package: "@devup-ui/core".to_string(),
231+
// css_file: None
232+
// }
233+
// )
234+
// .unwrap());
235+
// assert_debug_snapshot!(extract(
236+
// "test.tsx",
237+
// r#"import {Box} from '@devup-ui/core'
238+
// <Box as={b ? undefined:"secton"} />
239+
// "#,
240+
// ExtractOption {
241+
// package: "@devup-ui/core".to_string(),
242+
// css_file: None
243+
// }
244+
// )
245+
// .unwrap());
246+
//
247+
// assert_debug_snapshot!(extract(
248+
// "test.tsx",
249+
// r#"import {Box} from '@devup-ui/core'
250+
// <Box as={b ? null:"secton"} />
251+
// "#,
252+
// ExtractOption {
253+
// package: "@devup-ui/core".to_string(),
254+
// css_file: None
255+
// }
256+
// )
257+
// .unwrap());
258+
// assert_debug_snapshot!(extract(
259+
// "test.tsx",
260+
// r#"import {Box} from '@devup-ui/core'
261+
// <Box as={b ? null:undefined} />
262+
// "#,
263+
// ExtractOption {
264+
// package: "@devup-ui/core".to_string(),
265+
// css_file: None
266+
// }
267+
// )
268+
// .unwrap());
269+
}
184270
#[test]
185271
#[serial]
186272
fn extract_style_props() {
@@ -837,19 +923,19 @@ mod tests {
837923
}
838924
)
839925
.unwrap());
840-
//
841-
// reset_class_map();
842-
// assert_debug_snapshot!(extract(
843-
// "test.tsx",
844-
// r#"import { css } from "@devup-ui/core";
845-
// <div className={css(a?{bg:"red"}:{bg:"blue"})}/>;
846-
// "#,
847-
// ExtractOption {
848-
// package: "@devup-ui/core".to_string(),
849-
// css_file: None
850-
// }
851-
// )
852-
// .unwrap());
926+
927+
reset_class_map();
928+
assert_debug_snapshot!(extract(
929+
"test.tsx",
930+
r#"import { css } from "@devup-ui/core";
931+
<div className={css(a?{bg:"red"}:{bg:"blue"})}/>;
932+
"#,
933+
ExtractOption {
934+
package: "@devup-ui/core".to_string(),
935+
css_file: None
936+
}
937+
)
938+
.unwrap());
853939
}
854940

855941
#[test]
@@ -867,6 +953,32 @@ mod tests {
867953
}
868954
)
869955
.unwrap());
956+
957+
reset_class_map();
958+
assert_debug_snapshot!(extract(
959+
"test.tsx",
960+
r#"import {Box} from '@devup-ui/core'
961+
<Box color={`$nice`} />
962+
"#,
963+
ExtractOption {
964+
package: "@devup-ui/core".to_string(),
965+
css_file: None
966+
}
967+
)
968+
.unwrap());
969+
970+
reset_class_map();
971+
assert_debug_snapshot!(extract(
972+
"test.tsx",
973+
r#"import {Box} from '@devup-ui/core'
974+
<Box color={("$nice")} />
975+
"#,
976+
ExtractOption {
977+
package: "@devup-ui/core".to_string(),
978+
css_file: None
979+
}
980+
)
981+
.unwrap());
870982
}
871983

872984
#[test]
@@ -1273,6 +1385,33 @@ export {
12731385
}
12741386
)
12751387
.unwrap());
1388+
1389+
reset_class_map();
1390+
assert_debug_snapshot!(extract(
1391+
"test.js",
1392+
r#"import {Center} from '@devup-ui/core'
1393+
<Center bg={SOME_VAR[idx]}>
1394+
</Center>
1395+
"#,
1396+
ExtractOption {
1397+
package: "@devup-ui/core".to_string(),
1398+
css_file: None
1399+
}
1400+
)
1401+
.unwrap());
1402+
1403+
reset_class_map();
1404+
assert_debug_snapshot!(extract(
1405+
"test.js",
1406+
r#"import {Flex} from '@devup-ui/core'
1407+
<Flex bg={{a:"$red", b:"$blue"}[idx]} />
1408+
"#,
1409+
ExtractOption {
1410+
package: "@devup-ui/core".to_string(),
1411+
css_file: None
1412+
}
1413+
)
1414+
.unwrap());
12761415
}
12771416

12781417
#[test]
@@ -1380,23 +1519,23 @@ import {Button} from '@devup/ui'
13801519
.unwrap());
13811520
}
13821521

1383-
// #[test]
1384-
// #[serial]
1385-
// fn css_props_destructuring_assignment() {
1386-
// reset_class_map();
1387-
// assert_debug_snapshot!(extract(
1388-
// "test.js",
1389-
// r#"import {css} from '@devup-ui/core'
1390-
// <div className={css({
1391-
// ...(a ? { bg: 'red' } : { bg: 'blue' }),
1392-
// ...({ p: 1 }),
1393-
// })} />
1394-
// "#,
1395-
// ExtractOption {
1396-
// package: "@devup-ui/core".to_string(),
1397-
// css_file: None
1398-
// }
1399-
// )
1400-
// .unwrap());
1401-
// }
1522+
#[test]
1523+
#[serial]
1524+
fn css_props_destructuring_assignment() {
1525+
reset_class_map();
1526+
assert_debug_snapshot!(extract(
1527+
"test.js",
1528+
r#"import {css} from '@devup-ui/core'
1529+
<div className={css({
1530+
...(a ? { bg: 'red' } : { bg: 'blue' }),
1531+
...({ p: 1 }),
1532+
})} />
1533+
"#,
1534+
ExtractOption {
1535+
package: "@devup-ui/core".to_string(),
1536+
css_file: None
1537+
}
1538+
)
1539+
.unwrap());
1540+
}
14021541
}

‎libs/extractor/src/prop_modify_utils.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ pub fn modify_prop_object<'a>(
117117
pub fn modify_props<'a>(
118118
ast_builder: &AstBuilder<'a>,
119119
props: &mut oxc_allocator::Vec<JSXAttributeItem<'a>>,
120-
styles: &Vec<ExtractStyleProp<'a>>,
120+
styles: &[ExtractStyleProp<'a>],
121121
) {
122122
let mut class_name_prop = None;
123123
let mut style_prop = None;

‎libs/extractor/src/snapshots/extractor__tests__convert_tag-2.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: "extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as={\"secton\"} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<secton />;\n",
8+
}

‎libs/extractor/src/snapshots/extractor__tests__convert_tag-3.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: "extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as={`secton`} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<secton />;\n",
8+
}

‎libs/extractor/src/snapshots/extractor__tests__convert_tag.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: "extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as=\"secton\" />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<secton />;\n",
8+
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.js\",\nr#\"import {css} from '@devup-ui/core'\n <div className={css({\n ...(a ? { bg: 'red' } : { bg: 'blue' }),\n ...({ p: 1 }),\n })} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [
7+
Static(
8+
ExtractStaticStyle {
9+
property: "padding",
10+
value: "4px",
11+
level: 0,
12+
selector: None,
13+
basic: false,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "background",
19+
value: "red",
20+
level: 0,
21+
selector: None,
22+
basic: false,
23+
},
24+
),
25+
Static(
26+
ExtractStaticStyle {
27+
property: "background",
28+
value: "blue",
29+
level: 0,
30+
selector: None,
31+
basic: false,
32+
},
33+
),
34+
],
35+
code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<div className={css(`d2 ${a ? \"d0\" : \"d1\"}`)} />;\n",
36+
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ ExtractOutput {
66
styles: [
77
Static(
88
ExtractStaticStyle {
9-
property: "color",
10-
value: "blue",
9+
property: "background",
10+
value: "red",
1111
level: 0,
1212
selector: Some(
1313
Postfix(
@@ -19,8 +19,8 @@ ExtractOutput {
1919
),
2020
Static(
2121
ExtractStaticStyle {
22-
property: "background",
23-
value: "red",
22+
property: "color",
23+
value: "blue",
2424
level: 0,
2525
selector: Some(
2626
Postfix(

0 commit comments

Comments
 (0)