Skip to content

Commit da5bcfe

Browse files
owjs3901owjs3901
authored
Merge pull request #34 from dev-five-git/back-tick-issue
Support double separator
2 parents 2c13530 + 8943bad commit da5bcfe

File tree

12 files changed

+401
-178
lines changed

12 files changed

+401
-178
lines changed

‎.changeset/afraid-dolls-smell.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/wasm": patch
3+
---
4+
5+
Support double separator, Support backtick case

‎.changeset/flat-stingrays-breathe.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/react": patch
3+
---
4+
5+
Add double selector

‎libs/css/src/lib.rs‎

Lines changed: 88 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,48 @@
11
use once_cell::sync::Lazy;
2-
use std::collections::HashMap;
2+
use std::collections::{HashMap, HashSet};
33
use std::sync::Mutex;
44

5+
pub enum SelectorSeparator {
6+
Single,
7+
Double,
8+
}
9+
10+
impl SelectorSeparator {
11+
pub fn separator(&self) -> &str {
12+
match self {
13+
SelectorSeparator::Single => ":",
14+
SelectorSeparator::Double => "::",
15+
}
16+
}
17+
}
18+
19+
static DOUBLE_SEPARATOR: Lazy<HashSet<&str>> = Lazy::new(|| {
20+
let mut set = HashSet::new();
21+
22+
for key in [
23+
"placeholder",
24+
"before",
25+
"after",
26+
"highlight",
27+
"view-transition",
28+
"view-transition-group",
29+
"view-transition-image-pair",
30+
"view-transition-new",
31+
"view-transition-old",
32+
] {
33+
set.insert(key);
34+
}
35+
set
36+
});
37+
38+
pub fn get_selector_separator(key: &str) -> SelectorSeparator {
39+
if DOUBLE_SEPARATOR.contains(key) {
40+
SelectorSeparator::Double
41+
} else {
42+
SelectorSeparator::Single
43+
}
44+
}
45+
546
#[derive(Clone, Debug, PartialEq)]
647
pub enum PropertyType {
748
Single(String),
@@ -26,56 +67,54 @@ impl From<[&str; 2]> for PropertyType {
2667
}
2768
}
2869

29-
static GLOBAL_STYLE_PROPERTY: Lazy<Mutex<HashMap<&str, PropertyType>>> = Lazy::new(|| {
30-
Mutex::new({
31-
let mut map = HashMap::new();
70+
static GLOBAL_STYLE_PROPERTY: Lazy<HashMap<&str, PropertyType>> = Lazy::new(|| {
71+
let mut map = HashMap::new();
3272

33-
for (key, value) in [
34-
("bg", "background"),
35-
("bgAttachment", "background-attachment"),
36-
("bgClip", "background-clip"),
37-
("bgColor", "background-color"),
38-
("bgImage", "background-image"),
39-
("bgOrigin", "background-origin"),
40-
("bgPosition", "background-position"),
41-
("bgPositionX", "background-position-x"),
42-
("bgPositionY", "background-position-y"),
43-
("bgRepeat", "background-repeat"),
44-
("bgSize", "background-size"),
45-
("animationDir", "animation-direction"),
46-
("flexDir", "flex-direction"),
47-
("pos", "position"),
48-
("m", "margin"),
49-
("mt", "margin-top"),
50-
("mr", "margin-right"),
51-
("mb", "margin-bottom"),
52-
("ml", "margin-left"),
53-
("p", "padding"),
54-
("pt", "padding-top"),
55-
("pr", "padding-right"),
56-
("pb", "padding-bottom"),
57-
("pl", "padding-left"),
58-
("w", "width"),
59-
("h", "height"),
60-
("minW", "min-width"),
61-
("minH", "min-height"),
62-
("maxW", "max-width"),
63-
("maxH", "max-height"),
64-
] {
65-
map.insert(key, value.into());
66-
}
73+
for (key, value) in [
74+
("bg", "background"),
75+
("bgAttachment", "background-attachment"),
76+
("bgClip", "background-clip"),
77+
("bgColor", "background-color"),
78+
("bgImage", "background-image"),
79+
("bgOrigin", "background-origin"),
80+
("bgPosition", "background-position"),
81+
("bgPositionX", "background-position-x"),
82+
("bgPositionY", "background-position-y"),
83+
("bgRepeat", "background-repeat"),
84+
("bgSize", "background-size"),
85+
("animationDir", "animation-direction"),
86+
("flexDir", "flex-direction"),
87+
("pos", "position"),
88+
("m", "margin"),
89+
("mt", "margin-top"),
90+
("mr", "margin-right"),
91+
("mb", "margin-bottom"),
92+
("ml", "margin-left"),
93+
("p", "padding"),
94+
("pt", "padding-top"),
95+
("pr", "padding-right"),
96+
("pb", "padding-bottom"),
97+
("pl", "padding-left"),
98+
("w", "width"),
99+
("h", "height"),
100+
("minW", "min-width"),
101+
("minH", "min-height"),
102+
("maxW", "max-width"),
103+
("maxH", "max-height"),
104+
] {
105+
map.insert(key, value.into());
106+
}
67107

68-
for (key, value) in [
69-
("mx", ["margin-left", "margin-right"]),
70-
("my", ["margin-top", "margin-bottom"]),
71-
("px", ["padding-left", "padding-right"]),
72-
("py", ["padding-top", "padding-bottom"]),
73-
("boxSize", ["width", "height"]),
74-
] {
75-
map.insert(key, value.into());
76-
}
77-
map
78-
})
108+
for (key, value) in [
109+
("mx", ["margin-left", "margin-right"]),
110+
("my", ["margin-top", "margin-bottom"]),
111+
("px", ["padding-left", "padding-right"]),
112+
("py", ["padding-top", "padding-bottom"]),
113+
("boxSize", ["width", "height"]),
114+
] {
115+
map.insert(key, value.into());
116+
}
117+
map
79118
});
80119

81120
static GLOBAL_CLASS_MAP: Lazy<Mutex<HashMap<String, i32>>> =
@@ -107,8 +146,6 @@ pub fn to_kebab_case(value: &str) -> String {
107146

108147
pub fn convert_property(property: &str) -> PropertyType {
109148
GLOBAL_STYLE_PROPERTY
110-
.lock()
111-
.unwrap()
112149
.get(property)
113150
.cloned()
114151
.unwrap_or_else(|| to_kebab_case(property).into())

‎libs/extractor/src/lib.rs‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1115,6 +1115,30 @@ export {
11151115
}
11161116
)
11171117
.unwrap());
1118+
1119+
reset_class_map();
1120+
assert_debug_snapshot!(extract(
1121+
"test.js",
1122+
r#"import {Flex} from '@devup-ui/core'
1123+
<Flex bg={["$red", "$blue"][idx]} />
1124+
"#,
1125+
ExtractOption {
1126+
package: "@devup-ui/core".to_string(),
1127+
css_file: None
1128+
}
1129+
)
1130+
.unwrap());
1131+
assert_debug_snapshot!(extract(
1132+
"test.js",
1133+
r#"import {Flex} from '@devup-ui/core'
1134+
<Flex bg={[`$red`, `${variable}`][idx]} />
1135+
"#,
1136+
ExtractOption {
1137+
package: "@devup-ui/core".to_string(),
1138+
css_file: None
1139+
}
1140+
)
1141+
.unwrap());
11181142
}
11191143

11201144
#[test]
@@ -1138,4 +1162,34 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
11381162
)
11391163
.unwrap());
11401164
}
1165+
1166+
#[test]
1167+
#[serial]
1168+
fn backtick_prop() {
1169+
reset_class_map();
1170+
assert_debug_snapshot!(extract(
1171+
"test.js",
1172+
r#"import {Box} from '@devup-ui/core'
1173+
<Box bg={`black`} />
1174+
"#,
1175+
ExtractOption {
1176+
package: "@devup-ui/core".to_string(),
1177+
css_file: None
1178+
}
1179+
)
1180+
.unwrap());
1181+
1182+
reset_class_map();
1183+
assert_debug_snapshot!(extract(
1184+
"test.js",
1185+
r#"import {Box} from '@devup-ui/core'
1186+
<Box bg={`${variable}`} />
1187+
"#,
1188+
ExtractOption {
1189+
package: "@devup-ui/core".to_string(),
1190+
css_file: None
1191+
}
1192+
)
1193+
.unwrap());
1194+
}
11411195
}

‎libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n <Box bg={`${variable}`} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [
7+
Dynamic(
8+
ExtractDynamicStyle {
9+
property: "bg",
10+
level: 0,
11+
identifier: "`${variable}`",
12+
selector: None,
13+
},
14+
),
15+
],
16+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" style={{ \"--d1\": `${variable}` }} />;\n",
17+
}

‎libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n <Box bg={`black`} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [
7+
Static(
8+
ExtractStaticStyle {
9+
property: "bg",
10+
value: "black",
11+
level: 0,
12+
selector: None,
13+
basic: false,
14+
},
15+
),
16+
],
17+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
18+
}

‎libs/extractor/src/snapshots/extractor__tests__props_direct_select-10.snap‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n <Flex bg={[`$red`, `${variable}`][idx]} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [
7+
Static(
8+
ExtractStaticStyle {
9+
property: "display",
10+
value: "flex",
11+
level: 0,
12+
selector: None,
13+
basic: true,
14+
},
15+
),
16+
Dynamic(
17+
ExtractDynamicStyle {
18+
property: "bg",
19+
level: 0,
20+
identifier: "[`var(--red)`, `${variable}`][idx]",
21+
selector: None,
22+
},
23+
),
24+
],
25+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": [`var(--red)`, `${variable}`][idx] }} />;\n",
26+
}

‎libs/extractor/src/snapshots/extractor__tests__props_direct_select-9.snap‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n <Flex bg={[\"$red\", \"$blue\"][idx]} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [
7+
Static(
8+
ExtractStaticStyle {
9+
property: "display",
10+
value: "flex",
11+
level: 0,
12+
selector: None,
13+
basic: true,
14+
},
15+
),
16+
Dynamic(
17+
ExtractDynamicStyle {
18+
property: "bg",
19+
level: 0,
20+
identifier: "[\"var(--red)\", \"var(--blue)\"][idx]",
21+
selector: None,
22+
},
23+
),
24+
],
25+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": [\"var(--red)\", \"var(--blue)\"][idx] }} />;\n",
26+
}

0 commit comments

Comments
 (0)