Add borderRadius expend

Add print media query

Author: owjs3901

.changeset/friendly-knives-mix.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add borderTopRadius, borderBottomRadius, borderLeftRadius, borderRightRadius, \_print

.changeset/strong-ants-brake.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Support @media

.changeset/sweet-seals-begin.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Add special props

libs/css/src/lib.rs

@@ -1,4 +1,4 @@
-use crate::StyleSelector::{Dual, Postfix, Prefix};
+use crate::StyleSelector::{Dual, Media, Postfix, Prefix};
 use once_cell::sync::Lazy;
 use regex::Regex;
 use serde::{Deserialize, Serialize};
@@ -22,6 +22,7 @@ static SELECTOR_ORDER_MAP: Lazy<HashMap<String, u8>> = Lazy::new(|| {
 pub enum StyleSelector {
     Postfix(String),
     Prefix(String),
+    Media(String),
     Dual(String, String),
 }
 
@@ -34,6 +35,9 @@ impl PartialOrd for StyleSelector {
 impl Ord for StyleSelector {
     fn cmp(&self, other: &Self) -> Ordering {
         match (self, other) {
+            (Media(a), Media(b)) => a.cmp(b),
+            (Media(_), _) => Ordering::Less,
+            (_, Media(_)) => Ordering::Greater,
             (Postfix(a), Postfix(b)) => SELECTOR_ORDER_MAP
                 .get(a)
                 .unwrap_or(&0)
@@ -56,6 +60,8 @@ impl Ord for StyleSelector {
 
 impl From<&str> for StyleSelector {
     fn from(value: &str) -> Self {
+        println!("value: {}", value);
+        println!("value: {}", value == "print");
         if let Some(s) = value.strip_prefix("group") {
             Dual("*[role=group]".to_string(), to_kebab_case(s))
         } else if let Some(s) = value.strip_prefix("theme") {
@@ -65,6 +71,8 @@ impl From<&str> for StyleSelector {
                 s.chars().next().unwrap().to_ascii_lowercase(),
                 &s[1..]
             ))
+        } else if value == "print" {
+            Media("print".to_string())
         } else {
             Postfix(to_kebab_case(value))
         }
@@ -80,6 +88,7 @@ impl Display for StyleSelector {
                 Postfix(value) => format!("-{}", value),
                 Prefix(value) => format!("-{}-", value),
                 Dual(prefix, postfix) => format!("-{}-{}", prefix, postfix),
+                Media(value) => format!("@{}", value),
             }
         )
     }
@@ -97,6 +106,7 @@ pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> Str
                 SelectorSeparator::Single => format!("{}:{} .{}", prefix, postfix, class_name),
                 SelectorSeparator::Double => format!("{}::{} .{}", prefix, postfix, class_name),
             },
+            Media(_) => format!(".{}", class_name),
         }
     } else {
         format!(".{}", class_name)
@@ -203,6 +213,22 @@ static GLOBAL_STYLE_PROPERTY: Lazy<HashMap<&str, PropertyType>> = Lazy::new(|| {
         ("px", ["padding-left", "padding-right"]),
         ("py", ["padding-top", "padding-bottom"]),
         ("boxSize", ["width", "height"]),
+        (
+            "borderBottomRadius",
+            ["border-bottom-left-radius", "border-bottom-right-radius"],
+        ),
+        (
+            "borderTopRadius",
+            ["border-top-left-radius", "border-top-right-radius"],
+        ),
+        (
+            "borderLeftRadius",
+            ["border-top-left-radius", "border-bottom-left-radius"],
+        ),
+        (
+            "borderRightRadius",
+            ["border-top-right-radius", "border-bottom-right-radius"],
+        ),
     ] {
         map.insert(key, value.into());
     }
@@ -266,7 +292,7 @@ pub fn convert_property(property: &str) -> PropertyType {
         .unwrap_or_else(|| to_kebab_case(property).into())
 }
 
-pub fn sort_to_long(property: &str) -> String {
+pub fn short_to_long(property: &str) -> String {
     GLOBAL_STYLE_PROPERTY
         .get(property)
         .map(|v| match v {

libs/extractor/src/extract_style/mod.rs

@@ -1,7 +1,7 @@
 use crate::utils::convert_value;
 use crate::StyleProperty;
 use css::{
-    css_to_classname, sheet_to_classname, sheet_to_variable_name, sort_to_long, StyleSelector,
+    css_to_classname, sheet_to_classname, sheet_to_variable_name, short_to_long, StyleSelector,
 };
 use once_cell::sync::Lazy;
 use std::collections::HashSet;
@@ -41,7 +41,7 @@ impl ExtractStaticStyle {
             } else {
                 convert_value(value)
             },
-            property: sort_to_long(property),
+            property: short_to_long(property),
             level,
             selector,
             basic: false,
@@ -145,7 +145,7 @@ impl ExtractDynamicStyle {
         selector: Option<StyleSelector>,
     ) -> Self {
         Self {
-            property: sort_to_long(property),
+            property: short_to_long(property),
             level,
             identifier: identifier.to_string(),
             selector,

libs/extractor/src/lib.rs

@@ -623,6 +623,32 @@ mod tests {
             "test.tsx",
             r#"import { Box } from "@devup-ui/core";
 <Box margin={a === b ? null : undefined} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? 1 : undefined} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? undefined : 2} />;
 "#,
             ExtractOption {
                 package: "@devup-ui/core".to_string(),

libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap

@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? 1 : undefined} />;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 0,
+                selector: None,
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"d0\" : \"\"} />;\n",
+}

libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap

@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? undefined : 2} />;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"\" : \"d0\"} />;\n",
+}

libs/extractor/src/utils.rs

@@ -44,6 +44,10 @@ static SPECIAL_PROPERTIES: Lazy<HashSet<&str>> = Lazy::new(|| {
         "tabIndex",
         "maxLength",
         "minLength",
+        "disabled",
+        "readOnly",
+        "autoFocus",
+        "required",
     ] {
         set.insert(prop);
     }

libs/extractor/src/visit.rs

@@ -6,7 +6,7 @@ use crate::style_extractor::{
     extract_style_from_expression, extract_style_from_jsx_attr, ExtractResult,
 };
 use crate::{ExtractStyleProp, ExtractStyleValue, StyleProperty};
-use css::sort_to_long;
+use css::short_to_long;
 use oxc_allocator::{Allocator, CloneIn};
 use oxc_ast::ast::ImportDeclarationSpecifier::ImportSpecifier;
 use oxc_ast::ast::JSXAttributeItem::Attribute;
@@ -262,7 +262,7 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                 let mut rm = false;
                 if let Attribute(ref mut attr) = &mut attr {
                     if let Identifier(name) = &attr.name {
-                        let name = sort_to_long(name.name.as_str());
+                        let name = short_to_long(name.name.as_str());
                         if duplicate_set.contains(&name) {
                             continue;
                         }