Repository: microsoft/griffel
Pull request #151 (2022-06-28 15:19:44)

fix(webpack-extraction-plugin): improve getElementReference() to handle multiple children
This PR fixes handling of multiple CSS rules inside `element.children` for `getElementReference()`. This happens for cases when Griffel emits rules that flip in RTL.

```css
@media screen and (max-width: 992px) {
  .f1f6067w {
    text-align: left;
  }
  .f133ge8t {
    text-align: right;
  }
}
```


github-actions[bot]: ## 📊 Bundle size report

<details>
<summary>Unchanged fixtures</summary>

| Package & Exports                                                                                                            |        Size (minified/GZIP) |
| ---------------------------------------------------------------------------------------------------------------------------- | --------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles + mergeClasses (build time)</abbr>       |       `1.8 kB`<br />`861 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStylesRuntime.fixture.js'>makeStyles + mergeClasses (runtime)</abbr>   | `20.394 kB`<br />`7.612 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__css.fixture.js'>\_\_css + mergeClasses (build time)</abbr>              |     `1.837 kB`<br />`857 B` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles + mergeClasses (build time)</abbr>        |  `3.535 kB`<br />`1.595 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStaticStyles-runtime.fixture.js'>makeStaticStyles (runtime)</abbr>    |  `8.982 kB`<br />`3.908 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStyles-runtime.fixture.js'>makeStyles + mergeClasses (runtime)</abbr> | `22.154 kB`<br />`8.333 kB` |

</details>
<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/b3c1fe1c8702a61688ca1b0e90bf25a06894f8ce'>b3c1fe1c8702a61688ca1b0e90bf25a06894f8ce</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-webpack-extraction-plugin-2264cf3b-bf8b-4a75-b908-a443cccfca4e.json b/change/@griffel-webpack-extraction-plugin-2264cf3b-bf8b-4a75-b908-a443cccfca4e.json
new file mode 100644
index 0000000..405adab
--- /dev/null
+++ b/change/@griffel-webpack-extraction-plugin-2264cf3b-bf8b-4a75-b908-a443cccfca4e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: improve getElementReference() to handle multiple childen",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/webpack-extraction-plugin/src/sortCSSRules.ts b/packages/webpack-extraction-plugin/src/sortCSSRules.ts
index 0c93b1e..2ffc935 100644
--- a/packages/webpack-extraction-plugin/src/sortCSSRules.ts
+++ b/packages/webpack-extraction-plugin/src/sortCSSRules.ts
@@ -18,8 +18,8 @@ export function getElementReference(element: Element, suffix = ''): string {
     return element.value + suffix;
   }
 
-  if (Array.isArray(element.children) && element.children.length === 1) {
-    return getElementReference(element.children[0], element.value + suffix);
+  if (Array.isArray(element.children)) {
+    return element.value + '[' + element.children.map(child => getElementReference(child, suffix)).join(',') + ']';
   }
 
   function removeRootProperty(element: Element): unknown {


Test patch:
diff --git a/packages/core/src/runtime/resolveStyleRules.test.ts b/packages/core/src/runtime/resolveStyleRules.test.ts
index 403698b..cf43f45 100644
--- a/packages/core/src/runtime/resolveStyleRules.test.ts
+++ b/packages/core/src/runtime/resolveStyleRules.test.ts
@@ -208,6 +208,25 @@ describe('resolveStyleRules', () => {
       `);
     });
 
+    it('handles media queries with flipping values', () => {
+      expect(
+        resolveStyleRules({
+          '@media screen and (max-width: 992px)': {
+            textAlign: 'left',
+          },
+        }),
+      ).toMatchInlineSnapshot(`
+        @media screen and (max-width: 992px) {
+          .f1f6067w {
+            text-align: left;
+          }
+          .f133ge8t {
+            text-align: right;
+          }
+        }
+      `);
+    });
+
     it('RTL @noflip will generate a different className', () => {
       const classnamesSet = new Set<string>();
 
diff --git a/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts b/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts
index 58f8ab8..3ff4e44 100644
--- a/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts
+++ b/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts
@@ -22,11 +22,13 @@ expect.addSnapshotSerializer(cssSerializer);
 
 describe('getElementReference', () => {
   it.each`
-    css                                                                                       | reference
-    ${'.foo { color: red; }'}                                                                 | ${'.foo'}
-    ${'.foo:hover { color: red; }'}                                                           | ${'.foo:hover'}
-    ${'@media (max-width: 2px) { .foo { color: blue; } }'}                                    | ${'.foo@media (max-width: 2px)'}
-    ${'@keyframes foo { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }'} | ${'@keyframes foo'}
+    css                                                                                              | reference
+    ${'.foo { color: red; }'}                                                                        | ${'.foo'}
+    ${'.foo:hover { color: red; }'}                                                                  | ${'.foo:hover'}
+    ${'@media (max-width: 2px) { .foo { color: blue; } }'}                                           | ${'@media (max-width: 2px)[.foo]'}
+    ${'@keyframes foo { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }'}        | ${'@keyframes foo'}
+    ${'@media screen and (max-width: 992px) { .a { text-align: left; } .b { text-align: right; } }'} | ${'@media screen and (max-width: 992px)[.a,.b]'}
+    ${'@media (max-width: 2px) { @supports (display: grid) { .a { color: blue; } } }'}               | ${'@media (max-width: 2px)[@supports (display: grid)[.a]]'}
   `('returns "$reference" for "$css"', ({ css, reference }: { css: string; reference: string }) => {
     const element = compile(css)[0];