Implement Selector

owjs3901 · owjs3901 · commit a3684c5a9358 · 2025-02-11T10:17:58.000+09:00
diff --git a/.changeset/fair-cherries-confess.md b/.changeset/fair-cherries-confess.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add selectors
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -15,13 +15,13 @@ jobs:
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
       cancel-in-progress: false
+    container:
+      image: xd009642/tarpaulin:develop-nightly
+      options: --security-opt seccomp=unconfined
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: actions-rust-lang/setup-rust-toolchain@v1
-      - name: Cargo tarpaulin
-        run: cargo install cargo-tarpaulin
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .idea
+cobertura.xml
 build
 dist
 node_modules
diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs
@@ -60,10 +60,14 @@ impl Ord for StyleSelector {
 
 impl From<&str> for StyleSelector {
     fn from(value: &str) -> Self {
-        if value.contains(":") {
-            let t: Vec<_> = value.split(":").collect();
+        if value.contains("&") {
+            let t: Vec<_> = value.split("&").collect();
             if let Prefix(v) = t[0].into() {
-                Dual(v, t[1].to_string())
+                if t[1].is_empty() {
+                    Prefix(v)
+                } else {
+                    Dual(v, t[1].to_string())
+                }
             } else {
                 Postfix(t[1].to_string())
             }
@@ -84,6 +88,8 @@ impl From<&str> for StyleSelector {
             ))
         } else if value == "print" {
             Media("print".to_string())
+        } else if value.ends_with(" ") {
+            Prefix(value.trim().to_string())
         } else {
             Postfix(to_kebab_case(value))
         }
@@ -132,6 +138,7 @@ pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> Str
 pub enum SelectorSeparator {
     Single,
     Double,
+    None,
 }
 impl Display for SelectorSeparator {
     fn fmt(&self, f: &mut Formatter) -> fmt::Result {
@@ -141,6 +148,7 @@ impl Display for SelectorSeparator {
             match self {
                 SelectorSeparator::Single => ":",
                 SelectorSeparator::Double => "::",
+                SelectorSeparator::None => "",
             }
         )
     }
@@ -166,7 +174,9 @@ static DOUBLE_SEPARATOR: Lazy<HashSet<&str>> = Lazy::new(|| {
 });
 
 pub fn get_selector_separator(key: &str) -> SelectorSeparator {
-    if DOUBLE_SEPARATOR.contains(key) {
+    if key.starts_with(":") || key.is_empty() {
+        SelectorSeparator::None
+    } else if DOUBLE_SEPARATOR.contains(key) {
         SelectorSeparator::Double
     } else {
         SelectorSeparator::Single
@@ -669,7 +679,7 @@ mod tests {
         );
 
         assert_eq!(
-            StyleSelector::from("themeDark:placeholder"),
+            StyleSelector::from("themeDark&placeholder"),
             Dual(
                 ":root[data-theme=dark]".to_string(),
                 "placeholder".to_string()
@@ -683,6 +693,11 @@ mod tests {
             StyleSelector::from("themeLight"),
             Prefix(":root[data-theme=light]".to_string())
         );
+
+        assert_eq!(
+            StyleSelector::from("*[aria=disabled='true'] &:hover"),
+            Dual("*[aria=disabled='true']".to_string(), ":hover".to_string())
+        );
     }
 
     #[test]
@@ -712,7 +727,7 @@ mod tests {
         );
 
         assert_eq!(
-            merge_selector("cls", Some(&"themeDark:hover".into()),),
+            merge_selector("cls", Some(&"themeDark&hover".into()),),
             ":root[data-theme=dark] .cls:hover"
         );
     }
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
@@ -2143,4 +2143,59 @@ import {Button} from '@devup/ui'
         )
         .unwrap());
     }
+
+    #[test]
+    #[serial]
+    fn custom_selector() {
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Box} from '@devup-ui/core'
+    <Box selectors={{
+    "&[aria-diabled='true']": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            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 selectors={{
+    "*[aria-diabled='true'] &:hover": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            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 selectors={{
+    "*[aria-diabled='true'] &": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+    }
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &:hover\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "0.5",
+                level: 0,
+                selector: Some(
+                    Dual(
+                        "*[aria-diabled='true']",
+                        ":hover",
+                    ),
+                ),
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
@@ -0,0 +1,22 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "0.5",
+                level: 0,
+                selector: Some(
+                    Prefix(
+                        "*[aria-diabled='true']",
+                    ),
+                ),
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
@@ -0,0 +1,22 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"&[aria-diabled='true']\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "0.5",
+                level: 0,
+                selector: Some(
+                    Postfix(
+                        "[aria-diabled='true']",
+                    ),
+                ),
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
+}
diff --git a/libs/extractor/src/style_extractor.rs b/libs/extractor/src/style_extractor.rs
@@ -239,6 +239,28 @@ pub fn extract_style_from_expression<'a>(
             //     _ => ExtractResult::Remove,
             // };
         }
+        if name == "selectors" {
+            if let Expression::ObjectExpression(obj) = expression {
+                let mut props = vec![];
+                for p in obj.properties.iter_mut() {
+                    if let ObjectPropertyKind::ObjectProperty(ref mut o) = p {
+                        let name = o.key.name().unwrap().to_string();
+                        if let ExtractResult::ExtractStyle(mut styles) =
+                            extract_style_from_expression(
+                                ast_builder,
+                                None,
+                                &mut o.value,
+                                level,
+                                Some(name.as_str()),
+                            )
+                        {
+                            props.append(&mut styles);
+                        }
+                    }
+                }
+                return ExtractResult::ExtractStyle(props);
+            }
+        }
 
         if let Some(new_selector) = name.strip_prefix("_") {
             return extract_style_from_expression(
@@ -248,7 +270,7 @@ pub fn extract_style_from_expression<'a>(
                 level,
                 Some(
                     if let Some(selector) = selector {
-                        format!("{}:{}", selector, new_selector)
+                        format!("{}&{}", selector, new_selector)
                     } else {
                         new_selector.to_string()
                     }
diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs
@@ -418,13 +418,24 @@ mod tests {
             "bg",
             0,
             "red",
-            Some(&"themeDark:hover".into()),
+            Some(&"themeDark&hover".into()),
             false,
         );
         assert_debug_snapshot!(sheet.create_css());
 
         let mut sheet = StyleSheet::default();
-        sheet.add_property("test", "bg", 0, "red", Some(&"wrong:hover".into()), false);
+        sheet.add_property("test", "bg", 0, "red", Some(&"wrong&hover".into()), false);
+        assert_debug_snapshot!(sheet.create_css());
+
+        let mut sheet = StyleSheet::default();
+        sheet.add_property(
+            "test",
+            "bg",
+            0,
+            "red",
+            Some(&"*[disabled='true'] &:hover".into()),
+            false,
+        );
         assert_debug_snapshot!(sheet.create_css());
     }
 
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-10.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-10.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: sheet.create_css()
+---
+"*[disabled='true'] .test:hover{background:red}"
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "lint": "pnpm -F @devup-ui/* lint",
-    "test": "cargo tarpaulin && vitest test --coverage --run && pnpm -r test",
+    "test": "cargo tarpaulin --out xml --out stdout && vitest test --coverage --run && pnpm -r test",
     "build": "pnpm -F @devup-ui/* build",
     "dev": "pnpm -r dev",
     "benchmark": "node benchmark.js"
diff --git a/packages/react/src/types/props/selector/index.ts b/packages/react/src/types/props/selector/index.ts
@@ -66,4 +66,6 @@ export interface DevupSelectorProps {
   _viewTransitionImagePair?: DevupCommonProps
   _viewTransitionNew?: DevupCommonProps
   _viewTransitionOld?: DevupCommonProps
+
+  selectors?: Record<string, DevupCommonProps>
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@devup-ui/react": patch
 +---
++
 +Add selectors
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`.idea`
	`2`	`+cobertura.xml`
`2`	`3`	`build`
`3`	`4`	`dist`
`4`	`5`	`node_modules`