dev-five-git · owjs3901 · Jan 20, 2025 · Jan 20, 2025
diff --git a/.changeset/afraid-dolls-smell.md b/.changeset/afraid-dolls-smell.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Support double separator, Support backtick case
diff --git a/.changeset/flat-stingrays-breathe.md b/.changeset/flat-stingrays-breathe.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add double selector
diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs
@@ -1,7 +1,48 @@
 use once_cell::sync::Lazy;
-use std::collections::HashMap;
+use std::collections::{HashMap, HashSet};
 use std::sync::Mutex;
 
+pub enum SelectorSeparator {
+    Single,
+    Double,
+}
+
+impl SelectorSeparator {
+    pub fn separator(&self) -> &str {
+        match self {
+            SelectorSeparator::Single => ":",
+            SelectorSeparator::Double => "::",
+        }
+    }
+}
+
+static DOUBLE_SEPARATOR: Lazy<HashSet<&str>> = Lazy::new(|| {
+    let mut set = HashSet::new();
+
+    for key in [
+        "placeholder",
+        "before",
+        "after",
+        "highlight",
+        "view-transition",
+        "view-transition-group",
+        "view-transition-image-pair",
+        "view-transition-new",
+        "view-transition-old",
+    ] {
+        set.insert(key);
+    }
+    set
+});
+
+pub fn get_selector_separator(key: &str) -> SelectorSeparator {
+    if DOUBLE_SEPARATOR.contains(key) {
+        SelectorSeparator::Double
+    } else {
+        SelectorSeparator::Single
+    }
+}
+
 #[derive(Clone, Debug, PartialEq)]
 pub enum PropertyType {
     Single(String),
@@ -26,56 +67,54 @@ impl From<[&str; 2]> for PropertyType {
     }
 }
 
-static GLOBAL_STYLE_PROPERTY: Lazy<Mutex<HashMap<&str, PropertyType>>> = Lazy::new(|| {
-    Mutex::new({
-        let mut map = HashMap::new();
+static GLOBAL_STYLE_PROPERTY: Lazy<HashMap<&str, PropertyType>> = Lazy::new(|| {
+    let mut map = HashMap::new();
 
-        for (key, value) in [
-            ("bg", "background"),
-            ("bgAttachment", "background-attachment"),
-            ("bgClip", "background-clip"),
-            ("bgColor", "background-color"),
-            ("bgImage", "background-image"),
-            ("bgOrigin", "background-origin"),
-            ("bgPosition", "background-position"),
-            ("bgPositionX", "background-position-x"),
-            ("bgPositionY", "background-position-y"),
-            ("bgRepeat", "background-repeat"),
-            ("bgSize", "background-size"),
-            ("animationDir", "animation-direction"),
-            ("flexDir", "flex-direction"),
-            ("pos", "position"),
-            ("m", "margin"),
-            ("mt", "margin-top"),
-            ("mr", "margin-right"),
-            ("mb", "margin-bottom"),
-            ("ml", "margin-left"),
-            ("p", "padding"),
-            ("pt", "padding-top"),
-            ("pr", "padding-right"),
-            ("pb", "padding-bottom"),
-            ("pl", "padding-left"),
-            ("w", "width"),
-            ("h", "height"),
-            ("minW", "min-width"),
-            ("minH", "min-height"),
-            ("maxW", "max-width"),
-            ("maxH", "max-height"),
-        ] {
-            map.insert(key, value.into());
-        }
+    for (key, value) in [
+        ("bg", "background"),
+        ("bgAttachment", "background-attachment"),
+        ("bgClip", "background-clip"),
+        ("bgColor", "background-color"),
+        ("bgImage", "background-image"),
+        ("bgOrigin", "background-origin"),
+        ("bgPosition", "background-position"),
+        ("bgPositionX", "background-position-x"),
+        ("bgPositionY", "background-position-y"),
+        ("bgRepeat", "background-repeat"),
+        ("bgSize", "background-size"),
+        ("animationDir", "animation-direction"),
+        ("flexDir", "flex-direction"),
+        ("pos", "position"),
+        ("m", "margin"),
+        ("mt", "margin-top"),
+        ("mr", "margin-right"),
+        ("mb", "margin-bottom"),
+        ("ml", "margin-left"),
+        ("p", "padding"),
+        ("pt", "padding-top"),
+        ("pr", "padding-right"),
+        ("pb", "padding-bottom"),
+        ("pl", "padding-left"),
+        ("w", "width"),
+        ("h", "height"),
+        ("minW", "min-width"),
+        ("minH", "min-height"),
+        ("maxW", "max-width"),
+        ("maxH", "max-height"),
+    ] {
+        map.insert(key, value.into());
+    }
 
-        for (key, value) in [
-            ("mx", ["margin-left", "margin-right"]),
-            ("my", ["margin-top", "margin-bottom"]),
-            ("px", ["padding-left", "padding-right"]),
-            ("py", ["padding-top", "padding-bottom"]),
-            ("boxSize", ["width", "height"]),
-        ] {
-            map.insert(key, value.into());
-        }
-        map
-    })
+    for (key, value) in [
+        ("mx", ["margin-left", "margin-right"]),
+        ("my", ["margin-top", "margin-bottom"]),
+        ("px", ["padding-left", "padding-right"]),
+        ("py", ["padding-top", "padding-bottom"]),
+        ("boxSize", ["width", "height"]),
+    ] {
+        map.insert(key, value.into());
+    }
+    map
 });
 
 static GLOBAL_CLASS_MAP: Lazy<Mutex<HashMap<String, i32>>> =
@@ -107,8 +146,6 @@ pub fn to_kebab_case(value: &str) -> String {
 
 pub fn convert_property(property: &str) -> PropertyType {
     GLOBAL_STYLE_PROPERTY
-        .lock()
-        .unwrap()
         .get(property)
         .cloned()
         .unwrap_or_else(|| to_kebab_case(property).into())

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
@@ -1115,6 +1115,30 @@ export {
             }
         )
         .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex bg={["$red", "$blue"][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex bg={[`$red`, `${variable}`][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
     }
 
     #[test]
@@ -1138,4 +1162,34 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
         )
         .unwrap());
     }
+
+    #[test]
+    #[serial]
+    fn backtick_prop() {
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Box} from '@devup-ui/core'
+            <Box bg={`black`} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Box} from '@devup-ui/core'
+            <Box bg={`${variable}`} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+    }
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap
@@ -0,0 +1,17 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`${variable}`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "bg",
+                level: 0,
+                identifier: "`${variable}`",
+                selector: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" style={{ \"--d1\": `${variable}` }} />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`black`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "bg",
+                value: "black",
+                level: 0,
+                selector: None,
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-10.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-10.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[`$red`, `${variable}`][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                basic: true,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "bg",
+                level: 0,
+                identifier: "[`var(--red)`, `${variable}`][idx]",
+                selector: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": [`var(--red)`, `${variable}`][idx] }} />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-9.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-9.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[\"$red\", \"$blue\"][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                basic: true,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "bg",
+                level: 0,
+                identifier: "[\"var(--red)\", \"var(--blue)\"][idx]",
+                selector: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": [\"var(--red)\", \"var(--blue)\"][idx] }} />;\n",
+}