Skip to content

Fix theme color issue contains dot #526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
owjs3901 merged 1 commit into from
Dec 26, 2025
Merged

Fix theme color issue contains dot #526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 76 additions & 0 deletions libs/extractor/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8233,4 +8233,80 @@ keyframes({
.unwrap()
));
}

#[test]
#[serial]
fn test_dot_notation_theme_variables() {
// Test that dot notation theme variables (e.g., $primary.100) are correctly extracted
reset_class_map();
assert_debug_snapshot!(ToBTreeSet::from(
extract(
"test.tsx",
r#"import {Box} from '@devup-ui/core'
<Box bg="$primary.100" />
"#,
ExtractOption {
package: "@devup-ui/core".to_string(),
css_dir: "@devup-ui/core".to_string(),
single_css: true,
import_main_css: false
}
)
.unwrap()
));

// Test multiple dot notation variables
reset_class_map();
assert_debug_snapshot!(ToBTreeSet::from(
extract(
"test.tsx",
r#"import {Box} from '@devup-ui/core'
<Box bg="$gray.200" color="$blue.500" />
"#,
ExtractOption {
package: "@devup-ui/core".to_string(),
css_dir: "@devup-ui/core".to_string(),
single_css: true,
import_main_css: false
}
)
.unwrap()
));

// Test deep nested dot notation
reset_class_map();
assert_debug_snapshot!(ToBTreeSet::from(
extract(
"test.tsx",
r#"import {Box} from '@devup-ui/core'
<Box bg="$color.brand.primary.100" />
"#,
ExtractOption {
package: "@devup-ui/core".to_string(),
css_dir: "@devup-ui/core".to_string(),
single_css: true,
import_main_css: false
}
)
.unwrap()
));

// Test dot notation in border shorthand
reset_class_map();
assert_debug_snapshot!(ToBTreeSet::from(
extract(
"test.tsx",
r#"import {Box} from '@devup-ui/core'
<Box border="1px solid $border.primary" />
"#,
ExtractOption {
package: "@devup-ui/core".to_string(),
css_dir: "@devup-ui/core".to_string(),
single_css: true,
import_main_css: false
}
)
.unwrap()
));
}
}
27 changes: 27 additions & 0 deletions libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-2.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
source: libs/extractor/src/lib.rs
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())"
---
ToBTreeSet {
styles: {
Static(
ExtractStaticStyle {
property: "background",
value: "$gray.200",
level: 0,
selector: None,
style_order: None,
},
),
Static(
ExtractStaticStyle {
property: "color",
value: "$blue.500",
level: 0,
selector: None,
style_order: None,
},
),
},
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
}
18 changes: 18 additions & 0 deletions libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-3.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
source: libs/extractor/src/lib.rs
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())"
---
ToBTreeSet {
styles: {
Static(
ExtractStaticStyle {
property: "background",
value: "$color.brand.primary.100",
level: 0,
selector: None,
style_order: None,
},
),
},
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
}
18 changes: 18 additions & 0 deletions libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-4.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
source: libs/extractor/src/lib.rs
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())"
---
ToBTreeSet {
styles: {
Static(
ExtractStaticStyle {
property: "border",
value: "1px solid $border.primary",
level: 0,
selector: None,
style_order: None,
},
),
},
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
}
18 changes: 18 additions & 0 deletions libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
source: libs/extractor/src/lib.rs
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())"
---
ToBTreeSet {
styles: {
Static(
ExtractStaticStyle {
property: "background",
value: "$primary.100",
level: 0,
selector: None,
style_order: None,
},
),
},
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
}
34 changes: 18 additions & 16 deletions libs/sheet/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ impl ExtractStyle for StyleSheetProperty {
}
}

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

Expand All @@ -88,7 +88,7 @@ fn convert_theme_variable_value(value: &str) -> String {
if value.contains("$") {
VAR_RE
.replace_all(value, |caps: &regex::Captures| {
format!("var(--{})", &caps[0][1..])
format!("var(--{})", &caps[0][1..].replace('.', "-"))
})
.to_string()
} else {
Expand Down Expand Up @@ -690,20 +690,22 @@ mod tests {
use extractor::{ExtractOption, extract};
use insta::assert_debug_snapshot;

#[test]
fn test_convert_theme_variable_value() {
assert_eq!(convert_theme_variable_value("1px"), "1px");
assert_eq!(convert_theme_variable_value("$var"), "var(--var)");

assert_eq!(
convert_theme_variable_value("$var $var"),
"var(--var) var(--var)"
);

assert_eq!(
convert_theme_variable_value("1px solid $red"),
"1px solid var(--red)"
);
use rstest::rstest;

#[rstest]
#[case("1px", "1px")]
#[case("$var", "var(--var)")]
#[case("$var $var", "var(--var) var(--var)")]
#[case("1px solid $red", "1px solid var(--red)")]
// Test dot notation theme variables (e.g., $primary.100)
// Dots should be converted to dashes for CSS variable names
#[case("$primary.100", "var(--primary-100)")]
#[case("$gray.200 $blue.500", "var(--gray-200) var(--blue-500)")]
#[case("1px solid $border.primary", "1px solid var(--border-primary)")]
// Test deep nested dot notation
#[case("$color.brand.primary.100", "var(--color-brand-primary-100)")]
fn test_convert_theme_variable_value(#[case] input: &str, #[case] expected: &str) {
assert_eq!(convert_theme_variable_value(input), expected);
}

#[test]
Expand Down