Skip to content

Commit 4e4c2d5

Browse files
owjs3901owjs3901
committed
Implement styled with variable
1 parent c65ad84 commit 4e4c2d5

6 files changed

+234
-95
lines changed

‎libs/extractor/src/lib.rs‎

Lines changed: 95 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -7775,105 +7775,105 @@ keyframes({
77757775
));
77767776
}
77777777

7778-
// #[test]
7779-
// #[serial]
7780-
// fn test_styled_with_variable() {
7781-
// // Test 1: styled.div({ bg: "$text" })
7782-
// reset_class_map();
7783-
// assert_debug_snapshot!(ToBTreeSet::from(
7784-
// extract(
7785-
// "test.tsx",
7786-
// r#"import {styled} from '@devup-ui/core'
7787-
// const StyledDiv = styled.div({ bg: "$text", color: "$primary" })
7788-
// "#,
7789-
// ExtractOption {
7790-
// package: "@devup-ui/core".to_string(),
7791-
// css_dir: "@devup-ui/core".to_string(),
7792-
// single_css: false,
7793-
// import_main_css: false
7794-
// }
7795-
// )
7796-
// .unwrap()
7797-
// ));
7778+
#[test]
7779+
#[serial]
7780+
fn test_styled_with_variable() {
7781+
// Test 1: styled.div({ bg: "$text" })
7782+
reset_class_map();
7783+
assert_debug_snapshot!(ToBTreeSet::from(
7784+
extract(
7785+
"test.tsx",
7786+
r#"import {styled} from '@devup-ui/core'
7787+
const StyledDiv = styled.div({ bg: "$text", color: "$primary" })
7788+
"#,
7789+
ExtractOption {
7790+
package: "@devup-ui/core".to_string(),
7791+
css_dir: "@devup-ui/core".to_string(),
7792+
single_css: false,
7793+
import_main_css: false
7794+
}
7795+
)
7796+
.unwrap()
7797+
));
77987798

7799-
// // Test 2: styled("div")({ color: "$primary" })
7800-
// reset_class_map();
7801-
// assert_debug_snapshot!(ToBTreeSet::from(
7802-
// extract(
7803-
// "test.tsx",
7804-
// r#"import {styled} from '@devup-ui/core'
7805-
// const StyledDiv = styled("div")({ bg: "$text", fontSize: 16 })
7806-
// "#,
7807-
// ExtractOption {
7808-
// package: "@devup-ui/core".to_string(),
7809-
// css_dir: "@devup-ui/core".to_string(),
7810-
// single_css: false,
7811-
// import_main_css: false
7812-
// }
7813-
// )
7814-
// .unwrap()
7815-
// ));
7799+
// Test 2: styled("div")({ color: "$primary" })
7800+
reset_class_map();
7801+
assert_debug_snapshot!(ToBTreeSet::from(
7802+
extract(
7803+
"test.tsx",
7804+
r#"import {styled} from '@devup-ui/core'
7805+
const StyledDiv = styled("div")({ bg: "$text", fontSize: 16 })
7806+
"#,
7807+
ExtractOption {
7808+
package: "@devup-ui/core".to_string(),
7809+
css_dir: "@devup-ui/core".to_string(),
7810+
single_css: false,
7811+
import_main_css: false
7812+
}
7813+
)
7814+
.unwrap()
7815+
));
78167816

7817-
// // Test 3: styled.div`css`
7818-
// reset_class_map();
7819-
// assert_debug_snapshot!(ToBTreeSet::from(
7820-
// extract(
7821-
// "test.tsx",
7822-
// r#"import {styled} from '@devup-ui/core'
7823-
// const StyledDiv = styled.div`
7824-
// background: var(--text);
7825-
// color: var(--primary);
7826-
// `
7827-
// "#,
7828-
// ExtractOption {
7829-
// package: "@devup-ui/core".to_string(),
7830-
// css_dir: "@devup-ui/core".to_string(),
7831-
// single_css: false,
7832-
// import_main_css: false
7833-
// }
7834-
// )
7835-
// .unwrap()
7836-
// ));
7817+
// Test 3: styled.div`css`
7818+
reset_class_map();
7819+
assert_debug_snapshot!(ToBTreeSet::from(
7820+
extract(
7821+
"test.tsx",
7822+
r#"import {styled} from '@devup-ui/core'
7823+
const StyledDiv = styled.div`
7824+
background: var(--text);
7825+
color: var(--primary);
7826+
`
7827+
"#,
7828+
ExtractOption {
7829+
package: "@devup-ui/core".to_string(),
7830+
css_dir: "@devup-ui/core".to_string(),
7831+
single_css: false,
7832+
import_main_css: false
7833+
}
7834+
)
7835+
.unwrap()
7836+
));
78377837

7838-
// // Test 4: styled(Component)({ bg: "$text" })
7839-
// reset_class_map();
7840-
// assert_debug_snapshot!(ToBTreeSet::from(
7841-
// extract(
7842-
// "test.tsx",
7843-
// r#"import {styled, Box} from '@devup-ui/core'
7844-
// const StyledComponent = styled(Box)({ bg: "$text", _hover: { bg: "$primary" } })
7845-
// "#,
7846-
// ExtractOption {
7847-
// package: "@devup-ui/core".to_string(),
7848-
// css_dir: "@devup-ui/core".to_string(),
7849-
// single_css: false,
7850-
// import_main_css: false
7851-
// }
7852-
// )
7853-
// .unwrap()
7854-
// ));
7838+
// Test 4: styled(Component)({ bg: "$text" })
7839+
reset_class_map();
7840+
assert_debug_snapshot!(ToBTreeSet::from(
7841+
extract(
7842+
"test.tsx",
7843+
r#"import {styled, Box} from '@devup-ui/core'
7844+
const StyledComponent = styled(Box)({ bg: "$text", _hover: { bg: "$primary" } })
7845+
"#,
7846+
ExtractOption {
7847+
package: "@devup-ui/core".to_string(),
7848+
css_dir: "@devup-ui/core".to_string(),
7849+
single_css: false,
7850+
import_main_css: false
7851+
}
7852+
)
7853+
.unwrap()
7854+
));
78557855

7856-
// // Test 5: styled("div")`css`
7857-
// reset_class_map();
7858-
// assert_debug_snapshot!(ToBTreeSet::from(
7859-
// extract(
7860-
// "test.tsx",
7861-
// r#"import {styled} from '@devup-ui/core'
7862-
// const StyledDiv = styled("div")`
7863-
// background-color: var(--text);
7864-
// padding: 16px;
7865-
// `
7866-
// "#,
7867-
// ExtractOption {
7868-
// package: "@devup-ui/core".to_string(),
7869-
// css_dir: "@devup-ui/core".to_string(),
7870-
// single_css: false,
7871-
// import_main_css: false
7872-
// }
7873-
// )
7874-
// .unwrap()
7875-
// ));
7876-
// }
7856+
// Test 5: styled("div")`css`
7857+
reset_class_map();
7858+
assert_debug_snapshot!(ToBTreeSet::from(
7859+
extract(
7860+
"test.tsx",
7861+
r#"import {styled} from '@devup-ui/core'
7862+
const StyledDiv = styled("div")`
7863+
background-color: var(--text);
7864+
padding: 16px;
7865+
`
7866+
"#,
7867+
ExtractOption {
7868+
package: "@devup-ui/core".to_string(),
7869+
css_dir: "@devup-ui/core".to_string(),
7870+
single_css: false,
7871+
import_main_css: false
7872+
}
7873+
)
7874+
.unwrap()
7875+
));
7876+
}
78777877

78787878
// #[test]
78797879
// #[serial]

‎libs/extractor/src/snapshots/extractor__tests__styled_with_variable-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 StyledDiv = styled(\"div\")({ bg: \"$text\", fontSize: 16 })\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+
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: "font-size",
19+
value: "64px",
20+
level: 0,
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
},
26+
code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
27+
}

‎libs/extractor/src/snapshots/extractor__tests__styled_with_variable-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 StyledDiv = styled.div`\n background: var(--text);\n color: var(--primary);\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+
Static(
8+
ExtractStaticStyle {
9+
property: "background",
10+
value: "var(--text)",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "color",
19+
value: "var(--primary)",
20+
level: 0,
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
},
26+
code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
27+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled, Box} from '@devup-ui/core'\n const StyledComponent = styled(Box)({ bg: \"$text\", _hover: { bg: \"$primary\" } })\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+
Static(
8+
ExtractStaticStyle {
9+
property: "background",
10+
value: "$primary",
11+
level: 0,
12+
selector: Some(
13+
Selector(
14+
"&:hover",
15+
),
16+
),
17+
style_order: None,
18+
},
19+
),
20+
Static(
21+
ExtractStaticStyle {
22+
property: "background",
23+
value: "$text",
24+
level: 0,
25+
selector: None,
26+
style_order: None,
27+
},
28+
),
29+
},
30+
code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
31+
}

‎libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.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 StyledDiv = styled(\"div\")`\n background-color: var(--text);\n padding: 16px;\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+
Static(
8+
ExtractStaticStyle {
9+
property: "background-color",
10+
value: "var(--text)",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "padding",
19+
value: "16px",
20+
level: 0,
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
},
26+
code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
27+
}

‎libs/extractor/src/snapshots/extractor__tests__styled_with_variable.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 StyledDiv = styled.div({ bg: \"$text\", color: \"$primary\" })\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+
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: "$primary",
20+
level: 0,
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
},
26+
code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
27+
}

0 commit comments

Comments
 (0)