Multiple selectors are not properly scoped about griffel

[layershifter]

Hey, this issue was fixed in makeStyles sometime ago, microsoft/fluentui#20348. But read below ⬇️

It breaks with rules that flip in RTL, the simplest example is:

makeStyles({
  root: {
    ":active,:focus-within": {
      paddingLeft: "10px"
    }
  }
});

⬇️⬇️⬇️

.f14f5aie:active,
.f14f5aie:focus-within {
  padding-left: 10px;
}

.f1sheuf0:active,
:focus-within {
  padding-right: 10px;
}

---

P.S. You can dump all rules with:

console.log(
  [...document.querySelectorAll("[data-make-styles-bucket]")]
    .flatMap(el => [...el.sheet.cssRules].map(rule => rule.cssText))
    .join("\n")
);

P.P.S. We have tryout page to check generated CSS.

P.P.P.S. Thanks for reporting 🙏

[layershifter]

The fix is needed in compileCSS.ts:

griffel/packages/core/src/runtime/compileCSS.ts

Lines 102 to 105 in 8a6d180

	cssRule = `${classNameSelector}{${normalizedPseudo} ${cssDeclaration}};`;
	if (rtlProperty) {
	cssRule = `${cssRule}; ${rtlClassNameSelector}${normalizedPseudo} ${rtlCSSDeclaration};`;

It's not visible with template literals, but cssRule on 101 & 104 are different - there are missing curly brackets 🤦‍♂️

-cssRule = `${cssRule}; ${rtlClassNameSelector}${normalizedPseudo} ${rtlCSSDeclaration};`;
+cssRule = `${cssRule}; ${rtlClassNameSelector}{${normalizedPseudo} ${rtlCSSDeclaration}};`;

We also need to cover this with a unit test:

    it('handles complex nested selectors', () => {
      expect(resolveStyleRules({ '& > :first-child': { '& svg': { color: 'red' } } })).toMatchInlineSnapshot(`
        .fxfx2ih > :first-child svg {
          color: red;
        }
      `);
    });

+    it('handles comma separated selectors', () => {
+      expect(
+        resolveStyleRules({
+          ':active,:focus-within': {
+            paddingLeft: '10px',
+          },
+        }),
+      ).toMatchInlineSnapshot(`
+        .f14f5aie:active,
+        .f14f5aie:focus-within {
+          padding-left: 10px;
+        }
+        .f1sheuf0:active,
+        .f1sheuf0:focus-within {
+          padding-right: 10px;
+        }
+      `);
+    });

P.S. @spmonahan are you interested in contributing a fix? 😉

[spmonahan]

Didn't see an issue for this in the issue log but glad it was (mostly) fixed already!

Thanks for the debugging tips -- they will be very helpful! I've been following the work on Griffel DevTools and while looking into this issue was thinking, "can't wait for DevTools!".

Happy to contribute a fix. Should have time to work on it today.