fix(css/modules): Preserve attr selectors used with :global (#7670)

**Related issue:** - Closes #7669
swc-project · Jul 19, 2023 · 11b4679 · 11b4679 · github-actions · Jul 19, 2023
1 parent 6c18125
commit 11b4679
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/crates/swc_css_modules/src/lib.rs b/crates/swc_css_modules/src/lib.rs
@@ -512,8 +512,7 @@ where
                                 } else {
                                     if sel_index > 0 {
                                         if let Some(n) = n.as_mut_compound_selector() {
-                                            n.subclass_selectors =
-                                                n.subclass_selectors.split_at(sel_index).0.to_vec();
+                                            n.subclass_selectors.remove(sel_index);
                                         }
                                         new_children.push(n);
                                     }
@@ -539,8 +538,7 @@ where
                                 } else {
                                     if sel_index > 0 {
                                         if let Some(n) = n.as_mut_compound_selector() {
-                                            n.subclass_selectors =
-                                                n.subclass_selectors.split_at(sel_index).0.to_vec();
+                                            n.subclass_selectors.remove(sel_index);
                                         }
                                         new_children.push(n);
                                     }

diff --git a/crates/swc_css_modules/tests/fixture/issues/issue-7669.compiled.css b/crates/swc_css_modules/tests/fixture/issues/issue-7669.compiled.css
@@ -0,0 +1,15 @@
+.__local__class > .inner {
+  color: blue;
+}
+.__local__class[data-x=true] > .inner {
+  color: red;
+}
+.__local__class[data-x=true] > .__local__inner {
+  color: green;
+}
+.__local__class[data-x=true] > .inner {
+  color: yellow;
+}
+.__local__class[data-x=true] > .__local__inner {
+  color: black;
+}
diff --git a/crates/swc_css_modules/tests/fixture/issues/issue-7669.css b/crates/swc_css_modules/tests/fixture/issues/issue-7669.css
@@ -0,0 +1,16 @@
+.class:global > .inner {
+    color: blue;
+}
+.class:global[data-x=true] > .inner {
+    color: red;
+}
+.class:local[data-x=true] > .inner {
+    color: green;
+}
+.class[data-x=true]:global > .inner {
+    color: yellow;
+}
+.class[data-x=true]:local > .inner {
+    color: black;
+}
+
diff --git a/crates/swc_css_modules/tests/fixture/issues/issue-7669.transform.json b/crates/swc_css_modules/tests/fixture/issues/issue-7669.transform.json
@@ -0,0 +1,14 @@
+{
+  "class": [
+    {
+      "type": "local",
+      "name": "__local__class"
+    }
+  ],
+  "inner": [
+    {
+      "type": "local",
+      "name": "__local__inner"
+    }
+  ]
+}
Benchmark suite	Current: `11b4679`	Previous: `a65be14`	Ratio
`es/full/bugs-1`	`287570` ns/iter (`± 3936`)	`297124` ns/iter (`± 7676`)	`0.97`
`es/full/minify/libraries/antd`	`1303974765` ns/iter (`± 34748509`)	`1336949943` ns/iter (`± 14526777`)	`0.98`
`es/full/minify/libraries/d3`	`292008409` ns/iter (`± 5482928`)	`282001081` ns/iter (`± 4605152`)	`1.04`
`es/full/minify/libraries/echarts`	`1126290656` ns/iter (`± 22123865`)	`1089899830` ns/iter (`± 6763311`)	`1.03`
`es/full/minify/libraries/jquery`	`84759946` ns/iter (`± 387425`)	`85421468` ns/iter (`± 273065`)	`0.99`
`es/full/minify/libraries/lodash`	`99273284` ns/iter (`± 669333`)	`99592083` ns/iter (`± 362783`)	`1.00`
`es/full/minify/libraries/moment`	`50241920` ns/iter (`± 186794`)	`49893551` ns/iter (`± 94943`)	`1.01`
`es/full/minify/libraries/react`	`18025685` ns/iter (`± 61045`)	`18134322` ns/iter (`± 38602`)	`0.99`
`es/full/minify/libraries/terser`	`227698205` ns/iter (`± 1847163`)	`222224705` ns/iter (`± 599001`)	`1.02`
`es/full/minify/libraries/three`	`393924815` ns/iter (`± 14130833`)	`392016652` ns/iter (`± 6496372`)	`1.00`
`es/full/minify/libraries/typescript`	`2703199769` ns/iter (`± 31750638`)	`2749811866` ns/iter (`± 14113779`)	`0.98`
`es/full/minify/libraries/victory`	`564891562` ns/iter (`± 14080028`)	`574689436` ns/iter (`± 7008306`)	`0.98`
`es/full/minify/libraries/vue`	`121267714` ns/iter (`± 875220`)	`122133241` ns/iter (`± 408343`)	`0.99`
`es/full/codegen/es3`	`33707` ns/iter (`± 65`)	`34851` ns/iter (`± 193`)	`0.97`
`es/full/codegen/es5`	`33707` ns/iter (`± 83`)	`34732` ns/iter (`± 83`)	`0.97`
`es/full/codegen/es2015`	`33705` ns/iter (`± 40`)	`34811` ns/iter (`± 80`)	`0.97`
`es/full/codegen/es2016`	`33603` ns/iter (`± 91`)	`34734` ns/iter (`± 88`)	`0.97`
`es/full/codegen/es2017`	`33655` ns/iter (`± 105`)	`34688` ns/iter (`± 109`)	`0.97`
`es/full/codegen/es2018`	`33745` ns/iter (`± 56`)	`34737` ns/iter (`± 52`)	`0.97`
`es/full/codegen/es2019`	`33772` ns/iter (`± 88`)	`34766` ns/iter (`± 79`)	`0.97`
`es/full/codegen/es2020`	`33604` ns/iter (`± 44`)	`34723` ns/iter (`± 93`)	`0.97`
`es/full/all/es3`	`172852711` ns/iter (`± 796291`)	`172618779` ns/iter (`± 831278`)	`1.00`
`es/full/all/es5`	`164467696` ns/iter (`± 737323`)	`165168777` ns/iter (`± 1115587`)	`1.00`
`es/full/all/es2015`	`124600585` ns/iter (`± 618801`)	`124924383` ns/iter (`± 1043884`)	`1.00`
`es/full/all/es2016`	`123456600` ns/iter (`± 996095`)	`123523858` ns/iter (`± 595234`)	`1.00`
`es/full/all/es2017`	`122268569` ns/iter (`± 486031`)	`122593672` ns/iter (`± 500197`)	`1.00`
`es/full/all/es2018`	`120858919` ns/iter (`± 501550`)	`121292351` ns/iter (`± 440065`)	`1.00`
`es/full/all/es2019`	`120355838` ns/iter (`± 885571`)	`119675867` ns/iter (`± 373341`)	`1.01`
`es/full/all/es2020`	`115547845` ns/iter (`± 436594`)	`115911013` ns/iter (`± 758379`)	`1.00`
`es/full/parser`	`526483` ns/iter (`± 5367`)	`531214` ns/iter (`± 5551`)	`0.99`
`es/full/base/fixer`	`20140` ns/iter (`± 107`)	`17186` ns/iter (`± 27`)	`1.17`
`es/full/base/resolver_and_hygiene`	`83757` ns/iter (`± 276`)	`83223` ns/iter (`± 157`)	`1.01`
`serialization of serde`	`295` ns/iter (`± 0`)	`298` ns/iter (`± 0`)	`0.99`
`css/minify/libraries/bootstrap`	`28797636` ns/iter (`± 72581`)	`29740680` ns/iter (`± 103715`)	`0.97`
`css/visitor/compare/clone`	`1693659` ns/iter (`± 16586`)	`1718124` ns/iter (`± 3609`)	`0.99`
`css/visitor/compare/visit_mut_span`	`1824560` ns/iter (`± 17497`)	`1830728` ns/iter (`± 10294`)	`1.00`
`css/visitor/compare/visit_mut_span_panic`	`1876430` ns/iter (`± 17745`)	`1836975` ns/iter (`± 6158`)	`1.02`
`css/visitor/compare/fold_span`	`2582255` ns/iter (`± 13928`)	`2576859` ns/iter (`± 10977`)	`1.00`
`css/visitor/compare/fold_span_panic`	`2766792` ns/iter (`± 14839`)	`2751502` ns/iter (`± 8888`)	`1.01`
`css/lexer/bootstrap_5_1_3`	`4608537` ns/iter (`± 3386`)	`4556149` ns/iter (`± 13773`)	`1.01`
`css/lexer/foundation_6_7_4`	`3857436` ns/iter (`± 1866`)	`3841718` ns/iter (`± 1530`)	`1.00`
`css/lexer/tailwind_3_1_1`	`738993` ns/iter (`± 464`)	`730333` ns/iter (`± 667`)	`1.01`
`css/parser/bootstrap_5_1_3`	`19058714` ns/iter (`± 42380`)	`19449947` ns/iter (`± 166480`)	`0.98`
`css/parser/foundation_6_7_4`	`15347987` ns/iter (`± 11814`)	`15536863` ns/iter (`± 17992`)	`0.99`
`css/parser/tailwind_3_1_1`	`2930884` ns/iter (`± 2950`)	`2996500` ns/iter (`± 4833`)	`0.98`
`es/codegen/colors`	`722995` ns/iter (`± 393099`)	`733107` ns/iter (`± 400973`)	`0.99`
`es/codegen/large`	`2891999` ns/iter (`± 1545071`)	`3171350` ns/iter (`± 1679725`)	`0.91`
`es/codegen/with-parser/colors`	`44880` ns/iter (`± 91`)	`44445` ns/iter (`± 555`)	`1.01`
`es/codegen/with-parser/large`	`488968` ns/iter (`± 1084`)	`485695` ns/iter (`± 1237`)	`1.01`
`es/minify/libraries/antd`	`1141700476` ns/iter (`± 10578722`)	`1179648761` ns/iter (`± 15486445`)	`0.97`
`es/minify/libraries/d3`	`242734458` ns/iter (`± 1312939`)	`243428824` ns/iter (`± 2580873`)	`1.00`
`es/minify/libraries/echarts`	`910753750` ns/iter (`± 34154454`)	`939633960` ns/iter (`± 9370687`)	`0.97`
`es/minify/libraries/jquery`	`76867173` ns/iter (`± 855498`)	`74695425` ns/iter (`± 237214`)	`1.03`
`es/minify/libraries/lodash`	`89935728` ns/iter (`± 435082`)	`88886675` ns/iter (`± 171053`)	`1.01`
`es/minify/libraries/moment`	`44160429` ns/iter (`± 79366`)	`44013840` ns/iter (`± 163003`)	`1.00`
`es/minify/libraries/react`	`16267520` ns/iter (`± 53936`)	`16118564` ns/iter (`± 62866`)	`1.01`
`es/minify/libraries/terser`	`189589478` ns/iter (`± 552708`)	`189217888` ns/iter (`± 1177406`)	`1.00`
`es/minify/libraries/three`	`324703745` ns/iter (`± 3794663`)	`326264005` ns/iter (`± 2412983`)	`1.00`
`es/minify/libraries/typescript`	`2371269257` ns/iter (`± 66035909`)	`2352384377` ns/iter (`± 34213307`)	`1.01`
`es/minify/libraries/victory`	`487216603` ns/iter (`± 15072751`)	`485857463` ns/iter (`± 3554429`)	`1.00`
`es/minify/libraries/vue`	`108813773` ns/iter (`± 722593`)	`108508160` ns/iter (`± 261941`)	`1.00`
`es/visitor/compare/clone`	`1959743` ns/iter (`± 4504`)	`1966175` ns/iter (`± 8778`)	`1.00`
`es/visitor/compare/visit_mut_span`	`2281708` ns/iter (`± 4256`)	`2321474` ns/iter (`± 5717`)	`0.98`
`es/visitor/compare/visit_mut_span_panic`	`2339878` ns/iter (`± 4568`)	`2318816` ns/iter (`± 3573`)	`1.01`
`es/visitor/compare/fold_span`	`3423006` ns/iter (`± 7270`)	`3397014` ns/iter (`± 5297`)	`1.01`
`es/visitor/compare/fold_span_panic`	`3543661` ns/iter (`± 6764`)	`3486894` ns/iter (`± 7509`)	`1.02`
`es/lexer/colors`	`12738` ns/iter (`± 30`)	`12467` ns/iter (`± 30`)	`1.02`
`es/lexer/angular`	`6117497` ns/iter (`± 3668`)	`6004613` ns/iter (`± 10050`)	`1.02`
`es/lexer/backbone`	`797706` ns/iter (`± 267`)	`787985` ns/iter (`± 780`)	`1.01`
`es/lexer/jquery`	`4466380` ns/iter (`± 4095`)	`4413576` ns/iter (`± 9943`)	`1.01`
`es/lexer/jquery mobile`	`6796666` ns/iter (`± 19308`)	`6736980` ns/iter (`± 6704`)	`1.01`
`es/lexer/mootools`	`3554143` ns/iter (`± 1796`)	`3498086` ns/iter (`± 4408`)	`1.02`
`es/lexer/underscore`	`732886` ns/iter (`± 364`)	`658056` ns/iter (`± 917`)	`1.11`
`es/lexer/three`	`21010608` ns/iter (`± 22029`)	`20680760` ns/iter (`± 13829`)	`1.02`
`es/lexer/yui`	`3838040` ns/iter (`± 1753`)	`3773947` ns/iter (`± 3757`)	`1.02`
`es/parser/colors`	`26606` ns/iter (`± 71`)	`27315` ns/iter (`± 81`)	`0.97`
`es/parser/angular`	`13497575` ns/iter (`± 68325`)	`13329654` ns/iter (`± 79111`)	`1.01`
`es/parser/backbone`	`2014169` ns/iter (`± 11140`)	`1978188` ns/iter (`± 12865`)	`1.02`
`es/parser/jquery`	`10876369` ns/iter (`± 47244`)	`10749563` ns/iter (`± 35451`)	`1.01`
`es/parser/jquery mobile`	`16735205` ns/iter (`± 88712`)	`16598170` ns/iter (`± 114569`)	`1.01`
`es/parser/mootools`	`8429118` ns/iter (`± 34456`)	`8269966` ns/iter (`± 48494`)	`1.02`
`es/parser/underscore`	`1732730` ns/iter (`± 9619`)	`1699562` ns/iter (`± 9571`)	`1.02`
`es/parser/three`	`46683519` ns/iter (`± 219570`)	`46174695` ns/iter (`± 394517`)	`1.01`
`es/parser/yui`	`8304796` ns/iter (`± 30764`)	`8178124` ns/iter (`± 21979`)	`1.02`
`es/preset-env/usage/builtin_type`	`139787` ns/iter (`± 33197`)	`137808` ns/iter (`± 32809`)	`1.01`
`es/preset-env/usage/property`	`17191` ns/iter (`± 34`)	`16874` ns/iter (`± 90`)	`1.02`
`es/resolver/typescript`	`87906223` ns/iter (`± 1307002`)	`90354266` ns/iter (`± 668978`)	`0.97`
`es/fixer/typescript`	`63378406` ns/iter (`± 1221897`)	`65147188` ns/iter (`± 494993`)	`0.97`
`es/hygiene/typescript`	`134930009` ns/iter (`± 959880`)	`137393768` ns/iter (`± 1239201`)	`0.98`
`es/resolver_with_hygiene/typescript`	`244650850` ns/iter (`± 1187020`)	`247870757` ns/iter (`± 1948370`)	`0.99`
`es/visitor/base-perf/module_clone`	`60700` ns/iter (`± 204`)	`59608` ns/iter (`± 271`)	`1.02`
`es/visitor/base-perf/fold_empty`	`64836` ns/iter (`± 200`)	`63907` ns/iter (`± 305`)	`1.01`
`es/visitor/base-perf/fold_noop_impl_all`	`64902` ns/iter (`± 319`)	`63662` ns/iter (`± 487`)	`1.02`
`es/visitor/base-perf/fold_noop_impl_vec`	`65325` ns/iter (`± 405`)	`63730` ns/iter (`± 326`)	`1.03`
`es/visitor/base-perf/boxing_boxed_clone`	`58` ns/iter (`± 0`)	`56` ns/iter (`± 0`)	`1.04`
`es/visitor/base-perf/boxing_unboxed_clone`	`39` ns/iter (`± 0`)	`40` ns/iter (`± 0`)	`0.97`
`es/visitor/base-perf/boxing_boxed`	`106` ns/iter (`± 0`)	`109` ns/iter (`± 0`)	`0.97`
`es/visitor/base-perf/boxing_unboxed`	`75` ns/iter (`± 0`)	`77` ns/iter (`± 0`)	`0.97`
`es/visitor/base-perf/visit_empty`	`0` ns/iter (`± 0`)	`0` ns/iter (`± 0`)	`NaN`
`es/visitor/base-perf/visit_contains_this`	`2546` ns/iter (`± 20`)	`2506` ns/iter (`± 8`)	`1.02`
`es/base/parallel/resolver/typescript`	`4375567218` ns/iter (`± 212496374`)	`4524246485` ns/iter (`± 287325995`)	`0.97`
`es/base/parallel/hygiene/typescript`	`1482528905` ns/iter (`± 28418557`)	`1547447578` ns/iter (`± 42511925`)	`0.96`
`misc/visitors/time-complexity/time 5`	`134` ns/iter (`± 1`)	`121` ns/iter (`± 0`)	`1.11`
`misc/visitors/time-complexity/time 10`	`397` ns/iter (`± 14`)	`394` ns/iter (`± 2`)	`1.01`
`misc/visitors/time-complexity/time 15`	`710` ns/iter (`± 22`)	`725` ns/iter (`± 7`)	`0.98`
`misc/visitors/time-complexity/time 20`	`1019` ns/iter (`± 49`)	`1040` ns/iter (`± 3`)	`0.98`
`misc/visitors/time-complexity/time 40`	`3487` ns/iter (`± 20`)	`3485` ns/iter (`± 8`)	`1.00`
`misc/visitors/time-complexity/time 60`	`7244` ns/iter (`± 18`)	`7220` ns/iter (`± 14`)	`1.00`
`es/full-target/es2016`	`240167` ns/iter (`± 918`)	`238029` ns/iter (`± 835`)	`1.01`
`es/full-target/es2017`	`226390` ns/iter (`± 1418`)	`224839` ns/iter (`± 658`)	`1.01`
`es/full-target/es2018`	`215188` ns/iter (`± 1084`)	`212755` ns/iter (`± 384`)	`1.01`
`es2020_nullish_coalescing`	`71454` ns/iter (`± 460`)	`71308` ns/iter (`± 514`)	`1.00`
`es2020_optional_chaining`	`81675` ns/iter (`± 243`)	`82123` ns/iter (`± 312`)	`0.99`
`es2022_class_properties`	`120449` ns/iter (`± 250`)	`120049` ns/iter (`± 301`)	`1.00`
`es2018_object_rest_spread`	`75653` ns/iter (`± 263`)	`74869` ns/iter (`± 187`)	`1.01`
`es2019_optional_catch_binding`	`63885` ns/iter (`± 198`)	`64132` ns/iter (`± 230`)	`1.00`
`es2017_async_to_generator`	`65205` ns/iter (`± 142`)	`62852` ns/iter (`± 886`)	`1.04`
`es2016_exponentiation`	`69413` ns/iter (`± 255`)	`68134` ns/iter (`± 222`)	`1.02`
`es2015_arrow`	`72268` ns/iter (`± 172`)	`71310` ns/iter (`± 313`)	`1.01`
`es2015_block_scoped_fn`	`70053` ns/iter (`± 420`)	`67812` ns/iter (`± 208`)	`1.03`
`es2015_block_scoping`	`124627` ns/iter (`± 477`)	`121762` ns/iter (`± 422`)	`1.02`