Skip to content

Commit ab5e889

Browse files
owjs3901owjs3901
committed
Add testcase
1 parent 52ccf02 commit ab5e889

13 files changed

+493
-95
lines changed

‎libs/extractor/src/extractor/extract_style_from_styled.rs‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ use crate::{
77
extract_style::extract_style_value::ExtractStyleValue,
88
extractor::{ExtractResult, extract_style_from_expression::extract_style_from_expression},
99
gen_class_name::gen_class_names,
10+
gen_style::gen_styles,
1011
utils::{merge_object_expressions, wrap_array_filter},
1112
};
1213
use oxc_allocator::CloneIn;
@@ -101,7 +102,12 @@ pub fn extract_style_from_styled<'a>(
101102
let class_name =
102103
gen_class_names(ast_builder, &mut props_styles, None, split_filename);
103104

104-
let new_expr = create_styled_component(ast_builder, &tag_name, &class_name, &None);
105+
let new_expr = create_styled_component(
106+
ast_builder,
107+
&tag_name,
108+
&class_name,
109+
&gen_styles(ast_builder, &props_styles, None),
110+
);
105111
let result = ExtractResult {
106112
styles: props_styles,
107113
tag: Some(ast_builder.expression_string_literal(
@@ -152,8 +158,12 @@ pub fn extract_style_from_styled<'a>(
152158

153159
let class_name =
154160
gen_class_names(ast_builder, &mut styles, style_order, split_filename);
155-
let styled_component =
156-
create_styled_component(ast_builder, &tag_name, &class_name, &style_vars);
161+
let styled_component = create_styled_component(
162+
ast_builder,
163+
&tag_name,
164+
&class_name,
165+
&gen_styles(ast_builder, &styles, None),
166+
);
157167

158168
let result = ExtractResult {
159169
styles,

‎libs/extractor/src/lib.rs‎

Lines changed: 147 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -7960,98 +7960,153 @@ keyframes({
79607960
)
79617961
.unwrap()
79627962
));
7963+
7964+
reset_class_map();
7965+
assert_debug_snapshot!(ToBTreeSet::from(
7966+
extract(
7967+
"test.tsx",
7968+
r#"import {styled} from '@devup-ui/core'
7969+
const StyledDiv = styled("div")`
7970+
color: ${obj.color};
7971+
padding: ${func()};
7972+
background: ${obj.func()};
7973+
`
7974+
"#,
7975+
ExtractOption {
7976+
package: "@devup-ui/core".to_string(),
7977+
css_dir: "@devup-ui/core".to_string(),
7978+
single_css: false,
7979+
import_main_css: false
7980+
}
7981+
)
7982+
.unwrap()
7983+
));
7984+
7985+
reset_class_map();
7986+
assert_debug_snapshot!(ToBTreeSet::from(
7987+
extract(
7988+
"test.tsx",
7989+
r#"import {styled} from '@devup-ui/core'
7990+
const StyledDiv = styled("div")({ bg: obj.bg, padding: func(), color: obj.color() })
7991+
"#,
7992+
ExtractOption {
7993+
package: "@devup-ui/core".to_string(),
7994+
css_dir: "@devup-ui/core".to_string(),
7995+
single_css: false,
7996+
import_main_css: false
7997+
}
7998+
)
7999+
.unwrap()
8000+
));
8001+
8002+
reset_class_map();
8003+
assert_debug_snapshot!(ToBTreeSet::from(
8004+
extract(
8005+
"test.tsx",
8006+
r#"import {styled} from '@devup-ui/core'
8007+
const StyledDiv = styled.div({ bg: obj.bg, padding: func(), color: obj.color() })
8008+
"#,
8009+
ExtractOption {
8010+
package: "@devup-ui/core".to_string(),
8011+
css_dir: "@devup-ui/core".to_string(),
8012+
single_css: false,
8013+
import_main_css: false
8014+
}
8015+
)
8016+
.unwrap()
8017+
));
79638018
}
79648019

7965-
// #[test]
7966-
// #[serial]
7967-
// fn test_styled_with_variable_like_emotion_props() {
7968-
// // Test 3: styled.div`css with ${props => props.bg}` - props를 사용하는 함수형 변수
7969-
// reset_class_map();
7970-
// assert_debug_snapshot!(ToBTreeSet::from(
7971-
// extract(
7972-
// "test.tsx",
7973-
// r#"import {styled} from '@devup-ui/core'
7974-
// const StyledDiv = styled.div`
7975-
// background: ${props => props.bg};
7976-
// color: red;
7977-
// `
7978-
// "#,
7979-
// ExtractOption {
7980-
// package: "@devup-ui/core".to_string(),
7981-
// css_dir: "@devup-ui/core".to_string(),
7982-
// single_css: false,
7983-
// import_main_css: false
7984-
// }
7985-
// )
7986-
// .unwrap()
7987-
// ));
7988-
7989-
// // Test 4: styled(Component)`css with ${variable}` - 컴포넌트에 외부 변수 사용
7990-
// reset_class_map();
7991-
// assert_debug_snapshot!(ToBTreeSet::from(
7992-
// extract(
7993-
// "test.tsx",
7994-
// r#"import {styled, Box} from '@devup-ui/core'
7995-
// const fontSize = '18px';
7996-
// const StyledComponent = styled(Box)`
7997-
// font-size: ${fontSize};
7998-
// color: ${props => props.color || 'black'};
7999-
// `
8000-
// "#,
8001-
// ExtractOption {
8002-
// package: "@devup-ui/core".to_string(),
8003-
// css_dir: "@devup-ui/core".to_string(),
8004-
// single_css: false,
8005-
// import_main_css: false
8006-
// }
8007-
// )
8008-
// .unwrap()
8009-
// ));
8010-
8011-
// // Test 5: styled.div`css with multiple ${variables}` - 여러 변수 조합
8012-
// reset_class_map();
8013-
// assert_debug_snapshot!(ToBTreeSet::from(
8014-
// extract(
8015-
// "test.tsx",
8016-
// r#"import {styled} from '@devup-ui/core'
8017-
// const margin = '10px';
8018-
// const padding = '20px';
8019-
// const StyledDiv = styled.div`
8020-
// margin: ${margin};
8021-
// padding: ${padding};
8022-
// background: ${props => props.bg || 'white'};
8023-
// `
8024-
// "#,
8025-
// ExtractOption {
8026-
// package: "@devup-ui/core".to_string(),
8027-
// css_dir: "@devup-ui/core".to_string(),
8028-
// single_css: false,
8029-
// import_main_css: false
8030-
// }
8031-
// )
8032-
// .unwrap()
8033-
// ));
8034-
8035-
// // Test 6: styled.div`css with ${expression}` - 표현식 사용
8036-
// reset_class_map();
8037-
// assert_debug_snapshot!(ToBTreeSet::from(
8038-
// extract(
8039-
// "test.tsx",
8040-
// r#"import {styled} from '@devup-ui/core'
8041-
// const isActive = true;
8042-
// const StyledDiv = styled.div`
8043-
// color: ${isActive ? 'red' : 'blue'};
8044-
// opacity: ${isActive ? 1 : 0.5};
8045-
// `
8046-
// "#,
8047-
// ExtractOption {
8048-
// package: "@devup-ui/core".to_string(),
8049-
// css_dir: "@devup-ui/core".to_string(),
8050-
// single_css: false,
8051-
// import_main_css: false
8052-
// }
8053-
// )
8054-
// .unwrap()
8055-
// ));
8056-
// }
8020+
#[test]
8021+
#[serial]
8022+
fn test_styled_with_variable_like_emotion_props() {
8023+
// Test 3: styled.div`css with ${props => props.bg}` - props를 사용하는 함수형 변수
8024+
reset_class_map();
8025+
assert_debug_snapshot!(ToBTreeSet::from(
8026+
extract(
8027+
"test.tsx",
8028+
r#"import {styled} from '@devup-ui/core'
8029+
const StyledDiv = styled.div`
8030+
background: ${props => props.bg};
8031+
color: red;
8032+
`
8033+
"#,
8034+
ExtractOption {
8035+
package: "@devup-ui/core".to_string(),
8036+
css_dir: "@devup-ui/core".to_string(),
8037+
single_css: false,
8038+
import_main_css: false
8039+
}
8040+
)
8041+
.unwrap()
8042+
));
8043+
8044+
// Test 4: styled(Component)`css with ${variable}` - 컴포넌트에 외부 변수 사용
8045+
reset_class_map();
8046+
assert_debug_snapshot!(ToBTreeSet::from(
8047+
extract(
8048+
"test.tsx",
8049+
r#"import {styled, Box} from '@devup-ui/core'
8050+
const fontSize = '18px';
8051+
const StyledComponent = styled(Box)`
8052+
font-size: ${fontSize};
8053+
color: ${props => props.color || 'black'};
8054+
`
8055+
"#,
8056+
ExtractOption {
8057+
package: "@devup-ui/core".to_string(),
8058+
css_dir: "@devup-ui/core".to_string(),
8059+
single_css: false,
8060+
import_main_css: false
8061+
}
8062+
)
8063+
.unwrap()
8064+
));
8065+
8066+
// Test 5: styled.div`css with multiple ${variables}` - 여러 변수 조합
8067+
reset_class_map();
8068+
assert_debug_snapshot!(ToBTreeSet::from(
8069+
extract(
8070+
"test.tsx",
8071+
r#"import {styled} from '@devup-ui/core'
8072+
const margin = '10px';
8073+
const padding = '20px';
8074+
const StyledDiv = styled.div`
8075+
margin: ${margin};
8076+
padding: ${padding};
8077+
background: ${props => props.bg || 'white'};
8078+
`
8079+
"#,
8080+
ExtractOption {
8081+
package: "@devup-ui/core".to_string(),
8082+
css_dir: "@devup-ui/core".to_string(),
8083+
single_css: false,
8084+
import_main_css: false
8085+
}
8086+
)
8087+
.unwrap()
8088+
));
8089+
8090+
// Test 6: styled.div`css with ${expression}` - 표현식 사용
8091+
reset_class_map();
8092+
assert_debug_snapshot!(ToBTreeSet::from(
8093+
extract(
8094+
"test.tsx",
8095+
r#"import {styled} from '@devup-ui/core'
8096+
const isActive = true;
8097+
const StyledDiv = styled.div`
8098+
color: ${isActive ? 'red' : 'blue'};
8099+
opacity: ${isActive ? 1 : 0.5};
8100+
`
8101+
"#,
8102+
ExtractOption {
8103+
package: "@devup-ui/core".to_string(),
8104+
css_dir: "@devup-ui/core".to_string(),
8105+
single_css: false,
8106+
import_main_css: false
8107+
}
8108+
)
8109+
.unwrap()
8110+
));
8111+
}
80578112
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n const primaryColor = 'blue';\n const padding = '16px';\n const StyledDiv = styled(\"div\")`\n color: ${primaryColor};\n padding: ${padding};\n `\n \"#,\nExtractOption\n{\n package: \"@devup-ui/core\".to_string(), css_dir:\n \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Dynamic(
8+
ExtractDynamicStyle {
9+
property: "color",
10+
level: 0,
11+
identifier: "primaryColor",
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Dynamic(
17+
ExtractDynamicStyle {
18+
property: "padding",
19+
level: 0,
20+
identifier: "padding",
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
},
26+
code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst primaryColor = \"blue\";\nconst padding = \"16px\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": padding,\n\t\t\"--b\": primaryColor\n\t},\n\t...style\n}} />;\n",
27+
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n const primaryColor = 'blue';\n const padding = '16px';\n const StyledDiv = styled(\"div\")({ bg: primaryColor, padding })\n \"#,\nExtractOption\n{\n package: \"@devup-ui/core\".to_string(), css_dir:\n \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Dynamic(
8+
ExtractDynamicStyle {
9+
property: "background",
10+
level: 0,
11+
identifier: "primaryColor",
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Dynamic(
17+
ExtractDynamicStyle {
18+
property: "padding",
19+
level: 0,
20+
identifier: "padding",
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
},
26+
code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst primaryColor = \"blue\";\nconst padding = \"16px\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": primaryColor,\n\t\t\"--b\": padding\n\t},\n\t...style\n}} />;\n",
27+
}

‎libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n const primaryColor = 'blue';\n const padding = '16px';\n const StyledDiv = styled.div({ bg: primaryColor, padding })\n \"#,\nExtractOption\n{\n package: \"@devup-ui/core\".to_string(), css_dir:\n \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Dynamic(
8+
ExtractDynamicStyle {
9+
property: "background",
10+
level: 0,
11+
identifier: "primaryColor",
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Dynamic(
17+
ExtractDynamicStyle {
18+
property: "padding",
19+
level: 0,
20+
identifier: "padding",
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
},
26+
code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst primaryColor = \"blue\";\nconst padding = \"16px\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": primaryColor,\n\t\t\"--b\": padding\n\t},\n\t...style\n}} />;\n",
27+
}

0 commit comments

Comments
 (0)