Skip to content

Commit 525cd1e

Browse files
owjs3901owjs3901
committed
Support variable for typography
1 parent 33956d8 commit 525cd1e

File tree

8 files changed

+186
-17
lines changed

8 files changed

+186
-17
lines changed

‎.changeset/friendly-bags-fly.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 variable for typography

‎libs/extractor/src/gen_class_name.rs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ fn gen_class_name<'a>(
7575
))
7676
}
7777
}
78+
ExtractStyleProp::Expression { expression, .. } => {
79+
Some(expression.clone_in(ast_builder.allocator))
80+
}
7881
}
7982
}
8083
fn is_same_expression<'a>(a: &Expression<'a>, b: &Expression<'a>) -> bool {

‎libs/extractor/src/gen_style.rs‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,36 @@ fn gen_style<'a>(
168168
}
169169
}
170170
},
171+
ExtractStyleProp::Expression { styles, .. } => {
172+
for style in styles {
173+
match style.extract() {
174+
StyleProperty::ClassName(_) => {}
175+
StyleProperty::Variable {
176+
variable_name,
177+
identifier,
178+
..
179+
} => {
180+
properties.push(ObjectPropertyKind::ObjectProperty(
181+
ast_builder.alloc_object_property(
182+
SPAN,
183+
PropertyKind::Init,
184+
PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
185+
SPAN,
186+
variable_name,
187+
None,
188+
)),
189+
Expression::Identifier(
190+
ast_builder.alloc_identifier_reference(SPAN, identifier),
191+
),
192+
false,
193+
false,
194+
false,
195+
),
196+
));
197+
}
198+
}
199+
}
200+
}
171201
}
172202
properties.sort_by_key(|p| {
173203
if let ObjectPropertyKind::ObjectProperty(p) = p {

‎libs/extractor/src/lib.rs‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ pub enum ExtractStyleProp<'a> {
3232
consequent: Option<Box<ExtractStyleProp<'a>>>,
3333
alternate: Option<Box<ExtractStyleProp<'a>>>,
3434
},
35+
Expression {
36+
styles: Vec<ExtractStyleValue>,
37+
expression: Expression<'a>,
38+
},
3539
}
3640
impl ExtractStyleProp<'_> {
3741
pub fn extract(&self) -> Vec<ExtractStyleValue> {
@@ -54,6 +58,7 @@ impl ExtractStyleProp<'_> {
5458
ExtractStyleProp::StaticArray(ref array) => {
5559
array.iter().flat_map(|s| s.extract()).collect()
5660
}
61+
ExtractStyleProp::Expression { styles, .. } => styles.to_vec(),
5762
}
5863
}
5964
}
@@ -1034,6 +1039,48 @@ mod tests {
10341039
)
10351040
.unwrap());
10361041
}
1042+
#[test]
1043+
#[serial]
1044+
fn apply_var_typography() {
1045+
reset_class_map();
1046+
assert_debug_snapshot!(extract(
1047+
"test.tsx",
1048+
r#"import {Text} from '@devup-ui/core'
1049+
<Text typography={variable} />
1050+
"#,
1051+
ExtractOption {
1052+
package: "@devup-ui/core".to_string(),
1053+
css_file: None
1054+
}
1055+
)
1056+
.unwrap());
1057+
1058+
reset_class_map();
1059+
assert_debug_snapshot!(extract(
1060+
"test.tsx",
1061+
r#"import {Text} from '@devup-ui/core'
1062+
<Text typography={bo ? a : b} />
1063+
"#,
1064+
ExtractOption {
1065+
package: "@devup-ui/core".to_string(),
1066+
css_file: None
1067+
}
1068+
)
1069+
.unwrap());
1070+
1071+
reset_class_map();
1072+
assert_debug_snapshot!(extract(
1073+
"test.tsx",
1074+
r#"import {Text} from '@devup-ui/core'
1075+
<Text typography={`${bo ? a : b}`} />
1076+
"#,
1077+
ExtractOption {
1078+
package: "@devup-ui/core".to_string(),
1079+
css_file: None
1080+
}
1081+
)
1082+
.unwrap());
1083+
}
10371084

10381085
#[test]
10391086
#[serial]

‎libs/extractor/src/snapshots/extractor__tests__apply_var_typography-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 {Text} from '@devup-ui/core'\n <Text typography={bo ? a : b} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<span className={bo ? `typo-${a}` : `typo-${b}`} />;\n",
8+
}

‎libs/extractor/src/snapshots/extractor__tests__apply_var_typography-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 {Text} from '@devup-ui/core'\n <Text typography={`${bo ? a : b}`} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<span className={`typo-${`${bo ? a : b}`}`} />;\n",
8+
}

‎libs/extractor/src/snapshots/extractor__tests__apply_var_typography.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 {Text} from '@devup-ui/core'\n <Text typography={variable} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<span className={`typo-${variable}`} />;\n",
8+
}

‎libs/extractor/src/style_extractor.rs‎

Lines changed: 77 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
use crate::utils::{expression_to_code, is_special_property};
22
use crate::ExtractStyleProp;
33
use oxc_allocator::CloneIn;
4-
use oxc_ast::ast::{Expression, JSXAttributeValue, ObjectPropertyKind, PropertyKey};
4+
use oxc_ast::ast::{
5+
Expression, JSXAttributeValue, ObjectPropertyKind, PropertyKey, TemplateElementValue,
6+
};
57

68
use crate::extract_style::ExtractStyleValue::{Dynamic, Static, Typography};
79
use crate::extract_style::{ExtractDynamicStyle, ExtractStaticStyle};
@@ -422,14 +424,43 @@ pub fn extract_style_from_expression<'a>(
422424
))
423425
})])
424426
} else {
425-
ExtractResult::ExtractStyle(vec![ExtractStyleProp::Static(Dynamic(
426-
ExtractDynamicStyle::new(
427-
name,
428-
level,
429-
expression_to_code(expression).as_str(),
430-
selector.map(|s| s.into()),
431-
),
432-
))])
427+
if typo {
428+
ExtractResult::ExtractStyle(vec![ExtractStyleProp::Expression {
429+
expression: ast_builder.expression_template_literal(
430+
SPAN,
431+
ast_builder.vec_from_array([
432+
ast_builder.template_element(
433+
SPAN,
434+
false,
435+
TemplateElementValue {
436+
raw: ast_builder.atom("typo-"),
437+
cooked: None,
438+
},
439+
),
440+
ast_builder.template_element(
441+
SPAN,
442+
true,
443+
TemplateElementValue {
444+
raw: ast_builder.atom(""),
445+
cooked: None,
446+
},
447+
),
448+
]),
449+
ast_builder
450+
.vec_from_array([expression.clone_in(ast_builder.allocator)]),
451+
),
452+
styles: vec![],
453+
}])
454+
} else {
455+
ExtractResult::ExtractStyle(vec![ExtractStyleProp::Static(Dynamic(
456+
ExtractDynamicStyle::new(
457+
name,
458+
level,
459+
expression_to_code(expression).as_str(),
460+
selector.map(|s| s.into()),
461+
),
462+
))])
463+
}
433464
}
434465
} else {
435466
ExtractResult::Maintain
@@ -453,14 +484,43 @@ pub fn extract_style_from_expression<'a>(
453484
if IGNORED_IDENTIFIERS.contains(&identifier.name.as_str()) {
454485
ExtractResult::Maintain
455486
} else if let Some(name) = name {
456-
ExtractResult::ExtractStyle(vec![ExtractStyleProp::Static(Dynamic(
457-
ExtractDynamicStyle::new(
458-
name,
459-
level,
460-
identifier.name.as_str(),
461-
selector.map(|s| s.into()),
462-
),
463-
))])
487+
if typo {
488+
ExtractResult::ExtractStyle(vec![ExtractStyleProp::Expression {
489+
expression: ast_builder.expression_template_literal(
490+
SPAN,
491+
ast_builder.vec_from_array([
492+
ast_builder.template_element(
493+
SPAN,
494+
false,
495+
TemplateElementValue {
496+
raw: ast_builder.atom("typo-"),
497+
cooked: None,
498+
},
499+
),
500+
ast_builder.template_element(
501+
SPAN,
502+
true,
503+
TemplateElementValue {
504+
raw: ast_builder.atom(""),
505+
cooked: None,
506+
},
507+
),
508+
]),
509+
ast_builder
510+
.vec_from_array([expression.clone_in(ast_builder.allocator)]),
511+
),
512+
styles: vec![],
513+
}])
514+
} else {
515+
ExtractResult::ExtractStyle(vec![ExtractStyleProp::Static(Dynamic(
516+
ExtractDynamicStyle::new(
517+
name,
518+
level,
519+
identifier.name.as_str(),
520+
selector.map(|s| s.into()),
521+
),
522+
))])
523+
}
464524
} else {
465525
ExtractResult::Maintain
466526
}

0 commit comments

Comments
 (0)