Implement advencedSelector

Author: owjs3901

.changeset/wacky-snails-show.md

@@ -0,0 +1,6 @@
+---
+'@devup-ui/wasm': patch
+'@devup-ui/react': patch
+---
+
+Support selector with params

Cargo.lock

@@ -3,6 +3,12 @@ import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
 export function DevupUICard() {
   return (
     <Flex
+      _hover={{
+        params: [],
+        _active: {
+          bg: 'red',
+        },
+      }}
       bg="$containerBackground"
       border="1px solid $border"
       borderRadius="20px"

apps/landing/src/app/DevupUICard.tsx

@@ -15,7 +15,7 @@ crate-type = ["cdylib", "rlib"]
 default = ["console_error_panic_hook"]
 
 [dependencies]
-wasm-bindgen = "0.2.104"
+wasm-bindgen = "0.2.105"
 extractor = { path = "../../libs/extractor" }
 sheet = { path = "../../libs/sheet" }
 css = { path = "../../libs/css" }
@@ -26,13 +26,13 @@ css = { path = "../../libs/css" }
 # code size when deploying.
 console_error_panic_hook = { version = "0.1.7", optional = true }
 once_cell = "1.21.3"
-js-sys = "0.3.81"
+js-sys = "0.3.82"
 serde_json = "1.0.145"
 serde-wasm-bindgen = "0.6.5"
 bimap = { version = "0.6.3", features = ["serde"] }
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3.54"
+wasm-bindgen-test = "0.3.55"
 serial_test = "3.2.0"
 insta = "1.43.2"
 rstest = "0.26.1"

bindings/devup-ui-wasm/Cargo.toml

@@ -562,16 +562,56 @@ pub fn extract_style_from_expression<'a>(
             }
             Expression::ObjectExpression(obj) => {
                 let mut props = vec![];
+                let params = obj.properties.iter().find_map(|p| {
+                    if let ObjectPropertyKind::ObjectProperty(o) = p
+                        && o.key.name().unwrap() == "params"
+                        && selector.is_some()
+                        && let Expression::ArrayExpression(array) = &o.value
+                    {
+                        Some(
+                            array
+                                .elements
+                                .iter()
+                                .filter_map(|e| {
+                                    if let Some(e) = e.as_expression()
+                                        && let Some(s) = get_string_by_literal_expression(e)
+                                        && !s.is_empty()
+                                    {
+                                        Some(s)
+                                    } else {
+                                        None
+                                    }
+                                })
+                                .collect::<Vec<String>>()
+                                .join(","),
+                        )
+                    } else {
+                        None
+                    }
+                });
+
+                let selector = selector.clone().map(|s| {
+                    if let Some(params) = params
+                        && let StyleSelector::Selector(selector) = s
+                    {
+                        StyleSelector::Selector(format!("{}({})", selector, params))
+                    } else {
+                        s
+                    }
+                });
+
                 for p in obj.properties.iter_mut() {
-                    if let ObjectPropertyKind::ObjectProperty(o) = p {
+                    if let ObjectPropertyKind::ObjectProperty(o) = p
+                        && o.key.name().unwrap() != "params"
+                    {
                         for name in disassemble_property(&o.key.name().unwrap()) {
                             props.extend(
                                 extract_style_from_expression(
                                     ast_builder,
                                     Some(&name),
                                     &mut o.value,
                                     level,
-                                    selector,
+                                    &selector,
                                 )
                                 .styles,
                             );