Skip to content

Commit 29b595b

Browse files
owjs3901owjs3901
authored
Merge pull request #225 from dev-five-git/support-nested-selector
Support nested selector
2 parents d24bab6 + f1bd507 commit 29b595b

12 files changed

Lines changed: 433 additions & 8 deletions

‎.changeset/large-poems-deny.md‎

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

‎libs/extractor/src/lib.rs‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1353,6 +1353,170 @@ import clsx from 'clsx'
13531353
));
13541354
}
13551355

1356+
#[test]
1357+
#[serial]
1358+
fn extract_nested_selector() {
1359+
reset_class_map();
1360+
assert_debug_snapshot!(ToBTreeSet::from(
1361+
extract(
1362+
"test.tsx",
1363+
r#"import {Box} from '@devup-ui/core'
1364+
<Box _hover={{
1365+
_placeholder: {
1366+
color: "red"
1367+
}
1368+
}} />
1369+
"#,
1370+
ExtractOption {
1371+
package: "@devup-ui/core".to_string(),
1372+
css_file: None
1373+
}
1374+
)
1375+
.unwrap()
1376+
));
1377+
1378+
reset_class_map();
1379+
assert_debug_snapshot!(ToBTreeSet::from(
1380+
extract(
1381+
"test.tsx",
1382+
r#"import {Box} from '@devup-ui/core'
1383+
<Box _hover={{
1384+
selectors: {
1385+
"&::placeholder, &:active": {
1386+
color: "blue"
1387+
}
1388+
},
1389+
}} />
1390+
"#,
1391+
ExtractOption {
1392+
package: "@devup-ui/core".to_string(),
1393+
css_file: None
1394+
}
1395+
)
1396+
.unwrap()
1397+
));
1398+
1399+
reset_class_map();
1400+
assert_debug_snapshot!(ToBTreeSet::from(
1401+
extract(
1402+
"test.tsx",
1403+
r#"import {Box} from '@devup-ui/core'
1404+
<Box _hover={{
1405+
selectors: {
1406+
"&::placeholder": {
1407+
color: "red"
1408+
},
1409+
"&::placeholder, &:active": {
1410+
color: "blue"
1411+
}
1412+
},
1413+
}} />
1414+
"#,
1415+
ExtractOption {
1416+
package: "@devup-ui/core".to_string(),
1417+
css_file: None
1418+
}
1419+
)
1420+
.unwrap()
1421+
));
1422+
1423+
reset_class_map();
1424+
assert_debug_snapshot!(ToBTreeSet::from(
1425+
extract(
1426+
"test.tsx",
1427+
r#"import {Box} from '@devup-ui/core'
1428+
<Box _hover={{
1429+
selectors: {
1430+
"&::placeholder": {
1431+
_active: {
1432+
color: "red",
1433+
}
1434+
},
1435+
},
1436+
}} />
1437+
"#,
1438+
ExtractOption {
1439+
package: "@devup-ui/core".to_string(),
1440+
css_file: None
1441+
}
1442+
)
1443+
.unwrap()
1444+
));
1445+
1446+
reset_class_map();
1447+
assert_debug_snapshot!(ToBTreeSet::from(
1448+
extract(
1449+
"test.tsx",
1450+
r#"import {Box} from '@devup-ui/core'
1451+
<Box
1452+
selectors={{
1453+
"&::placeholder": {
1454+
_active: {
1455+
color: "red",
1456+
}
1457+
},
1458+
}} />
1459+
"#,
1460+
ExtractOption {
1461+
package: "@devup-ui/core".to_string(),
1462+
css_file: None
1463+
}
1464+
)
1465+
.unwrap()
1466+
));
1467+
1468+
reset_class_map();
1469+
assert_debug_snapshot!(ToBTreeSet::from(
1470+
extract(
1471+
"test.tsx",
1472+
r#"import {Box} from '@devup-ui/core'
1473+
<Box
1474+
selectors={{
1475+
"&::placeholder": {
1476+
selectors: {
1477+
"&:active": {
1478+
selectors: {
1479+
"&:hover": {
1480+
color: "red",
1481+
}
1482+
}
1483+
}
1484+
}
1485+
},
1486+
}} />
1487+
"#,
1488+
ExtractOption {
1489+
package: "@devup-ui/core".to_string(),
1490+
css_file: None
1491+
}
1492+
)
1493+
.unwrap()
1494+
));
1495+
1496+
reset_class_map();
1497+
assert_debug_snapshot!(ToBTreeSet::from(
1498+
extract(
1499+
"test.tsx",
1500+
r#"import {Box} from '@devup-ui/core'
1501+
<Box
1502+
_placeholder={{
1503+
_active: {
1504+
_hover: {
1505+
color: "blue",
1506+
},
1507+
color: "red",
1508+
},
1509+
}} />
1510+
"#,
1511+
ExtractOption {
1512+
package: "@devup-ui/core".to_string(),
1513+
css_file: None
1514+
}
1515+
)
1516+
.unwrap()
1517+
));
1518+
}
1519+
13561520
#[test]
13571521
#[serial]
13581522
fn extract_conditional_selector() {
@@ -2802,6 +2966,37 @@ import {Button} from '@devup/ui'
28022966
));
28032967
}
28042968

2969+
#[test]
2970+
#[serial]
2971+
fn nested_theme_props() {
2972+
reset_class_map();
2973+
assert_debug_snapshot!(ToBTreeSet::from(
2974+
extract(
2975+
"test.jsx",
2976+
r#"import {Box} from '@devup-ui/core'
2977+
<Box _themeDark={{
2978+
selectors: {
2979+
"&:hover": {
2980+
color: "red",
2981+
}
2982+
},
2983+
_active: {
2984+
color: "blue",
2985+
_placeholder: {
2986+
color: "green",
2987+
},
2988+
},
2989+
}} />
2990+
"#,
2991+
ExtractOption {
2992+
package: "@devup-ui/core".to_string(),
2993+
css_file: None
2994+
}
2995+
)
2996+
.unwrap()
2997+
));
2998+
}
2999+
28053000
#[test]
28063001
#[serial]
28073002
fn template_literal_props() {

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box _hover={{\n selectors: {\n \"&::placeholder, &:active\": {\n color: \"blue\"\n }\n },\n }} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "color",
10+
value: "blue",
11+
level: 0,
12+
selector: Some(
13+
Selector(
14+
"&:hover::placeholder, &:hover:active",
15+
),
16+
),
17+
style_order: None,
18+
},
19+
),
20+
},
21+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
22+
}

‎libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box _hover={{\n selectors: {\n \"&::placeholder\": {\n color: \"red\"\n },\n \"&::placeholder, &:active\": {\n color: \"blue\"\n }\n },\n }} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "color",
10+
value: "blue",
11+
level: 0,
12+
selector: Some(
13+
Selector(
14+
"&:hover::placeholder, &:hover:active",
15+
),
16+
),
17+
style_order: None,
18+
},
19+
),
20+
Static(
21+
ExtractStaticStyle {
22+
property: "color",
23+
value: "red",
24+
level: 0,
25+
selector: Some(
26+
Selector(
27+
"&:hover::placeholder",
28+
),
29+
),
30+
style_order: None,
31+
},
32+
),
33+
},
34+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" />;\n",
35+
}

‎libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box _hover={{\n selectors: {\n \"&::placeholder\": {\n _active: {\n color: \"red\",\n }\n },\n },\n }} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "color",
10+
value: "red",
11+
level: 0,
12+
selector: Some(
13+
Selector(
14+
"&:hover::placeholder:active",
15+
),
16+
),
17+
style_order: None,
18+
},
19+
),
20+
},
21+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
22+
}

‎libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box \n selectors={{\n \"&::placeholder\": {\n _active: {\n color: \"red\",\n }\n },\n }} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "color",
10+
value: "red",
11+
level: 0,
12+
selector: Some(
13+
Selector(
14+
"&::placeholder:active",
15+
),
16+
),
17+
style_order: None,
18+
},
19+
),
20+
},
21+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
22+
}

‎libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box \n selectors={{\n \"&::placeholder\": {\n selectors: {\n \"&:active\": {\n selectors: {\n \"&:hover\": {\n color: \"red\",\n }\n }\n }\n }\n },\n }} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "color",
10+
value: "red",
11+
level: 0,
12+
selector: Some(
13+
Selector(
14+
"&::placeholder:active:hover",
15+
),
16+
),
17+
style_order: None,
18+
},
19+
),
20+
},
21+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
22+
}

‎libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box \n _placeholder={{\n _active: {\n _hover: {\n color: \"blue\",\n },\n color: \"red\",\n },\n }} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "color",
10+
value: "blue",
11+
level: 0,
12+
selector: Some(
13+
Selector(
14+
"&::placeholder:active:hover",
15+
),
16+
),
17+
style_order: None,
18+
},
19+
),
20+
Static(
21+
ExtractStaticStyle {
22+
property: "color",
23+
value: "red",
24+
level: 0,
25+
selector: Some(
26+
Selector(
27+
"&::placeholder:active",
28+
),
29+
),
30+
style_order: None,
31+
},
32+
),
33+
},
34+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" />;\n",
35+
}

0 commit comments

Comments
 (0)