Skip to content

Commit abfe5e5

Browse files
owjs3901owjs3901
committed
Optimizing, Fix styleOrder issue
1 parent b9d8a17 commit abfe5e5

14 files changed

Lines changed: 643 additions & 186 deletions

‎.changeset/proud-paws-carry.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 styleOrder issue

‎libs/extractor/src/gen_style.rs‎

Lines changed: 49 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -220,51 +220,49 @@ fn gen_style<'a>(
220220
},
221221
ExtractStyleProp::Expression { styles, .. } => {
222222
for style in styles {
223-
match style.extract() {
224-
StyleProperty::ClassName(_) => {}
225-
StyleProperty::Variable {
226-
variable_name,
227-
identifier,
228-
..
229-
} => {
230-
properties.push(ObjectPropertyKind::ObjectProperty(
231-
ast_builder.alloc_object_property(
223+
if let StyleProperty::Variable {
224+
variable_name,
225+
identifier,
226+
..
227+
} = style.extract()
228+
{
229+
properties.push(ObjectPropertyKind::ObjectProperty(
230+
ast_builder.alloc_object_property(
231+
SPAN,
232+
PropertyKind::Init,
233+
PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
232234
SPAN,
233-
PropertyKind::Init,
234-
PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
235-
SPAN,
236-
ast_builder.atom(&variable_name),
237-
None,
238-
)),
239-
Expression::Identifier(ast_builder.alloc_identifier_reference(
235+
ast_builder.atom(&variable_name),
236+
None,
237+
)),
238+
Expression::Identifier(
239+
ast_builder.alloc_identifier_reference(
240240
SPAN,
241241
ast_builder.atom(&identifier),
242-
)),
243-
false,
244-
false,
245-
false,
242+
),
246243
),
247-
));
248-
}
244+
false,
245+
false,
246+
false,
247+
),
248+
));
249249
}
250250
}
251251
}
252252
ExtractStyleProp::MemberExpression { map, expression } => {
253253
let mut tmp_map = BTreeMap::<String, Vec<(String, String)>>::new();
254254
for (key, value) in map.iter() {
255255
for style in value.extract() {
256-
match style.extract() {
257-
StyleProperty::ClassName(_) => {}
258-
StyleProperty::Variable {
259-
variable_name,
260-
identifier,
261-
..
262-
} => {
263-
tmp_map
264-
.entry(variable_name)
265-
.or_default()
266-
.push((key.to_string(), identifier));
267-
}
256+
if let StyleProperty::Variable {
257+
variable_name,
258+
identifier,
259+
..
260+
} = style.extract()
261+
{
262+
tmp_map
263+
.entry(variable_name)
264+
.or_default()
265+
.push((key.to_string(), identifier));
268266
}
269267
}
270268
}
@@ -359,29 +357,24 @@ pub fn apply_style_attribute<'a>(
359357
) {
360358
if let Some(ref mut value) = style_prop.value {
361359
if let JSXAttributeValue::ExpressionContainer(container) = value {
362-
match container.expression {
363-
JSXExpression::ObjectExpression(ref mut obj) => {
364-
expression.properties.insert(
365-
0,
366-
ObjectPropertyKind::SpreadProperty(ast_builder.alloc_spread_element(
367-
SPAN,
368-
Expression::ObjectExpression(obj.clone_in(ast_builder.allocator)),
369-
)),
370-
);
371-
}
372-
JSXExpression::Identifier(ref ident) => {
373-
expression.properties.insert(
374-
0,
375-
ObjectPropertyKind::SpreadProperty(ast_builder.alloc_spread_element(
376-
SPAN,
377-
Expression::Identifier(ident.clone_in(ast_builder.allocator)),
378-
)),
379-
);
380-
}
381-
_ => {}
382-
};
360+
if let Some(spread_property) = match &container.expression {
361+
JSXExpression::ObjectExpression(obj) => Some(Expression::ObjectExpression(
362+
obj.clone_in(ast_builder.allocator),
363+
)),
364+
JSXExpression::Identifier(ident) => Some(Expression::Identifier(
365+
ident.clone_in(ast_builder.allocator),
366+
)),
367+
_ => None,
368+
} {
369+
expression.properties.insert(
370+
0,
371+
ObjectPropertyKind::SpreadProperty(
372+
ast_builder.alloc_spread_element(SPAN, spread_property),
373+
),
374+
);
375+
}
383376
container.expression = JSXExpression::ObjectExpression(ast_builder.alloc(expression));
384-
};
377+
}
385378
} else {
386379
style_prop.value = Some(JSXAttributeValue::ExpressionContainer(
387380
ast_builder.alloc_jsx_expression_container(

‎libs/extractor/src/lib.rs‎

Lines changed: 104 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ mod tests {
228228
extract(
229229
"test.tsx",
230230
r#"import {Box} from '@devup-ui/core'
231-
<Box as="secton" />
231+
<Box as="section" />
232232
"#,
233233
ExtractOption {
234234
package: "@devup-ui/core".to_string(),
@@ -243,7 +243,7 @@ mod tests {
243243
extract(
244244
"test.tsx",
245245
r#"import {Box} from '@devup-ui/core'
246-
<Box as={"secton"} />
246+
<Box as={"section"} />
247247
"#,
248248
ExtractOption {
249249
package: "@devup-ui/core".to_string(),
@@ -256,7 +256,35 @@ mod tests {
256256
extract(
257257
"test.tsx",
258258
r#"import {Box} from '@devup-ui/core'
259-
<Box as={`secton`} />
259+
<Box as={`section`} />
260+
"#,
261+
ExtractOption {
262+
package: "@devup-ui/core".to_string(),
263+
css_file: None
264+
}
265+
)
266+
.unwrap()
267+
));
268+
269+
reset_class_map();
270+
assert_debug_snapshot!(ToBTreeSet::from(
271+
extract(
272+
"test.tsx",
273+
r#"import {Box} from '@devup-ui/core'
274+
<Box as={"section"}></Box>
275+
"#,
276+
ExtractOption {
277+
package: "@devup-ui/core".to_string(),
278+
css_file: None
279+
}
280+
)
281+
.unwrap()
282+
));
283+
assert_debug_snapshot!(ToBTreeSet::from(
284+
extract(
285+
"test.tsx",
286+
r#"import {Box} from '@devup-ui/core'
287+
<Box as={`section`}></Box>
260288
"#,
261289
ExtractOption {
262290
package: "@devup-ui/core".to_string(),
@@ -268,7 +296,7 @@ mod tests {
268296
// assert_debug_snapshot!(extract(
269297
// "test.tsx",
270298
// r#"import {Box} from '@devup-ui/core'
271-
// <Box as={b ? "div":"secton"} />
299+
// <Box as={b ? "div":"section"} />
272300
// "#,
273301
// ExtractOption {
274302
// package: "@devup-ui/core".to_string(),
@@ -279,7 +307,7 @@ mod tests {
279307
// assert_debug_snapshot!(extract(
280308
// "test.tsx",
281309
// r#"import {Box} from '@devup-ui/core'
282-
// <Box as={b ? undefined:"secton"} />
310+
// <Box as={b ? undefined:"section"} />
283311
// "#,
284312
// ExtractOption {
285313
// package: "@devup-ui/core".to_string(),
@@ -291,7 +319,7 @@ mod tests {
291319
// assert_debug_snapshot!(extract(
292320
// "test.tsx",
293321
// r#"import {Box} from '@devup-ui/core'
294-
// <Box as={b ? null:"secton"} />
322+
// <Box as={b ? null:"section"} />
295323
// "#,
296324
// ExtractOption {
297325
// package: "@devup-ui/core".to_string(),
@@ -2850,4 +2878,74 @@ export {
28502878
.unwrap()
28512879
));
28522880
}
2881+
2882+
#[test]
2883+
#[serial]
2884+
fn style_order2() {
2885+
reset_class_map();
2886+
assert_debug_snapshot!(ToBTreeSet::from(
2887+
extract(
2888+
"test.jsx",
2889+
r#"import {Box, css} from '@devup-ui/core'
2890+
<Box styleOrder="20" p="4" _hover={{ bg: ["red", "blue"]}}
2891+
className={css({color:"white", styleOrder:"100"})}
2892+
2893+
selectors={{
2894+
"*[aria-diabled='true'] &": {
2895+
opacity: 0.5
2896+
}
2897+
}} />
2898+
"#,
2899+
ExtractOption {
2900+
package: "@devup-ui/core".to_string(),
2901+
css_file: None
2902+
}
2903+
)
2904+
.unwrap()
2905+
));
2906+
2907+
reset_class_map();
2908+
assert_debug_snapshot!(ToBTreeSet::from(
2909+
extract(
2910+
"test.jsx",
2911+
r#"import {Box, css} from '@devup-ui/core'
2912+
<Box styleOrder={"20"} p="4" _hover={{ bg: ["red", "blue"]}}
2913+
className={css({color:"white", styleOrder:("100")})}
2914+
2915+
selectors={{
2916+
"*[aria-diabled='true'] &": {
2917+
opacity: 0.5
2918+
}
2919+
}} />
2920+
"#,
2921+
ExtractOption {
2922+
package: "@devup-ui/core".to_string(),
2923+
css_file: None
2924+
}
2925+
)
2926+
.unwrap()
2927+
));
2928+
2929+
reset_class_map();
2930+
assert_debug_snapshot!(ToBTreeSet::from(
2931+
extract(
2932+
"test.jsx",
2933+
r#"import {Box, css} from '@devup-ui/core'
2934+
<Box styleOrder={`20`} p="4" _hover={{ bg: ["red", "blue"]}}
2935+
className={css({color:"white", styleOrder:`100`})}
2936+
2937+
selectors={{
2938+
"*[aria-diabled='true'] &": {
2939+
opacity: 0.5
2940+
}
2941+
}} />
2942+
"#,
2943+
ExtractOption {
2944+
package: "@devup-ui/core".to_string(),
2945+
css_file: None
2946+
}
2947+
)
2948+
.unwrap()
2949+
));
2950+
}
28532951
}

‎libs/extractor/src/snapshots/extractor__tests__convert_tag-2.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
source: libs/extractor/src/lib.rs
3-
expression: "ToBTreeSet::from(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())"
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as={\"section\"} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
44
---
55
ToBTreeSet {
66
styles: {},
7-
code: "<secton />;\n",
7+
code: "<section />;\n",
88
}

‎libs/extractor/src/snapshots/extractor__tests__convert_tag-3.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
source: libs/extractor/src/lib.rs
3-
expression: "ToBTreeSet::from(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())"
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as={`section`} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
44
---
55
ToBTreeSet {
66
styles: {},
7-
code: "<secton />;\n",
7+
code: "<section />;\n",
88
}

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

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

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
source: libs/extractor/src/lib.rs
3-
expression: "ToBTreeSet::from(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())"
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as=\"section\" />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
44
---
55
ToBTreeSet {
66
styles: {},
7-
code: "<secton />;\n",
7+
code: "<section />;\n",
88
}

0 commit comments

Comments
 (0)