diff --git a/.changeset/clever-teeth-itch.md b/.changeset/clever-teeth-itch.md new file mode 100644 index 00000000..53051d77 --- /dev/null +++ b/.changeset/clever-teeth-itch.md @@ -0,0 +1,5 @@ +--- +'@devup-ui/wasm': patch +--- + +Fix global css issue diff --git a/libs/extractor/src/css_utils.rs b/libs/extractor/src/css_utils.rs index c1c6be7f..3082ee6a 100644 --- a/libs/extractor/src/css_utils.rs +++ b/libs/extractor/src/css_utils.rs @@ -149,18 +149,30 @@ pub fn optimize_css_block(css: &str) -> String { .join("}") .split(";") .map(|s| { - if !s.contains(":") { - s.trim().to_string() + println!("s: {}", s); + let parts = s.split("{").collect::>(); + let first_part = if parts.len() == 1 { + "".to_string() } else { - let mut iter = s.split(":"); + format!("{}{{", parts.first().unwrap().trim()) + }; + println!("first_part: {}", first_part); + let last_part = parts.last().unwrap().trim(); + if !last_part.contains(":") { + println!("last_part: {}", last_part); + format!("{first_part}{last_part}") + } else { + let mut iter = last_part.split(":"); let property = iter.next().unwrap().trim(); let value = iter.next().unwrap().trim(); + + println!("property: {}, value: {}", property, value); let value = if check_multi_css_optimize(property.split("{").last().unwrap()) { optimize_mutli_css_value(value) } else { value.to_string() }; - format!("{property}:{value}") + format!("{first_part}{property}:{value}") } }) .collect::>() @@ -224,6 +236,14 @@ mod tests { "ul{font-family:\"Roboto Hello\",sans-serif}" )] #[case("section{ }", "section{}")] + #[case(":root{ }", ":root{}")] + #[case(":root{ background: red; }", ":root{background:red}")] + #[case( + ":root, :section{ background: red; }", + ":root,:section{background:red}" + )] + #[case("*:hover{ background: red; }", "*:hover{background:red}")] + #[case(":root {color-scheme: light dark }", ":root{color-scheme:light dark}")] fn test_optimize_css_block(#[case] input: &str, #[case] expected: &str) { assert_eq!(optimize_css_block(input), expected); } diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs index 94dbacb2..8f7e217c 100644 --- a/libs/extractor/src/lib.rs +++ b/libs/extractor/src/lib.rs @@ -6227,6 +6227,23 @@ globalCss({ r#"import { globalCss } from "@devup-ui/core"; globalCss` ` + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_dir: "@devup-ui/core".to_string(), + single_css: true, + import_main_css: false + } + ) + .unwrap() + )); + + reset_class_map(); + assert_debug_snapshot!(ToBTreeSet::from( + extract( + "test.tsx", + r#"import { globalCss } from "@devup-ui/core"; + globalCss`:root {color-scheme: light dark}` "#, ExtractOption { package: "@devup-ui/core".to_string(), diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-9.snap new file mode 100644 index 00000000..04921366 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-9.snap @@ -0,0 +1,15 @@ +--- +source: libs/extractor/src/lib.rs +expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n globalCss`:root {color-scheme: light dark}`\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: { + Css( + ExtractCss { + css: ":root{color-scheme:light dark}", + file: "test.tsx", + }, + ), + }, + code: "import \"@devup-ui/core/devup-ui.css\";\n;\n", +}