diff --git a/.changeset/gentle-peas-double.md b/.changeset/gentle-peas-double.md new file mode 100644 index 00000000..b9585cb5 --- /dev/null +++ b/.changeset/gentle-peas-double.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Fix selector issue diff --git a/.changeset/tidy-parents-buy.md b/.changeset/tidy-parents-buy.md new file mode 100644 index 00000000..5437517f --- /dev/null +++ b/.changeset/tidy-parents-buy.md @@ -0,0 +1,6 @@ +--- +"@devup-ui/wasm": patch +"@devup-ui/react": patch +--- + +Implement style order diff --git a/Cargo.lock b/Cargo.lock index f821df69..3b5981c1 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -53,15 +53,15 @@ dependencies = [ [[package]] name = "bitflags" -version = "2.6.0" +version = "2.8.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "b048fb63fd8b5923fc5aa7b340d8e156aec7ec02f0c78fa8a6ddc2613f6f71de" +checksum = "8f68f53c83ab957f72c32642f3868eec03eb974d1fb82e453128456482613d36" [[package]] name = "bumpalo" -version = "3.16.0" +version = "3.17.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "79296716171880943b8470b5f8d03aa55eb2e645a4874bdbb28adb49162e012c" +checksum = "1628fb46dfa0b37568d12e5edd512553eccf6a22a78e8bde00bb4aed84d5bdbf" dependencies = [ "allocator-api2", ] @@ -575,9 +575,9 @@ dependencies = [ [[package]] name = "once_cell" -version = "1.20.2" +version = "1.20.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1261fe7e33c73b354eab43b1273a57c8f967d0391e80353e51f764ac02cf6775" +checksum = "945462a4b81e43c4e3ba96bd7b49d834c6f61198356aa858733bc4acf3cbe62e" [[package]] name = "oorandom" @@ -624,9 +624,9 @@ dependencies = [ [[package]] name = "oxc_allocator" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "17374a91329f2e362bc8be31cb3e171ef226777d0ea668e17a39620443693027" +checksum = "417522e84d8fdc87cab7bfc95b6419757c3d2f2013b78491c0295135d3516945" dependencies = [ "allocator-api2", "bumpalo", @@ -637,14 +637,13 @@ dependencies = [ [[package]] name = "oxc_ast" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "21b38cfe954ee987354af015020f5cb2723df6fed6cd688eff24388437c7eb7e" +checksum = "e2e0b6014198425ee79e1e0c71c79fc874f3a7c7007043d9ce1b353f740de488" dependencies = [ "bitflags", "cow-utils", - "num-bigint", - "num-traits", + "nonmax", "oxc_allocator", "oxc_ast_macros", "oxc_estree", @@ -655,9 +654,9 @@ dependencies = [ [[package]] name = "oxc_ast_macros" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "85f9e03eff90b041078edcc8aff09457eb4126fa5d62a383fdb082d3ae286274" +checksum = "a58764050b69c30bdf45a6f803bff212306ba9ac50277f21a231ff6e110da682" dependencies = [ "proc-macro2", "quote", @@ -666,9 +665,9 @@ dependencies = [ [[package]] name = "oxc_cfg" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "20347f1cff149f8d7354b0a16877714f4e3f7d6eb4f5cd659c3de1d5d283e846" +checksum = "621ea878d0e487215822fe61c98afaa337e79f8290352a95bd8d37c45eab0484" dependencies = [ "bitflags", "itertools 0.14.0", @@ -681,9 +680,9 @@ dependencies = [ [[package]] name = "oxc_codegen" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "d5bd847bc5d8a2b5a620e33e0b0422fc8ddb6c85562de97da6fe86659dfd571b" +checksum = "f68faeabfca1a9ad49b26939766185e87f4d03d08d917b465b1956db7d2ac466" dependencies = [ "assert-unchecked", "bitflags", @@ -703,9 +702,9 @@ dependencies = [ [[package]] name = "oxc_data_structures" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3697dd172835a236572748761301a7e3a17fb770cf30bb771ec10982fcbd86c8" +checksum = "7f3c3ebb1b248fa1a5ea965b7398eb0533f45545c6cbe28cd581f57211413096" dependencies = [ "assert-unchecked", "ropey", @@ -713,9 +712,9 @@ dependencies = [ [[package]] name = "oxc_diagnostics" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a24c41929c1910d83fb6f4c508190a8b2d1bad02e81c8cb3a9d3f474ca0ad2c1" +checksum = "ae69c956abfbadf5c31f08dc2b901bcefadb87a472106e13ae2b6a01135c66c2" dependencies = [ "cow-utils", "oxc-miette", @@ -723,9 +722,9 @@ dependencies = [ [[package]] name = "oxc_ecmascript" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "30fba86c97b571671f941b818e6831ba821aac398b9f6f3b4e3367ca264b8324" +checksum = "b2f773d18674b21240b42a7c8bcb3522de09b8841993620286e87812d7e7866a" dependencies = [ "num-bigint", "num-traits", @@ -736,9 +735,9 @@ dependencies = [ [[package]] name = "oxc_estree" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e587034bb5f108dd987e5419a4ad35a173550bd9439fc2b610d34e4ce41e8b23" +checksum = "244fd8ba7157c8f12910024373d4e3665b6a35fb5947edae1d4a6c084ac8e0c3" [[package]] name = "oxc_index" @@ -748,9 +747,9 @@ checksum = "5eca5d9726cd0a6e433debe003b7bc88b2ecad0bb6109f0cef7c55e692139a34" [[package]] name = "oxc_parser" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8dc385aca3586877f8c918aed1141b885dedcfc1019d6ea5be4105f8e2a7965e" +checksum = "8b9d2ce3556a0ec6ee45da6936c5f04d97e6f00ef7ddca08dcc473094a21cfed" dependencies = [ "assert-unchecked", "bitflags", @@ -771,9 +770,9 @@ dependencies = [ [[package]] name = "oxc_regular_expression" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f8d172402f6d542ab2837d35126cc42ad6989b9c2289b06bc5c8c89dceb60c48" +checksum = "e0e6d43914ff6758f62cf150f12d068a737fd464735d6b83ecefc7136f65e685" dependencies = [ "oxc_allocator", "oxc_ast_macros", @@ -787,9 +786,9 @@ dependencies = [ [[package]] name = "oxc_semantic" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "7ceb1f387b1ded0c84bdbc1f14eb087204cb9cd9ca4b4ff867be8d1575c7b20a" +checksum = "1e08d8bb5afc64dfc05e9f3b573c9af8b23a9a24aceb2bb1634d1f131717b736" dependencies = [ "assert-unchecked", "itertools 0.14.0", @@ -823,9 +822,9 @@ dependencies = [ [[package]] name = "oxc_span" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "75881376dfdbb6a23f12a66794904f0d215629f208edcf7e156c0770e89e2101" +checksum = "0ae8953d32ade84e814d154ee046f0f08b2b236e12f550545a690454ab2a102c" dependencies = [ "compact_str", "oxc-miette", @@ -836,9 +835,9 @@ dependencies = [ [[package]] name = "oxc_syntax" -version = "0.48.2" +version = "0.50.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c6d88037a5de07f66299ab523a65545cc48d550658cea8cadcea09b60596dd49" +checksum = "9f375deb505b7fad6ed2125fdb92ffa8d550d866ca2ab0dfd24e681b125883c1" dependencies = [ "assert-unchecked", "bitflags", @@ -890,9 +889,9 @@ dependencies = [ [[package]] name = "phf" -version = "0.11.2" +version = "0.11.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ade2d8b8f33c7333b51bcf0428d37e217e9f32192ae4772156f65063b8ce03dc" +checksum = "1fd6780a80ae0c52cc120a26a1a42c1ae51b247a253e4e06113d23d2c2edd078" dependencies = [ "phf_macros", "phf_shared", @@ -910,9 +909,9 @@ dependencies = [ [[package]] name = "phf_macros" -version = "0.11.2" +version = "0.11.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3444646e286606587e49f3bcf1679b8cef1dc2c5ecc29ddacaffc305180d464b" +checksum = "f84ac04429c13a7ff43785d75ad27569f2951ce0ffd30a3321230db2fc727216" dependencies = [ "phf_generator", "phf_shared", @@ -923,9 +922,9 @@ dependencies = [ [[package]] name = "phf_shared" -version = "0.11.2" +version = "0.11.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "90fcb95eef784c2ac79119d1dd819e162b5da872ce6f3c3abe1e8ca1c082f72b" +checksum = "67eabc2ef2a60eb7faa00097bd1ffdb5bd28e62bf39990626a582201b7a754e5" dependencies = [ "siphasher", ] @@ -1258,9 +1257,9 @@ checksum = "1de1d4f81173b03af4c0cbed3c898f6bff5b870e4a7f5d6f4057d62a7a4b686e" [[package]] name = "siphasher" -version = "0.3.11" +version = "1.0.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "38b58827f4464d87d377d175e90bf58eb00fd8716ff0a62f80356b5e61555d0d" +checksum = "56199f7ddabf13fe5074ce809e7d3f42b42ae711800501b5b16ea82ad029c39d" [[package]] name = "slab" diff --git a/bindings/devup-ui-wasm/Cargo.toml b/bindings/devup-ui-wasm/Cargo.toml index fbce4050..46e42fb0 100644 --- a/bindings/devup-ui-wasm/Cargo.toml +++ b/bindings/devup-ui-wasm/Cargo.toml @@ -21,7 +21,7 @@ css = { path = "../../libs/css" } # all the `std::fmt` and `std::panicking` infrastructure, so isn't great for # code size when deploying. console_error_panic_hook = { version = "0.1.7", optional = true } -once_cell = "1.20.2" +once_cell = "1.20.3" js-sys = "0.3.76" serde_json = "1.0.138" serde-wasm-bindgen = "0.6.5" diff --git a/bindings/devup-ui-wasm/src/lib.rs b/bindings/devup-ui-wasm/src/lib.rs index 6a10f4ba..de90c47c 100644 --- a/bindings/devup-ui-wasm/src/lib.rs +++ b/bindings/devup-ui-wasm/src/lib.rs @@ -53,7 +53,7 @@ impl Output { st.level(), st.value(), st.selector(), - st.basic(), + st.style_order(), ) { collected = true; } @@ -65,7 +65,7 @@ impl Output { dy.level(), &format!("var({})", variable.unwrap()), dy.selector(), - false, + dy.style_order(), ) { collected = true; } @@ -81,6 +81,9 @@ impl Output { if !collected { return None; } + + log_str(&format!("css: {:?}", sheet.properties)); + log_str(&sheet.create_css()); Some(sheet.create_css()) } } diff --git a/libs/css/Cargo.toml b/libs/css/Cargo.toml index 76ad828a..011cd8e1 100644 --- a/libs/css/Cargo.toml +++ b/libs/css/Cargo.toml @@ -4,7 +4,7 @@ version = "0.1.0" edition = "2021" [dependencies] -once_cell = "1.20.2" +once_cell = "1.20.3" serial_test = "3.2.0" serde = { version = "1.0.217", features = ["derive"] } regex = "1.11.1" diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs index 23f730b7..a1c1577d 100644 --- a/libs/css/src/lib.rs +++ b/libs/css/src/lib.rs @@ -1,4 +1,3 @@ -use crate::StyleSelector::{Dual, Media, Postfix, Prefix}; use once_cell::sync::Lazy; use regex::Regex; use serde::{Deserialize, Serialize}; @@ -10,20 +9,18 @@ use std::sync::Mutex; static SELECTOR_ORDER_MAP: Lazy> = Lazy::new(|| { let mut map = HashMap::new(); - map.insert("disabled".to_string(), 5); - map.insert("selected".to_string(), 4); - map.insert("active".to_string(), 3); - map.insert("focus".to_string(), 2); - map.insert("hover".to_string(), 1); + map.insert("&:disabled".to_string(), 5); + map.insert("&:selected".to_string(), 4); + map.insert("&:active".to_string(), 3); + map.insert("&:focus".to_string(), 2); + map.insert("&:hover".to_string(), 1); map }); #[derive(Debug, PartialEq, Clone, Hash, Eq, Serialize, Deserialize)] pub enum StyleSelector { - Postfix(String), - Prefix(String), Media(String), - Dual(String, String), + Selector(String), } impl PartialOrd for StyleSelector { @@ -35,25 +32,17 @@ impl PartialOrd for StyleSelector { impl Ord for StyleSelector { fn cmp(&self, other: &Self) -> Ordering { match (self, other) { - (Media(a), Media(b)) => a.cmp(b), - (Media(_), _) => Ordering::Less, - (_, Media(_)) => Ordering::Greater, - (Postfix(a), Postfix(b)) => SELECTOR_ORDER_MAP + (StyleSelector::Media(a), StyleSelector::Media(b)) => a.cmp(b), + (StyleSelector::Selector(a), StyleSelector::Selector(b)) => SELECTOR_ORDER_MAP .get(a) - .unwrap_or(&0) - .cmp(SELECTOR_ORDER_MAP.get(b).unwrap_or(&0)), - (Prefix(a), Prefix(b)) => a.cmp(b), - (Dual(p1, a), Dual(p2, b)) => match p1.cmp(p2) { - Ordering::Equal => SELECTOR_ORDER_MAP - .get(a) - .unwrap_or(&0) - .cmp(SELECTOR_ORDER_MAP.get(b).unwrap_or(&0)), - x => x, - }, - (Postfix(_), _) => Ordering::Less, - (Prefix(_), Postfix(_)) => Ordering::Greater, - (Prefix(_), Dual(_, _)) => Ordering::Less, - (Dual(_, _), _) => Ordering::Greater, + .unwrap_or(if a.starts_with("&") { &0 } else { &99 }) + .cmp(SELECTOR_ORDER_MAP.get(b).unwrap_or(if b.starts_with("&") { + &0 + } else { + &99 + })), + (StyleSelector::Media(_), StyleSelector::Selector(_)) => Ordering::Greater, + (StyleSelector::Selector(_), StyleSelector::Media(_)) => Ordering::Less, } } } @@ -61,51 +50,54 @@ impl Ord for StyleSelector { impl From<&str> for StyleSelector { fn from(value: &str) -> Self { if value.contains("&") { - let t: Vec<_> = value.split("&").collect(); - if let Prefix(v) = t[0].into() { - if t[1].is_empty() { - Prefix(v) - } else { - Dual(v, t[1].to_string()) - } - } else { - Postfix(t[1].to_string()) - } + StyleSelector::Selector(value.to_string()) } else if let Some(s) = value.strip_prefix("group") { let post = to_kebab_case(s); - Prefix(format!( - "{}{}{}", + StyleSelector::Selector(format!( + "{}{}{} &", "*[role=group]", get_selector_separator(&post), post )) } else if let Some(s) = value.strip_prefix("theme") { // first character should lower case - Prefix(format!( - ":root[data-theme={}{}]", + StyleSelector::Selector(format!( + ":root[data-theme={}{}] &", s.chars().next().unwrap().to_ascii_lowercase(), &s[1..] )) } else if value == "print" { - Media("print".to_string()) + StyleSelector::Media("print".to_string()) } else if value.ends_with(" ") { - Prefix(value.trim().to_string()) + StyleSelector::Selector(format!("{} &", value.trim())) } else { - Postfix(to_kebab_case(value)) + let post = to_kebab_case(value); + + StyleSelector::Selector(format!("&{}{}", get_selector_separator(&post), post)) } } } +impl From<[&str; 2]> for StyleSelector { + fn from(value: [&str; 2]) -> Self { + let post = to_kebab_case(value[1]); + StyleSelector::Selector(format!( + "{}{}{}", + StyleSelector::from(value[0]), + get_selector_separator(&post), + post + )) + } +} + impl Display for StyleSelector { fn fmt(&self, f: &mut Formatter) -> fmt::Result { write!( f, "{}", match self { - Postfix(value) => format!("-{}", value), - Prefix(value) => format!("-{}-", value), - Dual(prefix, postfix) => format!("-{}-{}", prefix, postfix), - Media(value) => format!("@{}", value), + StyleSelector::Selector(value) => value.to_string(), + StyleSelector::Media(value) => format!("@{}", value), } ) } @@ -114,21 +106,8 @@ impl Display for StyleSelector { pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> String { if let Some(selector) = selector { match selector { - Postfix(postfix) => format!( - ".{}{}{}", - class_name, - get_selector_separator(postfix), - postfix - ), - Prefix(prefix) => format!("{} .{}", prefix, class_name), - Dual(prefix, postfix) => format!( - "{} .{}{}{}", - prefix, - class_name, - get_selector_separator(postfix), - postfix - ), - Media(_) => format!(".{}", class_name), + StyleSelector::Selector(value) => value.replace("&", &format!(".{}", class_name)), + StyleSelector::Media(_) => format!(".{}", class_name), } } else { format!(".{}", class_name) @@ -346,13 +325,15 @@ pub fn sheet_to_classname( level: u8, value: Option<&str>, selector: Option<&str>, + style_order: Option, ) -> String { let key = format!( - "{}-{}-{}-{}", + "{}-{}-{}-{}-{}", property.trim(), level, F_SPACE_RE.replace_all(value.unwrap_or(""), ",").trim(), - selector.unwrap_or("").trim() + selector.unwrap_or("").trim(), + style_order.unwrap_or(255) ); let mut map = GLOBAL_CLASS_MAP.lock().unwrap(); map.get(&key).map(|v| format!("d{}", v)).unwrap_or_else(|| { @@ -408,40 +389,53 @@ mod tests { #[serial] fn test_sheet_to_classname() { reset_class_map(); - assert_eq!(sheet_to_classname("background", 0, None, None), "d0"); + assert_eq!(sheet_to_classname("background", 0, None, None, None), "d0"); assert_eq!( - sheet_to_classname("background", 0, Some("hover"), None), + sheet_to_classname("background", 0, Some("hover"), None, None), "d1" ); - assert_eq!(sheet_to_classname("background", 1, None, None), "d2"); + assert_eq!(sheet_to_classname("background", 1, None, None, None), "d2"); assert_eq!( - sheet_to_classname("background", 1, Some("hover"), None), + sheet_to_classname("background", 1, Some("hover"), None, None), "d3" ); reset_class_map(); - assert_eq!(sheet_to_classname("background", 0, None, None), "d0"); - assert_eq!(sheet_to_classname("background", 0, None, None), "d0"); - assert_eq!(sheet_to_classname("background", 0, Some("red"), None), "d1"); - assert_eq!(sheet_to_classname("background", 0, Some("red"), None), "d1"); + assert_eq!(sheet_to_classname("background", 0, None, None, None), "d0"); + assert_eq!(sheet_to_classname("background", 0, None, None, None), "d0"); + assert_eq!( + sheet_to_classname("background", 0, Some("red"), None, None), + "d1" + ); assert_eq!( - sheet_to_classname(" background ", 0, Some(" red "), None), + sheet_to_classname("background", 0, Some("red"), None, None), + "d1" + ); + assert_eq!( + sheet_to_classname(" background ", 0, Some(" red "), None, None), "d1" ); assert_eq!( - sheet_to_classname("background", 0, Some("rgba(255, 0, 0, 0.5)"), None), + sheet_to_classname("background", 0, Some("rgba(255, 0, 0, 0.5)"), None, None), "d2" ); assert_eq!( - sheet_to_classname("background", 0, Some("rgba(255,0,0,0.5)"), None), + sheet_to_classname("background", 0, Some("rgba(255,0,0,0.5)"), None, None), "d2" ); { let map = GLOBAL_CLASS_MAP.lock().unwrap(); - assert_eq!(map.get("background-0-rgba(255,0,0,0.5)-"), Some(&2)); + assert_eq!(map.get("background-0-rgba(255,0,0,0.5)--255"), Some(&2)); } + + reset_class_map(); + assert_eq!(sheet_to_classname("background", 0, None, None, None), "d0"); + assert_eq!( + sheet_to_classname("background", 0, None, None, Some(1)), + "d1" + ); } #[test] @@ -660,43 +654,40 @@ mod tests { #[test] fn test_style_selector() { - assert_eq!(StyleSelector::from("hover"), Postfix("hover".to_string())); + assert_eq!( + StyleSelector::from("hover"), + StyleSelector::Selector("&:hover".to_string()) + ); assert_eq!( StyleSelector::from("focusVisible"), - Postfix("focus-visible".to_string()) + StyleSelector::Selector("&:focus-visible".to_string()) ); assert_eq!( StyleSelector::from("groupHover"), - Prefix("*[role=group]:hover".to_string()) + StyleSelector::Selector("*[role=group]:hover &".to_string()) ); assert_eq!( StyleSelector::from("groupFocusVisible"), - Prefix("*[role=group]:focus-visible".to_string()) + StyleSelector::Selector("*[role=group]:focus-visible &".to_string()) ); assert_eq!( StyleSelector::from("group1"), - Prefix("*[role=group]:1".to_string()) + StyleSelector::Selector("*[role=group]:1 &".to_string()) ); assert_eq!( - StyleSelector::from("themeDark&placeholder"), - Dual( - ":root[data-theme=dark]".to_string(), - "placeholder".to_string() - ) + StyleSelector::from(["themeDark", "placeholder"]), + StyleSelector::Selector(":root[data-theme=dark] &::placeholder".to_string()) ); - assert_eq!(Prefix(".cls".to_string()).to_string(), "-.cls-"); - assert_eq!(Postfix(".cls".to_string()).to_string(), "-.cls"); - assert_eq!( StyleSelector::from("themeLight"), - Prefix(":root[data-theme=light]".to_string()) + StyleSelector::Selector(":root[data-theme=light] &".to_string()) ); assert_eq!( StyleSelector::from("*[aria=disabled='true'] &:hover"), - Dual("*[aria=disabled='true']".to_string(), ":hover".to_string()) + StyleSelector::Selector("*[aria=disabled='true'] &:hover".to_string()) ); } @@ -714,20 +705,24 @@ mod tests { assert_eq!( merge_selector( "cls", - Some(&Prefix(":root[data-theme=dark]:hover".to_string(),)), + Some(&StyleSelector::Selector( + ":root[data-theme=dark]:hover &".to_string(), + )), ), ":root[data-theme=dark]:hover .cls" ); assert_eq!( merge_selector( "cls", - Some(&Prefix(":root[data-theme=dark]::placeholder".to_string())), + Some(&StyleSelector::Selector( + ":root[data-theme=dark]::placeholder &".to_string() + )), ), ":root[data-theme=dark]::placeholder .cls" ); assert_eq!( - merge_selector("cls", Some(&"themeDark&hover".into()),), + merge_selector("cls", Some(&["themeDark", "hover"].into()),), ":root[data-theme=dark] .cls:hover" ); } diff --git a/libs/extractor/Cargo.toml b/libs/extractor/Cargo.toml index e8396907..02767f8b 100644 --- a/libs/extractor/Cargo.toml +++ b/libs/extractor/Cargo.toml @@ -4,14 +4,14 @@ version = "0.1.0" edition = "2021" [dependencies] -oxc_parser = "0.48.2" -oxc_syntax = "0.48.2" -oxc_span = "0.48.2" -oxc_allocator = "0.48.2" -oxc_ast = "0.48.2" -oxc_codegen = "0.48.2" +oxc_parser = "0.50.0" +oxc_syntax = "0.50.0" +oxc_span = "0.50.0" +oxc_allocator = "0.50.0" +oxc_ast = "0.50.0" +oxc_codegen = "0.50.0" css = { path = "../css" } -once_cell = "1.20.2" +once_cell = "1.20.3" [dev-dependencies] insta = "1.42.1" diff --git a/libs/extractor/src/extract_style/mod.rs b/libs/extractor/src/extract_style/mod.rs index 297e5ea5..b597c455 100644 --- a/libs/extractor/src/extract_style/mod.rs +++ b/libs/extractor/src/extract_style/mod.rs @@ -16,8 +16,8 @@ pub struct ExtractStaticStyle { level: u8, /// selector selector: Option, - /// basic, if the value is true then css created by this style will be added to the first - basic: bool, + /// None is inf, 0 is first, 1 is second, etc + style_order: Option, } static MAINTAIN_VALUE_PROPERTIES: Lazy> = Lazy::new(|| { @@ -44,7 +44,7 @@ impl ExtractStaticStyle { property: short_to_long(property), level, selector, - basic: false, + style_order: None, } } @@ -63,7 +63,7 @@ impl ExtractStaticStyle { property: property.to_string(), level, selector, - basic: true, + style_order: Some(0), } } @@ -83,8 +83,8 @@ impl ExtractStaticStyle { self.selector.as_ref() } - pub fn basic(&self) -> bool { - self.basic + pub fn style_order(&self) -> Option { + self.style_order } } @@ -108,6 +108,7 @@ impl ExtractStyleProperty for ExtractStaticStyle { .as_str(), ), s.as_deref(), + self.style_order, )) } } @@ -134,6 +135,8 @@ pub struct ExtractDynamicStyle { /// selector selector: Option, + + style_order: Option, } impl ExtractDynamicStyle { @@ -149,6 +152,7 @@ impl ExtractDynamicStyle { level, identifier: identifier.to_string(), selector, + style_order: None, } } @@ -167,6 +171,10 @@ impl ExtractDynamicStyle { pub fn identifier(&self) -> &str { self.identifier.as_str() } + + pub fn style_order(&self) -> Option { + self.style_order + } } impl ExtractStyleProperty for ExtractDynamicStyle { @@ -178,6 +186,7 @@ impl ExtractStyleProperty for ExtractDynamicStyle { self.level, None, selector.as_deref(), + self.style_order, ), variable_name: sheet_to_variable_name( self.property.as_str(), @@ -207,6 +216,19 @@ impl ExtractStyleValue { } } } + pub fn set_style_order(&mut self, order: u8) { + match self { + ExtractStyleValue::Static(style) => { + if style.style_order.is_none() { + style.style_order = Some(order); + } + } + ExtractStyleValue::Dynamic(style) => { + style.style_order = Some(order); + } + _ => {} + } + } } #[cfg(test)] @@ -220,7 +242,6 @@ mod tests { assert_eq!(style.value(), "red"); assert_eq!(style.level(), 0); assert_eq!(style.selector(), None); - assert_eq!(style.basic(), false); } #[test] @@ -239,6 +260,5 @@ mod tests { assert_eq!(style.value(), "red"); assert_eq!(style.level(), 0); assert_eq!(style.selector(), None); - assert_eq!(style.basic(), true); } } diff --git a/libs/extractor/src/gen_class_name.rs b/libs/extractor/src/gen_class_name.rs index 740cef6a..646c698e 100644 --- a/libs/extractor/src/gen_class_name.rs +++ b/libs/extractor/src/gen_class_name.rs @@ -9,13 +9,14 @@ use oxc_span::SPAN; pub fn gen_class_names<'a>( ast_builder: &AstBuilder<'a>, - style_props: &[ExtractStyleProp<'a>], + style_props: &mut [ExtractStyleProp<'a>], + style_order: Option, ) -> Option> { merge_expression_for_class_name( ast_builder, style_props - .iter() - .filter_map(|st| gen_class_name(ast_builder, st)) + .iter_mut() + .filter_map(|st| gen_class_name(ast_builder, st, style_order)) .rev() .collect(), ) @@ -23,42 +24,50 @@ pub fn gen_class_names<'a>( fn gen_class_name<'a>( ast_builder: &AstBuilder<'a>, - style_prop: &ExtractStyleProp<'a>, + style_prop: &mut ExtractStyleProp<'a>, + style_order: Option, ) -> Option> { match style_prop { - ExtractStyleProp::Static(st) => Some(Expression::StringLiteral( - ast_builder.alloc_string_literal( - SPAN, - (match st.extract() { - StyleProperty::ClassName(cls) => cls, - StyleProperty::Variable { class_name, .. } => class_name, - }) - .as_str(), - None, - ), - )), - ExtractStyleProp::StaticArray(res) => merge_expression_for_class_name( + ExtractStyleProp::Static(ref mut st) => { + if let Some(style_order) = style_order { + st.set_style_order(style_order); + } + let target = st.extract(); + + Some(Expression::StringLiteral( + ast_builder.alloc_string_literal( + SPAN, + (match target { + StyleProperty::ClassName(cls) => cls, + StyleProperty::Variable { class_name, .. } => class_name, + }) + .as_str(), + None, + ), + )) + } + ExtractStyleProp::StaticArray(ref mut res) => merge_expression_for_class_name( ast_builder, - res.iter() - .filter_map(|st| gen_class_name(ast_builder, st)) + res.iter_mut() + .filter_map(|st| gen_class_name(ast_builder, st, style_order)) .collect(), ), ExtractStyleProp::Conditional { - condition, - consequent, - alternate, + ref condition, + ref mut consequent, + ref mut alternate, .. } => { let consequent = consequent - .as_ref() - .and_then(|con| gen_class_name(ast_builder, con)) + .as_mut() + .and_then(|ref mut con| gen_class_name(ast_builder, con.as_mut(), style_order)) .unwrap_or_else(|| { Expression::StringLiteral(ast_builder.alloc_string_literal(SPAN, "", None)) }); let alternate = alternate - .as_ref() - .and_then(|alt| gen_class_name(ast_builder, alt)) + .as_mut() + .and_then(|ref mut alt| gen_class_name(ast_builder, alt, style_order)) .unwrap_or_else(|| { Expression::StringLiteral(ast_builder.alloc_string_literal(SPAN, "", None)) }); @@ -83,8 +92,8 @@ fn gen_class_name<'a>( SPAN, Expression::ObjectExpression(ast_builder.alloc_object_expression( SPAN, - ast_builder.vec_from_iter(map.iter().filter_map(|(key, value)| { - gen_class_name(ast_builder, value).map(|expr| { + ast_builder.vec_from_iter(map.iter_mut().filter_map(|(key, value)| { + gen_class_name(ast_builder, value.as_mut(), style_order).map(|expr| { ObjectPropertyKind::ObjectProperty(ast_builder.alloc_object_property( SPAN, PropertyKind::Init, diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs index a0dd2c2c..7151629e 100644 --- a/libs/extractor/src/lib.rs +++ b/libs/extractor/src/lib.rs @@ -2211,4 +2211,138 @@ import {Button} from '@devup/ui' ) .unwrap()); } + + #[test] + #[serial] + fn style_order() { + reset_class_map(); + assert_debug_snapshot!(extract( + "test.js", + r#"import {Box} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.mjs", + r#"import { jsxs as r, jsx as e } from "react/jsx-runtime"; +import { Box as o, Text as t, Flex as i } from "@devup-ui/react"; +function c() { + return r("div", { children: [ + e( + o, + { + _hover: { + bg: "blue" + }, + bg: "$text", + color: "red", + children: "hello", + styleOrder: 10 + } + ), + e(t, { typography: "header", children: "typo", styleOrder:20 }), + e(i, { as: "section", mt: 2, children: "section",styleOrder:30 }) + ] }); +} +export { + c as Lib +};"#, + ExtractOption { + package: "@devup-ui/react".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.js", + r#"import {Box, css} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.js", + r#"import {Box, css} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.js", + r#"import {Box, css} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.js", + r#"import {Box, css} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.js", + r#"import {Box, css} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + } } diff --git a/libs/extractor/src/prop_modify_utils.rs b/libs/extractor/src/prop_modify_utils.rs index fbe8fdde..97b01386 100644 --- a/libs/extractor/src/prop_modify_utils.rs +++ b/libs/extractor/src/prop_modify_utils.rs @@ -14,7 +14,8 @@ use oxc_span::SPAN; pub fn modify_prop_object<'a>( ast_builder: &AstBuilder<'a>, props: &mut oxc_allocator::Vec>, - styles: &[ExtractStyleProp<'a>], + styles: &mut [ExtractStyleProp<'a>], + style_order: Option, ) { let mut class_name_prop = None; let mut style_prop = None; @@ -38,7 +39,7 @@ pub fn modify_prop_object<'a>( } // should modify class name prop - if let Some(ex) = gen_class_names(ast_builder, styles) { + if let Some(ex) = gen_class_names(ast_builder, styles, style_order) { if let Some(pr) = if let Some(class_name_prop) = class_name_prop { merge_expression_for_class_name( ast_builder, @@ -117,7 +118,8 @@ pub fn modify_prop_object<'a>( pub fn modify_props<'a>( ast_builder: &AstBuilder<'a>, props: &mut oxc_allocator::Vec>, - styles: &[ExtractStyleProp<'a>], + styles: &mut [ExtractStyleProp<'a>], + style_order: Option, ) { let mut class_name_prop = None; let mut style_prop = None; @@ -141,7 +143,7 @@ pub fn modify_props<'a>( } // should modify class name prop - if let Some(ex) = gen_class_names(ast_builder, styles) { + if let Some(ex) = gen_class_names(ast_builder, styles, style_order) { let mut attr = if let Some(class_name_prop) = class_name_prop { class_name_prop } else { diff --git a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap b/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap index 6bfd9d55..f86815af 100644 --- a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap +++ b/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap index af3c7388..96c69e19 100644 --- a/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "`${variable}`", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap index 8b473b28..69dd5416 100644 --- a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap +++ b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "black", level: 0, selector: None, - basic: false, + style_order: 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 ffa4faee..d9603eac 100644 --- a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap +++ b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "center", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "12px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -37,7 +39,7 @@ ExtractOutput { value: "20px", level: 2, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -46,7 +48,7 @@ ExtractOutput { value: "40px", level: 4, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap index fadc317d..08c02c53 100644 --- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +28,7 @@ ExtractOutput { value: "solid 1px red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -37,7 +37,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -46,7 +46,7 @@ ExtractOutput { value: "blue", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap index f8baf38e..7b68e2f3 100644 --- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap +++ b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +28,7 @@ ExtractOutput { value: "blue", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap index a33a2e21..652eeb68 100644 --- a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap @@ -10,12 +10,11 @@ ExtractOutput { value: "0.5", level: 0, selector: Some( - Dual( - "*[aria-diabled='true']", - ":hover", + Selector( + "*[aria-diabled='true'] &:hover", ), ), - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap index 8078b34d..696999f5 100644 --- a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "0.5", level: 0, selector: Some( - Prefix( - "*[aria-diabled='true']", + Selector( + "*[aria-diabled='true'] &", ), ), - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap index a75c39a6..05f194e7 100644 --- a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "0.5", level: 0, selector: Some( - Postfix( - "[aria-diabled='true']", + Selector( + "&[aria-diabled='true']", ), ), - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap index fabac2d0..b0c9b74f 100644 --- a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: 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 f8031c64..0fdd2794 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 @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,9 @@ ExtractOutput { value: "column", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -28,7 +32,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -37,7 +41,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap index e01b2cb5..65d9a923 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "someStyleVar", selector: None, + style_order: None, }, ), Dynamic( @@ -18,6 +19,7 @@ ExtractOutput { level: 2, identifier: "someStyleVar1", selector: None, + style_order: None, }, ), Dynamic( @@ -26,6 +28,7 @@ ExtractOutput { level: 1, identifier: "someStyleVar2", selector: None, + style_order: None, }, ), Static( @@ -34,7 +37,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap index cc9fe18c..007e16be 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "c", selector: None, + style_order: None, }, ), Dynamic( @@ -18,6 +19,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap index 8a37d51f..c1892cbf 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Dynamic( @@ -19,6 +19,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap index 70dedf51..787837ec 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap index 72bc8bc5..b6ed4c08 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap index c86e0ac8..c3600e87 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "`${a}px`", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap index 294713c5..f4d8880f 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "`${b}px`", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap index 6da0a3d3..118db7d3 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "3px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap index cd4f07b7..a058dfc9 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "someStyleVar", selector: None, + style_order: None, }, ), Dynamic( @@ -18,6 +19,7 @@ ExtractOutput { level: 2, identifier: "someStyleVar1", selector: None, + style_order: None, }, ), Dynamic( @@ -26,6 +28,7 @@ ExtractOutput { level: 1, identifier: "someStyleVar2", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap index 32727ff9..1bf5d52b 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "Math.abs(5)", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap index 6f325c7a..5dd070ee 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "someStyleVar", selector: None, + style_order: None, }, ), Dynamic( @@ -18,6 +19,7 @@ ExtractOutput { level: 0, identifier: "someStyleVar2", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap index 7d9a4b83..a471945e 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "1px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap index 289a369d..66c152ee 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "1px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap index 1df5aad9..3f67dd8d 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "1px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap index 43ca35c5..2c45bae7 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "6px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "4px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +28,7 @@ ExtractOutput { value: "3px", level: 1, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap index b843765e..ed90db47 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "c", selector: None, + style_order: None, }, ), Dynamic( @@ -18,6 +19,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), Dynamic( @@ -26,6 +28,7 @@ ExtractOutput { level: 1, identifier: "e", selector: None, + style_order: None, }, ), Dynamic( @@ -34,6 +37,7 @@ ExtractOutput { level: 2, identifier: "f", selector: None, + style_order: None, }, ), Static( @@ -42,7 +46,7 @@ ExtractOutput { value: "2px", level: 3, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap index a21d1890..50b956fa 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "c", selector: None, + style_order: None, }, ), Dynamic( @@ -18,6 +19,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), Dynamic( @@ -26,6 +28,7 @@ ExtractOutput { level: 1, identifier: "e", selector: None, + style_order: None, }, ), Dynamic( @@ -34,6 +37,7 @@ ExtractOutput { level: 2, identifier: "f", selector: None, + style_order: None, }, ), Static( @@ -42,7 +46,7 @@ ExtractOutput { value: "4px", level: 3, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -51,7 +55,7 @@ ExtractOutput { value: "2px", level: 3, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap index 401aa757..e2516582 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), Dynamic( @@ -18,6 +19,7 @@ ExtractOutput { level: 1, identifier: "e", selector: None, + style_order: None, }, ), Dynamic( @@ -26,6 +28,7 @@ ExtractOutput { level: 2, identifier: "f", selector: None, + style_order: None, }, ), Static( @@ -34,7 +37,7 @@ ExtractOutput { value: "4px", level: 3, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -43,7 +46,7 @@ ExtractOutput { value: "2px", level: 3, selector: None, - basic: false, + style_order: None, }, ), Dynamic( @@ -52,6 +55,7 @@ ExtractOutput { level: 0, identifier: "c", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap index 2de64c89..1389efba 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), Dynamic( @@ -18,6 +19,7 @@ ExtractOutput { level: 1, identifier: "e", selector: None, + style_order: None, }, ), Dynamic( @@ -26,6 +28,7 @@ ExtractOutput { level: 2, identifier: "f", selector: None, + style_order: None, }, ), Static( @@ -34,7 +37,7 @@ ExtractOutput { value: "4px", level: 3, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -43,7 +46,7 @@ ExtractOutput { value: "2px", level: 3, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -52,7 +55,7 @@ ExtractOutput { value: "1px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -61,7 +64,7 @@ ExtractOutput { value: "2px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -70,7 +73,7 @@ ExtractOutput { value: "3px", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap index 722b9810..378fad20 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 1, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap index 0cd148c0..7918777e 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "5px", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap index 119a0b31..fee70e51 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "3px", level: 1, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap index d77c333b..4787abce 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 1, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap index 9ba331f8..c009e85a 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +28,7 @@ ExtractOutput { value: "3px", level: 1, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap index afbdb219..ab34fe20 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "none", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "flex", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap index 97c36182..489d771f 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +28,7 @@ ExtractOutput { value: "16px", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap index cbb6dcd4..e654ca30 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "4px", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), ], 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 669e177c..d78cc1e2 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 @@ -10,11 +10,11 @@ ExtractOutput { value: "40px", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,11 +23,11 @@ ExtractOutput { value: "80px", level: 1, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), ], 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 793a3636..c8cf7ff7 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 @@ -10,11 +10,11 @@ ExtractOutput { value: "4px", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,11 +23,11 @@ ExtractOutput { value: "8px", level: 1, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap index 7db397be..e5eda5e6 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "blue", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap index 0ea144a3..2dbfd946 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap index ab239b60..4c5ef907 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "red", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,11 +23,11 @@ ExtractOutput { value: "blue", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap index 33d29187..380dc8f6 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "blue", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap index 8187be9c..43419d00 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "$nice", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap index ea9512f0..e8bd3abe 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "$nice", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap index 55cd9a6a..186de8ca 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "$nice", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap index 2d5656ca..5914085c 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap index 1fd69ec3..fe3b92c7 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap index 6ba24408..fa4ceca7 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap index 8d318bb9..2b350b83 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap index 2b47e2a1..587c9c19 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "-4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap index a74daa20..aa07be94 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap index bbb7105b..fa5e0bae 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap index ad178752..86c5dbe8 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap index c79fa2de..ad154f11 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap index 715f9d9c..cd6d8ffd 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap index 818be778..acd9253b 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "720px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "152px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap index 3b3b9fdd..d8488603 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap index e3b35ae1..a9660abf 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "a", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap b/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap index c3698a81..ad226c7a 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap +++ b/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "a", selector: None, + style_order: 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 8d1b9a0b..0ae26ef6 100644 --- a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "red", level: 0, selector: Some( - Prefix( - "*[role=group]:hover", + Selector( + "*[role=group]:hover &", ), ), - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap index 1d4d8066..2b0642dd 100644 --- a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + 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 ec11336b..9b847668 100644 --- a/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap +++ b/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "1", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "2", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -37,7 +39,7 @@ ExtractOutput { value: "900", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -46,7 +48,7 @@ ExtractOutput { value: "2", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -55,7 +57,7 @@ ExtractOutput { value: "1", level: 0, selector: None, - basic: false, + style_order: 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 1b9dfe48..8e1a6e5d 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "-a", selector: None, + style_order: 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 6cfcb6d8..dcc1bd55 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "-(1 + a)", selector: None, + style_order: 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 80de2c55..3cbebb5e 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "-1 * a", selector: None, + style_order: 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 ae8131c3..544eacbc 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "-1", level: 0, selector: None, - basic: false, + style_order: 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 bbadc7a3..d4843acc 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "-1", level: 0, selector: None, - basic: false, + style_order: 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 895ebbcf..6e398592 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "-1", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -19,7 +19,7 @@ ExtractOutput { value: "-2", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +28,7 @@ ExtractOutput { value: "-3", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap index a4191c17..0854d767 100644 --- a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "-1", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap index a660a996..5612b035 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "8px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -37,7 +39,7 @@ ExtractOutput { value: "12px", level: 2, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -46,7 +48,7 @@ ExtractOutput { value: "16px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -55,7 +57,7 @@ ExtractOutput { value: "20px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -64,7 +66,7 @@ ExtractOutput { value: "24px", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap index 3838fba9..8619609b 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "8px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -37,7 +39,7 @@ ExtractOutput { value: "12px", level: 2, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -46,7 +48,7 @@ ExtractOutput { value: "16px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -55,7 +57,7 @@ ExtractOutput { value: "20px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -64,7 +66,7 @@ ExtractOutput { value: "24px", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap index 4b129208..87fcbc05 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "1", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "0.5", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap index 3b835fe1..8a9c86e1 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "$red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "$blue", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap index 19f4a82c..103e4217 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "$red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Dynamic( @@ -28,6 +30,7 @@ ExtractOutput { level: 0, identifier: "`${variable}`", selector: None, + 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 9c351e4c..e7d314f3 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 @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,9 @@ ExtractOutput { value: "center", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -28,7 +32,9 @@ ExtractOutput { value: "center", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -37,7 +43,7 @@ ExtractOutput { value: "$webBg", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -46,7 +52,7 @@ ExtractOutput { value: "$appBg", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -55,7 +61,7 @@ ExtractOutput { value: "$solutionBg", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap index b52e23e8..2615a176 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Dynamic( @@ -19,6 +21,7 @@ ExtractOutput { level: 0, identifier: "some[100]", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap index bf41a9fd..95da1cb6 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "1", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "0.5", level: 0, selector: None, - basic: false, + style_order: None, }, ), Dynamic( @@ -37,6 +39,7 @@ ExtractOutput { level: 0, identifier: "some[a]", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap index 1d157256..8bcb54d0 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "1", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap index 0e20fd77..4309b7db 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Dynamic( @@ -19,6 +21,7 @@ ExtractOutput { level: 0, identifier: "a", selector: None, + style_order: None, }, ), Static( @@ -27,7 +30,7 @@ ExtractOutput { value: "4px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Dynamic( @@ -36,6 +39,7 @@ ExtractOutput { level: 2, identifier: "c", selector: None, + style_order: None, }, ), Dynamic( @@ -44,6 +48,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), Dynamic( @@ -52,6 +57,7 @@ ExtractOutput { level: 1, identifier: "e", selector: None, + style_order: None, }, ), Static( @@ -60,7 +66,7 @@ ExtractOutput { value: "8px", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap index de7fd6bc..0e7a7804 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "8px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -37,7 +39,7 @@ ExtractOutput { value: "12px", level: 2, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -46,7 +48,7 @@ ExtractOutput { value: "16px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -55,7 +57,7 @@ ExtractOutput { value: "20px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -64,7 +66,7 @@ ExtractOutput { value: "24px", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap index de05bc96..de2ed451 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "8px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -37,7 +39,7 @@ ExtractOutput { value: "12px", level: 2, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -46,7 +48,7 @@ ExtractOutput { value: "16px", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -55,7 +57,7 @@ ExtractOutput { value: "20px", level: 1, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -64,7 +66,7 @@ ExtractOutput { value: "24px", level: 2, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap index c94f5cc5..56bf020a 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "0.5", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap index 3d5d52c4..5ae74331 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Dynamic( @@ -19,6 +21,7 @@ ExtractOutput { level: 0, identifier: "any[\"some\"]", selector: None, + style_order: None, }, ), Static( @@ -27,7 +30,7 @@ ExtractOutput { value: "1", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -36,7 +39,7 @@ ExtractOutput { value: "0.5", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap index 20f49b4b..ee2c84b2 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "$red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "$blue", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap index 9de962c5..b6ed2af5 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "1", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap index b2a0b222..625099ed 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Dynamic( @@ -19,6 +21,7 @@ ExtractOutput { level: 0, identifier: "a", selector: None, + style_order: None, }, ), Dynamic( @@ -27,6 +30,7 @@ ExtractOutput { level: 1, identifier: "b", selector: None, + style_order: None, }, ), Dynamic( @@ -35,6 +39,7 @@ ExtractOutput { level: 2, identifier: "c", selector: None, + style_order: None, }, ), Dynamic( @@ -43,6 +48,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), Dynamic( @@ -51,6 +57,7 @@ ExtractOutput { level: 1, identifier: "e", selector: None, + style_order: None, }, ), Dynamic( @@ -59,6 +66,7 @@ ExtractOutput { level: 2, identifier: "f", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap index ec4d52cd..16d8a6c7 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Dynamic( @@ -19,6 +21,7 @@ ExtractOutput { level: 0, identifier: "a", selector: None, + style_order: None, }, ), Dynamic( @@ -27,6 +30,7 @@ ExtractOutput { level: 1, identifier: "b", selector: None, + style_order: None, }, ), Dynamic( @@ -35,6 +39,7 @@ ExtractOutput { level: 2, identifier: "c", selector: None, + style_order: None, }, ), Dynamic( @@ -43,6 +48,7 @@ ExtractOutput { level: 0, identifier: "d", selector: None, + style_order: None, }, ), Dynamic( @@ -51,6 +57,7 @@ ExtractOutput { level: 1, identifier: "e", selector: None, + style_order: None, }, ), Dynamic( @@ -59,6 +66,7 @@ ExtractOutput { level: 2, identifier: "f", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap index 9023e94d..87452898 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap @@ -10,6 +10,7 @@ ExtractOutput { level: 0, identifier: "SOME_VAR[idx]", selector: None, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap index e2aa1dcf..735d9878 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "1", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -28,7 +30,7 @@ ExtractOutput { value: "0.5", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap index adfc95fa..3042f0d6 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap index 2b861412..ad078ee9 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap index 9dace631..213ea8c3 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap index c0b9e9be..7c2ae68d 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap index 898d5585..6214b880 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap index 974babf0..d137878e 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap index 5a622301..1358edb1 100644 --- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap b/libs/extractor/src/snapshots/extractor__tests__rest_props.snap index 291f56f1..f12d53bc 100644 --- a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__rest_props.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,7 +21,7 @@ ExtractOutput { value: "0.5", level: 0, selector: None, - basic: false, + style_order: 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 new file mode 100644 index 00000000..d6703a6f --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap @@ -0,0 +1,71 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.mjs\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n return r(\"div\", { children: [\n e(\n o,\n {\n _hover: {\n bg: \"blue\"\n },\n bg: \"$text\",\n color: \"red\",\n children: \"hello\",\n styleOrder: 10\n }\n ),\n e(t, { typography: \"header\", children: \"typo\", styleOrder:20 }),\n e(i, { as: \"section\", mt: 2, children: \"section\",styleOrder:30 })\n ] });\n}\nexport {\n c as Lib\n};\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [ + Static( + ExtractStaticStyle { + property: "background", + value: "blue", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: Some( + 10, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "background", + value: "$text", + level: 0, + selector: None, + style_order: Some( + 10, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "color", + value: "red", + level: 0, + selector: None, + style_order: Some( + 10, + ), + }, + ), + Typography( + "header", + ), + Static( + ExtractStaticStyle { + property: "display", + value: "flex", + level: 0, + selector: None, + style_order: Some( + 0, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "marginTop", + value: "8px", + level: 0, + selector: None, + style_order: Some( + 30, + ), + }, + ), + ], + code: "import \"@devup-ui/react/devup-ui.css\";\nimport { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nfunction c() {\n\treturn r(\"div\", { children: [\n\t\te(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"d0 d1 d2\"\n\t\t}),\n\t\te(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d3 d4\"\n\t\t})\n\t] });\n}\nexport { c as Lib };\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap new file mode 100644 index 00000000..5f3cdef1 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap @@ -0,0 +1,20 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.js\",\nr#\"import {Box, css} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [ + Static( + ExtractStaticStyle { + property: "color", + value: "white", + level: 0, + selector: None, + style_order: Some( + 100, + ), + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap new file mode 100644 index 00000000..5e28de09 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap @@ -0,0 +1,18 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.js\",\nr#\"import {Box, css} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [ + Static( + ExtractStaticStyle { + property: "color", + value: "white", + level: 0, + selector: None, + style_order: None, + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap new file mode 100644 index 00000000..14abe728 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap @@ -0,0 +1,20 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.js\",\nr#\"import {Box, css} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [ + Static( + ExtractStaticStyle { + property: "color", + value: "white", + level: 0, + selector: None, + style_order: Some( + 30, + ), + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap new file mode 100644 index 00000000..acca52da --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap @@ -0,0 +1,76 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.js\",\nr#\"import {Box, css} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [ + Static( + ExtractStaticStyle { + property: "color", + value: "white", + level: 0, + selector: None, + style_order: Some( + 100, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "padding", + value: "16px", + level: 0, + selector: None, + style_order: Some( + 20, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "background", + value: "red", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: Some( + 20, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "background", + value: "blue", + level: 1, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: Some( + 20, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "opacity", + value: "0.5", + level: 0, + selector: Some( + Selector( + "*[aria-diabled='true'] &", + ), + ), + style_order: Some( + 20, + ), + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap new file mode 100644 index 00000000..0e0491d9 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap @@ -0,0 +1,31 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.js\",\nr#\"import {Box, css} from '@devup-ui/core'\n\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [ + Static( + ExtractStaticStyle { + property: "background", + value: "blue", + level: 0, + selector: None, + style_order: Some( + 17, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "background", + value: "red", + level: 0, + selector: None, + style_order: Some( + 3, + ), + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order.snap b/libs/extractor/src/snapshots/extractor__tests__style_order.snap new file mode 100644 index 00000000..e2a27e91 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__style_order.snap @@ -0,0 +1,65 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [ + Static( + ExtractStaticStyle { + property: "padding", + value: "16px", + level: 0, + selector: None, + style_order: Some( + 20, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "background", + value: "red", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: Some( + 20, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "background", + value: "blue", + level: 1, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: Some( + 20, + ), + }, + ), + Static( + ExtractStaticStyle { + property: "opacity", + value: "0.5", + level: 0, + selector: Some( + Selector( + "*[aria-diabled='true'] &", + ), + ), + style_order: Some( + 20, + ), + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} 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 759f0559..7999ac29 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 @@ -10,11 +10,11 @@ ExtractOutput { value: "blue", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,7 +23,7 @@ ExtractOutput { value: "$text", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -32,7 +32,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Typography( @@ -44,7 +44,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -53,7 +55,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: 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 1c586b39..708ccbfe 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 @@ -10,11 +10,11 @@ ExtractOutput { value: "blue", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,7 +23,7 @@ ExtractOutput { value: "$text", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -32,7 +32,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Typography( @@ -44,7 +44,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -53,7 +55,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: 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 c135f51e..3277ca67 100644 --- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap +++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "blue", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,7 +23,7 @@ ExtractOutput { value: "$text", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -32,7 +32,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Typography( @@ -44,7 +44,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -53,7 +55,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: 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 571bb883..dcb063dc 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 @@ -10,11 +10,11 @@ ExtractOutput { value: "blue", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,7 +23,7 @@ ExtractOutput { value: "$text", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -32,7 +32,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Typography( @@ -44,7 +44,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -53,7 +55,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: 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 e946b918..1c50d5fe 100644 --- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap +++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "blue", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,7 +23,7 @@ ExtractOutput { value: "$text", level: 0, selector: None, - basic: false, + style_order: None, }, ), Static( @@ -32,7 +32,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), Typography( @@ -44,7 +44,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -53,7 +55,7 @@ ExtractOutput { value: "8px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap index 33affea3..9f4c89ae 100644 --- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap index 7e53ebf1..17de3b82 100644 --- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap +++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "-4px", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap index 7c01927c..6252cabd 100644 --- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap +++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "1 2", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap index e8694602..1d7a82e1 100644 --- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap @@ -10,7 +10,7 @@ ExtractOutput { value: "red", level: 0, selector: None, - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap index 07303133..461b7241 100644 --- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,11 +21,11 @@ ExtractOutput { value: "red", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + 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 dbda4785..b57f76eb 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 @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,11 +21,11 @@ ExtractOutput { value: "red", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -32,11 +34,11 @@ ExtractOutput { value: "blue", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -45,11 +47,11 @@ ExtractOutput { value: "bold", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -58,11 +60,11 @@ ExtractOutput { value: "red", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap index ea214a57..12cb80ff 100644 --- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap @@ -10,7 +10,9 @@ ExtractOutput { value: "flex", level: 0, selector: None, - basic: true, + style_order: Some( + 0, + ), }, ), Static( @@ -19,11 +21,11 @@ ExtractOutput { value: "red", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + 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 c7fe2221..1537e9e2 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "none", level: 0, selector: Some( - Prefix( - ":root[data-theme=dark]", + Selector( + ":root[data-theme=dark] &", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,11 +23,11 @@ ExtractOutput { value: "flex", level: 0, selector: Some( - Prefix( - ":root[data-theme=light]", + Selector( + ":root[data-theme=light] &", ), ), - basic: false, + 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 f3f763fe..f4b265b4 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap @@ -10,11 +10,11 @@ ExtractOutput { value: "white", level: 0, selector: Some( - Postfix( - "hover", + Selector( + "&:hover", ), ), - basic: false, + style_order: None, }, ), Static( @@ -23,12 +23,11 @@ ExtractOutput { value: "black", level: 0, selector: Some( - Dual( - ":root[data-theme=dark]", - "hover", + Selector( + ":root[data-theme=dark] &:hover", ), ), - basic: false, + 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 e8bcedcb..366e03c6 100644 --- a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap +++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap @@ -10,12 +10,11 @@ ExtractOutput { value: "black", level: 0, selector: Some( - Dual( - ":root[data-theme=dark]", - "hover", + Selector( + ":root[data-theme=dark] &:hover", ), ), - basic: false, + style_order: None, }, ), ], diff --git a/libs/extractor/src/style_extractor.rs b/libs/extractor/src/style_extractor.rs index 21c1474f..f69f0a6a 100644 --- a/libs/extractor/src/style_extractor.rs +++ b/libs/extractor/src/style_extractor.rs @@ -1,5 +1,5 @@ -use crate::utils::{expression_to_code, is_special_property}; -use crate::ExtractStyleProp; +use crate::utils::{expression_to_code, get_number_by_literal_expression, is_special_property}; +use crate::{utils, ExtractStyleProp}; use oxc_allocator::CloneIn; use oxc_ast::ast::{ ArrayExpressionElement, ComputedMemberExpression, Expression, JSXAttributeValue, @@ -9,9 +9,10 @@ use std::collections::BTreeMap; use crate::extract_style::ExtractStyleValue::{Dynamic, Static, Typography}; use crate::extract_style::{ExtractDynamicStyle, ExtractStaticStyle}; +use css::StyleSelector; use oxc_ast::AstBuilder; use oxc_span::SPAN; -use oxc_syntax::operator::{BinaryOperator, LogicalOperator, UnaryOperator}; +use oxc_syntax::operator::{BinaryOperator, LogicalOperator}; const IGNORED_IDENTIFIERS: [&str; 3] = ["undefined", "NaN", "Infinity"]; @@ -29,6 +30,7 @@ pub enum ExtractResult<'a> { Extract { styles: Option>>, tag: Option>, + style_order: Option, }, } @@ -36,7 +38,7 @@ pub fn extract_style_from_jsx_attr<'a>( ast_builder: &AstBuilder<'a>, name: &str, value: &mut JSXAttributeValue<'a>, - selector: Option<&str>, + selector: Option<&StyleSelector>, ) -> ExtractResult<'a> { match value { JSXAttributeValue::ExpressionContainer(ref mut expression) => { @@ -68,11 +70,12 @@ pub fn extract_style_from_expression<'a>( name: Option<&str>, expression: &mut Expression<'a>, level: u8, - selector: Option<&str>, + selector: Option<&StyleSelector>, ) -> ExtractResult<'a> { let mut typo = false; if name.is_none() && selector.is_none() { + let mut style_order = None; return match expression { Expression::ObjectExpression(ref mut obj) => { let mut props_styles = vec![]; @@ -83,6 +86,16 @@ pub fn extract_style_from_expression<'a>( ObjectPropertyKind::ObjectProperty(prop) => { if let PropertyKey::StaticIdentifier(ident) = &prop.key { let name = ident.name.to_string(); + + if name == "styleOrder" { + if let Some(value) = + get_number_by_literal_expression(&prop.value) + { + style_order = Some(value as u8); + } + continue; + } + match extract_style_from_expression( ast_builder, Some(&name), @@ -91,7 +104,9 @@ pub fn extract_style_from_expression<'a>( None, ) { ExtractResult::Maintain => false, - ExtractResult::Extract { styles, tag: _tag } => { + ExtractResult::Extract { + styles, tag: _tag, .. + } => { styles.into_iter().for_each(|mut styles| { props_styles.append(&mut styles) }); @@ -114,7 +129,9 @@ pub fn extract_style_from_expression<'a>( None, ) { ExtractResult::Maintain => false, - ExtractResult::Extract { styles, tag: _tag } => { + ExtractResult::Extract { + styles, tag: _tag, .. + } => { styles .into_iter() .for_each(|mut styles| props_styles.append(&mut styles)); @@ -129,12 +146,14 @@ pub fn extract_style_from_expression<'a>( obj.properties.insert(idx, prop); } } + println!("ORDER! {:?}", style_order); if props_styles.is_empty() { ExtractResult::Maintain } else { ExtractResult::Extract { styles: Some(props_styles), tag, + style_order, } } } @@ -171,6 +190,7 @@ pub fn extract_style_from_expression<'a>( }, }]), tag: None, + style_order, }, Expression::ParenthesizedExpression(parenthesized) => extract_style_from_expression( ast_builder, @@ -192,6 +212,7 @@ pub fn extract_style_from_expression<'a>( return ExtractResult::Extract { styles: None, tag: Some(expression.clone_in(ast_builder.allocator)), + style_order: None, }; // return match expression { @@ -248,7 +269,7 @@ pub fn extract_style_from_expression<'a>( None, &mut o.value, level, - Some(name.as_str()), + Some(&name.as_str().into()), ) { props.append(&mut styles); } @@ -257,6 +278,7 @@ pub fn extract_style_from_expression<'a>( return ExtractResult::Extract { styles: Some(props), tag: None, + style_order: None, }; } } @@ -267,20 +289,18 @@ pub fn extract_style_from_expression<'a>( None, expression, level, - Some( - if let Some(selector) = selector { - format!("{}&{}", selector, new_selector) - } else { - new_selector.to_string() - } - .as_str(), - ), + Some(&if let Some(selector) = selector { + [&selector.to_string(), new_selector].into() + } else { + new_selector.into() + }), ); } typo = name == "typography"; } - if let Some(value) = get_string_by_literal_expression(expression) { + if let Some(value) = utils::get_string_by_literal_expression(expression) { name.map(|name| ExtractResult::Extract { + style_order: None, tag: None, styles: Some(vec![ExtractStyleProp::Static(if typo { Typography(value.as_str().to_string()) @@ -289,7 +309,7 @@ pub fn extract_style_from_expression<'a>( name, value.as_str(), level, - selector.map(|s| s.into()), + selector.cloned(), )) })]), }) @@ -304,10 +324,11 @@ pub fn extract_style_from_expression<'a>( name.unwrap(), level, expression_to_code(expression).as_str(), - selector.map(|s| s.into()), + selector.cloned(), ), ))]), tag: None, + style_order: None, }, Expression::ComputedMemberExpression(mem) => { extract_style_from_member_expression(ast_builder, name, mem, level, selector) @@ -323,10 +344,11 @@ pub fn extract_style_from_expression<'a>( name, tmp.quasis[0].value.raw.as_str(), level, - selector.map(|s| s.into()), + selector.cloned(), )) })]), tag: None, + style_order: None, } } else if typo { ExtractResult::Extract { @@ -358,6 +380,7 @@ pub fn extract_style_from_expression<'a>( styles: vec![], }]), tag: None, + style_order: None, } } else { ExtractResult::Extract { @@ -366,10 +389,11 @@ pub fn extract_style_from_expression<'a>( name, level, expression_to_code(expression).as_str(), - selector.map(|s| s.into()), + selector.cloned(), ), ))]), tag: None, + style_order: None, } } } else { @@ -410,6 +434,7 @@ pub fn extract_style_from_expression<'a>( styles: vec![], }]), tag: None, + style_order: None, } } else { ExtractResult::Extract { @@ -418,10 +443,11 @@ pub fn extract_style_from_expression<'a>( name, level, identifier.name.as_str(), - selector.map(|s| s.into()), + selector.cloned(), ), ))]), tag: None, + style_order: None, } } } else { @@ -452,6 +478,7 @@ pub fn extract_style_from_expression<'a>( alternate: res, }]), tag: None, + style_order: None, }, LogicalOperator::And => ExtractResult::Extract { styles: Some(vec![ExtractStyleProp::Conditional { @@ -460,6 +487,7 @@ pub fn extract_style_from_expression<'a>( alternate: None, }]), tag: None, + style_order: None, }, LogicalOperator::Coalesce => ExtractResult::Extract { styles: Some(vec![ExtractStyleProp::Conditional { @@ -494,6 +522,7 @@ pub fn extract_style_from_expression<'a>( alternate: res, }]), tag: None, + style_order: None, }, } } @@ -528,6 +557,7 @@ pub fn extract_style_from_expression<'a>( ExtractResult::Extract { styles: Some(vec![ExtractStyleProp::StaticArray(props)]), tag: None, + style_order: None, } } } @@ -564,6 +594,7 @@ pub fn extract_style_from_expression<'a>( }, }]), tag: None, + style_order: None, }, Expression::ObjectExpression(obj) => { let mut props = vec![]; @@ -586,6 +617,7 @@ pub fn extract_style_from_expression<'a>( ExtractResult::Extract { styles: Some(props), tag: None, + style_order: None, } } // val if let Some(value) = get_number_by_literal_expression(val) => {} @@ -599,7 +631,7 @@ fn extract_style_from_member_expression<'a>( name: Option<&str>, mem: &mut ComputedMemberExpression<'a>, level: u8, - selector: Option<&str>, + selector: Option<&StyleSelector>, ) -> ExtractResult<'a> { let mem_expression = &mem.expression.clone_in(ast_builder.allocator); let mut ret: Vec = vec![]; @@ -610,14 +642,16 @@ fn extract_style_from_member_expression<'a>( return ExtractResult::Extract { styles: None, tag: None, + style_order: None, }; } - if let Some(num) = get_number_by_literal_expression(mem_expression) { + if let Some(num) = utils::get_number_by_literal_expression(mem_expression) { if num < 0f64 { return ExtractResult::Extract { styles: None, tag: None, + style_order: None, }; } let mut etc = None; @@ -640,6 +674,7 @@ fn extract_style_from_member_expression<'a>( return ExtractResult::Extract { styles: Some(styles), tag: None, + style_order: None, }; } } @@ -658,10 +693,11 @@ fn extract_style_from_member_expression<'a>( ), )) .as_str(), - selector.map(|s| s.into()), + selector.cloned(), )))] }), tag: None, + style_order: None, }; } @@ -682,7 +718,7 @@ fn extract_style_from_member_expression<'a>( ), )) .as_str(), - selector.map(|s| s.into()), + selector.cloned(), )))), ); } else if let ExtractResult::Extract { @@ -712,11 +748,12 @@ fn extract_style_from_member_expression<'a>( return ExtractResult::Extract { styles: None, tag: None, + style_order: None, }; } let mut map = BTreeMap::new(); - if let Some(k) = get_string_by_literal_expression(mem_expression) { + if let Some(k) = utils::get_string_by_literal_expression(mem_expression) { let mut etc = None; for p in obj.properties.iter_mut() { if let ObjectPropertyKind::ObjectProperty(ref mut o) = p { @@ -735,6 +772,7 @@ fn extract_style_from_member_expression<'a>( return ExtractResult::Extract { styles: Some(styles), tag: None, + style_order: None, }; } } @@ -749,6 +787,7 @@ fn extract_style_from_member_expression<'a>( return ExtractResult::Extract { styles: None, tag: None, + style_order: None, } } Some(etc) => { @@ -764,7 +803,7 @@ fn extract_style_from_member_expression<'a>( ), )) .as_str(), - selector.map(|s| s.into()), + selector.cloned(), )))) } } @@ -813,7 +852,7 @@ fn extract_style_from_member_expression<'a>( ), )) .as_str(), - selector.map(|s| s.into()), + selector.cloned(), )))) } } @@ -823,48 +862,6 @@ fn extract_style_from_member_expression<'a>( ExtractResult::Extract { styles: Some(ret), tag: None, + style_order: None, } } - -fn get_number_by_literal_expression(expr: &Expression) -> Option { - match expr { - Expression::ParenthesizedExpression(parenthesized) => { - get_number_by_literal_expression(&parenthesized.expression) - } - Expression::NumericLiteral(num) => Some(num.value), - Expression::UnaryExpression(unary) => get_number_by_literal_expression(&unary.argument) - .and_then(|num| match unary.operator { - UnaryOperator::UnaryNegation => Some(-num), - UnaryOperator::UnaryPlus => Some(num), - _ => None, - }), - _ => None, - } -} - -fn get_string_by_literal_expression(expr: &Expression) -> Option { - get_number_by_literal_expression(expr) - .map(|num| num.to_string()) - .or_else(|| match expr { - Expression::ParenthesizedExpression(parenthesized) => { - get_string_by_literal_expression(&parenthesized.expression) - } - Expression::StringLiteral(str) => Some(str.value.as_str().to_string()), - Expression::TemplateLiteral(tmp) => { - let mut collect = vec![]; - for (idx, q) in tmp.quasis.iter().enumerate() { - collect.push(q.value.raw.to_string()); - if idx < tmp.expressions.len() { - if let Some(value) = get_string_by_literal_expression(&tmp.expressions[idx]) - { - collect.push(value); - } else { - return None; - } - } - } - Some(collect.join("")) - } - _ => None, - }) -} diff --git a/libs/extractor/src/utils.rs b/libs/extractor/src/utils.rs index 7a21174a..49781061 100644 --- a/libs/extractor/src/utils.rs +++ b/libs/extractor/src/utils.rs @@ -1,9 +1,10 @@ use once_cell::sync::Lazy; use oxc_allocator::{Allocator, CloneIn}; -use oxc_ast::ast::{Expression, Statement}; +use oxc_ast::ast::{Expression, JSXAttributeValue, Statement}; use oxc_codegen::Codegen; use oxc_parser::Parser; use oxc_span::{SourceType, SPAN}; +use oxc_syntax::operator::UnaryOperator; use std::collections::HashSet; /// Convert a value to a pixel value @@ -48,6 +49,13 @@ static SPECIAL_PROPERTIES: Lazy> = Lazy::new(|| { "readOnly", "autoFocus", "required", + "checked", + "defaultChecked", + "value", + "defaultValue", + "selected", + "multiple", + "accept", ] { set.insert(prop); } @@ -61,6 +69,61 @@ pub fn is_special_property(name: &str) -> bool { || SPECIAL_PROPERTIES.contains(name) } +pub fn get_number_by_jsx_expression(expr: &JSXAttributeValue) -> Option { + match expr { + JSXAttributeValue::StringLiteral(sl) => get_number_by_literal_expression( + &Expression::StringLiteral(sl.clone_in(&Allocator::default())), + ), + JSXAttributeValue::ExpressionContainer(ec) => { + get_number_by_literal_expression(ec.expression.to_expression()) + } + _ => None, + } +} + +pub fn get_number_by_literal_expression(expr: &Expression) -> Option { + match expr { + Expression::ParenthesizedExpression(parenthesized) => { + get_number_by_literal_expression(&parenthesized.expression) + } + Expression::NumericLiteral(num) => Some(num.value), + Expression::UnaryExpression(unary) => get_number_by_literal_expression(&unary.argument) + .and_then(|num| match unary.operator { + UnaryOperator::UnaryNegation => Some(-num), + UnaryOperator::UnaryPlus => Some(num), + _ => None, + }), + _ => None, + } +} + +pub fn get_string_by_literal_expression(expr: &Expression) -> Option { + get_number_by_literal_expression(expr) + .map(|num| num.to_string()) + .or_else(|| match expr { + Expression::ParenthesizedExpression(parenthesized) => { + get_string_by_literal_expression(&parenthesized.expression) + } + Expression::StringLiteral(str) => Some(str.value.as_str().to_string()), + Expression::TemplateLiteral(tmp) => { + let mut collect = vec![]; + for (idx, q) in tmp.quasis.iter().enumerate() { + collect.push(q.value.raw.to_string()); + if idx < tmp.expressions.len() { + if let Some(value) = get_string_by_literal_expression(&tmp.expressions[idx]) + { + collect.push(value); + } else { + return None; + } + } + } + Some(collect.join("")) + } + _ => None, + }) +} + #[cfg(test)] mod tests { use super::*; diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs index 83d5b899..a9840ed0 100644 --- a/libs/extractor/src/visit.rs +++ b/libs/extractor/src/visit.rs @@ -21,6 +21,7 @@ use oxc_ast::visit::walk_mut::{ walk_variable_declarator, }; +use crate::utils::get_number_by_jsx_expression; use oxc_ast::{AstBuilder, VisitMut}; use oxc_span::SPAN; use std::collections::{HashMap, HashSet}; @@ -95,7 +96,8 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> { )); } else if call.arguments.len() == 1 { if let ExtractResult::Extract { - styles: Some(styles), + styles: Some(mut styles), + style_order, .. } = extract_style_from_expression( &self.ast, @@ -106,9 +108,10 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> { ) { // css can not reachable // ExtractResult::ExtractStyleWithChangeTag(styles, _) - let class_name = gen_class_names(&self.ast, &styles); + let class_name = gen_class_names(&self.ast, &mut styles, style_order); let mut styles = styles .into_iter() + // already set style order .flat_map(|ex| ex.extract()) .collect::>(); @@ -200,15 +203,19 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> { None, )); let mut props_styles = vec![]; - if let ExtractResult::Extract { styles, tag: _tag } = - extract_style_from_expression( - &self.ast, - None, - it.arguments[1].to_expression_mut(), - 0, - None, - ) - { + let mut style_order = None; + if let ExtractResult::Extract { + styles, + tag: _tag, + style_order: _style_order, + } = extract_style_from_expression( + &self.ast, + None, + it.arguments[1].to_expression_mut(), + 0, + None, + ) { + style_order = _style_order; styles.into_iter().for_each(|mut ex| { props_styles.append(&mut ex); }); @@ -222,12 +229,28 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> { } for style in props_styles.iter().rev() { - self.styles.append(&mut style.extract()); + self.styles.append( + &mut style + .extract() + .into_iter() + .map(|mut s| { + style_order.into_iter().for_each(|order| { + s.set_style_order(order); + }); + s + }) + .collect(), + ); } if let Expression::ObjectExpression(obj) = it.arguments[1].to_expression_mut() { - modify_prop_object(&self.ast, &mut obj.properties, &props_styles); + modify_prop_object( + &self.ast, + &mut obj.properties, + &mut props_styles, + style_order, + ); } it.arguments[0] = Argument::from(tag); @@ -237,90 +260,6 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> { } walk_call_expression(self, it); } - fn visit_jsx_element(&mut self, elem: &mut JSXElement<'a>) { - walk_jsx_element(self, elem); - // after run to convert css literal - - let opening_element = &mut elem.opening_element; - let component_name = &opening_element.name.to_string(); - if let Some(kind) = self.imports.get(component_name) { - let attrs = &mut opening_element.attributes; - let mut tag_name = Expression::StringLiteral(self.ast.alloc_string_literal( - SPAN, - kind.to_tag().unwrap_or("div"), - None, - )); - let mut props_styles = vec![]; - - // extract ExtractStyleProp and remain style and class name, just extract - let mut duplicate_set = HashSet::new(); - for i in (0..attrs.len()).rev() { - let mut attr = attrs.remove(i); - let mut rm = false; - if let Attribute(ref mut attr) = &mut attr { - if let Identifier(name) = &attr.name { - let name = short_to_long(name.name.as_str()); - if duplicate_set.contains(&name) { - continue; - } - duplicate_set.insert(name.clone()); - if let Some(at) = &mut attr.value { - rm = match extract_style_from_jsx_attr(&self.ast, &name, at, None) { - ExtractResult::Maintain => false, - ExtractResult::Extract { styles, tag } => { - styles.into_iter().for_each(|mut ex| { - ex.reverse(); - props_styles.append(&mut ex); - }); - if let Some(t) = tag { - tag_name = t; - } - true - } - } - } - } - } - if !rm { - attrs.insert(i, attr); - } - } - - for ex in kind.extract().into_iter().rev() { - props_styles.push(ExtractStyleProp::Static(ex)); - } - for style in props_styles.iter().rev() { - self.styles.append(&mut style.extract()); - } - // modify!! - modify_props(&self.ast, attrs, &props_styles); - - match tag_name { - Expression::StringLiteral(str) => { - // change tag name - let ident = JSXElementName::Identifier( - self.ast.alloc_jsx_identifier(SPAN, str.value.as_str()), - ); - opening_element.name = ident.clone_in(self.ast.allocator); - if let Some(el) = &mut elem.closing_element { - el.name = ident; - } - } - Expression::TemplateLiteral(literal) => { - let ident = JSXElementName::Identifier( - self.ast - .alloc_jsx_identifier(SPAN, literal.quasis[0].value.raw.as_str()), - ); - opening_element.name = ident.clone_in(self.ast.allocator); - if let Some(el) = &mut elem.closing_element { - el.name = ident; - } - } - - _ => {} - } - } - } fn visit_variable_declarator(&mut self, it: &mut VariableDeclarator<'a>) { if let Some(Expression::CallExpression(call)) = &it.init { if call.arguments.len() == 1 { @@ -404,4 +343,93 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> { } } } + fn visit_jsx_element(&mut self, elem: &mut JSXElement<'a>) { + walk_jsx_element(self, elem); + // after run to convert css literal + + let opening_element = &mut elem.opening_element; + let component_name = &opening_element.name.to_string(); + if let Some(kind) = self.imports.get(component_name) { + let attrs = &mut opening_element.attributes; + let mut tag_name = Expression::StringLiteral(self.ast.alloc_string_literal( + SPAN, + kind.to_tag().unwrap_or("div"), + None, + )); + let mut props_styles = vec![]; + + // extract ExtractStyleProp and remain style and class name, just extract + let mut duplicate_set = HashSet::new(); + let mut style_order = None; + for i in (0..attrs.len()).rev() { + let mut attr = attrs.remove(i); + if let Attribute(ref mut attr) = &mut attr { + if let Identifier(name) = &attr.name { + let name = short_to_long(name.name.as_str()); + if duplicate_set.contains(&name) { + continue; + } + duplicate_set.insert(name.clone()); + if name == "styleOrder" { + style_order = + get_number_by_jsx_expression(attr.value.as_ref().unwrap()) + .map(|n| n as u8); + continue; + } + + if let Some(at) = &mut attr.value { + if let ExtractResult::Extract { styles, tag, .. } = + extract_style_from_jsx_attr(&self.ast, &name, at, None) + { + styles.into_iter().for_each(|mut ex| { + ex.reverse(); + props_styles.append(&mut ex); + }); + if let Some(t) = tag { + tag_name = t; + } + continue; + } + } + } + } + attrs.insert(i, attr); + } + + for ex in kind.extract().into_iter().rev() { + props_styles.push(ExtractStyleProp::Static(ex)); + } + + modify_props(&self.ast, attrs, &mut props_styles, style_order); + for style in props_styles.iter().rev() { + self.styles.append(&mut style.extract()); + } + // modify!! + + match tag_name { + Expression::StringLiteral(str) => { + // change tag name + let ident = JSXElementName::Identifier( + self.ast.alloc_jsx_identifier(SPAN, str.value.as_str()), + ); + opening_element.name = ident.clone_in(self.ast.allocator); + if let Some(el) = &mut elem.closing_element { + el.name = ident; + } + } + Expression::TemplateLiteral(literal) => { + let ident = JSXElementName::Identifier( + self.ast + .alloc_jsx_identifier(SPAN, literal.quasis[0].value.raw.as_str()), + ); + opening_element.name = ident.clone_in(self.ast.allocator); + if let Some(el) = &mut elem.closing_element { + el.name = ident; + } + } + + _ => {} + } + } + } } diff --git a/libs/sheet/Cargo.toml b/libs/sheet/Cargo.toml index 724cfa0d..0d48bd05 100644 --- a/libs/sheet/Cargo.toml +++ b/libs/sheet/Cargo.toml @@ -7,7 +7,7 @@ edition = "2021" css = { path = "../css" } serde = { version = "1.0.217", features = ["derive"] } regex = "1.11.1" -once_cell = "1.20.2" +once_cell = "1.20.3" [dev-dependencies] insta = "1.42.1" diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs index 165061a7..14b399aa 100644 --- a/libs/sheet/src/lib.rs +++ b/libs/sheet/src/lib.rs @@ -20,7 +20,6 @@ pub struct StyleSheetProperty { pub property: String, pub value: String, pub selector: Option, - pub basic: bool, } impl PartialOrd for StyleSheetProperty { fn partial_cmp(&self, other: &Self) -> Option { @@ -30,23 +29,19 @@ impl PartialOrd for StyleSheetProperty { impl Ord for StyleSheetProperty { fn cmp(&self, other: &Self) -> std::cmp::Ordering { - if self.basic == other.basic { - match (self.selector.is_some(), other.selector.is_some()) { - (true, true) => match self.selector.cmp(&other.selector) { - Equal => match self.property.cmp(&other.property) { - Equal => self.value.cmp(&other.value), - val => val, - }, - val => val, - }, - (false, false) => match self.property.cmp(&other.property) { + match (self.selector.is_some(), other.selector.is_some()) { + (true, true) => match self.selector.cmp(&other.selector) { + Equal => match self.property.cmp(&other.property) { Equal => self.value.cmp(&other.value), - prop => prop, + val => val, }, - (a, b) => a.cmp(&b), - } - } else { - other.basic.cmp(&self.basic) + val => val, + }, + (false, false) => match self.property.cmp(&other.property) { + Equal => self.value.cmp(&other.value), + prop => prop, + }, + (a, b) => a.cmp(&b), } } } @@ -101,16 +96,25 @@ impl ExtractStyle for StyleSheetCss { } } -fn deserialize_btree_map_u8<'de, D>( - deserializer: D, -) -> Result>, D::Error> +type PropertyMap = BTreeMap>>; + +fn deserialize_btree_map_u8<'de, D>(deserializer: D) -> Result where D: Deserializer<'de>, { let mut result = BTreeMap::new(); - for (key, value) in BTreeMap::>::deserialize(deserializer)? + for (key, value) in + BTreeMap::>>::deserialize( + deserializer, + )? { - result.insert(key.parse().map_err(Error::custom)?, value); + let mut tmp_map = BTreeMap::new(); + + for (key, value) in value.into_iter() { + tmp_map.insert(key.parse().map_err(Error::custom)?, value); + } + + result.insert(key.parse().map_err(Error::custom)?, tmp_map); } Ok(result) @@ -118,7 +122,7 @@ where #[derive(Default, Deserialize, Serialize, Debug)] pub struct StyleSheet { #[serde(deserialize_with = "deserialize_btree_map_u8")] - pub properties: BTreeMap>, + pub properties: PropertyMap, pub css: HashSet, #[serde(skip)] pub theme: Theme, @@ -132,9 +136,11 @@ impl StyleSheet { level: u8, value: &str, selector: Option<&StyleSelector>, - basic: bool, + style_order: Option, ) -> bool { self.properties + .entry(style_order.unwrap_or(255)) + .or_default() .entry(level) .or_default() .insert(StyleSheetProperty { @@ -142,7 +148,6 @@ impl StyleSheet { property: property.to_string(), value: value.to_string(), selector: selector.cloned(), - basic, }) } @@ -159,67 +164,73 @@ impl StyleSheet { pub fn create_css(&self) -> String { let mut css = self.theme.to_css(); - for (level, props) in self.properties.iter() { - let (mut medias, mut sorted_props): (Vec<_>, Vec<_>) = props - .iter() - .partition(|prop| matches!(prop.selector, Some(StyleSelector::Media(_)))); - sorted_props.sort(); - medias.sort(); - let medias = { - let mut map = BTreeMap::new(); - for prop in medias { - if let Some(StyleSelector::Media(media)) = &prop.selector { - map.entry(media).or_insert_with(Vec::new).push(prop); + + // order + for (_, map) in self.properties.iter() { + for (level, props) in map.iter() { + let (mut medias, mut sorted_props): (Vec<_>, Vec<_>) = props + .iter() + .partition(|prop| matches!(prop.selector, Some(StyleSelector::Media(_)))); + sorted_props.sort(); + medias.sort(); + let medias = { + let mut map = BTreeMap::new(); + for prop in medias { + if let Some(StyleSelector::Media(media)) = &prop.selector { + map.entry(media).or_insert_with(Vec::new).push(prop); + } } + map + }; + + let break_point = if *level == 0 { + None + } else { + Some( + self.theme + .break_points + .iter() + .enumerate() + .find(|(idx, _)| (*idx as u8) == *level) + .map(|(_, bp)| *bp) + .unwrap_or_else(|| { + self.theme.break_points.last().cloned().unwrap_or(0) + }), + ) + }; + if !sorted_props.is_empty() { + let inner_css = sorted_props + .into_iter() + .map(ExtractStyle::extract) + .collect::>() + .join(""); + css.push_str( + if let Some(break_point) = break_point { + format!("\n@media (min-width:{}px){{{}}}", break_point, inner_css) + } else { + inner_css + } + .as_str(), + ); + } + for (media, props) in medias { + let inner_css = props + .into_iter() + .map(ExtractStyle::extract) + .collect::>() + .join(""); + css.push_str( + if let Some(break_point) = break_point { + format!( + "\n@media (min-width:{}px) and {}{{{}}}", + break_point, media, inner_css + ) + } else { + format!("\n@media {}{{{}}}", media, inner_css.as_str()) + } + .as_str(), + ); } - map - }; - - let break_point = if *level == 0 { - None - } else { - Some( - self.theme - .break_points - .iter() - .enumerate() - .find(|(idx, _)| (*idx as u8) == *level) - .map(|(_, bp)| *bp) - .unwrap_or_else(|| self.theme.break_points.last().cloned().unwrap_or(0)), - ) - }; - if !sorted_props.is_empty() { - let inner_css = sorted_props - .into_iter() - .map(ExtractStyle::extract) - .collect::>() - .join(""); - css.push_str( - if let Some(break_point) = break_point { - format!("\n@media (min-width:{}px){{{}}}", break_point, inner_css) - } else { - inner_css - } - .as_str(), - ); - } - for (media, props) in medias { - let inner_css = props - .into_iter() - .map(ExtractStyle::extract) - .collect::>() - .join(""); - css.push_str( - if let Some(break_point) = break_point { - format!( - "\n@media (min-width:{}px) and {}{{{}}}", - break_point, media, inner_css - ) - } else { - format!("\n@media {}{{{}}}", media, inner_css.as_str()) - } - .as_str(), - ); } } for prop in self.css.iter() { @@ -236,19 +247,16 @@ mod tests { #[test] fn test_convert_theme_variable_value() { - assert_eq!(convert_theme_variable_value(&"1px".to_string()), "1px"); - assert_eq!( - convert_theme_variable_value(&"$var".to_string()), - "var(--var)" - ); + assert_eq!(convert_theme_variable_value("1px"), "1px"); + assert_eq!(convert_theme_variable_value("$var"), "var(--var)"); assert_eq!( - convert_theme_variable_value(&"$var $var".to_string()), + convert_theme_variable_value("$var $var"), "var(--var) var(--var)" ); assert_eq!( - convert_theme_variable_value(&"1px solid $red".to_string()), + convert_theme_variable_value("1px solid $red"), "1px solid var(--red)" ); } @@ -256,13 +264,13 @@ mod tests { #[test] fn test_create_css_sort_test() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "background-color", 1, "red", None, false); - sheet.add_property("test", "background", 1, "some", None, false); + sheet.add_property("test", "background-color", 1, "red", None, None); + sheet.add_property("test", "background", 1, "some", None, None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "border", 0, "1px solid", None, false); - sheet.add_property("test", "border-color", 0, "red", None, false); + sheet.add_property("test", "border", 0, "1px solid", None, None); + sheet.add_property("test", "border-color", 0, "red", None, None); assert_debug_snapshot!(sheet.create_css()); } #[test] @@ -273,44 +281,44 @@ mod tests { "background-color", 1, "red", - Some(&StyleSelector::Postfix("hover".to_string())), - false, + Some(&"hover".into()), + None, ); - sheet.add_property("test", "background-color", 1, "some", None, false); + sheet.add_property("test", "background-color", 1, "some", None, None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "background-color", 1, "red", None, false); + sheet.add_property("test", "background-color", 1, "red", None, None); sheet.add_property( "test", "background-color", 1, "some", - Some(&StyleSelector::Postfix("hover".to_string())), - false, + Some(&"hover".into()), + None, ); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "background-color", 1, "red", None, false); - sheet.add_property("test", "background", 1, "some", None, false); + sheet.add_property("test", "background-color", 1, "red", None, None); + sheet.add_property("test", "background", 1, "some", None, None); assert_debug_snapshot!(sheet.create_css()); } #[test] fn test_create_css_with_basic_sort_test() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "background-color", 1, "red", None, true); - sheet.add_property("test", "background", 1, "some", None, false); + sheet.add_property("test", "background-color", 1, "red", None, Some(0)); + sheet.add_property("test", "background", 1, "some", None, None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "border", 0, "1px solid", None, false); - sheet.add_property("test", "border-color", 0, "red", None, true); + sheet.add_property("test", "border", 0, "1px solid", None, None); + sheet.add_property("test", "border-color", 0, "red", None, Some(0)); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "display", 0, "flex", None, true); - sheet.add_property("test", "display", 0, "block", None, false); + sheet.add_property("test", "display", 0, "flex", None, Some(0)); + sheet.add_property("test", "display", 0, "block", None, None); assert_debug_snapshot!(sheet.create_css()); } @@ -322,23 +330,23 @@ mod tests { "background-color", 1, "red", - Some(&StyleSelector::Postfix("hover".to_string())), - false, + Some(&"hover".into()), + None, ); - sheet.add_property("test", "background-color", 1, "some", None, true); + sheet.add_property("test", "background-color", 1, "some", None, Some(0)); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "display", 0, "flex", None, true); - sheet.add_property("test", "display", 0, "none", None, false); - sheet.add_property("test", "display", 2, "flex", None, false); + sheet.add_property("test", "display", 0, "flex", None, Some(0)); + sheet.add_property("test", "display", 0, "none", None, None); + sheet.add_property("test", "display", 2, "flex", None, None); assert_debug_snapshot!(sheet.create_css()); } #[test] fn test_create_css() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 1, "40px", None, false); + sheet.add_property("test", "mx", 1, "40px", None, None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); @@ -346,13 +354,13 @@ mod tests { assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 2, "40px", None, false); - sheet.add_property("test", "my", 2, "40px", None, false); + sheet.add_property("test", "mx", 2, "40px", None, None); + sheet.add_property("test", "my", 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()), false); - sheet.add_property("test", "bg", 0, "blue", Some(&"active".into()), false); + sheet.add_property("test", "bg", 0, "red", Some(&"hover".into()), None); + sheet.add_property("test", "bg", 0, "blue", Some(&"active".into()), None); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); @@ -362,7 +370,7 @@ mod tests { 0, "red", Some(&StyleSelector::from("groupFocusVisible")), - false, + None, ); sheet.add_property( "test", @@ -370,7 +378,7 @@ mod tests { 0, "blue", Some(&StyleSelector::from("groupFocusVisible")), - false, + None, ); assert_debug_snapshot!(sheet.create_css()); @@ -381,7 +389,7 @@ mod tests { 0, "red", Some(&StyleSelector::from("groupFocusVisible")), - false, + None, ); sheet.add_property( "test", @@ -389,26 +397,30 @@ mod tests { 0, "blue", Some(&StyleSelector::from("hover")), - false, + 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, - "red", - Some(&StyleSelector::Prefix("*:hover".to_string())), - false, + "blue", + Some(&StyleSelector::from("groupFocusVisible")), + None, ); + assert_debug_snapshot!(sheet.create_css()); + + let mut sheet = StyleSheet::default(); sheet.add_property( "test", "bg", 0, - "blue", - Some(&StyleSelector::from("groupFocusVisible")), - false, + "red", + Some(&["themeDark", "hover"].into()), + None, ); assert_debug_snapshot!(sheet.create_css()); @@ -418,13 +430,20 @@ mod tests { "bg", 0, "red", - Some(&"themeDark&hover".into()), - false, + Some(&["wrong", "hover"].into()), + None, ); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "bg", 0, "red", Some(&"wrong&hover".into()), false); + sheet.add_property( + "test", + "bg", + 0, + "red", + Some(&"*[disabled='true'] &:hover".into()), + None, + ); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); @@ -433,8 +452,8 @@ mod tests { "bg", 0, "red", - Some(&"*[disabled='true'] &:hover".into()), - false, + Some(&"&[disabled='true']".into()), + None, ); assert_debug_snapshot!(sheet.create_css()); @@ -444,56 +463,73 @@ mod tests { "bg", 0, "red", - Some(&"&[disabled='true']".into()), - false, + Some(&"&[disabled='true'], &[disabled='true']".into()), + None, ); assert_debug_snapshot!(sheet.create_css()); } + #[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); + 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)); + assert_debug_snapshot!(sheet.create_css()); + } + #[test] fn wrong_breakpoint() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 10, "40px", None, false); + sheet.add_property("test", "mx", 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()), false); - sheet.add_property("test", "mx", 2, "50px", Some(&"groupHover".into()), false); + sheet.add_property("test", "mx", 1, "40px", Some(&"groupHover".into()), None); + sheet.add_property("test", "mx", 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()), false); - sheet.add_property("test", "my", 0, "40px", Some(&"themeDark".into()), false); - sheet.add_property("test", "mx", 0, "50px", Some(&"themeLight".into()), false); + 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); assert_debug_snapshot!(sheet.create_css()); let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 0, "50px", Some(&"themeLight".into()), false); - sheet.add_property("test", "mx", 0, "41px", None, false); - sheet.add_property("test", "mx", 0, "51px", Some(&"themeLight".into()), false); - sheet.add_property("test", "mx", 0, "42px", None, false); + 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); assert_debug_snapshot!(sheet.create_css()); } #[test] fn test_print_selector() { let mut sheet = StyleSheet::default(); - sheet.add_property("test", "mx", 0, "40px", Some(&"print".into()), false); - sheet.add_property("test", "my", 0, "40px", Some(&"print".into()), false); + 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", "mx", 1, "40px", Some(&"print".into()), false); - sheet.add_property("test", "my", 1, "40px", Some(&"print".into()), false); + sheet.add_property("test", "mx", 1, "40px", Some(&"print".into()), None); + sheet.add_property("test", "my", 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()), false); - sheet.add_property("test", "my", 0, "40px", None, false); + sheet.add_property("test", "mx", 0, "40px", Some(&"print".into()), None); + sheet.add_property("test", "my", 0, "40px", None, None); assert_debug_snapshot!(sheet.create_css()); } @@ -504,15 +540,17 @@ mod tests { let sheet: StyleSheet = serde_json::from_str( r##"{ "properties": { - "0": [ - { - "className": "test", - "property": "mx", - "value": "40px", - "selector": null, - "basic": false - } - ] + "255": { + "0": [ + { + "className": "test", + "property": "mx", + "value": "40px", + "selector": null, + "basic": false + } + ] + } }, "css": [], "theme": { diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-12.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-12.snap new file mode 100644 index 00000000..06b3060e --- /dev/null +++ b/libs/sheet/src/snapshots/sheet__tests__create_css-12.snap @@ -0,0 +1,5 @@ +--- +source: libs/sheet/src/lib.rs +expression: sheet.create_css() +--- +".test[disabled='true'], .test[disabled='true']{background:red}" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-7.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-7.snap index ea306b67..b970478c 100644 --- a/libs/sheet/src/snapshots/sheet__tests__create_css-7.snap +++ b/libs/sheet/src/snapshots/sheet__tests__create_css-7.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"*:hover .test{background:red}*[role=group]:focus-visible .test{background:blue}" +"*[role=group]:focus-visible .test{background:blue}*:hover .test{background:red}" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-9.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-9.snap index 42aebfe1..e56081a4 100644 --- a/libs/sheet/src/snapshots/sheet__tests__create_css-9.snap +++ b/libs/sheet/src/snapshots/sheet__tests__create_css-9.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -".test:hover{background:red}" +".test:wrong:hover{background:red}" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap index 2700b0dd..9adb5083 100644 --- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap +++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"\n@media (min-width:480px){.test{background-color:red}.test{background:some}}" +"\n@media (min-width:480px){.test{background-color:red}}\n@media (min-width:480px){.test{background:some}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test.snap index 20595798..ece34908 100644 --- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test.snap +++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test.snap @@ -2,4 +2,4 @@ source: libs/sheet/src/lib.rs expression: sheet.create_css() --- -"\n@media (min-width:480px){.test{background-color:some}.test:hover{background-color:red}}" +"\n@media (min-width:480px){.test{background-color:some}}\n@media (min-width:480px){.test:hover{background-color:red}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__deserialize.snap b/libs/sheet/src/snapshots/sheet__tests__deserialize.snap index 8fd58812..527c94a1 100644 --- a/libs/sheet/src/snapshots/sheet__tests__deserialize.snap +++ b/libs/sheet/src/snapshots/sheet__tests__deserialize.snap @@ -4,13 +4,14 @@ expression: sheet --- StyleSheet { properties: { - 0: { - StyleSheetProperty { - class_name: "test", - property: "mx", - value: "40px", - selector: None, - basic: false, + 255: { + 0: { + StyleSheetProperty { + class_name: "test", + property: "mx", + value: "40px", + selector: None, + }, }, }, }, diff --git a/libs/sheet/src/snapshots/sheet__tests__style_order_create_css-2.snap b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css-2.snap new file mode 100644 index 00000000..46141cba --- /dev/null +++ b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css-2.snap @@ -0,0 +1,5 @@ +--- +source: libs/sheet/src/lib.rs +expression: sheet.create_css() +--- +".test{background:red}.test{background:blue}" 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 new file mode 100644 index 00000000..02bc7889 --- /dev/null +++ b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap @@ -0,0 +1,5 @@ +--- +source: libs/sheet/src/lib.rs +expression: sheet.create_css() +--- +".test{margin-left:40px;margin-right:40px;}\n@media (min-width:480px){.test{margin-left:40px;margin-right:40px;}.test{margin-left:44px;margin-right:44px;}}\n@media (min-width:480px){.test{margin-left:50px;margin-right:50px;}}.test{margin-left:70px;margin-right:70px;}\n@media (min-width:480px){.test{margin-left:60px;margin-right:60px;}}" diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap b/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap index bafbf207..32d9e656 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=dark] .test{margin-top:40px;margin-bottom:40px;}:root[data-theme=light] .test{margin-left:50px;margin-right:50px;}" +":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;}" diff --git a/packages/react/src/types/props/selector/index.ts b/packages/react/src/types/props/selector/index.ts index 60ddcdf4..b8f46313 100644 --- a/packages/react/src/types/props/selector/index.ts +++ b/packages/react/src/types/props/selector/index.ts @@ -68,4 +68,6 @@ export interface DevupSelectorProps { _viewTransitionOld?: DevupCommonProps selectors?: Record + + styleOrder?: number }