fix(css/modules): Fix interop of & and :global (#6900)

swc-project · Feb 8, 2023 · f85ea9c · f85ea9c
1 parent c293c14
commit f85ea9c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/crates/swc_css_modules/src/lib.rs b/crates/swc_css_modules/src/lib.rs
@@ -374,7 +374,7 @@ where
 
         'complex: for mut n in n.children.take() {
             if let ComplexSelectorChildren::CompoundSelector(selector) = &mut n {
-                for sel in &mut selector.subclass_selectors {
+                for (sel_index, sel) in selector.subclass_selectors.iter_mut().enumerate() {
                     match sel {
                         SubclassSelector::Class(..) | SubclassSelector::Id(..) => {
                             if !self.data.is_global_mode {
@@ -402,7 +402,17 @@ where
 
                                         complex_selector.visit_mut_with(self);
 
-                                        new_children.extend(complex_selector.children.clone());
+                                        let mut complex_selector_children =
+                                            complex_selector.children.clone();
+                                        prepend_left_subclass_selectors(
+                                            &mut complex_selector_children,
+                                            selector
+                                                .subclass_selectors
+                                                .split_at(sel_index)
+                                                .0
+                                                .to_vec(),
+                                        );
+                                        new_children.extend(complex_selector_children);
 
                                         self.data.is_global_mode = old_is_global_mode;
                                         self.data.is_in_local_pseudo_class = old_inside;
@@ -419,7 +429,17 @@ where
                                         complex_selector,
                                     )) = children.get_mut(0)
                                     {
-                                        new_children.extend(complex_selector.children.clone());
+                                        let mut complex_selector_children =
+                                            complex_selector.children.clone();
+                                        prepend_left_subclass_selectors(
+                                            &mut complex_selector_children,
+                                            selector
+                                                .subclass_selectors
+                                                .split_at(sel_index)
+                                                .0
+                                                .to_vec(),
+                                        );
+                                        new_children.extend(complex_selector_children);
                                     }
                                 } else {
                                     self.data.is_global_mode = true;
@@ -523,3 +543,14 @@ fn process_local<C>(
         SubclassSelector::PseudoElement(_) => {}
     }
 }
+
+fn prepend_left_subclass_selectors(
+    complex_selector_children: &mut [ComplexSelectorChildren],
+    left_sels: Vec<SubclassSelector>,
+) {
+    if let Some(ComplexSelectorChildren::CompoundSelector(first)) =
+        complex_selector_children.get_mut(0)
+    {
+        first.subclass_selectors = [left_sels, first.subclass_selectors.take()].concat();
+    }
+}
diff --git a/crates/swc_css_modules/tests/fixture/integration/css.module.compiled.css b/crates/swc_css_modules/tests/fixture/integration/css.module.compiled.css
@@ -5,3 +5,9 @@
 .global {
   color: blue;
 }
+.__local__local.global {
+  color: green;
+}
+.__local__local.__local__local {
+  color: yellow;
+}
diff --git a/crates/swc_css_modules/tests/fixture/integration/css.module.css b/crates/swc_css_modules/tests/fixture/integration/css.module.css
@@ -6,3 +6,11 @@
 :global(.global) {
   color: blue;
 }
+
+.local:global(.global) {
+  color: green;
+}
+
+.local:local(.local) {
+  color: yellow;
+}
diff --git a/crates/swc_css_modules/tests/fixture/modules/issue-995/issue-995.compiled.css b/crates/swc_css_modules/tests/fixture/modules/issue-995/issue-995.compiled.css
@@ -52,7 +52,7 @@ div:not(.__local__a) {
 .__local__😓 .__local__a {
   color: red;
 }
-.__local__a {
+.__local__😓.__local__a {
   color: red;
 }
 .__local__a > .__local__b > .__local__c {