Skip to content

Commit 7c47c02

Browse files
owjs3901owjs3901
committed
Refactor code
1 parent cb61810 commit 7c47c02

File tree

8 files changed

+359
-325
lines changed

8 files changed

+359
-325
lines changed

‎libs/extractor/src/gen_class_name.rs‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,16 @@ fn gen_class_name<'a>(
3434
if let Some(style_order) = style_order {
3535
st.set_style_order(style_order);
3636
}
37-
let target = st.extract(filename);
38-
39-
Some(ast_builder.expression_string_literal(
40-
SPAN,
41-
ast_builder.atom(match &target {
42-
Some(StyleProperty::ClassName(cls)) => cls,
43-
Some(StyleProperty::Variable { class_name, .. }) => class_name,
44-
None => return None,
45-
}),
46-
None,
47-
))
37+
st.extract(filename).map(|style| {
38+
ast_builder.expression_string_literal(
39+
SPAN,
40+
ast_builder.atom(&match style {
41+
StyleProperty::ClassName(cls) => cls,
42+
StyleProperty::Variable { class_name, .. } => class_name,
43+
}),
44+
None,
45+
)
46+
})
4847
}
4948
ExtractStyleProp::StaticArray(res) => merge_expression_for_class_name(
5049
ast_builder,

‎libs/extractor/src/gen_style.rs‎

Lines changed: 179 additions & 211 deletions
Large diffs are not rendered by default.

‎libs/extractor/src/lib.rs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1496,6 +1496,23 @@ import clsx from 'clsx'
14961496
"test.tsx",
14971497
r#"import { Box } from "@devup-ui/core";
14981498
<Box margin={a === b ? `${b}px` : undefined} />;
1499+
"#,
1500+
ExtractOption {
1501+
package: "@devup-ui/core".to_string(),
1502+
css_dir: "@devup-ui/core".to_string(),
1503+
single_css: true,
1504+
import_main_css: false
1505+
}
1506+
)
1507+
.unwrap()
1508+
));
1509+
1510+
reset_class_map();
1511+
assert_debug_snapshot!(ToBTreeSet::from(
1512+
extract(
1513+
"test.tsx",
1514+
r#"import { Box } from "@devup-ui/core";
1515+
<Box margin={a === b ? undefined : null} />;
14991516
"#,
15001517
ExtractOption {
15011518
package: "@devup-ui/core".to_string(),
@@ -3675,6 +3692,9 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
36753692

36763693
reset_class_map();
36773694
assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),{Box,Text,Flex}=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(Text,{typography:`header`,children:"typo"}),e.jsx(Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false }).unwrap()));
3695+
3696+
reset_class_map();
3697+
assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),{Box,Text,Flex}=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(Box,{["_hover"]:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(Text,{typography:`header`,children:"typo"}),e.jsx(Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false }).unwrap()));
36783698
}
36793699

36803700
#[test]

‎libs/extractor/src/prop_modify_utils.rs‎

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -283,59 +283,55 @@ fn merge_string_expressions<'a>(
283283
let mut other_expressions = vec![];
284284
let mut prev_str = String::new();
285285
for ex in expressions.iter() {
286-
match ex {
287-
Expression::StringLiteral(literal) => {
286+
if let Expression::StringLiteral(literal) = ex {
287+
let target_prev = prev_str.trim();
288+
let target = literal.value.trim();
289+
prev_str = format!(
290+
"{}{}{}",
291+
target_prev,
292+
if target_prev.is_empty() { "" } else { " " },
293+
target
294+
);
295+
} else if let Expression::TemplateLiteral(template) = ex {
296+
for (idx, q) in template.quasis.iter().enumerate() {
288297
let target_prev = prev_str.trim();
289-
let target = literal.value.trim();
290-
prev_str = format!(
291-
"{}{}{}",
292-
target_prev,
293-
if target_prev.is_empty() { "" } else { " " },
294-
target
295-
);
296-
}
297-
Expression::TemplateLiteral(template) => {
298-
for (idx, q) in template.quasis.iter().enumerate() {
299-
let target_prev = prev_str.trim();
300-
let target = q.value.raw.trim();
301-
if idx < template.quasis.len() - 1 {
302-
string_literals.push(format!(
303-
"{}{}{}{}{}",
304-
if !other_expressions.is_empty() || idx > 0 {
305-
" "
306-
} else {
307-
""
308-
},
309-
target_prev,
310-
if !target_prev.is_empty() { " " } else { "" },
311-
target,
312-
if !target.is_empty() && !target.ends_with("typo-") {
313-
" "
314-
} else {
315-
""
316-
}
317-
));
318-
} else {
319-
prev_str = q.value.raw.trim().to_string();
320-
}
298+
let target = q.value.raw.trim();
299+
if idx < template.quasis.len() - 1 {
300+
string_literals.push(format!(
301+
"{}{}{}{}{}",
302+
if !other_expressions.is_empty() || idx > 0 {
303+
" "
304+
} else {
305+
""
306+
},
307+
target_prev,
308+
if !target_prev.is_empty() { " " } else { "" },
309+
target,
310+
if !target.is_empty() && !target.ends_with("typo-") {
311+
" "
312+
} else {
313+
""
314+
}
315+
));
316+
} else {
317+
prev_str = q.value.raw.trim().to_string();
321318
}
322-
other_expressions.extend(template.expressions.clone_in(ast_builder.allocator));
323-
}
324-
ex => {
325-
let target_prev = prev_str.trim();
326-
string_literals.push(format!(
327-
"{}{}{}",
328-
if !other_expressions.is_empty() {
329-
" "
330-
} else {
331-
""
332-
},
333-
target_prev,
334-
if !target_prev.is_empty() { " " } else { "" }
335-
));
336-
other_expressions.push(ex.clone_in(ast_builder.allocator));
337-
prev_str = String::new();
338319
}
320+
other_expressions.extend(template.expressions.clone_in(ast_builder.allocator));
321+
} else {
322+
let target_prev = prev_str.trim();
323+
string_literals.push(format!(
324+
"{}{}{}",
325+
if !other_expressions.is_empty() {
326+
" "
327+
} else {
328+
""
329+
},
330+
target_prev,
331+
if !target_prev.is_empty() { " " } else { "" }
332+
));
333+
other_expressions.push(ex.clone_in(ast_builder.allocator));
334+
prev_str = String::new();
339335
}
340336
}
341337
string_literals.push(format!(
@@ -432,10 +428,10 @@ pub fn convert_style_vars<'a>(
432428
for idx in (0..obj.properties.len()).rev() {
433429
let mut prop = obj.properties.remove(idx);
434430

435-
if let ObjectPropertyKind::ObjectProperty(prop) = &mut prop {
436-
let name = match &prop.key {
437-
PropertyKey::StaticIdentifier(ident) => ident.name,
438-
PropertyKey::StringLiteral(ident) => ident.value,
431+
if let ObjectPropertyKind::ObjectProperty(p) = &mut prop {
432+
let name = match &p.key {
433+
PropertyKey::StaticIdentifier(ident) => Some(ident.name),
434+
PropertyKey::StringLiteral(ident) => Some(ident.value),
439435
etc => {
440436
obj.properties.insert(
441437
idx,
@@ -470,25 +466,29 @@ pub fn convert_style_vars<'a>(
470466
ast_builder.allocator,
471467
),
472468
)),
473-
prop.value.clone_in(ast_builder.allocator),
469+
p.value.clone_in(ast_builder.allocator),
474470
false,
475471
false,
476472
true,
477473
),
478474
);
479-
continue;
475+
None
480476
}
481477
};
482478

483-
if !name.starts_with("--") {
484-
prop.key = PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
485-
SPAN,
486-
ast_builder.atom(&format!("--{name}")),
487-
None,
488-
));
479+
if let Some(name) = name {
480+
if !name.starts_with("--") {
481+
p.key = PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
482+
SPAN,
483+
ast_builder.atom(&format!("--{name}")),
484+
None,
485+
));
486+
}
487+
obj.properties.insert(idx, prop);
489488
}
489+
} else {
490+
obj.properties.insert(idx, prop);
490491
}
491-
obj.properties.insert(idx, prop);
492492
}
493493
}
494494
style_vars

‎libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-10.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 margin={a === b ? undefined : undefined} />;\n\"#,\nExtractOption\n{\n package: \"@devup-ui/core\".to_string(), css_dir:\n \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {},
7+
code: "<div />;\n",
8+
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),{Box,Text,Flex}=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(Box,{[\"_hover\"]:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(Text,{typography:`header`,children:\"typo\"}),e.jsx(Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n package: \"@devup-ui/react\".to_string(), css_dir:\n \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "background",
10+
value: "$text",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "color",
19+
value: "red",
20+
level: 0,
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
Static(
26+
ExtractStaticStyle {
27+
property: "display",
28+
value: "flex",
29+
level: 0,
30+
selector: None,
31+
style_order: Some(
32+
0,
33+
),
34+
},
35+
),
36+
Static(
37+
ExtractStaticStyle {
38+
property: "margin-top",
39+
value: "8px",
40+
level: 0,
41+
selector: None,
42+
style_order: None,
43+
},
44+
),
45+
Typography(
46+
"header",
47+
),
48+
},
49+
code: "\"use strict\";\nimport \"@devup-ui/react/devup-ui.css\";\nObject.defineProperty(exports, Symbol.toStringTag, { value: \"Module\" });\nconst e = require(\"react/jsx-runtime\"), { Box, Text, Flex } = require(\"@devup-ui/react\");\nfunction t() {\n\treturn e.jsxs(\"div\", { children: [\n\t\te.jsx(\"div\", {\n\t\t\t[\"_hover\"]: { bg: \"blue\" },\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b\"\n\t\t}),\n\t\te.jsx(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te.jsx(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"c d\"\n\t\t})\n\t] });\n}\nexports.Lib = t;\n",
50+
}

‎libs/sheet/src/lib.rs‎

Lines changed: 28 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -284,51 +284,40 @@ impl StyleSheet {
284284
for style in styles.iter() {
285285
match style {
286286
ExtractStyleValue::Static(st) => {
287-
let (cls, _) =
288-
match style.extract(if !single_css { Some(filename) } else { None }) {
289-
Some(StyleProperty::ClassName(cls)) => (cls, None),
290-
Some(StyleProperty::Variable {
291-
class_name,
292-
variable_name,
293-
..
294-
}) => (class_name, Some(variable_name)),
295-
None => continue,
296-
};
297-
if self.add_property(
298-
&cls,
299-
st.property(),
300-
st.level(),
301-
st.value(),
302-
st.selector(),
303-
st.style_order(),
304-
if !single_css { Some(filename) } else { None },
305-
) {
287+
if let Some(StyleProperty::ClassName(cls)) =
288+
style.extract(if !single_css { Some(filename) } else { None })
289+
&& self.add_property(
290+
&cls,
291+
st.property(),
292+
st.level(),
293+
st.value(),
294+
st.selector(),
295+
st.style_order(),
296+
if !single_css { Some(filename) } else { None },
297+
)
298+
{
306299
collected = true;
307300
if st.style_order() == Some(0) {
308301
updated_base_style = true;
309302
}
310303
}
311304
}
312305
ExtractStyleValue::Dynamic(dy) => {
313-
let (cls, variable) =
314-
match style.extract(if !single_css { Some(filename) } else { None }) {
315-
Some(StyleProperty::ClassName(cls)) => (cls, None),
316-
Some(StyleProperty::Variable {
317-
class_name,
318-
variable_name,
319-
..
320-
}) => (class_name, Some(variable_name)),
321-
None => continue,
322-
};
323-
if self.add_property(
324-
&cls,
325-
dy.property(),
326-
dy.level(),
327-
&format!("var({})", variable.unwrap()),
328-
dy.selector(),
329-
dy.style_order(),
330-
if !single_css { Some(filename) } else { None },
331-
) {
306+
if let Some(StyleProperty::Variable {
307+
class_name,
308+
variable_name,
309+
..
310+
}) = style.extract(if !single_css { Some(filename) } else { None })
311+
&& self.add_property(
312+
&class_name,
313+
dy.property(),
314+
dy.level(),
315+
&format!("var({})", variable_name),
316+
dy.selector(),
317+
dy.style_order(),
318+
if !single_css { Some(filename) } else { None },
319+
)
320+
{
332321
collected = true;
333322
if dy.style_order() == Some(0) {
334323
updated_base_style = true;
@@ -1746,7 +1735,7 @@ mod tests {
17461735
assert_debug_snapshot!(sheet.create_css(Some("index.tsx"), true));
17471736

17481737
let mut sheet = StyleSheet::default();
1749-
let output = extract("index.tsx", "import {Box,globalCss} from '@devup-ui/core';<Box w={1} h={variable} />;globalCss`div{color:red}`;globalCss({div:{display:flex},fontFaces:[{fontFamily:'Roboto',src:'url(/fonts/Roboto-Regular.ttf)'}]})", ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false }).unwrap();
1738+
let output = extract("index.tsx", "import {Box,globalCss,keyframes,Flex} from '@devup-ui/core';<Flex/>;keyframes({from:{opacity:0},to:{opacity:1}});<Box w={1} h={variable} />;globalCss`div{color:red}`;globalCss({div:{display:flex},imports:['https://test.com/a.css'],fontFaces:[{fontFamily:'Roboto',src:'url(/fonts/Roboto-Regular.ttf)'}]})", ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false }).unwrap();
17501739
sheet.update_styles(&output.styles, "index.tsx", true);
17511740
assert_debug_snapshot!(sheet.create_css(None, true).split("*/").nth(1).unwrap());
17521741
}

‎libs/sheet/src/snapshots/sheet__tests__update_styles-2.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
source: libs/sheet/src/lib.rs
33
expression: "sheet.create_css(None, true).split(\"*/\").nth(1).unwrap()"
44
---
5-
"@layer b;@font-face{font-family:Roboto;src:url(/fonts/Roboto-Regular.ttf)}div{color:red}@layer b{div{display:var(--e)}}.b{height:var(--c)}.a{width:4px}"
5+
"@import \"https://test.com/a.css\";@layer b;@font-face{font-family:Roboto;src:url(/fonts/Roboto-Regular.ttf)}div{color:red}@layer b{div{display:var(--g)}.a{display:flex}}@keyframes b{from{opacity:0}to{opacity:1}}.d{height:var(--e)}.c{width:4px}"

0 commit comments

Comments
 (0)