diff --git a/.changeset/brown-gifts-scream.md b/.changeset/brown-gifts-scream.md new file mode 100644 index 00000000..091dc7e2 --- /dev/null +++ b/.changeset/brown-gifts-scream.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Split property diff --git a/Cargo.lock b/Cargo.lock index 1f897efc..18c5ab70 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -270,6 +270,7 @@ dependencies = [ "insta", "js-sys", "once_cell", + "rstest", "serde-wasm-bindgen", "serde_json", "serial_test", diff --git a/apps/landing/package.json b/apps/landing/package.json index 0add1acd..d490b4f6 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -16,11 +16,11 @@ "@devup-ui/reset-css": "workspace:*", "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", - "@next/mdx": "^15.4.1", + "@next/mdx": "^15.4.2", "@types/mdx": "^2.0.13", "body-scroll-lock": "3.1.5", "clsx": "^2.1.1", - "next": "^15.4.1", + "next": "^15.4.2", "react": "^19.1.0", "react-dom": "^19.1.0", "react-markdown": "^10.1.0", diff --git a/apps/next/package.json b/apps/next/package.json index 6eebc07d..fa628af5 100644 --- a/apps/next/package.json +++ b/apps/next/package.json @@ -12,7 +12,7 @@ "dependencies": { "react": "^19.1.0", "react-dom": "^19.1.0", - "next": "^15.4.1", + "next": "^15.4.2", "@devup-ui/react": "workspace:*" }, "devDependencies": { diff --git a/apps/rsbuild/package.json b/apps/rsbuild/package.json index 67b7a708..6e019e7d 100644 --- a/apps/rsbuild/package.json +++ b/apps/rsbuild/package.json @@ -15,7 +15,7 @@ "@devup-ui/react": "workspace:*" }, "devDependencies": { - "@rsbuild/core": "^1.4.7", + "@rsbuild/core": "^1.4.9", "@rsbuild/plugin-react": "^1.3.4", "@devup-ui/rsbuild-plugin": "workspace:*" } diff --git a/apps/vite-lib/package.json b/apps/vite-lib/package.json index dd155bbd..7d7ad500 100644 --- a/apps/vite-lib/package.json +++ b/apps/vite-lib/package.json @@ -19,7 +19,7 @@ "devDependencies": { "vite-plugin-dts": "^4.5.4", "@devup-ui/vite-plugin": "workspace:*", - "@vitejs/plugin-react": "^4.6.0", + "@vitejs/plugin-react": "^4.7.0", "typescript": "^5", "@types/node": "^24", "@types/react": "^19" diff --git a/apps/vite/package.json b/apps/vite/package.json index 0633207f..66567dc5 100644 --- a/apps/vite/package.json +++ b/apps/vite/package.json @@ -18,7 +18,7 @@ "devDependencies": { "@devup-ui/vite-plugin": "workspace:*", "vite": "^7.0.5", - "@vitejs/plugin-react": "^4.6.0", + "@vitejs/plugin-react": "^4.7.0", "typescript": "^5", "@types/node": "^24", "@types/react": "^19", diff --git a/benchmark/next-chakra-ui/package.json b/benchmark/next-chakra-ui/package.json index 42c24c2d..97b40107 100644 --- a/benchmark/next-chakra-ui/package.json +++ b/benchmark/next-chakra-ui/package.json @@ -12,7 +12,7 @@ "dependencies": { "@chakra-ui/react": "^3.22.0", "@emotion/react": "^11.14.0", - "next": "^15.4.1", + "next": "^15.4.2", "next-themes": "^0.4.6", "react": "^19.1.0", "react-dom": "^19.1.0", diff --git a/benchmark/next-devup-ui/package.json b/benchmark/next-devup-ui/package.json index b28b9c87..9f073b0d 100644 --- a/benchmark/next-devup-ui/package.json +++ b/benchmark/next-devup-ui/package.json @@ -12,7 +12,7 @@ "dependencies": { "react": "^19.1.0", "react-dom": "^19.1.0", - "next": "^15.4.1", + "next": "^15.4.2", "@devup-ui/react": "workspace:*" }, "devDependencies": { diff --git a/benchmark/next-kuma-ui/package.json b/benchmark/next-kuma-ui/package.json index 1dde41b3..f8701ba1 100644 --- a/benchmark/next-kuma-ui/package.json +++ b/benchmark/next-kuma-ui/package.json @@ -12,7 +12,7 @@ "dependencies": { "react": "^19.1.0", "react-dom": "^19.1.0", - "next": "^15.4.1", + "next": "^15.4.2", "@kuma-ui/core": "^1.5.9" }, "devDependencies": { diff --git a/benchmark/next-mui/package.json b/benchmark/next-mui/package.json index b35a3547..6e65bffc 100644 --- a/benchmark/next-mui/package.json +++ b/benchmark/next-mui/package.json @@ -13,7 +13,7 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@mui/material": "7.2.0", - "next": "^15.4.1", + "next": "^15.4.2", "next-themes": "^0.4.6", "react": "^19.1.0", "react-dom": "^19.1.0", diff --git a/bindings/devup-ui-wasm/Cargo.toml b/bindings/devup-ui-wasm/Cargo.toml index d79f4af1..579652db 100644 --- a/bindings/devup-ui-wasm/Cargo.toml +++ b/bindings/devup-ui-wasm/Cargo.toml @@ -34,3 +34,4 @@ serde-wasm-bindgen = "0.6.5" wasm-bindgen-test = "0.3.50" serial_test = "3.2.0" insta = "1.43.1" +rstest = "0.25.0" diff --git a/bindings/devup-ui-wasm/src/lib.rs b/bindings/devup-ui-wasm/src/lib.rs index 18924281..7edfb2bf 100644 --- a/bindings/devup-ui-wasm/src/lib.rs +++ b/bindings/devup-ui-wasm/src/lib.rs @@ -144,8 +144,8 @@ pub fn set_debug(debug: bool) { } #[wasm_bindgen(js_name = "isDebug")] -pub fn is_debug() { - css::debug::is_debug(); +pub fn is_debug() -> bool { + css::debug::is_debug() } #[wasm_bindgen(js_name = "importSheet")] @@ -240,10 +240,13 @@ pub fn get_theme_interface( } #[cfg(test)] mod tests { + use std::collections::HashMap; + use super::*; use insta::assert_debug_snapshot; + use rstest::rstest; use serial_test::serial; - use sheet::theme::{ColorTheme, Theme}; + use sheet::theme::{ColorTheme, Theme, Typography}; #[test] #[serial] @@ -271,6 +274,7 @@ mod tests { } #[test] + #[serial] fn deserialize_theme() { { let theme: Theme = serde_json::from_str( @@ -350,4 +354,325 @@ mod tests { assert_debug_snapshot!(theme); } } + + #[test] + #[serial] + fn to_css_from_theme() { + let mut theme = Theme::default(); + let mut color_theme = ColorTheme::default(); + color_theme.add_color("primary", "#000"); + + assert_eq!(color_theme.0.keys().count(), 1); + + theme.add_color_theme("default", color_theme); + let mut color_theme = ColorTheme::default(); + color_theme.add_color("primary", "#fff"); + theme.add_color_theme("dark", color_theme); + theme.add_typography( + "default", + vec![ + Some(Typography::new( + Some("Arial".to_string()), + Some("16px".to_string()), + Some("400".to_string()), + Some("1.5".to_string()), + Some("0.5".to_string()), + )), + Some(Typography::new( + Some("Arial".to_string()), + Some("24px".to_string()), + Some("400".to_string()), + Some("1.5".to_string()), + Some("0.5".to_string()), + )), + ], + ); + + theme.add_typography( + "default1", + vec![ + None, + Some(Typography::new( + Some("Arial".to_string()), + Some("24px".to_string()), + Some("400".to_string()), + Some("1.5".to_string()), + Some("0.5".to_string()), + )), + ], + ); + let css = theme.to_css(); + assert_debug_snapshot!(css); + + assert_eq!(Theme::default().to_css(), ""); + let mut theme = Theme::default(); + theme.add_typography( + "default", + vec![Some(Typography::new(None, None, None, None, None))], + ); + assert_eq!(theme.to_css(), ""); + + let mut theme = Theme::default(); + theme.add_color_theme( + "default", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + + theme.add_color_theme( + "dark", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + assert_debug_snapshot!(theme.to_css()); + + let mut theme = Theme::default(); + theme.add_color_theme( + "light", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + + theme.add_color_theme( + "dark", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + assert_debug_snapshot!(theme.to_css()); + + let mut theme = Theme::default(); + theme.add_color_theme( + "a", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + + theme.add_color_theme( + "b", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + assert_debug_snapshot!(theme.to_css()); + + let mut theme = Theme::default(); + theme.add_color_theme( + "light", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + + theme.add_color_theme( + "b", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + + theme.add_color_theme( + "a", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + + theme.add_color_theme( + "c", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + assert_debug_snapshot!(theme.to_css()); + + let mut theme = Theme::default(); + theme.add_color_theme( + "light", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + assert_debug_snapshot!(theme.to_css()); + + let mut theme = Theme::default(); + theme.add_color_theme( + "light", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + + theme.add_color_theme( + "b", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#001".to_string()); + map + }), + ); + + theme.add_color_theme( + "a", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#002".to_string()); + map + }), + ); + + theme.add_color_theme( + "c", + ColorTheme({ + let mut map = HashMap::new(); + map.insert("primary".to_string(), "#000".to_string()); + map + }), + ); + assert_debug_snapshot!(theme.to_css()); + } + + #[rstest] + #[case( + vec![0, 480, 768, 992, 1280], + vec![0, 480, 768, 992, 1280, 1600] + )] + #[case( + vec![0, 480, 768, 992, 1280, 1600], + vec![0, 480, 768, 992, 1280, 1600] + )] + #[case( + vec![0, 480, 768, 992, 1280, 1600, 1920], + vec![0, 480, 768, 992, 1280, 1600, 1920] + )] + fn update_breakpoints(#[case] input: Vec, #[case] expected: Vec) { + let mut theme = Theme::default(); + theme.update_breakpoints(input); + assert_eq!(theme.breakpoints, expected); + } + + #[test] + #[serial] + fn test_get_theme_interface() { + let sheet = StyleSheet::default(); + assert_eq!( + sheet.create_interface( + "package", + "ColorInterface", + "TypographyInterface", + "ThemeInterface" + ), + "" + ); + + let mut theme = Theme::default(); + let mut color_theme = ColorTheme::default(); + color_theme.add_color("primary", "#000"); + theme.add_color_theme("dark", color_theme); + GLOBAL_STYLE_SHEET.lock().unwrap().set_theme(theme); + assert_eq!( + get_theme_interface( + "package", + "ColorInterface", + "TypographyInterface", + "ThemeInterface" + ), + "import \"package\";declare module \"package\"{interface ColorInterface{$primary:null;}interface TypographyInterface{}interface ThemeInterface{dark:null;}}" + ); + + // test wrong case + let mut sheet = StyleSheet::default(); + let mut theme = Theme::default(); + let mut color_theme = ColorTheme::default(); + color_theme.add_color("(primary)", "#000"); + theme.add_color_theme("dark", color_theme); + theme.add_typography( + "prim``ary", + vec![Some(Typography::new( + Some("Arial".to_string()), + Some("16px".to_string()), + Some("400".to_string()), + Some("1.5".to_string()), + Some("0.5".to_string()), + ))], + ); + sheet.set_theme(theme); + *GLOBAL_STYLE_SHEET.lock().unwrap() = sheet; + assert_eq!( + get_theme_interface( + "package", + "ColorInterface", + "TypographyInterface", + "ThemeInterface" + ), + "import \"package\";declare module \"package\"{interface ColorInterface{[`$(primary)`]:null;}interface TypographyInterface{[`prim\\`\\`ary`]:null;}interface ThemeInterface{dark:null;}}" + ); + } + + #[test] + #[serial] + fn test_debug() { + assert_eq!(is_debug(), false); + set_debug(true); + assert_eq!(is_debug(), true); + set_debug(false); + assert_eq!(is_debug(), false); + } + + #[test] + #[serial] + fn test_default_theme() { + let mut theme = Theme::default(); + theme.add_color_theme("light", ColorTheme::default()); + theme.add_color_theme("dark", ColorTheme::default()); + let mut sheet = StyleSheet::default(); + sheet.set_theme(theme); + *GLOBAL_STYLE_SHEET.lock().unwrap() = sheet; + assert_eq!(get_default_theme().unwrap(), Some("light".to_string())); + + let mut theme = Theme::default(); + theme.add_color_theme("default", ColorTheme::default()); + theme.add_color_theme("dark", ColorTheme::default()); + + let mut sheet = StyleSheet::default(); + sheet.set_theme(theme); + *GLOBAL_STYLE_SHEET.lock().unwrap() = sheet; + assert_eq!(get_default_theme().unwrap(), Some("default".to_string())); + + let mut theme = Theme::default(); + theme.add_color_theme("dark", ColorTheme::default()); + + let mut sheet = StyleSheet::default(); + sheet.set_theme(theme); + *GLOBAL_STYLE_SHEET.lock().unwrap() = sheet; + assert_eq!(get_default_theme().unwrap(), Some("dark".to_string())); + } } diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-2.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-2.snap new file mode 100644 index 00000000..a371ad79 --- /dev/null +++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-2.snap @@ -0,0 +1,5 @@ +--- +source: bindings/devup-ui-wasm/src/lib.rs +expression: theme.to_css() +--- +":root{color-scheme:light;--primary:#000}:root[data-theme=dark]{color-scheme:dark}" diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-3.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-3.snap new file mode 100644 index 00000000..a371ad79 --- /dev/null +++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-3.snap @@ -0,0 +1,5 @@ +--- +source: bindings/devup-ui-wasm/src/lib.rs +expression: theme.to_css() +--- +":root{color-scheme:light;--primary:#000}:root[data-theme=dark]{color-scheme:dark}" diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-4.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-4.snap new file mode 100644 index 00000000..a6a6d4e1 --- /dev/null +++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-4.snap @@ -0,0 +1,5 @@ +--- +source: bindings/devup-ui-wasm/src/lib.rs +expression: theme.to_css() +--- +":root{color-scheme:light;--primary:#000}:root[data-theme=b]{color-scheme:dark}" diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-5.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-5.snap new file mode 100644 index 00000000..9713e49c --- /dev/null +++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-5.snap @@ -0,0 +1,5 @@ +--- +source: bindings/devup-ui-wasm/src/lib.rs +expression: theme.to_css() +--- +":root{color-scheme:light;--primary:#000}:root[data-theme=a]{color-scheme:dark}:root[data-theme=b]{color-scheme:dark}:root[data-theme=c]{color-scheme:dark}" diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-6.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-6.snap new file mode 100644 index 00000000..79b1cb04 --- /dev/null +++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-6.snap @@ -0,0 +1,5 @@ +--- +source: bindings/devup-ui-wasm/src/lib.rs +expression: theme.to_css() +--- +":root{--primary:#000}" diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-7.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-7.snap new file mode 100644 index 00000000..d6f1e25a --- /dev/null +++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme-7.snap @@ -0,0 +1,5 @@ +--- +source: bindings/devup-ui-wasm/src/lib.rs +expression: theme.to_css() +--- +":root{color-scheme:light;--primary:#000}:root[data-theme=a]{color-scheme:dark;--primary:#002}:root[data-theme=b]{color-scheme:dark;--primary:#001}:root[data-theme=c]{color-scheme:dark}" diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme.snap new file mode 100644 index 00000000..54c1c3f9 --- /dev/null +++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__to_css_from_theme.snap @@ -0,0 +1,5 @@ +--- +source: bindings/devup-ui-wasm/src/lib.rs +expression: css +--- +":root{color-scheme:light;--primary:light-dark(#000,#FFF)}:root[data-theme=dark]{color-scheme:dark}.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5}@media(min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}.typo-default1{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}}" diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs index 15fb9710..ee99ba0a 100644 --- a/libs/css/src/lib.rs +++ b/libs/css/src/lib.rs @@ -34,14 +34,14 @@ pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> Str } } -pub fn short_to_long(property: &str) -> String { +pub fn disassemble_property(property: &str) -> Vec { GLOBAL_STYLE_PROPERTY .get(property) .map(|v| match v.len() { - 1 => to_camel_case(v[0]), - _ => property.to_string(), + 1 => vec![to_camel_case(v[0])], + _ => v.iter().map(|v| to_camel_case(v)).collect(), }) - .unwrap_or_else(|| property.to_string()) + .unwrap_or_else(|| vec![property.to_string()]) } pub fn keyframes_to_keyframes_name(keyframes: &str) -> String { diff --git a/libs/css/src/optimize_value.rs b/libs/css/src/optimize_value.rs index 36370ba2..d4b2ef55 100644 --- a/libs/css/src/optimize_value.rs +++ b/libs/css/src/optimize_value.rs @@ -35,7 +35,7 @@ pub fn optimize_value(value: &str) -> String { let r = c[1].parse::().unwrap(); let g = c[2].parse::().unwrap(); let b = c[3].parse::().unwrap(); - format!("#{:02X}{:02X}{:02X}", r, g, b) + format!("#{r:02X}{g:02X}{b:02X}") }) .to_string(); if ret.contains("#") { diff --git a/libs/extractor/src/extract_style/extract_dynamic_style.rs b/libs/extractor/src/extract_style/extract_dynamic_style.rs index 588469b2..d49f37f0 100644 --- a/libs/extractor/src/extract_style/extract_dynamic_style.rs +++ b/libs/extractor/src/extract_style/extract_dynamic_style.rs @@ -1,6 +1,6 @@ use css::{ - optimize_value::optimize_value, sheet_to_classname, sheet_to_variable_name, short_to_long, - style_selector::StyleSelector, + optimize_value::optimize_value, sheet_to_classname, + sheet_to_variable_name, style_selector::StyleSelector, }; use crate::extract_style::{ExtractStyleProperty, style_property::StyleProperty}; @@ -28,7 +28,7 @@ impl ExtractDynamicStyle { selector: Option, ) -> Self { Self { - property: short_to_long(property), + property: property.to_string(), level, identifier: optimize_value(identifier), selector, diff --git a/libs/extractor/src/extract_style/extract_static_style.rs b/libs/extractor/src/extract_style/extract_static_style.rs index 99b46cb3..ed6b964f 100644 --- a/libs/extractor/src/extract_style/extract_static_style.rs +++ b/libs/extractor/src/extract_style/extract_static_style.rs @@ -1,5 +1,5 @@ use css::{ - optimize_value::optimize_value, sheet_to_classname, short_to_long, + optimize_value::optimize_value, sheet_to_classname, style_selector::StyleSelector, }; @@ -33,7 +33,7 @@ impl ExtractStaticStyle { } else { convert_value(value) }), - property: short_to_long(property), + property: property.to_string(), level, selector, style_order: None, diff --git a/libs/extractor/src/extractor/extract_style_from_expression.rs b/libs/extractor/src/extractor/extract_style_from_expression.rs index 95ecf5e4..72902ffe 100644 --- a/libs/extractor/src/extractor/extract_style_from_expression.rs +++ b/libs/extractor/src/extractor/extract_style_from_expression.rs @@ -13,7 +13,7 @@ use crate::{ is_same_expression, is_special_property, }, }; -use css::style_selector::StyleSelector; +use css::{disassemble_property, style_selector::StyleSelector}; use oxc_allocator::CloneIn; use oxc_ast::{ AstBuilder, @@ -50,27 +50,30 @@ pub fn extract_style_from_expression<'a>( && let name = ident.name.as_str() && !is_special_property(name) { - if name == "styleOrder" { - style_order = get_number_by_literal_expression(&prop.value) - .map(|v| v as u8); - continue; - } - if name == "styleVars" { - style_vars = Some(prop.value.clone_in(ast_builder.allocator)); - continue; - } + for name in disassemble_property(name) { + if name == "styleOrder" { + style_order = get_number_by_literal_expression(&prop.value) + .map(|v| v as u8); + continue; + } + if name == "styleVars" { + style_vars = + Some(prop.value.clone_in(ast_builder.allocator)); + continue; + } - let ExtractResult { - styles, tag: _tag, .. - } = extract_style_from_expression( - ast_builder, - Some(name), - &mut prop.value, - 0, - &None, - ); - props_styles.extend(styles); - tag = _tag.or(tag); + let ExtractResult { + styles, tag: _tag, .. + } = extract_style_from_expression( + ast_builder, + Some(&name), + &mut prop.value, + 0, + &None, + ); + props_styles.extend(styles); + tag = _tag.or(tag); + } true } else { false @@ -513,16 +516,18 @@ pub fn extract_style_from_expression<'a>( let mut props = vec![]; for p in obj.properties.iter_mut() { if let ObjectPropertyKind::ObjectProperty(o) = p { - props.extend( - extract_style_from_expression( - ast_builder, - Some(&o.key.name().unwrap()), - &mut o.value, - level, - selector, - ) - .styles, - ); + for name in disassemble_property(&o.key.name().unwrap()) { + props.extend( + extract_style_from_expression( + ast_builder, + Some(&name), + &mut o.value, + level, + selector, + ) + .styles, + ); + } } } ExtractResult { diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap index d9ec8b61..0a712f3e 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap @@ -6,7 +6,20 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "mx", + property: "marginLeft", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginRight", value: "4px", level: 0, selector: Some( @@ -18,5 +31,5 @@ ToBTreeSet { }, ), }, - code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap index 5eadf590..49391155 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "mx", + property: "marginBottom", value: "4px", level: 0, selector: Some( @@ -19,7 +19,33 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "my", + property: "marginLeft", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginRight", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginTop", value: "4px", level: 0, selector: Some( @@ -31,5 +57,5 @@ ToBTreeSet { }, ), }, - code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap index 1b0bc7f8..ca565c30 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap @@ -6,7 +6,20 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "mx", + property: "marginLeft", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginRight", value: "4px", level: 0, selector: Some( @@ -18,5 +31,5 @@ ToBTreeSet { }, ), }, - code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap index 3dfaf0ff..79e692fd 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap @@ -6,7 +6,20 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "mx", + property: "marginLeft", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginRight", value: "4px", level: 0, selector: Some( @@ -18,5 +31,5 @@ ToBTreeSet { }, ), }, - code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap index 87bc286a..4d1e1feb 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "mx", + property: "marginLeft", value: "40px", level: 0, selector: Some( @@ -19,7 +19,33 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "mx", + property: "marginLeft", + value: "80px", + level: 1, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginRight", + value: "40px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginRight", value: "80px", level: 1, selector: Some( @@ -31,5 +57,5 @@ ToBTreeSet { }, ), }, - code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap index e6c107d7..33c8114f 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "mx", + property: "marginLeft", value: "4px", level: 0, selector: Some( @@ -19,7 +19,33 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "mx", + property: "marginLeft", + value: "8px", + level: 1, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginRight", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "marginRight", value: "8px", level: 1, selector: Some( @@ -31,5 +57,5 @@ ToBTreeSet { }, ), }, - code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap b/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap index 0fbb58e2..05c35b96 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap @@ -24,7 +24,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "px", + property: "paddingLeft", value: "12px", level: 0, selector: None, @@ -33,7 +33,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "px", + property: "paddingLeft", value: "16px", level: 0, selector: None, @@ -42,7 +42,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "px", + property: "paddingLeft", value: "20px", level: 0, selector: None, @@ -51,7 +51,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "px", + property: "paddingLeft", value: "24px", level: 0, selector: None, @@ -60,7 +60,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "px", + property: "paddingLeft", value: "28px", level: 0, selector: None, @@ -69,7 +69,61 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "px", + property: "paddingLeft", + value: "32px", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "paddingRight", + value: "12px", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "paddingRight", + value: "16px", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "paddingRight", + value: "20px", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "paddingRight", + value: "24px", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "paddingRight", + value: "28px", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "paddingRight", value: "32px", level: 0, selector: None, @@ -77,5 +131,5 @@ ToBTreeSet { }, ), }, - code: "import \"@devup-ui/core/devup-ui.css\";\n