fix(css/modules): Support composes when using multiple subclass selec…

…tors (#7949)
swc-project · Sep 14, 2023 · 05ca19b · 05ca19b · github-actions · Sep 14, 2023
1 parent 418a2e3
commit 05ca19b
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 7 deletions.
diff --git a/crates/swc_css_modules/src/lib.rs b/crates/swc_css_modules/src/lib.rs
@@ -204,13 +204,13 @@ where
         n.visit_mut_children_with(self);
 
         if let QualifiedRulePrelude::SelectorList(sel) = &n.prelude {
-            //
-            if sel.children.len() == 1 && sel.children[0].children.len() == 1 {
-                if let ComplexSelectorChildren::CompoundSelector(sel) = &sel.children[0].children[0]
-                {
-                    if sel.subclass_selectors.len() == 1 {
-                        if let SubclassSelector::Class(class_sel) = &sel.subclass_selectors[0] {
-                            if let Some(composes) = self.data.composes_for_current.take() {
+            let composes = self.data.composes_for_current.take();
+
+            for child in &sel.children {
+                if let ComplexSelectorChildren::CompoundSelector(sel) = &child.children[0] {
+                    for subclass_sel in &sel.subclass_selectors {
+                        if let SubclassSelector::Class(class_sel) = &subclass_sel {
+                            if let Some(composes) = &composes {
                                 let key = self
                                     .data
                                     .renamed_to_orig

diff --git a/crates/swc_css_modules/tests/fixture/modules/issue-7948/issue-7948.compiled.css b/crates/swc_css_modules/tests/fixture/modules/issue-7948/issue-7948.compiled.css
@@ -0,0 +1,11 @@
+.__local__root-class {
+  background-color: red;
+}
+.__local__chain-1, 
+.__local__chain-2 {}
+.__local__chain-1 {
+  color: blue;
+}
+.__local__chain-2 {
+  color: green;
+}
diff --git a/crates/swc_css_modules/tests/fixture/modules/issue-7948/issue-7948.css b/crates/swc_css_modules/tests/fixture/modules/issue-7948/issue-7948.css
@@ -0,0 +1,16 @@
+.root-class {
+    background-color: red;
+}
+
+.chain-1,
+.chain-2 {
+    composes: root-class;
+}
+
+.chain-1 {
+    color: blue;
+}
+
+.chain-2 {
+    color: green;
+}
diff --git a/crates/swc_css_modules/tests/fixture/modules/issue-7948/issue-7948.transform.json b/crates/swc_css_modules/tests/fixture/modules/issue-7948/issue-7948.transform.json
@@ -0,0 +1,28 @@
+{
+  "root-class": [
+    {
+      "type": "local",
+      "name": "__local__root-class"
+    }
+  ],
+  "chain-1": [
+    {
+      "type": "local",
+      "name": "__local__chain-1"
+    },
+    {
+      "type": "local",
+      "name": "__local__root-class"
+    }
+  ],
+  "chain-2": [
+    {
+      "type": "local",
+      "name": "__local__chain-2"
+    },
+    {
+      "type": "local",
+      "name": "__local__root-class"
+    }
+  ]
+}
Benchmark suite	Current: `05ca19b`	Previous: `b87ac64`	Ratio
`es/full/bugs-1`	`290902` ns/iter (`± 11297`)	`287073` ns/iter (`± 1926`)	`1.01`
`es/full/minify/libraries/antd`	`1264883954` ns/iter (`± 8460361`)	`1361839310` ns/iter (`± 16639695`)	`0.93`
`es/full/minify/libraries/d3`	`270142137` ns/iter (`± 5356239`)	`287069182` ns/iter (`± 5798598`)	`0.94`
`es/full/minify/libraries/echarts`	`1025944030` ns/iter (`± 5158773`)	`1100191781` ns/iter (`± 15365321`)	`0.93`
`es/full/minify/libraries/jquery`	`83204473` ns/iter (`± 89962`)	`85466045` ns/iter (`± 617618`)	`0.97`
`es/full/minify/libraries/lodash`	`96234435` ns/iter (`± 257169`)	`99920490` ns/iter (`± 669011`)	`0.96`
`es/full/minify/libraries/moment`	`49347926` ns/iter (`± 70041`)	`50381710` ns/iter (`± 222341`)	`0.98`
`es/full/minify/libraries/react`	`17849253` ns/iter (`± 23663`)	`18115548` ns/iter (`± 130164`)	`0.99`
`es/full/minify/libraries/terser`	`214215735` ns/iter (`± 701723`)	`222461308` ns/iter (`± 1600879`)	`0.96`
`es/full/minify/libraries/three`	`377072558` ns/iter (`± 1087085`)	`399151822` ns/iter (`± 2236791`)	`0.94`
`es/full/minify/libraries/typescript`	`2595772711` ns/iter (`± 11150833`)	`2640644821` ns/iter (`± 26898041`)	`0.98`
`es/full/minify/libraries/victory`	`547602207` ns/iter (`± 2406280`)	`575809948` ns/iter (`± 4713046`)	`0.95`
`es/full/minify/libraries/vue`	`117893007` ns/iter (`± 337409`)	`119909556` ns/iter (`± 305638`)	`0.98`
`es/full/codegen/es3`	`34566` ns/iter (`± 77`)	`34403` ns/iter (`± 112`)	`1.00`
`es/full/codegen/es5`	`34516` ns/iter (`± 66`)	`34377` ns/iter (`± 90`)	`1.00`
`es/full/codegen/es2015`	`34548` ns/iter (`± 97`)	`34519` ns/iter (`± 100`)	`1.00`
`es/full/codegen/es2016`	`34503` ns/iter (`± 89`)	`34509` ns/iter (`± 85`)	`1.00`
`es/full/codegen/es2017`	`34513` ns/iter (`± 128`)	`34531` ns/iter (`± 126`)	`1.00`
`es/full/codegen/es2018`	`34383` ns/iter (`± 262`)	`34457` ns/iter (`± 111`)	`1.00`
`es/full/codegen/es2019`	`34493` ns/iter (`± 78`)	`34432` ns/iter (`± 110`)	`1.00`
`es/full/codegen/es2020`	`34499` ns/iter (`± 97`)	`34540` ns/iter (`± 133`)	`1.00`
`es/full/all/es3`	`169225061` ns/iter (`± 997425`)	`169858238` ns/iter (`± 1171463`)	`1.00`
`es/full/all/es5`	`160621922` ns/iter (`± 784586`)	`162272188` ns/iter (`± 699717`)	`0.99`
`es/full/all/es2015`	`119403633` ns/iter (`± 983297`)	`121232388` ns/iter (`± 842845`)	`0.98`
`es/full/all/es2016`	`118503267` ns/iter (`± 745720`)	`120349688` ns/iter (`± 1353118`)	`0.98`
`es/full/all/es2017`	`117961616` ns/iter (`± 791050`)	`120115104` ns/iter (`± 719538`)	`0.98`
`es/full/all/es2018`	`115632830` ns/iter (`± 1023052`)	`117343584` ns/iter (`± 767458`)	`0.99`
`es/full/all/es2019`	`115520815` ns/iter (`± 705975`)	`118066447` ns/iter (`± 888677`)	`0.98`
`es/full/all/es2020`	`111416162` ns/iter (`± 565174`)	`112803080` ns/iter (`± 948332`)	`0.99`
`es/full/parser`	`482950` ns/iter (`± 5773`)	`497943` ns/iter (`± 5934`)	`0.97`
`es/full/base/fixer`	`18539` ns/iter (`± 92`)	`20523` ns/iter (`± 211`)	`0.90`
`es/full/base/resolver_and_hygiene`	`80928` ns/iter (`± 717`)	`81263` ns/iter (`± 306`)	`1.00`
`serialization of serde`	`295` ns/iter (`± 1`)	`293` ns/iter (`± 0`)	`1.01`
`css/minify/libraries/bootstrap`	`29114089` ns/iter (`± 142556`)	`29191764` ns/iter (`± 212478`)	`1.00`
`css/visitor/compare/clone`	`1728322` ns/iter (`± 4583`)	`1647241` ns/iter (`± 4174`)	`1.05`
`css/visitor/compare/visit_mut_span`	`1864987` ns/iter (`± 8989`)	`1784698` ns/iter (`± 6994`)	`1.04`
`css/visitor/compare/visit_mut_span_panic`	`1886344` ns/iter (`± 10363`)	`1848563` ns/iter (`± 2788`)	`1.02`
`css/visitor/compare/fold_span`	`2620113` ns/iter (`± 14709`)	`2586471` ns/iter (`± 8337`)	`1.01`
`css/visitor/compare/fold_span_panic`	`2820165` ns/iter (`± 7783`)	`2750420` ns/iter (`± 11616`)	`1.03`
`css/lexer/bootstrap_5_1_3`	`4428179` ns/iter (`± 2768`)	`4464363` ns/iter (`± 3478`)	`0.99`
`css/lexer/foundation_6_7_4`	`3719188` ns/iter (`± 2013`)	`3753542` ns/iter (`± 2233`)	`0.99`
`css/lexer/tailwind_3_1_1`	`709379` ns/iter (`± 1033`)	`719103` ns/iter (`± 899`)	`0.99`
`css/parser/bootstrap_5_1_3`	`19392505` ns/iter (`± 69322`)	`18915019` ns/iter (`± 165079`)	`1.03`
`css/parser/foundation_6_7_4`	`15310697` ns/iter (`± 37127`)	`15127832` ns/iter (`± 19708`)	`1.01`
`css/parser/tailwind_3_1_1`	`2969967` ns/iter (`± 3912`)	`2943763` ns/iter (`± 2086`)	`1.01`
`es/codegen/colors`	`727471` ns/iter (`± 396413`)	`728450` ns/iter (`± 397110`)	`1.00`
`es/codegen/large`	`3140567` ns/iter (`± 1665199`)	`3137370` ns/iter (`± 1667240`)	`1.00`
`es/codegen/with-parser/colors`	`45046` ns/iter (`± 565`)	`45737` ns/iter (`± 653`)	`0.98`
`es/codegen/with-parser/large`	`484111` ns/iter (`± 5339`)	`492492` ns/iter (`± 1140`)	`0.98`
`es/minify/libraries/antd`	`1116208630` ns/iter (`± 10015067`)	`1209862509` ns/iter (`± 12082361`)	`0.92`
`es/minify/libraries/d3`	`236074927` ns/iter (`± 388010`)	`247217675` ns/iter (`± 2264595`)	`0.95`
`es/minify/libraries/echarts`	`879704624` ns/iter (`± 4582362`)	`958704853` ns/iter (`± 7094024`)	`0.92`
`es/minify/libraries/jquery`	`72463357` ns/iter (`± 121897`)	`73935537` ns/iter (`± 346079`)	`0.98`
`es/minify/libraries/lodash`	`86332786` ns/iter (`± 192082`)	`87729018` ns/iter (`± 297225`)	`0.98`
`es/minify/libraries/moment`	`43185251` ns/iter (`± 66779`)	`43742597` ns/iter (`± 162292`)	`0.99`
`es/minify/libraries/react`	`15909956` ns/iter (`± 77872`)	`16062644` ns/iter (`± 86940`)	`0.99`
`es/minify/libraries/terser`	`182817766` ns/iter (`± 351020`)	`191390865` ns/iter (`± 1920318`)	`0.96`
`es/minify/libraries/three`	`316559234` ns/iter (`± 1364131`)	`333552484` ns/iter (`± 2921168`)	`0.95`
`es/minify/libraries/typescript`	`2189208297` ns/iter (`± 6752202`)	`2299347983` ns/iter (`± 13112351`)	`0.95`
`es/minify/libraries/victory`	`469695301` ns/iter (`± 1282935`)	`501011662` ns/iter (`± 6395533`)	`0.94`
`es/minify/libraries/vue`	`104798809` ns/iter (`± 163527`)	`107498229` ns/iter (`± 1286881`)	`0.97`
`es/visitor/compare/clone`	`1943623` ns/iter (`± 11846`)	`1947939` ns/iter (`± 5061`)	`1.00`
`es/visitor/compare/visit_mut_span`	`2275270` ns/iter (`± 5598`)	`2293227` ns/iter (`± 13727`)	`0.99`
`es/visitor/compare/visit_mut_span_panic`	`2316522` ns/iter (`± 10024`)	`2324210` ns/iter (`± 2577`)	`1.00`
`es/visitor/compare/fold_span`	`3376641` ns/iter (`± 9951`)	`3402135` ns/iter (`± 11936`)	`0.99`
`es/visitor/compare/fold_span_panic`	`3497805` ns/iter (`± 10400`)	`3518359` ns/iter (`± 12267`)	`0.99`
`es/lexer/colors`	`13132` ns/iter (`± 34`)	`13271` ns/iter (`± 14`)	`0.99`
`es/lexer/angular`	`6065331` ns/iter (`± 18197`)	`6165626` ns/iter (`± 12543`)	`0.98`
`es/lexer/backbone`	`782999` ns/iter (`± 1953`)	`790716` ns/iter (`± 3423`)	`0.99`
`es/lexer/jquery`	`4451598` ns/iter (`± 6406`)	`4520769` ns/iter (`± 27041`)	`0.98`
`es/lexer/jquery mobile`	`6803206` ns/iter (`± 39637`)	`6888763` ns/iter (`± 22987`)	`0.99`
`es/lexer/mootools`	`3539738` ns/iter (`± 17233`)	`3573231` ns/iter (`± 7289`)	`0.99`
`es/lexer/underscore`	`658220` ns/iter (`± 1237`)	`670955` ns/iter (`± 3671`)	`0.98`
`es/lexer/three`	`21250571` ns/iter (`± 20317`)	`21639875` ns/iter (`± 58999`)	`0.98`
`es/lexer/yui`	`3832728` ns/iter (`± 2663`)	`3887167` ns/iter (`± 7691`)	`0.99`
`es/parser/colors`	`26810` ns/iter (`± 69`)	`27727` ns/iter (`± 67`)	`0.97`
`es/parser/angular`	`13458044` ns/iter (`± 76162`)	`13875088` ns/iter (`± 152266`)	`0.97`
`es/parser/backbone`	`1969209` ns/iter (`± 22476`)	`1999786` ns/iter (`± 6236`)	`0.98`
`es/parser/jquery`	`10748544` ns/iter (`± 43252`)	`10979242` ns/iter (`± 87848`)	`0.98`
`es/parser/jquery mobile`	`16544190` ns/iter (`± 55182`)	`16976569` ns/iter (`± 146215`)	`0.97`
`es/parser/mootools`	`8299366` ns/iter (`± 20909`)	`8391623` ns/iter (`± 22115`)	`0.99`
`es/parser/underscore`	`1700713` ns/iter (`± 11062`)	`1728367` ns/iter (`± 11710`)	`0.98`
`es/parser/three`	`46217602` ns/iter (`± 179287`)	`48751559` ns/iter (`± 468042`)	`0.95`
`es/parser/yui`	`8198749` ns/iter (`± 29272`)	`8339173` ns/iter (`± 60059`)	`0.98`
`es/preset-env/usage/builtin_type`	`138988` ns/iter (`± 33301`)	`138186` ns/iter (`± 33823`)	`1.01`
`es/preset-env/usage/property`	`16286` ns/iter (`± 73`)	`16097` ns/iter (`± 72`)	`1.01`
`es/resolver/typescript`	`90822112` ns/iter (`± 970733`)	`93074022` ns/iter (`± 757505`)	`0.98`
`es/fixer/typescript`	`64038621` ns/iter (`± 421066`)	`66833853` ns/iter (`± 1071036`)	`0.96`
`es/hygiene/typescript`	`130828512` ns/iter (`± 807840`)	`135885557` ns/iter (`± 1132304`)	`0.96`
`es/resolver_with_hygiene/typescript`	`241200869` ns/iter (`± 1199751`)	`252631775` ns/iter (`± 2305602`)	`0.95`
`es/visitor/base-perf/module_clone`	`59793` ns/iter (`± 606`)	`58384` ns/iter (`± 198`)	`1.02`
`es/visitor/base-perf/fold_empty`	`62958` ns/iter (`± 438`)	`62710` ns/iter (`± 652`)	`1.00`
`es/visitor/base-perf/fold_noop_impl_all`	`63001` ns/iter (`± 338`)	`62927` ns/iter (`± 311`)	`1.00`
`es/visitor/base-perf/fold_noop_impl_vec`	`63141` ns/iter (`± 247`)	`63370` ns/iter (`± 282`)	`1.00`
`es/visitor/base-perf/boxing_boxed_clone`	`56` ns/iter (`± 0`)	`56` ns/iter (`± 0`)	`1`
`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`	`76` ns/iter (`± 0`)	`77` ns/iter (`± 0`)	`0.99`
`es/visitor/base-perf/visit_empty`	`0` ns/iter (`± 0`)	`0` ns/iter (`± 0`)	`NaN`
`es/visitor/base-perf/visit_contains_this`	`2477` ns/iter (`± 18`)	`2547` ns/iter (`± 43`)	`0.97`
`es/base/parallel/resolver/typescript`	`4644438539` ns/iter (`± 237093849`)	`4004503465` ns/iter (`± 312628512`)	`1.16`
`es/base/parallel/hygiene/typescript`	`1425848277` ns/iter (`± 13868557`)	`1460056665` ns/iter (`± 13232215`)	`0.98`
`misc/visitors/time-complexity/time 5`	`149` ns/iter (`± 0`)	`150` ns/iter (`± 0`)	`0.99`
`misc/visitors/time-complexity/time 10`	`451` ns/iter (`± 1`)	`421` ns/iter (`± 1`)	`1.07`
`misc/visitors/time-complexity/time 15`	`785` ns/iter (`± 6`)	`795` ns/iter (`± 4`)	`0.99`
`misc/visitors/time-complexity/time 20`	`1282` ns/iter (`± 3`)	`1396` ns/iter (`± 77`)	`0.92`
`misc/visitors/time-complexity/time 40`	`5000` ns/iter (`± 19`)	`5012` ns/iter (`± 2`)	`1.00`
`misc/visitors/time-complexity/time 60`	`8967` ns/iter (`± 78`)	`9026` ns/iter (`± 6`)	`0.99`
`es/full-target/es2016`	`234465` ns/iter (`± 1829`)	`233770` ns/iter (`± 976`)	`1.00`
`es/full-target/es2017`	`222593` ns/iter (`± 1640`)	`224467` ns/iter (`± 979`)	`0.99`
`es/full-target/es2018`	`210517` ns/iter (`± 1125`)	`213291` ns/iter (`± 1758`)	`0.99`
`es2020_nullish_coalescing`	`70321` ns/iter (`± 994`)	`70675` ns/iter (`± 216`)	`0.99`
`es2020_optional_chaining`	`78403` ns/iter (`± 516`)	`79041` ns/iter (`± 234`)	`0.99`
`es2022_class_properties`	`114702` ns/iter (`± 448`)	`114913` ns/iter (`± 592`)	`1.00`
`es2018_object_rest_spread`	`74447` ns/iter (`± 444`)	`74868` ns/iter (`± 147`)	`0.99`
`es2019_optional_catch_binding`	`64466` ns/iter (`± 631`)	`65069` ns/iter (`± 155`)	`0.99`
`es2017_async_to_generator`	`62673` ns/iter (`± 219`)	`64727` ns/iter (`± 167`)	`0.97`
`es2016_exponentiation`	`66511` ns/iter (`± 405`)	`68227` ns/iter (`± 168`)	`0.97`
`es2015_arrow`	`69861` ns/iter (`± 246`)	`71771` ns/iter (`± 353`)	`0.97`
`es2015_block_scoped_fn`	`67201` ns/iter (`± 223`)	`68596` ns/iter (`± 128`)	`0.98`
`es2015_block_scoping`	`120493` ns/iter (`± 859`)	`123890` ns/iter (`± 704`)	`0.97`