Merge pull request #449 from dev-five-git/add-params-to-advenced-selector

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

@@ -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

@@ -68,6 +68,19 @@ pub fn disassemble_property(property: &str) -> Vec<String> {
         })
 }
 
+pub fn add_selector_params(selector: StyleSelector, params: &str) -> StyleSelector {
+    match selector {
+        StyleSelector::Selector(value) => StyleSelector::Selector(format!("{}({})", value, params)),
+        StyleSelector::Global(value, file) => {
+            StyleSelector::Global(format!("{}({})", value, params), file)
+        }
+        StyleSelector::Media { query, selector } => StyleSelector::Media {
+            query: query.to_string(),
+            selector: selector.map(|s| format!("{}({})", s, params)),
+        },
+    }
+}
+
 pub fn get_enum_property_value(property: &str, value: &str) -> Option<Vec<(String, String)>> {
     if let Some(map) = GLOBAL_ENUM_STYLE_PROPERTY.get(property) {
         if let Some(map) = map.get(value) {
@@ -677,4 +690,32 @@ mod tests {
         assert_eq!(keyframes_to_keyframes_name("spin", None), "k-spin");
         assert_eq!(keyframes_to_keyframes_name("spin1", None), "k-spin1");
     }
+
+    #[test]
+    fn test_add_selector_params() {
+        assert_eq!(
+            add_selector_params(StyleSelector::Selector("hover:is".to_string()), "test"),
+            StyleSelector::Selector("hover:is(test)".to_string())
+        );
+        assert_eq!(
+            add_selector_params(
+                StyleSelector::Global("&:is".to_string(), "file.ts".to_string()),
+                "test"
+            ),
+            StyleSelector::Global("&:is(test)".to_string(), "file.ts".to_string())
+        );
+        assert_eq!(
+            add_selector_params(
+                StyleSelector::Media {
+                    query: "print".to_string(),
+                    selector: Some("&:is".to_string())
+                },
+                "test"
+            ),
+            StyleSelector::Media {
+                query: "print".to_string(),
+                selector: Some("&:is(test)".to_string())
+            }
+        );
+    }
 }

libs/css/src/lib.rs

@@ -10,7 +10,7 @@ use crate::{
     extractor::{
         GlobalExtractResult, extract_style_from_expression::extract_style_from_expression,
     },
-    utils::get_string_by_literal_expression,
+    utils::{get_string_by_literal_expression, get_string_by_property_key},
 };
 use css::{
     disassemble_property,
@@ -19,7 +19,7 @@ use css::{
 };
 use oxc_ast::{
     AstBuilder,
-    ast::{ArrayExpressionElement, Expression, ObjectPropertyKind, PropertyKey},
+    ast::{ArrayExpressionElement, Expression, ObjectPropertyKind},
 };
 
 pub fn extract_global_style_from_expression<'a>(
@@ -33,20 +33,7 @@ pub fn extract_global_style_from_expression<'a>(
         for p in obj.properties.iter_mut() {
             match p {
                 ObjectPropertyKind::ObjectProperty(o) => {
-                    if let Some(name) = if let PropertyKey::StaticIdentifier(ident) = &o.key {
-                        Some(ident.name.to_string())
-                    } else if let PropertyKey::StringLiteral(s) = &o.key {
-                        Some(s.value.to_string())
-                    } else if let PropertyKey::TemplateLiteral(t) = &o.key {
-                        Some(
-                            t.quasis
-                                .iter()
-                                .map(|q| q.value.raw.as_str())
-                                .collect::<String>(),
-                        )
-                    } else {
-                        None
-                    } {
+                    if let Some(name) = get_string_by_property_key(&o.key) {
                         if name == "imports" {
                             if let Expression::ArrayExpression(arr) = &o.value {
                                 for p in arr.elements.iter() {
@@ -108,11 +95,11 @@ pub fn extract_global_style_from_expression<'a>(
                                                     .iter()
                                                     .filter_map(|p| {
                                                         if let ObjectPropertyKind::ObjectProperty(o) = p
-                                                            && let PropertyKey::StaticIdentifier(ident) = &o.key
+                                                            && let Some(property_name) = get_string_by_property_key(&o.key)
                                                             && let Some(s) = get_string_by_literal_expression(&o.value)
                                                         {
                                                             Some(
-                                                                disassemble_property(&ident.name)
+                                                                disassemble_property(&property_name)
                                                                     .iter()
                                                                     .map(|p| {
                                                                         let v = if check_multi_css_optimize(p) { optimize_mutli_css_value(&s) } else { s.clone() };

libs/extractor/src/extractor/extract_global_style_from_expression.rs

@@ -5,10 +5,11 @@ use crate::{
         ExtractResult, KeyframesExtractResult,
         extract_style_from_expression::extract_style_from_expression,
     },
+    utils::get_string_by_property_key,
 };
 use oxc_ast::{
     AstBuilder,
-    ast::{Expression, ObjectPropertyKind, PropertyKey},
+    ast::{Expression, ObjectPropertyKind},
 };
 
 pub fn extract_keyframes_from_expression<'a>(
@@ -20,22 +21,7 @@ pub fn extract_keyframes_from_expression<'a>(
     if let Expression::ObjectExpression(obj) = expression {
         for p in obj.properties.iter_mut() {
             if let ObjectPropertyKind::ObjectProperty(o) = p
-                && let Some(name) = if let PropertyKey::StaticIdentifier(ident) = &o.key {
-                    Some(ident.name.to_string())
-                } else if let PropertyKey::StringLiteral(s) = &o.key {
-                    Some(s.value.to_string())
-                } else if let PropertyKey::TemplateLiteral(t) = &o.key {
-                    Some(
-                        t.quasis
-                            .iter()
-                            .map(|q| q.value.raw.as_str())
-                            .collect::<String>(),
-                    )
-                } else if let PropertyKey::NumericLiteral(n) = &o.key {
-                    Some(n.value.to_string())
-                } else {
-                    None
-                }
+                && let Some(name) = get_string_by_property_key(&o.key)
             {
                 let ExtractResult { styles, .. } =
                     extract_style_from_expression(ast_builder, None, &mut o.value, 0, &None);