Merge pull request #138 from dev-five-git/selectors-in-theme-selector

Fix dark selector issue

Author: owjs3901

.changeset/neat-kiwis-teach.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix dark selector issue

Cargo.lock

@@ -4,12 +4,12 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-oxc_parser = "0.50.0"
-oxc_syntax = "0.50.0"
-oxc_span = "0.50.0"
-oxc_allocator = "0.50.0"
-oxc_ast = "0.50.0"
-oxc_codegen = "0.50.0"
+oxc_parser = "0.51.0"
+oxc_syntax = "0.51.0"
+oxc_span = "0.51.0"
+oxc_allocator = "0.51.0"
+oxc_ast = "0.51.0"
+oxc_codegen = "0.51.0"
 css = { path = "../css" }
 once_cell = "1.20.3"
 

libs/extractor/Cargo.toml

@@ -2168,6 +2168,27 @@ import {Button} from '@devup/ui'
             }
         )
         .unwrap());
+        println!("=================");
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Box} from '@devup-ui/core'
+    <Box _hover={{bg:"white"}} _themeDark={{
+        selectors: {
+          '& :is(svg,img)': {
+            boxSize: '100%',
+            filter: 'brightness(0) invert(1)',
+          },
+        },
+      }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
     }
 
     #[test]

libs/extractor/src/lib.rs

@@ -0,0 +1,48 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{\n        selectors: {\n          '& :is(svg,img)': {\n            boxSize: '100%',\n            filter: 'brightness(0) invert(1)',\n          },\n        },\n      }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "boxSize",
+                value: "100%",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] & :is(svg,img)",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "filter",
+                value: "brightness(0) invert(1)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] & :is(svg,img)",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1 d2\" />;\n",
+}

libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap

@@ -269,7 +269,19 @@ pub fn extract_style_from_expression<'a>(
                             None,
                             &mut o.value,
                             level,
-                            Some(&name.as_str().into()),
+                            Some(
+                                &if let Some(selector) = selector {
+                                    format!(
+                                        "{}{}",
+                                        selector.to_string().split("&").collect::<Vec<_>>()[0],
+                                        name.as_str()
+                                    )
+                                } else {
+                                    name
+                                }
+                                .as_str()
+                                .into(),
+                            ),
                         ) {
                             props.append(&mut styles);
                         }