From 2116e887ec875e98d3103b820a7c26ce64b55760 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Sun, 3 Aug 2025 01:24:08 +0900 Subject: [PATCH 1/5] Update wasm --- .changeset/dull-paws-worry.md | 5 + .changeset/open-results-taste.md | 5 + .changeset/plain-corners-lose.md | 5 + .changeset/red-webs-draw.md | 5 + apps/next/package.json | 4 +- bindings/devup-ui-wasm/src/lib.rs | 5 +- libs/css/src/constant.rs | 4 + libs/css/src/lib.rs | 25 +- libs/css/src/property_type.rs | 253 ----------- libs/css/src/rm_css_comment.rs | 37 ++ libs/css/src/style_selector.rs | 24 + libs/extractor/src/component.rs | 12 +- libs/extractor/src/css_utils.rs | 67 ++- libs/extractor/src/extract_style/constant.rs | 32 +- .../extract_style/extract_dynamic_style.rs | 7 +- .../src/extract_style/extract_static_style.rs | 14 +- .../extract_style_from_expression.rs | 7 +- libs/extractor/src/lib.rs | 41 ++ ...ractor__tests__apply_var_typography-4.snap | 2 +- .../extractor__tests__component_in_func.snap | 2 +- ...ts__extract_class_name_from_component.snap | 2 +- ...tests__extract_conditional_selector-2.snap | 4 +- ...tests__extract_conditional_selector-4.snap | 8 +- ...__tests__extract_conditional_selector.snap | 4 +- ...ract_global_css_with_template_literal.snap | 2 +- ...or__tests__extract_keyframs_literal-2.snap | 4 +- ...ctor__tests__extract_keyframs_literal.snap | 4 +- .../extractor__tests__extract_selector-2.snap | 10 +- .../extractor__tests__extract_selector-3.snap | 4 +- .../extractor__tests__extract_selector-4.snap | 4 +- .../extractor__tests__extract_selector-5.snap | 4 +- .../extractor__tests__extract_selector-6.snap | 4 +- .../extractor__tests__extract_selector-7.snap | 4 +- .../extractor__tests__extract_selector-8.snap | 35 ++ .../extractor__tests__extract_selector-9.snap | 61 +++ .../extractor__tests__extract_selector.snap | 4 +- ...ests__extract_selector_with_literal-2.snap | 2 +- ..._tests__extract_selector_with_literal.snap | 2 +- ...s__extract_selector_with_responsive-2.snap | 8 +- ...s__extract_selector_with_responsive-3.snap | 8 +- ...sts__extract_selector_with_responsive.snap | 8 +- ...xtract_static_css_class_name_props-10.snap | 6 +- ...extract_static_css_class_name_props-2.snap | 2 +- ...extract_static_css_class_name_props-9.snap | 2 +- ...__extract_static_css_class_name_props.snap | 2 +- ...extract_static_css_with_media_query-2.snap | 4 +- ...extract_static_css_with_media_query-3.snap | 2 +- ...__extract_static_css_with_media_query.snap | 2 +- ...extract_style_props_with_class_name-8.snap | 4 +- ...extract_style_props_with_class_name-9.snap | 2 +- ...xtractor__tests__group_selector_props.snap | 2 +- .../extractor__tests__maintain_value.snap | 12 +- .../extractor__tests__negative_props-2.snap | 2 +- .../extractor__tests__negative_props-3.snap | 2 +- .../extractor__tests__negative_props-4.snap | 2 +- .../extractor__tests__negative_props-5.snap | 2 +- .../extractor__tests__negative_props-6.snap | 2 +- .../extractor__tests__negative_props-7.snap | 6 +- .../extractor__tests__negative_props.snap | 2 +- .../extractor__tests__nested_theme_props.snap | 6 +- ...r__tests__props_direct_array_select-5.snap | 4 +- ...ractor__tests__props_multi_expression.snap | 24 +- .../extractor__tests__rest_props-2.snap | 4 +- .../extractor__tests__style_order-2.snap | 2 +- ...actor__tests__support_transpile_cjs-2.snap | 2 +- ...actor__tests__support_transpile_cjs-3.snap | 2 +- ...tractor__tests__support_transpile_cjs.snap | 2 +- ...actor__tests__support_transpile_mjs-2.snap | 2 +- ...tractor__tests__support_transpile_mjs.snap | 2 +- ...ctor__tests__template_literal_props-6.snap | 2 +- ...tests__ternary_operator_in_selector-3.snap | 2 +- .../extractor__tests__theme_props.snap | 4 +- .../extractor__tests__theme_selector-2.snap | 2 +- .../extractor__tests__theme_selector-3.snap | 6 +- .../extractor__tests__theme_selector.snap | 2 +- libs/extractor/src/visit.rs | 7 +- libs/sheet/src/lib.rs | 421 +++++++++++++++--- .../snapshots/sheet__tests__create_css-3.snap | 2 +- .../snapshots/sheet__tests__create_css.snap | 2 +- ...ts__create_css_with_global_selector-6.snap | 5 + ...ts__create_css_with_global_selector-7.snap | 5 + ...ts__create_css_with_global_selector-8.snap | 5 + ...ts__create_css_with_global_selector-9.snap | 5 + .../sheet__tests__print_selector-2.snap | 2 +- .../sheet__tests__print_selector.snap | 2 +- .../sheet__tests__selector_with_prefix.snap | 2 +- .../sheet__tests__selector_with_query.snap | 2 +- .../sheet__tests__style_order_create_css.snap | 2 +- .../sheet__tests__theme_selector-2.snap | 2 +- .../sheet__tests__theme_selector-3.snap | 2 +- .../sheet__tests__theme_selector.snap | 2 +- .../sheet__tests__wrong_breakpoint.snap | 2 +- 92 files changed, 843 insertions(+), 495 deletions(-) create mode 100644 .changeset/dull-paws-worry.md create mode 100644 .changeset/open-results-taste.md create mode 100644 .changeset/plain-corners-lose.md create mode 100644 .changeset/red-webs-draw.md delete mode 100644 libs/css/src/property_type.rs create mode 100644 libs/css/src/rm_css_comment.rs create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap create mode 100644 libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-6.snap create mode 100644 libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-7.snap create mode 100644 libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-8.snap create mode 100644 libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-9.snap diff --git a/.changeset/dull-paws-worry.md b/.changeset/dull-paws-worry.md new file mode 100644 index 00000000..139b5162 --- /dev/null +++ b/.changeset/dull-paws-worry.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Fix global css rerender issue without components diff --git a/.changeset/open-results-taste.md b/.changeset/open-results-taste.md new file mode 100644 index 00000000..cb90e2c1 --- /dev/null +++ b/.changeset/open-results-taste.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Support css comment syntax diff --git a/.changeset/plain-corners-lose.md b/.changeset/plain-corners-lose.md new file mode 100644 index 00000000..9ad997c0 --- /dev/null +++ b/.changeset/plain-corners-lose.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Optimize css selector diff --git a/.changeset/red-webs-draw.md b/.changeset/red-webs-draw.md new file mode 100644 index 00000000..4244bcbe --- /dev/null +++ b/.changeset/red-webs-draw.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Optimize creating css diff --git a/apps/next/package.json b/apps/next/package.json index ad9e8a7f..7b420632 100644 --- a/apps/next/package.json +++ b/apps/next/package.json @@ -4,8 +4,8 @@ "type": "module", "private": true, "scripts": { - "dev": "next dev", - "build": "next build", + "dev": "next dev --turbopack", + "build": "next build --turbopack", "start": "next start", "lint": "next lint" }, diff --git a/bindings/devup-ui-wasm/src/lib.rs b/bindings/devup-ui-wasm/src/lib.rs index 404ca6d3..c55a70b3 100644 --- a/bindings/devup-ui-wasm/src/lib.rs +++ b/bindings/devup-ui-wasm/src/lib.rs @@ -17,6 +17,7 @@ pub struct Output { code: String, styles: HashSet, map: Option, + default_collected: bool, } #[wasm_bindgen] extern "C" { @@ -130,7 +131,7 @@ impl Output { } } - if !collected { + if !collected && !self.default_collected { return None; } @@ -183,7 +184,6 @@ pub fn code_extract( css_file: &str, ) -> Result { let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap(); - sheet.rm_global_css(filename); match extract( filename, @@ -197,6 +197,7 @@ pub fn code_extract( code: output.code, styles: output.styles, map: output.map, + default_collected: sheet.rm_global_css(filename), }), Err(error) => Err(JsValue::from_str(error.to_string().as_str())), } diff --git a/libs/css/src/constant.rs b/libs/css/src/constant.rs index ecf0dbfe..acd2bc5e 100644 --- a/libs/css/src/constant.rs +++ b/libs/css/src/constant.rs @@ -119,6 +119,10 @@ pub(super) static ZERO_PERCENT_FUNCTION: phf::Set<&str> = phf_set! { }; pub(super) static F_SPACE_RE: Lazy = Lazy::new(|| Regex::new(r"\s*,\s*").unwrap()); + +pub(super) static CSS_COMMENT_RE: Lazy = + Lazy::new(|| Regex::new(r"/\*[\s\S]*?\*/").unwrap()); + pub(super) static F_DOT_RE: Lazy = Lazy::new(|| Regex::new(r"(\b|,)0\.(\d+)").unwrap()); pub(super) static DOT_ZERO_RE: Lazy = Lazy::new(|| Regex::new(r"(\b|,)-?0\.0+([^\d])").unwrap()); diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs index d452557c..0a1fae41 100644 --- a/libs/css/src/lib.rs +++ b/libs/css/src/lib.rs @@ -3,7 +3,7 @@ mod constant; pub mod debug; pub mod is_special_property; pub mod optimize_value; -pub mod property_type; +pub mod rm_css_comment; mod selector_separator; pub mod style_selector; pub mod utils; @@ -15,7 +15,7 @@ use crate::constant::{COLOR_HASH, F_SPACE_RE, GLOBAL_STYLE_PROPERTY, ZERO_RE}; use crate::debug::is_debug; use crate::optimize_value::optimize_value; use crate::style_selector::StyleSelector; -use crate::utils::{to_camel_case, to_kebab_case}; +use crate::utils::to_kebab_case; pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> String { if let Some(selector) = selector { @@ -39,10 +39,25 @@ pub fn disassemble_property(property: &str) -> Vec { GLOBAL_STYLE_PROPERTY .get(property) .map(|v| match v.len() { - 1 => vec![to_camel_case(v[0])], - _ => v.iter().map(|v| to_camel_case(v)).collect(), + 1 => vec![v[0].to_string()], + _ => v.iter().map(|v| v.to_string()).collect(), + }) + .unwrap_or_else(|| { + vec![if (property.starts_with("Webkit") + && property.len() > 6 + && property.chars().nth(6).unwrap().is_uppercase()) + || (property.starts_with("Moz") + && property.len() > 3 + && property.chars().nth(3).unwrap().is_uppercase()) + || (property.starts_with("ms") + && property.len() > 2 + && property.chars().nth(2).unwrap().is_uppercase()) + { + format!("-{}", to_kebab_case(property)) + } else { + to_kebab_case(property) + }] }) - .unwrap_or_else(|| vec![property.to_string()]) } pub fn keyframes_to_keyframes_name(keyframes: &str) -> String { diff --git a/libs/css/src/property_type.rs b/libs/css/src/property_type.rs deleted file mode 100644 index d695957a..00000000 --- a/libs/css/src/property_type.rs +++ /dev/null @@ -1,253 +0,0 @@ -use crate::{constant::GLOBAL_STYLE_PROPERTY, utils::to_kebab_case}; - -#[derive(Clone, Debug, PartialEq)] -pub enum PropertyType { - Single(String), - Multi(Vec), -} - -impl From<&str> for PropertyType { - fn from(value: &str) -> Self { - GLOBAL_STYLE_PROPERTY - .get(value) - .cloned() - .map(|v| match v.len() { - 1 => PropertyType::Single(v[0].to_string()), - _ => PropertyType::Multi(v.iter().map(|v| v.to_string()).collect()), - }) - .unwrap_or_else(|| { - if (value.starts_with("Webkit") - && value.len() > 6 - && value.chars().nth(6).unwrap().is_uppercase()) - || (value.starts_with("Moz") - && value.len() > 3 - && value.chars().nth(3).unwrap().is_uppercase()) - || (value.starts_with("ms") - && value.len() > 2 - && value.chars().nth(2).unwrap().is_uppercase()) - { - PropertyType::Single(format!("-{}", to_kebab_case(value))) - } else { - PropertyType::Single(to_kebab_case(value)) - } - }) - } -} - -impl From<[&str; 2]> for PropertyType { - fn from(value: [&str; 2]) -> Self { - PropertyType::Multi(value.iter().map(|v| v.to_string()).collect()) - } -} - -#[cfg(test)] -mod tests { - - use super::*; - - #[test] - fn test_convert_property() { - assert_eq!( - PropertyType::from("bg"), - PropertyType::Single("background".to_string()) - ); - assert_eq!( - PropertyType::from("bgColor"), - PropertyType::Single("background-color".to_string()) - ); - assert_eq!( - PropertyType::from("color"), - PropertyType::Single("color".to_string()) - ); - assert_eq!( - PropertyType::from("m"), - PropertyType::Single("margin".to_string()) - ); - assert_eq!( - PropertyType::from("mt"), - PropertyType::Single("margin-top".to_string()) - ); - assert_eq!( - PropertyType::from("mr"), - PropertyType::Single("margin-right".to_string()) - ); - assert_eq!( - PropertyType::from("mb"), - PropertyType::Single("margin-bottom".to_string()) - ); - assert_eq!( - PropertyType::from("ml"), - PropertyType::Single("margin-left".to_string()) - ); - assert_eq!( - PropertyType::from("p"), - PropertyType::Single("padding".to_string()) - ); - assert_eq!( - PropertyType::from("pt"), - PropertyType::Single("padding-top".to_string()) - ); - assert_eq!( - PropertyType::from("pr"), - PropertyType::Single("padding-right".to_string()) - ); - assert_eq!( - PropertyType::from("pb"), - PropertyType::Single("padding-bottom".to_string()) - ); - assert_eq!( - PropertyType::from("pl"), - PropertyType::Single("padding-left".to_string()) - ); - assert_eq!( - PropertyType::from("w"), - PropertyType::Single("width".to_string()) - ); - assert_eq!( - PropertyType::from("h"), - PropertyType::Single("height".to_string()) - ); - assert_eq!( - PropertyType::from("minW"), - PropertyType::Single("min-width".to_string()) - ); - assert_eq!( - PropertyType::from("minH"), - PropertyType::Single("min-height".to_string()) - ); - assert_eq!( - PropertyType::from("maxW"), - PropertyType::Single("max-width".to_string()) - ); - assert_eq!( - PropertyType::from("maxH"), - PropertyType::Single("max-height".to_string()) - ); - assert_eq!( - PropertyType::from("mx"), - PropertyType::Multi(vec!["margin-left".to_string(), "margin-right".to_string()]) - ); - assert_eq!( - PropertyType::from("my"), - PropertyType::Multi(vec!["margin-top".to_string(), "margin-bottom".to_string()]) - ); - assert_eq!( - PropertyType::from("px"), - PropertyType::Multi(vec![ - "padding-left".to_string(), - "padding-right".to_string() - ]) - ); - assert_eq!( - PropertyType::from("py"), - PropertyType::Multi(vec![ - "padding-top".to_string(), - "padding-bottom".to_string() - ]) - ); - } - - #[test] - fn test_convert_vendor_property() { - assert_eq!( - PropertyType::from("MozUserSelect"), - PropertyType::Single("-moz-user-select".to_string()) - ); - assert_eq!( - PropertyType::from("msAccelerator"), - PropertyType::Single("-ms-accelerator".to_string()) - ); - assert_eq!( - PropertyType::from("WebkitAlignContent"), - PropertyType::Single("-webkit-align-content".to_string()) - ); - } - - #[test] - fn test_property_type_from() { - assert_eq!( - PropertyType::from("background"), - PropertyType::Single("background".to_string()) - ); - assert_eq!( - PropertyType::from("background-color"), - PropertyType::Single("background-color".to_string()) - ); - assert_eq!( - PropertyType::from("color"), - PropertyType::Single("color".to_string()) - ); - assert_eq!( - PropertyType::from("margin"), - PropertyType::Single("margin".to_string()) - ); - assert_eq!( - PropertyType::from("margin-top"), - PropertyType::Single("margin-top".to_string()) - ); - assert_eq!( - PropertyType::from("margin-right"), - PropertyType::Single("margin-right".to_string()) - ); - assert_eq!( - PropertyType::from("margin-bottom"), - PropertyType::Single("margin-bottom".to_string()) - ); - assert_eq!( - PropertyType::from("margin-left"), - PropertyType::Single("margin-left".to_string()) - ); - assert_eq!( - PropertyType::from("padding"), - PropertyType::Single("padding".to_string()) - ); - assert_eq!( - PropertyType::from("padding-top"), - PropertyType::Single("padding-top".to_string()) - ); - assert_eq!( - PropertyType::from("padding-right"), - PropertyType::Single("padding-right".to_string()) - ); - assert_eq!( - PropertyType::from("padding-bottom"), - PropertyType::Single("padding-bottom".to_string()) - ); - assert_eq!( - PropertyType::from("padding-left"), - PropertyType::Single("padding-left".to_string()) - ); - assert_eq!( - PropertyType::from("width"), - PropertyType::Single("width".to_string()) - ); - assert_eq!( - PropertyType::from("height"), - PropertyType::Single("height".to_string()) - ); - assert_eq!( - PropertyType::from("min-width"), - PropertyType::Single("min-width".to_string()) - ); - assert_eq!( - PropertyType::from("min-height"), - PropertyType::Single("min-height".to_string()) - ); - assert_eq!( - PropertyType::from("max-width"), - PropertyType::Single("max-width".to_string()) - ); - assert_eq!( - PropertyType::from("max-height"), - PropertyType::Single("max-height".to_string()) - ); - assert_eq!( - PropertyType::from(["margin-left", "margin-right"]), - PropertyType::Multi(vec!["margin-left".to_string(), "margin-right".to_string()]) - ); - assert_eq!( - PropertyType::from(["margin-top", "margin-bottom"]), - PropertyType::Multi(vec!["margin-top".to_string(), "margin-bottom".to_string()]) - ); - } -} diff --git a/libs/css/src/rm_css_comment.rs b/libs/css/src/rm_css_comment.rs new file mode 100644 index 00000000..2816e719 --- /dev/null +++ b/libs/css/src/rm_css_comment.rs @@ -0,0 +1,37 @@ +use crate::constant::CSS_COMMENT_RE; + +pub fn rm_css_comment(value: &str) -> String { + CSS_COMMENT_RE + .replace_all(value, "") + .trim() + .split_ascii_whitespace() + .collect::>() + .join(" ") +} + +#[cfg(test)] +mod tests { + use super::*; + use rstest::rstest; + + #[rstest] + #[case("/* comment */", "")] + #[case("/* comment */ div", "div")] + #[case("div /* comment */", "div")] + #[case("div /* comment */ div", "div div")] + #[case("div /* comment */ div /* comment */", "div div")] + #[case("div /* comment */ div /* comment */ div", "div div div")] + #[case("div /* comment */ div /* comment */ div /* comment */", "div div div")] + #[case( + "div /* comment + */ div /* comment */ div /* comment */", + "div div div" + )] + #[case( + "div /* comment */ div /* comment */ div /* comment */ div", + "div div div div" + )] + fn test_rm_css_comment(#[case] input: &str, #[case] expected: &str) { + assert_eq!(rm_css_comment(input), expected); + } +} diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs index ef25d770..e634cc43 100644 --- a/libs/css/src/style_selector.rs +++ b/libs/css/src/style_selector.rs @@ -18,6 +18,30 @@ pub enum StyleSelector { Global(String, String), } +fn optimize_selector_string(selector: &str) -> String { + selector + .split_whitespace() + .collect::>() + .join(" ") + .replace(", ", ",") +} +pub fn optimize_selector(selector: StyleSelector) -> StyleSelector { + match selector { + StyleSelector::Media { query, selector } => StyleSelector::Media { + query: query.to_string(), + selector: selector + .as_ref() + .map(|s| optimize_selector_string(s.as_str())), + }, + StyleSelector::Selector(selector) => { + StyleSelector::Selector(optimize_selector_string(&selector)) + } + StyleSelector::Global(selector, file) => { + StyleSelector::Global(optimize_selector_string(&selector), file.to_string()) + } + } +} + impl PartialOrd for StyleSelector { fn partial_cmp(&self, other: &Self) -> Option { Some(self.cmp(other)) diff --git a/libs/extractor/src/component.rs b/libs/extractor/src/component.rs index 4ee4ef1b..201bc561 100644 --- a/libs/extractor/src/component.rs +++ b/libs/extractor/src/component.rs @@ -55,7 +55,7 @@ impl ExportVariableKind { "display", "flex", 0, None, )), ExtractStyleValue::Static(ExtractStaticStyle::new_basic( - "flexDirection", + "flex-direction", "column", 0, None, @@ -68,13 +68,13 @@ impl ExportVariableKind { "display", "flex", 0, None, )), ExtractStyleValue::Static(ExtractStaticStyle::new_basic( - "justifyContent", + "justify-content", "center", 0, None, )), ExtractStyleValue::Static(ExtractStaticStyle::new_basic( - "alignItems", + "align-items", "center", 0, None, @@ -182,7 +182,7 @@ mod tests { "display", "flex", 0, None, )), ExtractStyleValue::Static(ExtractStaticStyle::new_basic( - "flexDirection", + "flex-direction", "column", 0, None, @@ -196,13 +196,13 @@ mod tests { "display", "flex", 0, None, )), ExtractStyleValue::Static(ExtractStaticStyle::new_basic( - "justifyContent", + "justify-content", "center", 0, None, )), ExtractStyleValue::Static(ExtractStaticStyle::new_basic( - "alignItems", + "align-items", "center", 0, None, diff --git a/libs/extractor/src/css_utils.rs b/libs/extractor/src/css_utils.rs index 7832be21..61cc35ad 100644 --- a/libs/extractor/src/css_utils.rs +++ b/libs/extractor/src/css_utils.rs @@ -1,6 +1,6 @@ use std::collections::BTreeMap; -use css::{style_selector::StyleSelector, utils::to_camel_case}; +use css::{rm_css_comment::rm_css_comment, style_selector::StyleSelector}; use crate::{ ExtractStyleProp, @@ -97,14 +97,15 @@ fn css_to_style_block<'a>( level: u8, selector: &Option, ) -> Vec> { - css.split(";") + rm_css_comment(css) + .split(";") .filter_map(|s| { let s = s.trim(); if s.is_empty() { None } else { let mut iter = s.split(":").map(|s| s.trim()); - let property = to_camel_case(iter.next().unwrap()); + let property = iter.next().unwrap(); let value = iter.next().unwrap(); Some(ExtractStyleProp::Static(ExtractStyleValue::Static( ExtractStaticStyle::new(&property, value, level, selector.clone()), @@ -146,7 +147,8 @@ pub fn keyframes_to_keyframes_style<'a>( } pub fn optimize_css_block(css: &str) -> String { - css.split("{") + rm_css_comment(css) + .split("{") .map(|s| s.trim().to_string()) .collect::>() .join("{") @@ -179,6 +181,20 @@ mod tests { use rstest::rstest; #[rstest] + #[case( + "div{ + /* comment */ + background-color: red; + /* color: blue; */ + }", + "div{background-color:red}" + )] + #[case( + "/*div{ + background-color: red; + }*/", + "" + )] #[case( " img { background-color : red; } ", "img{background-color:red}" @@ -226,7 +242,7 @@ mod tests { #[case( "font-size: 16px;", vec![ - ("fontSize", "16px", None), + ("font-size", "16px", None), ] )] #[case( @@ -285,6 +301,36 @@ mod tests { })), ] )] + #[case( + "@media (min-width: 768px) { + & { + border: 1px solid #fff; + color: #fff; + } + &:hover, &:active, &:nth-child(2) { + border: 1px solid #000; + color: #000; + } + }", + vec![ + ("border", "1px solid #FFF", Some(StyleSelector::Media { + query: "(min-width:768px)".to_string(), + selector: None, + })), + ("color", "#FFF", Some(StyleSelector::Media { + query: "(min-width:768px)".to_string(), + selector: None, + })), + ("border", "1px solid #000", Some(StyleSelector::Media { + query: "(min-width:768px)".to_string(), + selector: Some("&:hover,&:active,&:nth-child(2)".to_string()), + })), + ("color", "#000", Some(StyleSelector::Media { + query: "(min-width:768px)".to_string(), + selector: Some("&:hover,&:active,&:nth-child(2)".to_string()), + })), + ] + )] #[case( "@media (min-width: 768px) { & { @@ -436,8 +482,8 @@ mod tests { #[case( "to {\nbackground-color:red;\n}\nfrom {\nbackground-color:blue;\n}", vec![ - ("to", vec![("backgroundColor", "red")]), - ("from", vec![("backgroundColor", "blue")]), + ("to", vec![("background-color", "red")]), + ("from", vec![("background-color", "blue")]), ], )] #[case( @@ -470,6 +516,13 @@ mod tests { ("50%", vec![("color", "red"), ("background", "blue")]), ], )] + // comment case + #[case( + "50% { color: red; /*background: blue;*/ }", + vec![ + ("50%", vec![("color", "red")]), + ], + )] // error case #[case( "50% { color: red ; background: blue ", diff --git a/libs/extractor/src/extract_style/constant.rs b/libs/extractor/src/extract_style/constant.rs index 040411aa..06480222 100644 --- a/libs/extractor/src/extract_style/constant.rs +++ b/libs/extractor/src/extract_style/constant.rs @@ -3,22 +3,22 @@ use phf::phf_set; pub(super) static MAINTAIN_VALUE_PROPERTIES: phf::Set<&str> = phf_set! { "opacity", "flex", - "zIndex", - "lineClamp", - "fontWeight", - "lineHeight", + "z-index", + "line-clamp", + "font-weight", + "line-height", "scale", - "aspectRatio", - "flexGrow", - "flexShrink", + "aspect-ratio", + "flex-grow", + "flex-shrink", "order", - "gridColumn", - "gridColumnStart", - "gridColumnEnd", - "gridRow", - "gridRowStart", - "gridRowEnd", - "animationIterationCount", - "tabSize", - "MozTabSize" + "grid-column", + "grid-column-start", + "grid-column-end", + "grid-row", + "grid-row-start", + "grid-row-end", + "animation-iteration-count", + "tab-size", + "moz-tab-size" }; diff --git a/libs/extractor/src/extract_style/extract_dynamic_style.rs b/libs/extractor/src/extract_style/extract_dynamic_style.rs index 675cf7f1..2308357e 100644 --- a/libs/extractor/src/extract_style/extract_dynamic_style.rs +++ b/libs/extractor/src/extract_style/extract_dynamic_style.rs @@ -1,6 +1,7 @@ use css::{ - optimize_value::optimize_value, sheet_to_classname, sheet_to_variable_name, - style_selector::StyleSelector, + optimize_value::optimize_value, + sheet_to_classname, sheet_to_variable_name, + style_selector::{StyleSelector, optimize_selector}, }; use crate::extract_style::{ExtractStyleProperty, style_property::StyleProperty}; @@ -31,7 +32,7 @@ impl ExtractDynamicStyle { property: property.to_string(), level, identifier: optimize_value(identifier), - selector, + selector: selector.map(optimize_selector), style_order: None, } } diff --git a/libs/extractor/src/extract_style/extract_static_style.rs b/libs/extractor/src/extract_style/extract_static_style.rs index cae59357..a062280c 100644 --- a/libs/extractor/src/extract_style/extract_static_style.rs +++ b/libs/extractor/src/extract_style/extract_static_style.rs @@ -1,4 +1,8 @@ -use css::{optimize_value::optimize_value, sheet_to_classname, style_selector::StyleSelector}; +use css::{ + optimize_value::optimize_value, + sheet_to_classname, + style_selector::{StyleSelector, optimize_selector}, +}; use crate::{ extract_style::{ @@ -32,7 +36,7 @@ impl ExtractStaticStyle { }), property: property.to_string(), level, - selector, + selector: selector.map(optimize_selector), style_order: None, } } @@ -81,13 +85,13 @@ impl ExtractStyleProperty for ExtractStaticStyle { fn extract(&self) -> StyleProperty { let s = self.selector.clone().map(|s| s.to_string()); StyleProperty::ClassName(sheet_to_classname( - self.property.as_str(), + &self.property, self.level, Some(&optimize_value( - &if MAINTAIN_VALUE_PROPERTIES.contains(self.property.as_str()) { + &if MAINTAIN_VALUE_PROPERTIES.contains(&self.property) { self.value.to_string() } else { - convert_value(self.value.as_str()) + convert_value(&self.value) }, )), s.as_deref(), diff --git a/libs/extractor/src/extractor/extract_style_from_expression.rs b/libs/extractor/src/extractor/extract_style_from_expression.rs index 6420322c..26381cf7 100644 --- a/libs/extractor/src/extractor/extract_style_from_expression.rs +++ b/libs/extractor/src/extractor/extract_style_from_expression.rs @@ -52,11 +52,12 @@ pub fn extract_style_from_expression<'a>( && let name = ident.name.as_str() && !is_special_property(name) { - for name in disassemble_property(name) { - if name == "styleOrder" { + let property_name = name.to_string(); + for name in disassemble_property(&property_name) { + if &property_name == "styleOrder" { style_order = get_number_by_literal_expression(&prop.value) .map(|v| v as u8); - } else if name == "styleVars" { + } else if &property_name == "styleVars" { style_vars = Some(prop.value.clone_in(ast_builder.allocator)); } else { diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs index 781caffc..2ee91b40 100644 --- a/libs/extractor/src/lib.rs +++ b/libs/extractor/src/lib.rs @@ -1695,6 +1695,47 @@ import clsx from 'clsx' ) .unwrap() )); + + reset_class_map(); + assert_debug_snapshot!(ToBTreeSet::from( + extract( + "test.tsx", + r"import {Box} from '@devup-ui/core' + + ", + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap() + )); + + reset_class_map(); + assert_debug_snapshot!(ToBTreeSet::from( + extract( + "test.tsx", + r#"import {Box} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap() + )); } #[test] diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap index e1641577..a54a8223 100644 --- a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "boxSizing", + property: "box-sizing", value: "border-box", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap index 3da1071f..037d0e0e 100644 --- a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap +++ b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "alignItems", + property: "align-items", value: "center", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap b/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap index 729b0016..0394f7bd 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap @@ -17,7 +17,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "flexDirection", + property: "flex-direction", value: "column", level: 0, selector: None, 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 0a712f3e..24f2e419 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,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( 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 49391155..e37201bc 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: "marginBottom", + property: "margin-bottom", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -32,7 +32,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( @@ -45,7 +45,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginTop", + property: "margin-top", value: "4px", level: 0, selector: Some( 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 ca565c30..e1380e29 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,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap index 68035513..80137fea 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap index 5cc346a1..075670de 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap @@ -9,7 +9,7 @@ ToBTreeSet { keyframes: { "0%": [ ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: None, @@ -25,7 +25,7 @@ ToBTreeSet { ], "100%": [ ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "blue", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap index ef5556b1..411f8408 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap @@ -9,7 +9,7 @@ ToBTreeSet { keyframes: { "from": [ ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: None, @@ -18,7 +18,7 @@ ToBTreeSet { ], "to": [ ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "blue", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap index b6d3bec1..861216a9 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "alignItems", + property: "align-items", value: "center", level: 0, selector: None, @@ -17,7 +17,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "boxShadow", + property: "box-shadow", value: "0 0 15px 0 #00000040", level: 2, selector: Some( @@ -30,7 +30,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "boxShadow", + property: "box-shadow", value: "0 1px 3px 0 #00000040", level: 0, selector: Some( @@ -43,7 +43,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "boxShadow", + property: "box-shadow", value: "none", level: 0, selector: Some( @@ -67,7 +67,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "justifyContent", + property: "justify-content", value: "center", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap index 5add9ab7..d8e3f61f 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap index af132657..1f1141b2 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap index b4fa363c..2277bcc4 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap index 91b348d3..e5a224ee 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap index 5fd5fdd4..7d0df1f6 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap new file mode 100644 index 00000000..00fed34e --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap @@ -0,0 +1,35 @@ +--- +source: libs/extractor/src/lib.rs +expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n \n \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())" +--- +ToBTreeSet { + styles: { + Static( + ExtractStaticStyle { + property: "margin-left", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:nth-last-child", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "margin-right", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:nth-last-child", + ), + ), + style_order: None, + }, + ), + }, + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap new file mode 100644 index 00000000..5cb1b1ca --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap @@ -0,0 +1,61 @@ +--- +source: libs/extractor/src/lib.rs +expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())" +--- +ToBTreeSet { + styles: { + Static( + ExtractStaticStyle { + property: "margin-left", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:nth-last-child(2),&:nth-last-child(3)", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "margin-left", + value: "8px", + level: 0, + selector: Some( + Selector( + "&:nth-last-child", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "margin-right", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:nth-last-child(2),&:nth-last-child(3)", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "margin-right", + value: "8px", + level: 0, + selector: Some( + Selector( + "&:nth-last-child", + ), + ), + style_order: None, + }, + ), + }, + 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 79e692fd..f8c1702c 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap index bd486921..110c2b18 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap index 2c511645..cafd6834 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: Some( 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 4d1e1feb..aadedafb 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: "marginLeft", + property: "margin-left", value: "40px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "80px", level: 1, selector: Some( @@ -32,7 +32,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "40px", level: 0, selector: Some( @@ -45,7 +45,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "80px", level: 1, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap index fc664d14..4ac42293 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "10px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "20px", level: 1, selector: Some( @@ -32,7 +32,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "10px", level: 0, selector: Some( @@ -45,7 +45,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "20px", level: 1, selector: Some( 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 33c8114f..155a3ba6 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: "marginLeft", + property: "margin-left", value: "4px", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginLeft", + property: "margin-left", value: "8px", level: 1, selector: Some( @@ -32,7 +32,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "4px", level: 0, selector: Some( @@ -45,7 +45,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginRight", + property: "margin-right", value: "8px", level: 1, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap index 8cd3a8ff..14983bba 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "green", level: 1, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: Some( @@ -32,7 +32,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 2, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap index afbec06e..7877da9f 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap index 5e38ad93..688d3c86 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap index 6c2345ea..1a693d3f 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap index fb7a0fdd..d20bf195 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "blue", level: 0, selector: Some( @@ -22,7 +22,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap index 9c8b013e..2d1fea83 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap index 82a55616..f223a6d3 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "backgroundColor", + property: "background-color", value: "red", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap index 7bfdff02..921cd75d 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "borderColor", + property: "border-color", value: "", level: 0, selector: Some( @@ -19,7 +19,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "borderColor", + property: "border-color", value: "blue", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap index 35ac0d70..b9137522 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "boxSizing", + property: "box-sizing", value: "border-box", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap index a9e1d535..d419b973 100644 --- a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - "*[role=group]:hover &", + "*[role=group]:-hover &", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap b/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap index 98cf60b1..596670ea 100644 --- a/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap +++ b/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap @@ -6,8 +6,8 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "MozTabSize", - value: "4", + property: "-moz-tab-size", + value: "16px", level: 0, selector: None, style_order: None, @@ -35,7 +35,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "fontWeight", + property: "font-weight", value: "900", level: 0, selector: None, @@ -44,7 +44,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "lineHeight", + property: "line-height", value: "1", level: 0, selector: None, @@ -71,7 +71,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "tabSize", + property: "tab-size", value: "4", level: 0, selector: None, @@ -80,7 +80,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "zIndex", + property: "z-index", value: "2", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap index 4bb79319..4ee4ce0a 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Dynamic( ExtractDynamicStyle { - property: "zIndex", + property: "z-index", level: 0, identifier: "-a", selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap index 7d0e6b9e..4b084986 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Dynamic( ExtractDynamicStyle { - property: "zIndex", + property: "z-index", level: 0, identifier: "-(1 + a)", selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap index 7174580f..3bda9f8a 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Dynamic( ExtractDynamicStyle { - property: "zIndex", + property: "z-index", level: 0, identifier: "-1 * a", selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap index ed2831c6..cb3fcf60 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "zIndex", + property: "z-index", value: "-1", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap index 4e69601f..b1ee12e6 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "zIndex", + property: "z-index", value: "-1", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap index e7874561..e6fa01a8 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "zIndex", + property: "z-index", value: "-1", level: 0, selector: None, @@ -15,7 +15,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "zIndex", + property: "z-index", value: "-2", level: 1, selector: None, @@ -24,7 +24,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "zIndex", + property: "z-index", value: "-3", level: 2, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap index 56273a05..486983df 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "zIndex", + property: "z-index", value: "-1", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap index 186162f1..b36a3151 100644 --- a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] &:active", + ":root[data-theme=-dark] &:active", ), ), style_order: None, @@ -24,7 +24,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] &:active::placeholder", + ":root[data-theme=-dark] &:active::placeholder", ), ), style_order: None, @@ -37,7 +37,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] &:hover", + ":root[data-theme=-dark] &:hover", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap index d8760a73..65f5e955 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "alignItems", + property: "align-items", value: "center", level: 0, selector: None, @@ -55,7 +55,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "justifyContent", + property: "justify-content", value: "center", level: 0, selector: None, 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 05c35b96..8af05807 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: "paddingLeft", + property: "padding-left", value: "12px", level: 0, selector: None, @@ -33,7 +33,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingLeft", + property: "padding-left", value: "16px", level: 0, selector: None, @@ -42,7 +42,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingLeft", + property: "padding-left", value: "20px", level: 0, selector: None, @@ -51,7 +51,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingLeft", + property: "padding-left", value: "24px", level: 0, selector: None, @@ -60,7 +60,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingLeft", + property: "padding-left", value: "28px", level: 0, selector: None, @@ -69,7 +69,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingLeft", + property: "padding-left", value: "32px", level: 0, selector: None, @@ -78,7 +78,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingRight", + property: "padding-right", value: "12px", level: 0, selector: None, @@ -87,7 +87,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingRight", + property: "padding-right", value: "16px", level: 0, selector: None, @@ -96,7 +96,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingRight", + property: "padding-right", value: "20px", level: 0, selector: None, @@ -105,7 +105,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingRight", + property: "padding-right", value: "24px", level: 0, selector: None, @@ -114,7 +114,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingRight", + property: "padding-right", value: "28px", level: 0, selector: None, @@ -123,7 +123,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "paddingRight", + property: "padding-right", value: "32px", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap index 2adec258..a42fb1ac 100644 --- a/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap @@ -6,7 +6,7 @@ ToBTreeSet { styles: { Static( ExtractStaticStyle { - property: "boxShadow", + property: "box-shadow", value: "none", level: 0, selector: Some( @@ -30,7 +30,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "flexDirection", + property: "flex-direction", value: "column", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap index bed99567..46054b68 100644 --- a/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap @@ -54,7 +54,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginTop", + property: "margin-top", value: "8px", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap index 4bca8e85..3bb5d7cf 100644 --- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap @@ -48,7 +48,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginTop", + property: "margin-top", value: "8px", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap index fd167780..384fc03c 100644 --- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap @@ -48,7 +48,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginTop", + property: "margin-top", value: "8px", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap index 14d6b3c0..afaf1223 100644 --- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap +++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap @@ -48,7 +48,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginTop", + property: "margin-top", value: "8px", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap index 3cecaa58..d6c6f71d 100644 --- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap @@ -48,7 +48,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginTop", + property: "margin-top", value: "8px", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap index 101f8992..89da1ce8 100644 --- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap +++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap @@ -48,7 +48,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "marginTop", + property: "margin-top", value: "8px", level: 0, selector: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap index 4d8da554..0d8c58de 100644 --- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] &:hover", + ":root[data-theme=-dark] &:hover", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap index 80ae2a87..00794869 100644 --- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap @@ -56,7 +56,7 @@ ToBTreeSet { ), Static( ExtractStaticStyle { - property: "fontWeight", + property: "font-weight", value: "bold", level: 0, selector: Some( diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap index 968dc9f1..cf9a0ae1 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=light] &", + ":root[data-theme=-light] &", ), ), style_order: None, @@ -24,7 +24,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] &", + ":root[data-theme=-dark] &", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap index edf4be79..5b4674be 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] &:hover", + ":root[data-theme=-dark] &:hover", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap index cd4face1..189e2615 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap @@ -24,7 +24,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] & :is(svg,img)", + ":root[data-theme=-dark] & :is(svg,img)", ), ), style_order: None, @@ -37,7 +37,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] & :is(svg,img)", + ":root[data-theme=-dark] & :is(svg,img)", ), ), style_order: None, @@ -50,7 +50,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] & :is(svg,img)", + ":root[data-theme=-dark] & :is(svg,img)", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap index 63fcad9c..b1b5282c 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=dark] &:hover", + ":root[data-theme=-dark] &:hover", ), ), style_order: None, diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs index d3892b80..cfe4031d 100644 --- a/libs/extractor/src/visit.rs +++ b/libs/extractor/src/visit.rs @@ -524,17 +524,18 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> { && let Identifier(name) = &attr.name && !is_special_property(&name.name) { - for name in disassemble_property(&name.name) { + let property_name = name.name.to_string(); + for name in disassemble_property(&property_name) { if duplicate_set.contains(&name) { continue; } duplicate_set.insert(name.clone()); - if name == "styleOrder" { + if &property_name == "styleOrder" { style_order = jsx_expression_to_number(attr.value.as_ref().unwrap()) .map(|n| n as u8); continue; } - if name == "styleVars" { + if property_name == "styleVars" { if let Some(value) = attr.value.as_ref() && let JSXAttributeValue::ExpressionContainer(expr) = value { diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs index b7f45bcb..e49a5637 100644 --- a/libs/sheet/src/lib.rs +++ b/libs/sheet/src/lib.rs @@ -1,7 +1,6 @@ pub mod theme; use crate::theme::Theme; -use css::property_type::PropertyType; use css::{merge_selector, style_selector::StyleSelector}; use once_cell::sync::Lazy; use regex::Regex; @@ -57,25 +56,12 @@ impl Ord for StyleSheetProperty { impl ExtractStyle for StyleSheetProperty { fn extract(&self) -> String { - match self.property.as_str().into() { - PropertyType::Single(prop) => { - format!( - "{}{{{}:{}}}", - merge_selector(&self.class_name, self.selector.as_ref()), - prop, - convert_theme_variable_value(&self.value) - ) - } - PropertyType::Multi(multi) => format!( - "{}{{{}}}", - merge_selector(&self.class_name, self.selector.as_ref()), - multi - .into_iter() - .map(|prop| format!("{}:{}", prop, convert_theme_variable_value(&self.value))) - .collect::>() - .join(";") - ), - } + format!( + "{}{{{}:{}}}", + merge_selector(&self.class_name, self.selector.as_ref()), + self.property, + convert_theme_variable_value(&self.value) + ) } } @@ -212,9 +198,9 @@ impl StyleSheet { true } - pub fn rm_global_css(&mut self, file: &str) { + pub fn rm_global_css(&mut self, file: &str) -> bool { if !self.global_css_files.contains(file) { - return; + return false; } self.global_css_files.remove(file); self.css.remove(file); @@ -229,6 +215,7 @@ impl StyleSheet { }); } } + true } pub fn set_theme(&mut self, theme: Theme) { @@ -360,10 +347,27 @@ impl StyleSheet { }; if !global_props.is_empty() { - let inner_css = global_props - .into_iter() - .map(ExtractStyle::extract) - .collect::(); + // 같은 selector 끼리 모아서 CSS를 생성해야 함 + use std::collections::BTreeMap; + let mut selector_map: BTreeMap<_, Vec<_>> = BTreeMap::new(); + for prop in global_props { + if let Some(StyleSelector::Global(selector, _)) = &prop.selector { + selector_map.entry(selector.clone()).or_default().push(prop); + } + } + let mut inner_css = String::new(); + for (selector, props) in selector_map { + // props는 같은 selector를 가진 property들의 Vec + inner_css.push_str(&format!( + "{}{{{}}}", + selector, + props + .into_iter() + .map(|prop| format!("{}:{}", prop.property, prop.value)) + .collect::>() + .join(";") + )); + } css.push_str( if let Some(break_point) = break_point { format!("@media(min-width:{break_point}px){{{inner_css}}}") @@ -524,7 +528,7 @@ mod tests { #[test] fn test_create_css() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 1, "40px", None, None); + sheet.add_property("test", "margin", 1, "40px", None, None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); @@ -532,19 +536,25 @@ mod tests { assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 2, "40px", None, None); - sheet.add_property("test", "my", 2, "40px", None, None); + sheet.add_property("test", "margin", 2, "40px", None, None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "bg", 0, "red", Some(&"hover".into()), None); - sheet.add_property("test", "bg", 0, "blue", Some(&"active".into()), None); + sheet.add_property("test", "background", 0, "red", Some(&"hover".into()), None); + sheet.add_property( + "test", + "background", + 0, + "blue", + Some(&"active".into()), + None, + ); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "bg", + "background", 0, "red", Some(&StyleSelector::from("groupFocusVisible")), @@ -552,7 +562,7 @@ mod tests { ); sheet.add_property( "test", - "bg", + "background", 0, "blue", Some(&StyleSelector::from("groupFocusVisible")), @@ -563,7 +573,7 @@ mod tests { let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "bg", + "background", 0, "red", Some(&StyleSelector::from("groupFocusVisible")), @@ -571,7 +581,7 @@ mod tests { ); sheet.add_property( "test", - "bg", + "background", 0, "blue", Some(&StyleSelector::from("hover")), @@ -580,10 +590,17 @@ mod tests { assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "bg", 0, "red", Some(&"*:hover &".into()), None); sheet.add_property( "test", - "bg", + "background", + 0, + "red", + Some(&"*:hover &".into()), + None, + ); + sheet.add_property( + "test", + "background", 0, "blue", Some(&StyleSelector::from("groupFocusVisible")), @@ -594,7 +611,7 @@ mod tests { let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "bg", + "background", 0, "red", Some(&["themeDark", "hover"].into()), @@ -605,7 +622,7 @@ mod tests { let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "bg", + "background", 0, "red", Some(&["wrong", "hover"].into()), @@ -616,7 +633,7 @@ mod tests { let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "bg", + "background", 0, "red", Some(&"*[disabled='true'] &:hover".into()), @@ -627,7 +644,7 @@ mod tests { let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "bg", + "background", 0, "red", Some(&"&[disabled='true']".into()), @@ -638,7 +655,7 @@ mod tests { let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "bg", + "background", 0, "red", Some(&"&[disabled='true'], &[disabled='true']".into()), @@ -666,54 +683,181 @@ mod tests { #[test] fn test_style_order_create_css() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 0, "40px", None, Some(1)); - sheet.add_property("test", "mx", 1, "40px", None, Some(1)); - sheet.add_property("test", "mx", 1, "44px", None, Some(1)); - sheet.add_property("test", "mx", 1, "50px", None, Some(2)); - sheet.add_property("test", "mx", 1, "60px", None, None); - sheet.add_property("test", "mx", 0, "70px", None, None); + sheet.add_property("test", "margin-left", 0, "40px", None, Some(1)); + sheet.add_property("test", "margin-right", 0, "40px", None, Some(1)); + + sheet.add_property("test", "margin-left", 1, "40px", None, Some(1)); + sheet.add_property("test", "margin-right", 1, "40px", None, Some(1)); + sheet.add_property("test", "margin-left", 1, "44px", None, Some(1)); + sheet.add_property("test", "margin-right", 1, "44px", None, Some(1)); + sheet.add_property("test", "margin-left", 1, "40px", None, Some(1)); + sheet.add_property("test", "margin-right", 1, "44px", None, Some(1)); + sheet.add_property("test", "margin-left", 1, "44px", None, Some(1)); + sheet.add_property("test", "margin-right", 1, "44px", None, Some(1)); + sheet.add_property("test", "margin-left", 1, "50px", None, Some(2)); + sheet.add_property("test", "margin-right", 1, "50px", None, Some(2)); + sheet.add_property("test", "margin-left", 1, "60px", None, None); + sheet.add_property("test", "margin-right", 1, "60px", None, None); + sheet.add_property("test", "margin-left", 0, "70px", None, None); + sheet.add_property("test", "margin-right", 0, "70px", None, None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "bg", 0, "red", None, Some(3)); - sheet.add_property("test", "bg", 0, "blue", None, Some(17)); + sheet.add_property("test", "background", 0, "red", None, Some(3)); + sheet.add_property("test", "background", 0, "blue", None, Some(17)); assert_debug_snapshot!(sheet.create_css()); } #[test] fn wrong_breakpoint() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 10, "40px", None, None); + sheet.add_property("test", "margin-left", 10, "40px", None, None); + sheet.add_property("test", "margin-right", 10, "40px", None, None); assert_debug_snapshot!(sheet.create_css()); } #[test] fn test_selector_with_prefix() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 1, "40px", Some(&"groupHover".into()), None); - sheet.add_property("test", "mx", 2, "50px", Some(&"groupHover".into()), None); + sheet.add_property( + "test", + "margin-left", + 1, + "40px", + Some(&"groupHover".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 1, + "40px", + Some(&"groupHover".into()), + None, + ); + sheet.add_property( + "test", + "margin-left", + 2, + "50px", + Some(&"groupHover".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 2, + "50px", + Some(&"groupHover".into()), + None, + ); assert_debug_snapshot!(sheet.create_css()); } #[test] fn test_theme_selector() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 0, "40px", Some(&"themeDark".into()), None); - sheet.add_property("test", "my", 0, "40px", Some(&"themeDark".into()), None); - sheet.add_property("test", "mx", 0, "50px", Some(&"themeLight".into()), None); + sheet.add_property( + "test", + "margin-left", + 0, + "40px", + Some(&"themeDark".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 0, + "40px", + Some(&"themeDark".into()), + None, + ); + sheet.add_property( + "test", + "margin-top", + 0, + "40px", + Some(&"themeDark".into()), + None, + ); + sheet.add_property( + "test", + "margin-bottom", + 0, + "40px", + Some(&"themeDark".into()), + None, + ); + sheet.add_property( + "test", + "margin-left", + 0, + "50px", + Some(&"themeLight".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 0, + "50px", + Some(&"themeLight".into()), + None, + ); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 0, "50px", Some(&"themeLight".into()), None); - sheet.add_property("test", "mx", 0, "41px", None, None); - sheet.add_property("test", "mx", 0, "51px", Some(&"themeLight".into()), None); - sheet.add_property("test", "mx", 0, "42px", None, None); + sheet.add_property( + "test", + "margin-left", + 0, + "50px", + Some(&"themeLight".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 0, + "50px", + Some(&"themeLight".into()), + None, + ); + sheet.add_property("test", "margin-left", 0, "41px", None, None); + sheet.add_property("test", "margin-right", 0, "41px", None, None); + sheet.add_property( + "test", + "margin-left", + 0, + "51px", + Some(&"themeLight".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 0, + "51px", + Some(&"themeLight".into()), + None, + ); + sheet.add_property("test", "margin-left", 0, "42px", None, None); + sheet.add_property("test", "margin-right", 0, "42px", None, None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "mx", + "margin-left", + 0, + "50px", + Some(&["themeLight", "active"].into()), + None, + ); + sheet.add_property( + "test", + "margin-right", 0, "50px", Some(&["themeLight", "active"].into()), @@ -721,7 +865,15 @@ mod tests { ); sheet.add_property( "test", - "mx", + "margin-left", + 0, + "50px", + Some(&["themeLight", "hover"].into()), + None, + ); + sheet.add_property( + "test", + "margin-right", 0, "50px", Some(&["themeLight", "hover"].into()), @@ -733,16 +885,78 @@ mod tests { #[test] fn test_print_selector() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 0, "40px", Some(&"print".into()), None); - sheet.add_property("test", "my", 0, "40px", Some(&"print".into()), None); + sheet.add_property( + "test", + "margin-left", + 0, + "40px", + Some(&"print".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 0, + "40px", + Some(&"print".into()), + None, + ); + sheet.add_property("test", "margin-top", 0, "40px", Some(&"print".into()), None); + sheet.add_property( + "test", + "margin-bottom", + 0, + "40px", + Some(&"print".into()), + None, + ); - sheet.add_property("test", "mx", 1, "40px", Some(&"print".into()), None); - sheet.add_property("test", "my", 1, "40px", Some(&"print".into()), None); + sheet.add_property( + "test", + "margin-left", + 1, + "40px", + Some(&"print".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 1, + "40px", + Some(&"print".into()), + None, + ); + sheet.add_property("test", "margin-top", 1, "40px", Some(&"print".into()), None); + sheet.add_property( + "test", + "margin-bottom", + 1, + "40px", + Some(&"print".into()), + None, + ); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 0, "40px", Some(&"print".into()), None); - sheet.add_property("test", "my", 0, "40px", None, None); + sheet.add_property( + "test", + "margin-left", + 0, + "40px", + Some(&"print".into()), + None, + ); + sheet.add_property( + "test", + "margin-right", + 0, + "40px", + Some(&"print".into()), + None, + ); + sheet.add_property("test", "margin-top", 0, "40px", None, None); + sheet.add_property("test", "margin-bottom", 0, "40px", None, None); assert_debug_snapshot!(sheet.create_css()); } @@ -752,7 +966,18 @@ mod tests { let mut sheet = StyleSheet::default(); sheet.add_property( "test", - "my", + "margin-top", + 0, + "40px", + Some(&StyleSelector::Media { + query: "(min-width: 1024px)".to_string(), + selector: Some("&:hover".to_string()), + }), + None, + ); + sheet.add_property( + "test", + "margin-bottom", 0, "40px", Some(&StyleSelector::Media { @@ -940,6 +1165,64 @@ mod tests { sheet.rm_global_css("test.tsx"); assert_debug_snapshot!(sheet.create_css()); + + let mut sheet = StyleSheet::default(); + sheet.add_property( + "test", + "background-color", + 1, + "blue", + Some(&StyleSelector::Global( + "div".to_string(), + "test.tsx".to_string(), + )), + Some(0), + ); + sheet.add_property( + "test", + "color", + 1, + "blue", + Some(&StyleSelector::Global( + "div".to_string(), + "test.tsx".to_string(), + )), + Some(0), + ); + + assert_debug_snapshot!(sheet.create_css()); + + sheet.rm_global_css("test.tsx"); + assert_debug_snapshot!(sheet.create_css()); + + let mut sheet = StyleSheet::default(); + sheet.add_property( + "test", + "background-color", + 0, + "blue", + Some(&StyleSelector::Global( + "div".to_string(), + "test.tsx".to_string(), + )), + Some(0), + ); + sheet.add_property( + "test", + "color", + 0, + "blue", + Some(&StyleSelector::Global( + "div".to_string(), + "test2.tsx".to_string(), + )), + Some(0), + ); + + assert_debug_snapshot!(sheet.create_css()); + + sheet.rm_global_css("test.tsx"); + assert_debug_snapshot!(sheet.create_css()); } #[test] diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap index 5088707c..d086d191 100644 --- a/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap +++ b/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"@media(min-width:768px){.test{margin-left:40px;margin-right:40px}.test{margin-top:40px;margin-bottom:40px}}" +"@media(min-width:768px){.test{margin:40px}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css.snap b/libs/sheet/src/snapshots/sheet__tests__create_css.snap index f2c4e3eb..f4224840 100644 --- a/libs/sheet/src/snapshots/sheet__tests__create_css.snap +++ b/libs/sheet/src/snapshots/sheet__tests__create_css.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"@media(min-width:480px){.test{margin-left:40px;margin-right:40px}}" +"@media(min-width:480px){.test{margin:40px}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-6.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-6.snap new file mode 100644 index 00000000..f6f20ad0 --- /dev/null +++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-6.snap @@ -0,0 +1,5 @@ +--- +source: libs/sheet/src/lib.rs +expression: sheet.create_css() +--- +"@media(min-width:480px){div{background-color:blue;color:blue}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-7.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-7.snap new file mode 100644 index 00000000..895cd39d --- /dev/null +++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-7.snap @@ -0,0 +1,5 @@ +--- +source: libs/sheet/src/lib.rs +expression: sheet.create_css() +--- +"" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-8.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-8.snap new file mode 100644 index 00000000..ff698670 --- /dev/null +++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-8.snap @@ -0,0 +1,5 @@ +--- +source: libs/sheet/src/lib.rs +expression: sheet.create_css() +--- +"div{background-color:blue;color:blue}" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-9.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-9.snap new file mode 100644 index 00000000..d616be25 --- /dev/null +++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-9.snap @@ -0,0 +1,5 @@ +--- +source: libs/sheet/src/lib.rs +expression: sheet.create_css() +--- +"div{color:blue}" diff --git a/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap b/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap index 9d7c0dc0..9f8de7db 100644 --- a/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap +++ b/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -".test{margin-top:40px;margin-bottom:40px}@media print{.test{margin-left:40px;margin-right:40px}}" +".test{margin-bottom:40px}.test{margin-top:40px}@media print{.test{margin-left:40px}.test{margin-right:40px}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__print_selector.snap b/libs/sheet/src/snapshots/sheet__tests__print_selector.snap index bf6c7c5c..72167edc 100644 --- a/libs/sheet/src/snapshots/sheet__tests__print_selector.snap +++ b/libs/sheet/src/snapshots/sheet__tests__print_selector.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"@media print{.test{margin-left:40px;margin-right:40px}.test{margin-top:40px;margin-bottom:40px}}@media(min-width:480px)and print{.test{margin-left:40px;margin-right:40px}.test{margin-top:40px;margin-bottom:40px}}" +"@media print{.test{margin-bottom:40px}.test{margin-left:40px}.test{margin-right:40px}.test{margin-top:40px}}@media(min-width:480px)and print{.test{margin-bottom:40px}.test{margin-left:40px}.test{margin-right:40px}.test{margin-top:40px}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap b/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap index b9bc8cdf..49986725 100644 --- a/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap +++ b/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"@media(min-width:480px){*[role=group]:hover .test{margin-left:40px;margin-right:40px}}@media(min-width:768px){*[role=group]:hover .test{margin-left:50px;margin-right:50px}}" +"@media(min-width:480px){*[role=group]:hover .test{margin-left:40px}*[role=group]:hover .test{margin-right:40px}}@media(min-width:768px){*[role=group]:hover .test{margin-left:50px}*[role=group]:hover .test{margin-right:50px}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__selector_with_query.snap b/libs/sheet/src/snapshots/sheet__tests__selector_with_query.snap index 84040e9c..f7a5c8af 100644 --- a/libs/sheet/src/snapshots/sheet__tests__selector_with_query.snap +++ b/libs/sheet/src/snapshots/sheet__tests__selector_with_query.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"@media(min-width: 1024px){.test:hover{margin-top:40px;margin-bottom:40px}}" +"@media(min-width: 1024px){.test:hover{margin-bottom:40px}.test:hover{margin-top:40px}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap index 3d822c40..479f3c03 100644 --- a/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap +++ b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -".test{margin-left:40px;margin-right:40px}@media(min-width:480px){.test{margin-left:40px;margin-right:40px}.test{margin-left:44px;margin-right:44px}}@media(min-width:480px){.test{margin-left:50px;margin-right:50px}}.test{margin-left:70px;margin-right:70px}@media(min-width:480px){.test{margin-left:60px;margin-right:60px}}" +".test{margin-left:40px}.test{margin-right:40px}@media(min-width:480px){.test{margin-left:40px}.test{margin-left:44px}.test{margin-right:40px}.test{margin-right:44px}}@media(min-width:480px){.test{margin-left:50px}.test{margin-right:50px}}.test{margin-left:70px}.test{margin-right:70px}@media(min-width:480px){.test{margin-left:60px}.test{margin-right:60px}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap b/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap index 1f664193..d6aa6b9c 100644 --- a/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap +++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -".test{margin-left:41px;margin-right:41px}.test{margin-left:42px;margin-right:42px}:root[data-theme=light] .test{margin-left:50px;margin-right:50px}:root[data-theme=light] .test{margin-left:51px;margin-right:51px}" +".test{margin-left:41px}.test{margin-left:42px}.test{margin-right:41px}.test{margin-right:42px}:root[data-theme=light] .test{margin-left:50px}:root[data-theme=light] .test{margin-left:51px}:root[data-theme=light] .test{margin-right:50px}:root[data-theme=light] .test{margin-right:51px}" diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap b/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap index eef28bba..9975756c 100644 --- a/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap +++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -":root[data-theme=light] .test:hover{margin-left:50px;margin-right:50px}:root[data-theme=light] .test:active{margin-left:50px;margin-right:50px}" +":root[data-theme=light] .test:hover{margin-left:50px}:root[data-theme=light] .test:hover{margin-right:50px}:root[data-theme=light] .test:active{margin-left:50px}:root[data-theme=light] .test:active{margin-right:50px}" diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap b/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap index 14f90f1e..c3100e67 100644 --- a/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap +++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -":root[data-theme=dark] .test{margin-left:40px;margin-right:40px}:root[data-theme=light] .test{margin-left:50px;margin-right:50px}:root[data-theme=dark] .test{margin-top:40px;margin-bottom:40px}" +":root[data-theme=dark] .test{margin-bottom:40px}:root[data-theme=dark] .test{margin-left:40px}:root[data-theme=light] .test{margin-left:50px}:root[data-theme=dark] .test{margin-right:40px}:root[data-theme=light] .test{margin-right:50px}:root[data-theme=dark] .test{margin-top:40px}" diff --git a/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap b/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap index e3a771f3..b8e0fcaf 100644 --- a/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap +++ b/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"@media(min-width:1600px){.test{margin-left:40px;margin-right:40px}}" +"@media(min-width:1600px){.test{margin-left:40px}.test{margin-right:40px}}" From 8928eedfec3805eca3f8b31477f24881b49e14df Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Sun, 3 Aug 2025 01:24:50 +0900 Subject: [PATCH 2/5] Update oxc --- Cargo.lock | 84 +++++++++++++++---------------- bindings/devup-ui-wasm/Cargo.toml | 2 +- libs/extractor/Cargo.toml | 14 +++--- libs/extractor/src/css_utils.rs | 2 +- libs/sheet/Cargo.toml | 2 +- 5 files changed, 52 insertions(+), 52 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index e9033485..5f85952d 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -68,9 +68,9 @@ checksum = "37b2a672a2cb129a2e41c10b1224bb368f9f37a2b16b612598138befd7b37eb5" [[package]] name = "castaway" -version = "0.2.3" +version = "0.2.4" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "0abae9be0aaf9ea96a3b1b8b1b55c602ca751eba1b1500220cea4ecbafe7c0d5" +checksum = "dec551ab6e7578819132c713a93c022a05d60159dc86e7a7050223577484c55a" dependencies = [ "rustversion", ] @@ -610,15 +610,15 @@ checksum = "1a80800c0488c3a21695ea981a54918fbb37abf04f4d0720c453632255e2ff0e" [[package]] name = "owo-colors" -version = "4.2.0" +version = "4.2.2" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1036865bb9422d3300cf723f657c2851d0e9ab12567854b1f4eba3d77decf564" +checksum = "48dd4f4a2c8405440fd0462561f0e5806bd0f77e86f51c761481bdd4018b545e" [[package]] name = "oxc-miette" -version = "2.3.1" +version = "2.4.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "00cb1a49ec377f62606cbf047794efd37d668dbcbcefaeb5bf43f89b3c391418" +checksum = "31cfb121c9d3e0f9082856927f5cff9594279c91b544f4436e4bc971563caa60" dependencies = [ "cfg-if", "owo-colors", @@ -630,9 +630,9 @@ dependencies = [ [[package]] name = "oxc-miette-derive" -version = "2.3.1" +version = "2.4.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1739910e9871fe8d6e311f80fb2793756335aec97b0f985e778cbf4bc5cf574f" +checksum = "a6eabb57f935b454fbe0552ea0abaaf9eb0019b5fa05a7bbe7efd5bd8c765085" dependencies = [ "proc-macro2", "quote", @@ -641,9 +641,9 @@ dependencies = [ [[package]] name = "oxc_allocator" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "84be1252337ee005688471024aa3c490237e11ef4c18013573d76820718bd28d" +checksum = "387e852fa63147768141c5d1d4ca62adf5de4d0c8cfc502d60ebc863dd60fef7" dependencies = [ "allocator-api2", "bumpalo", @@ -654,9 +654,9 @@ dependencies = [ [[package]] name = "oxc_ast" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4611623aa731f9b6eafbbbb6616ddbfe65622fb9031f7f22b7d985ee9222d93c" +checksum = "d2865881163de2608e5e9981746de727930e5c23c92954973903adaa22601aee" dependencies = [ "bitflags", "oxc_allocator", @@ -670,9 +670,9 @@ dependencies = [ [[package]] name = "oxc_ast_macros" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "59d873a6c17e393ab36dfd10fcd0b5e22581cd8adb6d0936b69c28371d338374" +checksum = "8c9cff8428e0513c6f2b2fd55cd1217f8243ba806ba1914d9783a4c47cf85eb1" dependencies = [ "phf", "proc-macro2", @@ -682,9 +682,9 @@ dependencies = [ [[package]] name = "oxc_ast_visit" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "40afa7805ea0197de14d18ccfc59004a688d68f7f2696e02619fd4e503f6011d" +checksum = "97271b9fd4b8bceb887feaa73f4f8b5c1d4e2348124ab569be8982c24f1b95da" dependencies = [ "oxc_allocator", "oxc_ast", @@ -694,9 +694,9 @@ dependencies = [ [[package]] name = "oxc_cfg" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "07ed5f0ff2908621e4fdc141333b940ff69c54854625447ed1248b6427af6f0c" +checksum = "29ff1d5f65cc95c0f1df6d0fa6bcbcfd24e914ea063387ecd1ede1ad7c363ce9" dependencies = [ "bitflags", "itertools 0.14.0", @@ -709,9 +709,9 @@ dependencies = [ [[package]] name = "oxc_codegen" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "06f1e9e36fef5b15bbabf65570941885fab5e854f4343d0355ceae3a11c06787" +checksum = "ea9bbc612e6043e46052fce74afa0ee48fe2a8285f85e4dab146e0797f8379c5" dependencies = [ "bitflags", "cow-utils", @@ -730,18 +730,18 @@ dependencies = [ [[package]] name = "oxc_data_structures" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4eb262baf5fb69c3971c6662684c2167e58708880f794465fbd53257fec7f087" +checksum = "9c1442a0ccd0667148c49e5fcb79d0578aaef863f65d9f30b4dbce262c7ccac8" dependencies = [ "rustversion", ] [[package]] name = "oxc_diagnostics" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "58c312b8185e7e63af7d76b5f69520baa53c4d8163ba2ff9e1801d53a9633089" +checksum = "af2ddf131f04efd708f8d4325183ebd4b73ce70cfe75ae0f9718985193faad74" dependencies = [ "cow-utils", "oxc-miette", @@ -750,9 +750,9 @@ dependencies = [ [[package]] name = "oxc_ecmascript" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "5a09ef36e663aa5512c8277f282e531d14fa5445493e47b6404f93d77830eb29" +checksum = "ea921bd0bf9d2827de585f6e2e5177b763a7b3de24016a493c69aae022750bfe" dependencies = [ "num-bigint", "num-traits", @@ -763,9 +763,9 @@ dependencies = [ [[package]] name = "oxc_estree" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "79c05d61aacb87526c3b6f10332370e6081592d8fa1e45a95d794fb3e180b165" +checksum = "4adb8dff81cbddb3c2b722c6bf839bb222f57d2d6d7bda27326cdeb642d76c3a" [[package]] name = "oxc_index" @@ -775,9 +775,9 @@ checksum = "2fa07b0cfa997730afed43705766ef27792873fdf5215b1391949fec678d2392" [[package]] name = "oxc_parser" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "21908e281daf0c4ff94b66b627daaf2aea4869fbee696e07a7f35e449c633962" +checksum = "3994791fdb377e2dd4a27a4ce2ba8b4350bdf155bb1389c0b241ae4982f61855" dependencies = [ "bitflags", "cow-utils", @@ -798,9 +798,9 @@ dependencies = [ [[package]] name = "oxc_regular_expression" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3740a822270e305bb5b946b0a60ae9294f8d2ab71d9cab014bd629433780326c" +checksum = "956ae00a7b2d35c832f97da58d5faf852c4e8e70ab271550109c1d77e1b1b43b" dependencies = [ "bitflags", "oxc_allocator", @@ -814,9 +814,9 @@ dependencies = [ [[package]] name = "oxc_semantic" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ff32a3bfb1332d3072f572a12da4decafac71d486055bbdc1fed8d12687186d6" +checksum = "27bd11691ff8fc042f30c5f2024ec3fbc9c9e5f91a2e16a131279c7338a6ccd8" dependencies = [ "itertools 0.14.0", "oxc_allocator", @@ -850,9 +850,9 @@ dependencies = [ [[package]] name = "oxc_span" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "b25ebff6503fe212773c1079110341c67d66ff1cb2d44fbe9f2b202140061187" +checksum = "83c27ab8f00b330fdbc3fc22872851f48d79284dda51428043bb2ed4e0d34816" dependencies = [ "compact_str", "oxc-miette", @@ -863,9 +863,9 @@ dependencies = [ [[package]] name = "oxc_syntax" -version = "0.78.0" +version = "0.79.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "021a06690c525668d7872f2cff6f2c6ed0b43ae9a89ad66aa0faff70aaae80fa" +checksum = "d4a89b351b05d9a44ea8291fb48a6d32f4687ebc7e12b95d1695b46e12f96e2b" dependencies = [ "bitflags", "cow-utils", @@ -1240,9 +1240,9 @@ dependencies = [ [[package]] name = "serde_json" -version = "1.0.141" +version = "1.0.142" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "30b9eff21ebe718216c6ec64e1d9ac57087aad11efc64e32002bce4a0d4c03d3" +checksum = "030fedb782600dcbd6f02d479bf0d817ac3bb40d644745b769d6a96bc3afc5a7" dependencies = [ "itoa", "memchr", @@ -1439,9 +1439,9 @@ checksum = "3b09c83c3c29d37506a3e260c08c03743a6bb66a9cd432c6934ab501a190571f" [[package]] name = "unicode-width" -version = "0.2.0" +version = "0.2.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1fc81956842c57dac11422a97c3b8195a1ff727f06e85c84ed2e8aa277c9a0fd" +checksum = "4a1a07cc7db3810833284e8d372ccdc6da29741639ecc70c9ec107df0fa6154c" [[package]] name = "vsimd" diff --git a/bindings/devup-ui-wasm/Cargo.toml b/bindings/devup-ui-wasm/Cargo.toml index 352088bc..f0c51358 100644 --- a/bindings/devup-ui-wasm/Cargo.toml +++ b/bindings/devup-ui-wasm/Cargo.toml @@ -27,7 +27,7 @@ css = { path = "../../libs/css" } console_error_panic_hook = { version = "0.1.7", optional = true } once_cell = "1.21.3" js-sys = "0.3.77" -serde_json = "1.0.141" +serde_json = "1.0.142" serde-wasm-bindgen = "0.6.5" [dev-dependencies] diff --git a/libs/extractor/Cargo.toml b/libs/extractor/Cargo.toml index f0455376..d2782fc0 100644 --- a/libs/extractor/Cargo.toml +++ b/libs/extractor/Cargo.toml @@ -4,13 +4,13 @@ version = "0.1.0" edition = "2024" [dependencies] -oxc_parser = "0.78.0" -oxc_syntax = "0.78.0" -oxc_span = "0.78.0" -oxc_allocator = "0.78.0" -oxc_ast = "0.78.0" -oxc_ast_visit = "0.78.0" -oxc_codegen = "0.78.0" +oxc_parser = "0.79.1" +oxc_syntax = "0.79.1" +oxc_span = "0.79.1" +oxc_allocator = "0.79.1" +oxc_ast = "0.79.1" +oxc_ast_visit = "0.79.1" +oxc_codegen = "0.79.1" css = { path = "../css" } phf = "0.12" strum = "0.27.2" diff --git a/libs/extractor/src/css_utils.rs b/libs/extractor/src/css_utils.rs index 61cc35ad..d0f9853e 100644 --- a/libs/extractor/src/css_utils.rs +++ b/libs/extractor/src/css_utils.rs @@ -108,7 +108,7 @@ fn css_to_style_block<'a>( let property = iter.next().unwrap(); let value = iter.next().unwrap(); Some(ExtractStyleProp::Static(ExtractStyleValue::Static( - ExtractStaticStyle::new(&property, value, level, selector.clone()), + ExtractStaticStyle::new(property, value, level, selector.clone()), ))) } }) diff --git a/libs/sheet/Cargo.toml b/libs/sheet/Cargo.toml index 0b59eb1a..7bc2027d 100644 --- a/libs/sheet/Cargo.toml +++ b/libs/sheet/Cargo.toml @@ -12,7 +12,7 @@ extractor = { path = "../extractor" } [dev-dependencies] insta = "1.43.1" -serde_json = "1.0.141" +serde_json = "1.0.142" criterion = { version = "0.7", features = ["html_reports"] } rstest = "0.26.1" From cf500ec6b0e86b365b78c35c35c034358b9dfc19 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Sun, 3 Aug 2025 01:49:02 +0900 Subject: [PATCH 3/5] Update snapshot --- apps/next/package.json | 4 +- libs/css/src/lib.rs | 4 +- libs/css/src/style_selector.rs | 27 ++--- .../extract_style_from_expression.rs | 11 ++- ...xtractor__tests__group_selector_props.snap | 2 +- .../extractor__tests__nested_theme_props.snap | 6 +- ...ctor__tests__template_literal_props-6.snap | 2 +- .../extractor__tests__theme_props.snap | 4 +- .../extractor__tests__theme_selector-2.snap | 2 +- .../extractor__tests__theme_selector-3.snap | 6 +- .../extractor__tests__theme_selector.snap | 2 +- libs/sheet/src/lib.rs | 46 ++++----- .../__snapshots__/index.browser.test.tsx.snap | 99 +++++++++---------- .../Button/__tests__/index.browser.test.tsx | 4 +- 14 files changed, 111 insertions(+), 108 deletions(-) diff --git a/apps/next/package.json b/apps/next/package.json index 7b420632..ad9e8a7f 100644 --- a/apps/next/package.json +++ b/apps/next/package.json @@ -4,8 +4,8 @@ "type": "module", "private": true, "scripts": { - "dev": "next dev --turbopack", - "build": "next build --turbopack", + "dev": "next dev", + "build": "next build", "start": "next start", "lint": "next lint" }, diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs index 0a1fae41..12b33044 100644 --- a/libs/css/src/lib.rs +++ b/libs/css/src/lib.rs @@ -439,7 +439,7 @@ mod tests { ".cls::placeholder" ); assert_eq!( - merge_selector("cls", Some(&"themeDark".into())), + merge_selector("cls", Some(&"theme-dark".into())), ":root[data-theme=dark] .cls" ); assert_eq!( @@ -462,7 +462,7 @@ mod tests { ); assert_eq!( - merge_selector("cls", Some(&["themeDark", "hover"].into()),), + merge_selector("cls", Some(&["theme-dark", "hover"].into()),), ":root[data-theme=dark] .cls:hover" ); assert_eq!( diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs index e634cc43..6b0027c4 100644 --- a/libs/css/src/style_selector.rs +++ b/libs/css/src/style_selector.rs @@ -5,7 +5,10 @@ use std::{ use serde::{Deserialize, Serialize}; -use crate::{constant::SELECTOR_ORDER_MAP, selector_separator::SelectorSeparator, to_kebab_case}; +use crate::{ + constant::SELECTOR_ORDER_MAP, selector_separator::SelectorSeparator, to_kebab_case, + utils::to_camel_case, +}; #[derive(Debug, PartialEq, Clone, Hash, Eq, Serialize, Deserialize)] pub enum StyleSelector { @@ -26,6 +29,7 @@ fn optimize_selector_string(selector: &str) -> String { .replace(", ", ",") } pub fn optimize_selector(selector: StyleSelector) -> StyleSelector { + println!("optimize_selector: {:?}", selector); match selector { StyleSelector::Media { query, selector } => StyleSelector::Media { query: query.to_string(), @@ -117,6 +121,7 @@ impl Ord for StyleSelector { impl From<&str> for StyleSelector { fn from(value: &str) -> Self { + println!("from: {:?}", value); let value = value .split_whitespace() .collect::>() @@ -124,7 +129,7 @@ impl From<&str> for StyleSelector { .replace(", ", ","); if value.contains("&") { StyleSelector::Selector(value.to_string()) - } else if let Some(s) = value.strip_prefix("group") { + } else if let Some(s) = value.strip_prefix("group-") { let post = to_kebab_case(s); StyleSelector::Selector(format!( "{}{}{} &", @@ -132,13 +137,9 @@ impl From<&str> for StyleSelector { SelectorSeparator::from(post.as_str()), post )) - } else if let Some(s) = value.strip_prefix("theme") { + } else if let Some(s) = value.strip_prefix("theme-") { // first character should lower case - StyleSelector::Selector(format!( - ":root[data-theme={}{}] &", - s.chars().next().unwrap().to_ascii_lowercase(), - &s[1..] - )) + StyleSelector::Selector(format!(":root[data-theme={}] &", to_camel_case(s))) } else if value == "print" { StyleSelector::Media { query: "print".to_string(), @@ -236,11 +237,11 @@ mod tests { #[rstest] #[case("hover", StyleSelector::Selector("&:hover".to_string()))] #[case("focusVisible", StyleSelector::Selector("&:focus-visible".to_string()))] - #[case("groupHover", StyleSelector::Selector("*[role=group]:hover &".to_string()))] - #[case("groupFocusVisible", StyleSelector::Selector("*[role=group]:focus-visible &".to_string()))] - #[case("group1", StyleSelector::Selector("*[role=group]:1 &".to_string()))] - #[case(["themeDark", "placeholder"], StyleSelector::Selector(":root[data-theme=dark] &::placeholder".to_string()))] - #[case("themeLight", StyleSelector::Selector(":root[data-theme=light] &".to_string()))] + #[case("group-hover", StyleSelector::Selector("*[role=group]:hover &".to_string()))] + #[case("group-focus-visible", StyleSelector::Selector("*[role=group]:focus-visible &".to_string()))] + #[case("group-1", StyleSelector::Selector("*[role=group]:1 &".to_string()))] + #[case(["theme-dark", "placeholder"], StyleSelector::Selector(":root[data-theme=dark] &::placeholder".to_string()))] + #[case("theme-light", StyleSelector::Selector(":root[data-theme=light] &".to_string()))] #[case("*[aria=disabled='true'] &:hover", StyleSelector::Selector("*[aria=disabled='true'] &:hover".to_string()))] fn test_style_selector( #[case] input: impl Into, diff --git a/libs/extractor/src/extractor/extract_style_from_expression.rs b/libs/extractor/src/extractor/extract_style_from_expression.rs index 26381cf7..2add2f81 100644 --- a/libs/extractor/src/extractor/extract_style_from_expression.rs +++ b/libs/extractor/src/extractor/extract_style_from_expression.rs @@ -15,6 +15,7 @@ use crate::{ }; use css::{ disassemble_property, is_special_property::is_special_property, style_selector::StyleSelector, + utils::to_kebab_case, }; use oxc_allocator::CloneIn; use oxc_ast::{ @@ -200,21 +201,23 @@ pub fn extract_style_from_expression<'a>( if let Some(selector) = selector { if name.starts_with("_theme") { StyleSelector::from([ - name.replace("_theme", "theme").as_str(), + to_kebab_case(name.replace("_theme", "theme").as_str()) + .as_str(), &selector.to_string(), ]) .to_string() } else if name.contains("&") { - name.replace("&", &selector.to_string()) + to_kebab_case(&name.replace("&", &selector.to_string())) } else { StyleSelector::from([ selector.to_string().replace("_", "").as_str(), - &name.replace("_", ""), + &to_kebab_case(&name.replace("_", "")), ]) .to_string() } } else { - StyleSelector::from(name.replace("_", "").as_str()).to_string() + StyleSelector::from(to_kebab_case(&name.replace("_", "")).as_str()) + .to_string() } }) .collect::>() diff --git a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap index d419b973..a9e1d535 100644 --- a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - "*[role=group]:-hover &", + "*[role=group]:hover &", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap index b36a3151..186162f1 100644 --- a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] &:active", + ":root[data-theme=dark] &:active", ), ), style_order: None, @@ -24,7 +24,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] &:active::placeholder", + ":root[data-theme=dark] &:active::placeholder", ), ), style_order: None, @@ -37,7 +37,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] &:hover", + ":root[data-theme=dark] &:hover", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap index 0d8c58de..4d8da554 100644 --- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] &:hover", + ":root[data-theme=dark] &:hover", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap index cf9a0ae1..968dc9f1 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-light] &", + ":root[data-theme=light] &", ), ), style_order: None, @@ -24,7 +24,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] &", + ":root[data-theme=dark] &", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap index 5b4674be..edf4be79 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] &:hover", + ":root[data-theme=dark] &:hover", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap index 189e2615..cd4face1 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap @@ -24,7 +24,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] & :is(svg,img)", + ":root[data-theme=dark] & :is(svg,img)", ), ), style_order: None, @@ -37,7 +37,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] & :is(svg,img)", + ":root[data-theme=dark] & :is(svg,img)", ), ), style_order: None, @@ -50,7 +50,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] & :is(svg,img)", + ":root[data-theme=dark] & :is(svg,img)", ), ), style_order: None, diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap index b1b5282c..63fcad9c 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap @@ -11,7 +11,7 @@ ToBTreeSet { level: 0, selector: Some( Selector( - ":root[data-theme=-dark] &:hover", + ":root[data-theme=dark] &:hover", ), ), style_order: None, diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs index e49a5637..3171a479 100644 --- a/libs/sheet/src/lib.rs +++ b/libs/sheet/src/lib.rs @@ -557,7 +557,7 @@ mod tests { "background", 0, "red", - Some(&StyleSelector::from("groupFocusVisible")), + Some(&StyleSelector::from("group-focus-visible")), None, ); sheet.add_property( @@ -565,7 +565,7 @@ mod tests { "background", 0, "blue", - Some(&StyleSelector::from("groupFocusVisible")), + Some(&StyleSelector::from("group-focus-visible")), None, ); assert_debug_snapshot!(sheet.create_css()); @@ -576,7 +576,7 @@ mod tests { "background", 0, "red", - Some(&StyleSelector::from("groupFocusVisible")), + Some(&StyleSelector::from("group-focus-visible")), None, ); sheet.add_property( @@ -603,7 +603,7 @@ mod tests { "background", 0, "blue", - Some(&StyleSelector::from("groupFocusVisible")), + Some(&StyleSelector::from("group-focus-visible")), None, ); assert_debug_snapshot!(sheet.create_css()); @@ -614,7 +614,7 @@ mod tests { "background", 0, "red", - Some(&["themeDark", "hover"].into()), + Some(&["theme-dark", "hover"].into()), None, ); assert_debug_snapshot!(sheet.create_css()); @@ -724,7 +724,7 @@ mod tests { "margin-left", 1, "40px", - Some(&"groupHover".into()), + Some(&"group-hover".into()), None, ); sheet.add_property( @@ -732,7 +732,7 @@ mod tests { "margin-right", 1, "40px", - Some(&"groupHover".into()), + Some(&"group-hover".into()), None, ); sheet.add_property( @@ -740,7 +740,7 @@ mod tests { "margin-left", 2, "50px", - Some(&"groupHover".into()), + Some(&"group-hover".into()), None, ); sheet.add_property( @@ -748,7 +748,7 @@ mod tests { "margin-right", 2, "50px", - Some(&"groupHover".into()), + Some(&"group-hover".into()), None, ); assert_debug_snapshot!(sheet.create_css()); @@ -762,7 +762,7 @@ mod tests { "margin-left", 0, "40px", - Some(&"themeDark".into()), + Some(&"theme-dark".into()), None, ); sheet.add_property( @@ -770,7 +770,7 @@ mod tests { "margin-right", 0, "40px", - Some(&"themeDark".into()), + Some(&"theme-dark".into()), None, ); sheet.add_property( @@ -778,7 +778,7 @@ mod tests { "margin-top", 0, "40px", - Some(&"themeDark".into()), + Some(&"theme-dark".into()), None, ); sheet.add_property( @@ -786,7 +786,7 @@ mod tests { "margin-bottom", 0, "40px", - Some(&"themeDark".into()), + Some(&"theme-dark".into()), None, ); sheet.add_property( @@ -794,7 +794,7 @@ mod tests { "margin-left", 0, "50px", - Some(&"themeLight".into()), + Some(&"theme-light".into()), None, ); sheet.add_property( @@ -802,7 +802,7 @@ mod tests { "margin-right", 0, "50px", - Some(&"themeLight".into()), + Some(&"theme-light".into()), None, ); assert_debug_snapshot!(sheet.create_css()); @@ -813,7 +813,7 @@ mod tests { "margin-left", 0, "50px", - Some(&"themeLight".into()), + Some(&"theme-light".into()), None, ); sheet.add_property( @@ -821,7 +821,7 @@ mod tests { "margin-right", 0, "50px", - Some(&"themeLight".into()), + Some(&"theme-light".into()), None, ); sheet.add_property("test", "margin-left", 0, "41px", None, None); @@ -831,7 +831,7 @@ mod tests { "margin-left", 0, "51px", - Some(&"themeLight".into()), + Some(&"theme-light".into()), None, ); sheet.add_property( @@ -839,7 +839,7 @@ mod tests { "margin-right", 0, "51px", - Some(&"themeLight".into()), + Some(&"theme-light".into()), None, ); sheet.add_property("test", "margin-left", 0, "42px", None, None); @@ -852,7 +852,7 @@ mod tests { "margin-left", 0, "50px", - Some(&["themeLight", "active"].into()), + Some(&["theme-light", "active"].into()), None, ); sheet.add_property( @@ -860,7 +860,7 @@ mod tests { "margin-right", 0, "50px", - Some(&["themeLight", "active"].into()), + Some(&["theme-light", "active"].into()), None, ); sheet.add_property( @@ -868,7 +868,7 @@ mod tests { "margin-left", 0, "50px", - Some(&["themeLight", "hover"].into()), + Some(&["theme-light", "hover"].into()), None, ); sheet.add_property( @@ -876,7 +876,7 @@ mod tests { "margin-right", 0, "50px", - Some(&["themeLight", "hover"].into()), + Some(&["theme-light", "hover"].into()), None, ); assert_debug_snapshot!(sheet.create_css()); diff --git a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap index ff7a2a34..c757d2a6 100644 --- a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -4,15 +4,14 @@ exports[`Button > color should be white 1`] = `
, ) expect(container).toMatchSnapshot() - expect(container.querySelector('button')).toHaveClass('fontSize-0-15px--1') + expect(container.querySelector('button')).toHaveClass('font-size-0-15px--1') }) it('should have font size 14px when size is sm and variant is default', () => { @@ -119,7 +119,7 @@ describe('Button', () => { , ) expect(container).toMatchSnapshot() - expect(container.querySelector('button')).toHaveClass('fontSize-0-14px--1') + expect(container.querySelector('button')).toHaveClass('font-size-0-14px--1') }) it('should render icon when icon is provided', () => { From a374a98968ac0fb32364cf656bd6f9048971c7b5 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Sun, 3 Aug 2025 01:50:32 +0900 Subject: [PATCH 4/5] Update snapshot --- .../__snapshots__/index.browser.test.tsx.snap | 33 ++++++++++--------- .../Button/__tests__/index.browser.test.tsx | 4 +-- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap index c757d2a6..e2cb1745 100644 --- a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -4,7 +4,8 @@ exports[`Button > color should be white 1`] = `
, ) expect(container).toMatchSnapshot() - expect(container.querySelector('button')).toHaveClass('fontSize-0-15px--1') + expect(container.querySelector('button')).toHaveClass('font-size-0-15px--1') }) it('should have font size 15px when size is sm and variant is primary', () => { From 1b8225db2d1ca0539e6b34ed61c4c9a2bc1e11d5 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Sun, 3 Aug 2025 01:51:21 +0900 Subject: [PATCH 5/5] Rm selector --- libs/css/src/style_selector.rs | 2 -- 1 file changed, 2 deletions(-) diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs index 6b0027c4..e31781a5 100644 --- a/libs/css/src/style_selector.rs +++ b/libs/css/src/style_selector.rs @@ -29,7 +29,6 @@ fn optimize_selector_string(selector: &str) -> String { .replace(", ", ",") } pub fn optimize_selector(selector: StyleSelector) -> StyleSelector { - println!("optimize_selector: {:?}", selector); match selector { StyleSelector::Media { query, selector } => StyleSelector::Media { query: query.to_string(), @@ -121,7 +120,6 @@ impl Ord for StyleSelector { impl From<&str> for StyleSelector { fn from(value: &str) -> Self { - println!("from: {:?}", value); let value = value .split_whitespace() .collect::>()