Repository: microsoft/griffel
Pull request #410 (2023-07-26 12:43:41)

chore: show bucket names in snapshots
This PR modifies existing snapshot serializers to emit bucket names in formatted CSS to make clearer what is generated.

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

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

| Package & Exports                                                                                                          |        Size (minified/GZIP) |
| -------------------------------------------------------------------------------------------------------------------------- | --------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/__resetStyles.fixture.js'>\_\_resetStyles (makeResetStyles)</abbr>       |        `254 B`<br />`184 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles (makeStyles)</abbr>                      |     `1.649 kB`<br />`787 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeResetStyles.fixture.js'>makeResetStyles (runtime)</abbr>             | `16.937 kB`<br />`6.452 kB` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles (runtime)</abbr>                       | `21.365 kB`<br />`8.067 kB` |
| <samp>core</samp> <br /> <abbr title='bundle-size/mergeClasses.fixture.js'>mergeClasses</abbr>                             |      `1.82 kB`<br />`881 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/shorthands.padding.fixture.js'>shorthands.padding()</abbr>               |  `4.677 kB`<br />`1.517 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__css.fixture.js'>\_\_css</abbr>                                        |     `1.645 kB`<br />`767 B` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles</abbr>                                  |  `3.504 kB`<br />`1.593 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeResetStyles.fixture.js'>makeResetStyles (runtime)</abbr>            | `18.816 kB`<br />`7.251 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStaticStyles.fixture.js'>makeStaticStyles (runtime)</abbr>          |  `8.791 kB`<br />`3.897 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles (runtime)</abbr>                      |  `23.26 kB`<br />`8.836 kB` |
| <samp>shadow-dom</samp> <br /> <abbr title='bundle-size/createShadowDOMRenderer.fixture.js'>createShadowDOMRenderer</abbr> |  `3.232 kB`<br />`1.405 kB` |

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

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-core-b81ce223-ebf6-413e-bd24-8908243f9ab4.json b/change/@griffel-core-b81ce223-ebf6-413e-bd24-8908243f9ab4.json
new file mode 100644
index 0000000..2a3666f
--- /dev/null
+++ b/change/@griffel-core-b81ce223-ebf6-413e-bd24-8908243f9ab4.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: show bucket names in snapshots",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/core/src/common/snapshotSerializers.ts b/packages/core/src/common/snapshotSerializers.ts
index 14856ee..c66fefb 100644
--- a/packages/core/src/common/snapshotSerializers.ts
+++ b/packages/core/src/common/snapshotSerializers.ts
@@ -4,7 +4,8 @@ import * as prettier from 'prettier';
 
 import { resolveStyleRules } from '../runtime/resolveStyleRules';
 import { normalizeCSSBucketEntry } from '../runtime/utils/normalizeCSSBucketEntry';
-import type { GriffelRenderer } from '../types';
+import type { CSSRulesByBucket, GriffelRenderer } from '../types';
+import { resolveResetStyleRules } from '../runtime/resolveResetStyleRules';
 
 // eslint-disable-next-line eqeqeq
 const isObject = (value: unknown) => value != null && !Array.isArray(value) && typeof value === 'object';
@@ -27,7 +28,11 @@ export const griffelRendererSerializer: jest.SnapshotSerializerPlugin = {
       if (stylesheet) {
         const cssRules = stylesheet.cssRules() ?? ([] as string[]);
 
-        return [...acc, ...cssRules];
+        if (cssRules.length === 0) {
+          return acc;
+        }
+
+        return [...acc, `/** bucket "${styleEl}" **/`, ...cssRules];
       }
 
       return acc;
@@ -66,11 +71,16 @@ export const griffelResetRulesSerializer: jest.SnapshotSerializerPlugin = {
     return Array.isArray(value);
   },
   print(value) {
+    const format = (cssRules: string[]) => prettier.format(cssRules.join(''), { parser: 'css' }).trim();
+
     /**
      * test function makes sure that value is the guarded type
      */
-    const _value = value as [string, string | null, string[]];
+    const _value = value as ReturnType<typeof resolveResetStyleRules>;
+    const cssRulesByBucket: CSSRulesByBucket = { r: _value[2] };
 
-    return prettier.format(_value[2].join(''), { parser: 'css' }).trim();
+    return Object.entries(cssRulesByBucket)
+      .flatMap(([key, value]) => [`/** bucket "${key}" */`, format(value as string[])])
+      .join('\n');
   },
 };


Test patch:
diff --git a/packages/core/src/makeResetStyles.test.ts b/packages/core/src/makeResetStyles.test.ts
index 7b1a6f4..c548250 100644
--- a/packages/core/src/makeResetStyles.test.ts
+++ b/packages/core/src/makeResetStyles.test.ts
@@ -25,6 +25,7 @@ describe('makeResetStyles', () => {
 
     expect(computeClassName({ dir: 'ltr', renderer })).toEqual('r7lmmpp');
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "r" **/
       .r7lmmpp {
         color: red;
         flex-direction: row;
@@ -41,6 +42,7 @@ describe('makeResetStyles', () => {
     expect(computeClassName({ dir: 'rtl', renderer })).toEqual('rjhindo');
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "r" **/
       .rgb6zd6 {
         padding: 40px 20px 10px 5px;
       }
diff --git a/packages/core/src/makeStaticStyles.test.ts b/packages/core/src/makeStaticStyles.test.ts
index e56db43..3374fdb 100644
--- a/packages/core/src/makeStaticStyles.test.ts
+++ b/packages/core/src/makeStaticStyles.test.ts
@@ -28,6 +28,7 @@ describe('makeStaticStyles', () => {
     useStyles({ renderer });
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       body {
         background: blue;
         transition: all 4s ease;
@@ -58,6 +59,7 @@ describe('makeStaticStyles', () => {
     useStyles({ renderer });
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       @font-face {
         font-family: Open Sans;
         src: url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
@@ -75,6 +77,7 @@ describe('makeStaticStyles', () => {
     useStyles({ renderer });
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       body {
         background: red;
       }
@@ -102,6 +105,7 @@ describe('makeStaticStyles', () => {
     useStyles2({ renderer });
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       body {
         background: blue;
       }
@@ -124,6 +128,7 @@ describe('makeStaticStyles', () => {
     expect(useStyles({ dir: 'ltr', renderer }).root).toBe('___23yvam0_0000000 fy9yzz7 f4ybsrx');
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       @font-face {
         font-family: Open Sans;
         src: url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
diff --git a/packages/core/src/makeStyles.test.ts b/packages/core/src/makeStyles.test.ts
index 47aa73a..86de232 100644
--- a/packages/core/src/makeStyles.test.ts
+++ b/packages/core/src/makeStyles.test.ts
@@ -33,6 +33,7 @@ describe('makeStyles', () => {
     expect(computeClasses({ dir: 'ltr', renderer }).root).toEqual('___afhpfp0 fe3e8s9');
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       .fe3e8s9 {
         color: red;
       }
@@ -44,17 +45,23 @@ describe('makeStyles', () => {
       root: {
         color: 'red',
         position: 'absolute',
+        ':hover': { color: 'blue' },
       },
     });
-    expect(computeClasses({ dir: 'ltr', renderer }).root).toEqual('___1jgns8t fe3e8s9 f1euv43f');
 
+    expect(computeClasses({ dir: 'ltr', renderer }).root).toEqual('___20fshm0 fe3e8s9 f1euv43f f10q6zxg');
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       .fe3e8s9 {
         color: red;
       }
       .f1euv43f {
         position: absolute;
       }
+      /** bucket "h" **/
+      .f10q6zxg:hover {
+        color: blue;
+      }
     `);
   });
 
@@ -73,6 +80,7 @@ describe('makeStyles', () => {
     expect(rtlClasses).toEqual('___7x57i00 f81rol6 f19krssl');
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       .frdkuqy {
         padding-left: 10px;
       }
@@ -106,6 +114,7 @@ describe('makeStyles', () => {
     expect(computeClasses({ dir: 'rtl', renderer }).root).toBe('___3kh5ri0 f1fp4ujf f1cpbl36 f1t9cprh');
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "k" **/
       @keyframes f1q8eu9e {
         from {
           transform: rotate(0deg);
@@ -122,6 +131,7 @@ describe('makeStyles', () => {
           transform: rotate(-360deg);
         }
       }
+      /** bucket "d" **/
       .f1g6ul6r {
         animation-name: f1q8eu9e;
       }
@@ -154,6 +164,7 @@ describe('makeStyles', () => {
     expect(rendererA.stylesheets.d).not.toBe(rendererB.stylesheets.d);
 
     expect(rendererA).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       .f22iagw {
         display: flex;
       }
@@ -165,6 +176,7 @@ describe('makeStyles', () => {
       }
     `);
     expect(rendererB).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       .f22iagw {
         display: flex;
       }
@@ -210,6 +222,7 @@ describe('makeStyles', () => {
     expect(computeClasses({ dir: 'ltr', renderer })[42]).toEqual('___afhpfp0 fe3e8s9');
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       .fe3e8s9 {
         color: red;
       }
diff --git a/packages/core/src/renderer/createDOMRenderer.test.ts b/packages/core/src/renderer/createDOMRenderer.test.ts
index b477687..361448c 100644
--- a/packages/core/src/renderer/createDOMRenderer.test.ts
+++ b/packages/core/src/renderer/createDOMRenderer.test.ts
@@ -23,6 +23,7 @@ describe('createDOMRenderer', () => {
     renderer.insertCSSRules(cssRules);
 
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" **/
       .foo {
         background-color: red;
       }
@@ -44,6 +45,7 @@ describe('createDOMRenderer', () => {
 
     renderer.insertCSSRules(cssRules);
     expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "t" **/
       .foo {
         background-color: red;
       }
diff --git a/packages/core/src/runtime/resolveResetStyleRules.test.ts b/packages/core/src/runtime/resolveResetStyleRules.test.ts
index f967adc..ce2a533 100644
--- a/packages/core/src/runtime/resolveResetStyleRules.test.ts
+++ b/packages/core/src/runtime/resolveResetStyleRules.test.ts
@@ -11,6 +11,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       .r11y0rml {
         color: red;
         overflow-x: hidden;
@@ -22,6 +23,7 @@ describe('resolveResetStyleRules', () => {
     const result = resolveResetStyleRules({ marginLeft: '15px' });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       .rovwgyn {
         margin-left: 15px;
       }
@@ -37,6 +39,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       .rj1urkn {
         color: red;
         color: blue;
@@ -51,6 +54,7 @@ describe('resolveResetStyleRules', () => {
         ':global(body)': { color: 'magenta' },
       }),
     ).toMatchInlineSnapshot(`
+      /** bucket "r" */
       .rzlpwqs {
         color: red;
       }
@@ -67,6 +71,7 @@ describe('resolveResetStyleRules', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
+      /** bucket "r" */
       body .r1i1zh9k {
         color: magenta;
       }
@@ -82,6 +87,7 @@ describe('resolveResetStyleRules', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
+      /** bucket "r" */
       .fui-FluentProvider .rmi35r5 .foo {
         color: orange;
       }
@@ -96,6 +102,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       @container foo (max-width: 1px) {
         .rmph5rz {
           color: orange;
@@ -112,6 +119,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       @container (max-width: 1px) {
         .r1ph1abo {
           color: orange;
@@ -132,6 +140,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       .rpycl1b {
         color: red;
       }
@@ -157,6 +166,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       @layer utilities {
         .rvhnavh {
           color: orange;
@@ -179,6 +189,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       @supports (display: flex) {
         .rxf8lon {
           color: orange;
@@ -202,6 +213,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       @supports (display: flex) {
         .rhd25ja {
           color: pink;
@@ -223,6 +235,7 @@ describe('resolveResetStyleRules', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
+      /** bucket "r" */
       .r1s1f2pl:hover {
         color: red;
       }
@@ -242,6 +255,7 @@ describe('resolveResetStyleRules', () => {
       });
 
       expect(result).toMatchInlineSnapshot(`
+        /** bucket "r" */
         .reh730q {
           animation-name: foo;
         }
@@ -257,6 +271,7 @@ describe('resolveResetStyleRules', () => {
       });
 
       expect(result).toMatchInlineSnapshot(`
+        /** bucket "r" */
         .rgmpmil {
           animation-name: r1kgwxhb;
         }
@@ -289,6 +304,7 @@ describe('resolveResetStyleRules', () => {
       });
 
       expect(result).toMatchInlineSnapshot(`
+        /** bucket "r" */
         .rw8vs22 {
           animation-name: r1sekkel, r5j8bii;
         }