diff --git a/crates/swc_css_modules/src/lib.rs b/crates/swc_css_modules/src/lib.rs index 443ca501c381..e6d9fb53a1b3 100644 --- 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( SubclassSelector::PseudoElement(_) => {} } } + +fn prepend_left_subclass_selectors( + complex_selector_children: &mut [ComplexSelectorChildren], + left_sels: Vec, +) { + 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 index 92b7fbb36f99..0528cec0e8d8 100644 --- 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 index 0a789dbb113d..260697f38176 100644 --- 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 index 08140af2c771..19aa1212cc68 100644 --- 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 {