From d416a39937fdde71e3929207f2ac1d337eb97a44 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Mon, 24 Feb 2025 11:09:49 +0900 Subject: [PATCH 1/2] Support conditional selector --- Cargo.lock | 59 ++++++----- libs/extractor/Cargo.toml | 12 +-- libs/extractor/src/lib.rs | 63 +++++++++++ libs/extractor/src/style_extractor.rs | 28 +++-- .../react/src/types/props/selector/index.ts | 100 +++++++++--------- 5 files changed, 163 insertions(+), 99 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 82111ccf..9bc77909 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -624,9 +624,9 @@ dependencies = [ [[package]] name = "oxc_allocator" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "5a6d450673da14c60c6946deb0c06d68377d2d6f2ee41ad5b462fa9894001560" +checksum = "bf460405a383f3f7ac134a0e06afdb3525c8fa8f119453167f179ea6b12faaf6" dependencies = [ "allocator-api2", "bumpalo", @@ -637,9 +637,9 @@ dependencies = [ [[package]] name = "oxc_ast" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "692c74b135e66d3fa13312d886f4a307131a5bd2fd76e5a4137825c6161b56a5" +checksum = "b273094a3e96e84d3d8ce82190fd7113f70bb2a8dcb652c78b46df79fdd156cc" dependencies = [ "bitflags", "cow-utils", @@ -654,9 +654,9 @@ dependencies = [ [[package]] name = "oxc_ast_macros" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "d4759d0523a72576036df640954ac9c4ce995f39f290cfc723221cc45ac7b11a" +checksum = "ab1dff20655433e64452ee12a9c87dba5d307a47fc8e155b4e37d746d66b37dd" dependencies = [ "proc-macro2", "quote", @@ -665,9 +665,9 @@ dependencies = [ [[package]] name = "oxc_cfg" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c58e5838966f971c24e8be8c34fb901e6e8a48211ea1db6d66c76fbb77b58d6c" +checksum = "f289d7b40c97d1b7d2a8cf1528cd5af0f3f4e832dffdec20b6485b9d6240de0b" dependencies = [ "bitflags", "itertools 0.14.0", @@ -680,9 +680,9 @@ dependencies = [ [[package]] name = "oxc_codegen" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "b6e298be4a113f57749ed51a38dc253671eaed418a5de6dbd2bf29ff34c4f595" +checksum = "8aa20c10288eacf1a8ec93981198c1428c7c9d0436ae7e0f0037a02e87535c94" dependencies = [ "assert-unchecked", "bitflags", @@ -702,9 +702,9 @@ dependencies = [ [[package]] name = "oxc_data_structures" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8e87ee74753f20549e9d6bcc00e956f5ab67fde4a23e383fd4f7d8ad752d71d3" +checksum = "e902c119eca30d0016d3d2aed31052d6e3ef1f594d71ca3fe193286771a8088d" dependencies = [ "assert-unchecked", "ropey", @@ -712,9 +712,9 @@ dependencies = [ [[package]] name = "oxc_diagnostics" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e27133a883a4f5d9796259a3ca6ab28ba8c097ee32cd58fc794688e205f66727" +checksum = "640a5f40eb0e09725a5e9c90e88727272c999d9805403747e2140cab2a742b6e" dependencies = [ "cow-utils", "oxc-miette", @@ -722,9 +722,9 @@ dependencies = [ [[package]] name = "oxc_ecmascript" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "16a7535550ce59cc7373d60d13e5fb32eee1817ba9dcfa3df7a1ae96bdb0945e" +checksum = "87543a59fd0d2d27102ccd8eee9f954564f7e82124992cc21975bbbe75851ce4" dependencies = [ "cow-utils", "num-bigint", @@ -736,9 +736,12 @@ dependencies = [ [[package]] name = "oxc_estree" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a817a58818b63a5b26a15527e9c7f09c93ba1a95f570ae75e5e84bd3dee047de" +checksum = "c1efeb3bb8ce6bced1e382e49d3978a2e5067cdc3881584f1cdef5aaf52d28b4" +dependencies = [ + "itoa", +] [[package]] name = "oxc_index" @@ -748,9 +751,9 @@ checksum = "5eca5d9726cd0a6e433debe003b7bc88b2ecad0bb6109f0cef7c55e692139a34" [[package]] name = "oxc_parser" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "6410afa5ad3cde657f26803f828726b8d3b475131299faf5c7948299892a560c" +checksum = "d0f5195b60a980baf22e34c801c8a37901ee21149e523d2a2fc68111991dd0b6" dependencies = [ "assert-unchecked", "bitflags", @@ -771,9 +774,9 @@ dependencies = [ [[package]] name = "oxc_regular_expression" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9711b8c74f28de9a295bc03baf7d61abf47af35556156e49f3a44fa572194325" +checksum = "c6b7199022f1e8a071a118737884cdf75bd3ba869471fd500f00dd4612a4faeb" dependencies = [ "oxc_allocator", "oxc_ast_macros", @@ -787,9 +790,9 @@ dependencies = [ [[package]] name = "oxc_semantic" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "18e0eac139ab28789789f993fa4955c386454d7c34c1adfe44448c1cb7769cf0" +checksum = "55da371ce5345676e602719ce048eb2343b3e7b1798c6275e06ea431917340af" dependencies = [ "assert-unchecked", "itertools 0.14.0", @@ -823,9 +826,9 @@ dependencies = [ [[package]] name = "oxc_span" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f8c7d6b92b30eea1fdc8907c6dfe8525b75a815024d6567628697789076fb7e1" +checksum = "b3cbaec227f5bb91e52a04f9028915973cbb7522b123b41af2d3189eb1ce41d8" dependencies = [ "compact_str", "oxc-miette", @@ -836,9 +839,9 @@ dependencies = [ [[package]] name = "oxc_syntax" -version = "0.51.0" +version = "0.52.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9540bf5b53cb0cd81dbdf07b25834a5064b762e6a330ca35d0d424a581a442b8" +checksum = "91bd42fae0c0e6212ea704ed533df47748002abc0af5496911fdb09735028a77" dependencies = [ "assert-unchecked", "bitflags", diff --git a/libs/extractor/Cargo.toml b/libs/extractor/Cargo.toml index abb46ea7..7ce0e01c 100644 --- a/libs/extractor/Cargo.toml +++ b/libs/extractor/Cargo.toml @@ -4,12 +4,12 @@ version = "0.1.0" edition = "2021" [dependencies] -oxc_parser = "0.51.0" -oxc_syntax = "0.51.0" -oxc_span = "0.51.0" -oxc_allocator = "0.51.0" -oxc_ast = "0.51.0" -oxc_codegen = "0.51.0" +oxc_parser = "0.52.0" +oxc_syntax = "0.52.0" +oxc_span = "0.52.0" +oxc_allocator = "0.52.0" +oxc_ast = "0.52.0" +oxc_codegen = "0.52.0" css = { path = "../css" } once_cell = "1.20.3" diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs index 91487da6..8e545ed8 100644 --- a/libs/extractor/src/lib.rs +++ b/libs/extractor/src/lib.rs @@ -914,6 +914,69 @@ mod tests { .unwrap()); } + #[test] + #[serial] + fn extract_conditional_selector() { + reset_class_map(); + assert_debug_snapshot!(extract( + "test.tsx", + r"import {Box} from '@devup-ui/core' + + ", + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.tsx", + r"import {Box} from '@devup-ui/core' + + ", + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.tsx", + r"import {Box} from '@devup-ui/core' + + ", + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.tsx", + r"import {Box} from '@devup-ui/core' + + ", + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + } + #[test] #[serial] fn extract_selector_with_responsive() { diff --git a/libs/extractor/src/style_extractor.rs b/libs/extractor/src/style_extractor.rs index d1eba5ca..454255e6 100644 --- a/libs/extractor/src/style_extractor.rs +++ b/libs/extractor/src/style_extractor.rs @@ -466,21 +466,19 @@ pub fn extract_style_from_expression<'a>( } } Expression::LogicalExpression(logical) => { - let res = name.and_then(|name| { - match extract_style_from_expression( - ast_builder, - Some(name), - &mut logical.right, - level, - selector, - ) { - ExtractResult::Extract { - styles: Some(styles), - .. - } => Some(Box::new(ExtractStyleProp::StaticArray(styles))), - _ => None, - } - }); + let res = match extract_style_from_expression( + ast_builder, + name, + &mut logical.right, + level, + selector, + ) { + ExtractResult::Extract { + styles: Some(styles), + .. + } => Some(Box::new(ExtractStyleProp::StaticArray(styles))), + _ => None, + }; match logical.operator { LogicalOperator::Or => ExtractResult::Extract { styles: Some(vec![ExtractStyleProp::Conditional { diff --git a/packages/react/src/types/props/selector/index.ts b/packages/react/src/types/props/selector/index.ts index b8f46313..9138f837 100644 --- a/packages/react/src/types/props/selector/index.ts +++ b/packages/react/src/types/props/selector/index.ts @@ -13,59 +13,59 @@ export type DevupThemeSelectorProps = keyof DevupTheme extends undefined } export interface DevupSelectorProps { - _active?: DevupCommonProps - _checked?: DevupCommonProps - _default?: DevupCommonProps - _disabled?: DevupCommonProps - _empty?: DevupCommonProps - _enabled?: DevupCommonProps - _first?: DevupCommonProps - _firstChild?: DevupCommonProps - _firstOfType?: DevupCommonProps - _focus?: DevupCommonProps - _focusVisible?: DevupCommonProps - _focusWithin?: DevupCommonProps - _hover?: DevupCommonProps - _invalid?: DevupCommonProps - _lastChild?: DevupCommonProps - _lastOfType?: DevupCommonProps - _link?: DevupCommonProps - _onlyChild?: DevupCommonProps - _optional?: DevupCommonProps - _readOnly?: DevupCommonProps - _print?: DevupCommonProps + _active?: DevupCommonProps | false + _checked?: DevupCommonProps | false + _default?: DevupCommonProps | false + _disabled?: DevupCommonProps | false + _empty?: DevupCommonProps | false + _enabled?: DevupCommonProps | false + _first?: DevupCommonProps | false + _firstChild?: DevupCommonProps | false + _firstOfType?: DevupCommonProps | false + _focus?: DevupCommonProps | false + _focusVisible?: DevupCommonProps | false + _focusWithin?: DevupCommonProps | false + _hover?: DevupCommonProps | false + _invalid?: DevupCommonProps | false + _lastChild?: DevupCommonProps | false + _lastOfType?: DevupCommonProps | false + _link?: DevupCommonProps | false + _onlyChild?: DevupCommonProps | false + _optional?: DevupCommonProps | false + _readOnly?: DevupCommonProps | false + _print?: DevupCommonProps | false - _groupActive?: DevupCommonProps - _groupChecked?: DevupCommonProps - _groupDefault?: DevupCommonProps - _groupDisabled?: DevupCommonProps - _groupEmpty?: DevupCommonProps - _groupEnabled?: DevupCommonProps - _groupFirst?: DevupCommonProps - _groupFirstChild?: DevupCommonProps - _groupFirstOfType?: DevupCommonProps - _groupFocus?: DevupCommonProps - _groupFocusVisible?: DevupCommonProps - _groupFocusWithin?: DevupCommonProps - _groupHover?: DevupCommonProps - _groupInvalid?: DevupCommonProps - _groupLastChild?: DevupCommonProps - _groupLastOfType?: DevupCommonProps - _groupLink?: DevupCommonProps - _groupOnlyChild?: DevupCommonProps - _groupOptional?: DevupCommonProps - _groupReadOnly?: DevupCommonProps + _groupActive?: DevupCommonProps | false + _groupChecked?: DevupCommonProps | false + _groupDefault?: DevupCommonProps | false + _groupDisabled?: DevupCommonProps | false + _groupEmpty?: DevupCommonProps | false + _groupEnabled?: DevupCommonProps | false + _groupFirst?: DevupCommonProps | false + _groupFirstChild?: DevupCommonProps | false + _groupFirstOfType?: DevupCommonProps | false + _groupFocus?: DevupCommonProps | false + _groupFocusVisible?: DevupCommonProps | false + _groupFocusWithin?: DevupCommonProps | false + _groupHover?: DevupCommonProps | false + _groupInvalid?: DevupCommonProps | false + _groupLastChild?: DevupCommonProps | false + _groupLastOfType?: DevupCommonProps | false + _groupLink?: DevupCommonProps | false + _groupOnlyChild?: DevupCommonProps | false + _groupOptional?: DevupCommonProps | false + _groupReadOnly?: DevupCommonProps | false // double separator - _placeholder?: DevupCommonProps - _before?: DevupCommonProps - _after?: DevupCommonProps - _highlight?: DevupCommonProps - _viewTransition?: DevupCommonProps - _viewTransitionGroup?: DevupCommonProps - _viewTransitionImagePair?: DevupCommonProps - _viewTransitionNew?: DevupCommonProps - _viewTransitionOld?: DevupCommonProps + _placeholder?: DevupCommonProps | false + _before?: DevupCommonProps | false + _after?: DevupCommonProps | false + _highlight?: DevupCommonProps | false + _viewTransition?: DevupCommonProps | false + _viewTransitionGroup?: DevupCommonProps | false + _viewTransitionImagePair?: DevupCommonProps | false + _viewTransitionNew?: DevupCommonProps | false + _viewTransitionOld?: DevupCommonProps | false selectors?: Record From 0e1ab6ef96fe29377ca7032193d4dca0453fbb4d Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Mon, 24 Feb 2025 11:11:40 +0900 Subject: [PATCH 2/2] Add file --- .changeset/red-shrimps-buy.md | 6 ++++ ...tests__extract_conditional_selector-2.snap | 22 ++++++++++++ ...tests__extract_conditional_selector-3.snap | 8 +++++ ...tests__extract_conditional_selector-4.snap | 35 +++++++++++++++++++ ...__tests__extract_conditional_selector.snap | 22 ++++++++++++ 5 files changed, 93 insertions(+) create mode 100644 .changeset/red-shrimps-buy.md create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap diff --git a/.changeset/red-shrimps-buy.md b/.changeset/red-shrimps-buy.md new file mode 100644 index 00000000..086d3220 --- /dev/null +++ b/.changeset/red-shrimps-buy.md @@ -0,0 +1,6 @@ +--- +"@devup-ui/react": patch +"@devup-ui/wasm": patch +--- + +Support for conditional selector diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap new file mode 100644 index 00000000..66466a52 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap @@ -0,0 +1,22 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.tsx\",\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: "mx", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap new file mode 100644 index 00000000..81c2ee2a --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap @@ -0,0 +1,8 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n \n \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [], + code: "
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap new file mode 100644 index 00000000..c75f41b9 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap @@ -0,0 +1,35 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.tsx\",\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: "mx", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "my", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap new file mode 100644 index 00000000..91a499c6 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap @@ -0,0 +1,22 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.tsx\",\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: "mx", + value: "4px", + level: 0, + selector: Some( + Selector( + "&:hover", + ), + ), + style_order: None, + }, + ), + ], + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +}