Skip to content

Commit 3cfffbe

Browse files
owjs3901owjs3901
authored
Merge pull request #526 from dev-five-git/dot-theme
Fix theme color issue contains dot
2 parents abecce0 + 7180e38 commit 3cfffbe

6 files changed

Lines changed: 175 additions & 16 deletions

‎libs/extractor/src/lib.rs‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8233,4 +8233,80 @@ keyframes({
82338233
.unwrap()
82348234
));
82358235
}
8236+
8237+
#[test]
8238+
#[serial]
8239+
fn test_dot_notation_theme_variables() {
8240+
// Test that dot notation theme variables (e.g., $primary.100) are correctly extracted
8241+
reset_class_map();
8242+
assert_debug_snapshot!(ToBTreeSet::from(
8243+
extract(
8244+
"test.tsx",
8245+
r#"import {Box} from '@devup-ui/core'
8246+
<Box bg="$primary.100" />
8247+
"#,
8248+
ExtractOption {
8249+
package: "@devup-ui/core".to_string(),
8250+
css_dir: "@devup-ui/core".to_string(),
8251+
single_css: true,
8252+
import_main_css: false
8253+
}
8254+
)
8255+
.unwrap()
8256+
));
8257+
8258+
// Test multiple dot notation variables
8259+
reset_class_map();
8260+
assert_debug_snapshot!(ToBTreeSet::from(
8261+
extract(
8262+
"test.tsx",
8263+
r#"import {Box} from '@devup-ui/core'
8264+
<Box bg="$gray.200" color="$blue.500" />
8265+
"#,
8266+
ExtractOption {
8267+
package: "@devup-ui/core".to_string(),
8268+
css_dir: "@devup-ui/core".to_string(),
8269+
single_css: true,
8270+
import_main_css: false
8271+
}
8272+
)
8273+
.unwrap()
8274+
));
8275+
8276+
// Test deep nested dot notation
8277+
reset_class_map();
8278+
assert_debug_snapshot!(ToBTreeSet::from(
8279+
extract(
8280+
"test.tsx",
8281+
r#"import {Box} from '@devup-ui/core'
8282+
<Box bg="$color.brand.primary.100" />
8283+
"#,
8284+
ExtractOption {
8285+
package: "@devup-ui/core".to_string(),
8286+
css_dir: "@devup-ui/core".to_string(),
8287+
single_css: true,
8288+
import_main_css: false
8289+
}
8290+
)
8291+
.unwrap()
8292+
));
8293+
8294+
// Test dot notation in border shorthand
8295+
reset_class_map();
8296+
assert_debug_snapshot!(ToBTreeSet::from(
8297+
extract(
8298+
"test.tsx",
8299+
r#"import {Box} from '@devup-ui/core'
8300+
<Box border="1px solid $border.primary" />
8301+
"#,
8302+
ExtractOption {
8303+
package: "@devup-ui/core".to_string(),
8304+
css_dir: "@devup-ui/core".to_string(),
8305+
single_css: true,
8306+
import_main_css: false
8307+
}
8308+
)
8309+
.unwrap()
8310+
));
8311+
}
82368312
}

‎libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-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 {Box} from '@devup-ui/core'\n <Box bg=\"$gray.200\" color=\"$blue.500\" />\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+
Static(
8+
ExtractStaticStyle {
9+
property: "background",
10+
value: "$gray.200",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "color",
19+
value: "$blue.500",
20+
level: 0,
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
},
26+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
27+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box bg=\"$color.brand.primary.100\" />\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+
Static(
8+
ExtractStaticStyle {
9+
property: "background",
10+
value: "$color.brand.primary.100",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
},
17+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
18+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box border=\"1px solid $border.primary\" />\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+
Static(
8+
ExtractStaticStyle {
9+
property: "border",
10+
value: "1px solid $border.primary",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
},
17+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
18+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box bg=\"$primary.100\" />\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+
Static(
8+
ExtractStaticStyle {
9+
property: "background",
10+
value: "$primary.100",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
},
17+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
18+
}

‎libs/sheet/src/lib.rs‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ impl ExtractStyle for StyleSheetProperty {
7272
}
7373
}
7474

75-
static VAR_RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"\$\w+").unwrap());
75+
static VAR_RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"\$[\w.]+").unwrap());
7676
static INTERFACE_KEY_RE: Lazy<Regex> =
7777
Lazy::new(|| Regex::new(r"^[a-zA-Z_$][a-zA-Z0-9_$]*$").unwrap());
7878

@@ -88,7 +88,7 @@ fn convert_theme_variable_value(value: &str) -> String {
8888
if value.contains("$") {
8989
VAR_RE
9090
.replace_all(value, |caps: &regex::Captures| {
91-
format!("var(--{})", &caps[0][1..])
91+
format!("var(--{})", &caps[0][1..].replace('.', "-"))
9292
})
9393
.to_string()
9494
} else {
@@ -690,20 +690,22 @@ mod tests {
690690
use extractor::{ExtractOption, extract};
691691
use insta::assert_debug_snapshot;
692692

693-
#[test]
694-
fn test_convert_theme_variable_value() {
695-
assert_eq!(convert_theme_variable_value("1px"), "1px");
696-
assert_eq!(convert_theme_variable_value("$var"), "var(--var)");
697-
698-
assert_eq!(
699-
convert_theme_variable_value("$var $var"),
700-
"var(--var) var(--var)"
701-
);
702-
703-
assert_eq!(
704-
convert_theme_variable_value("1px solid $red"),
705-
"1px solid var(--red)"
706-
);
693+
use rstest::rstest;
694+
695+
#[rstest]
696+
#[case("1px", "1px")]
697+
#[case("$var", "var(--var)")]
698+
#[case("$var $var", "var(--var) var(--var)")]
699+
#[case("1px solid $red", "1px solid var(--red)")]
700+
// Test dot notation theme variables (e.g., $primary.100)
701+
// Dots should be converted to dashes for CSS variable names
702+
#[case("$primary.100", "var(--primary-100)")]
703+
#[case("$gray.200 $blue.500", "var(--gray-200) var(--blue-500)")]
704+
#[case("1px solid $border.primary", "1px solid var(--border-primary)")]
705+
// Test deep nested dot notation
706+
#[case("$color.brand.primary.100", "var(--color-brand-primary-100)")]
707+
fn test_convert_theme_variable_value(#[case] input: &str, #[case] expected: &str) {
708+
assert_eq!(convert_theme_variable_value(input), expected);
707709
}
708710

709711
#[test]

0 commit comments

Comments
 (0)