chore: update serializer (#545)

* feat: add support for shorthands * Change files
microsoft · Apr 23, 2024 · 74dd47b · 74dd47b
1 parent e514e2f
commit 74dd47b
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 22 deletions.
diff --git a/change/@griffel-core-b3e9ee3c-93d4-4c80-ab9a-6effc12045ee.json b/change/@griffel-core-b3e9ee3c-93d4-4c80-ab9a-6effc12045ee.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update serializer",
+  "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
@@ -2,6 +2,7 @@
 
 import * as prettier from 'prettier';
 
+import { DATA_BUCKET_ATTR } from '../constants';
 import type { resolveStyleRules } from '../runtime/resolveStyleRules';
 import { normalizeCSSBucketEntry } from '../runtime/utils/normalizeCSSBucketEntry';
 import type { CSSRulesByBucket, GriffelRenderer } from '../types';
@@ -27,12 +28,19 @@ export const griffelRendererSerializer: jest.SnapshotSerializerPlugin = {
 
       if (stylesheet) {
         const cssRules = stylesheet.cssRules() ?? ([] as string[]);
+        const attributes = Object.entries(stylesheet.elementAttributes).filter(([key]) => key !== DATA_BUCKET_ATTR);
 
         if (cssRules.length === 0) {
           return acc;
         }
 
-        return [...acc, `/** bucket "${styleEl.slice(0, 1)}" **/`, ...cssRules];
+        return [
+          ...acc,
+          `/** bucket "${styleEl.slice(0, 1)}"${
+            attributes.length > 0 ? ' ' + JSON.stringify(Object.fromEntries(attributes)) : ''
+          } **/`,
+          ...cssRules,
+        ];
       }
 
       return acc;

diff --git a/packages/core/src/makeResetStyles.test.ts b/packages/core/src/makeResetStyles.test.ts
@@ -25,7 +25,7 @@ describe('makeResetStyles', () => {
 
     expect(computeClassName({ dir: 'ltr', renderer })).toEqual('r7lmmpp');
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "r" **/
+      /** bucket "r" {"data-priority":"0"} **/
       .r7lmmpp {
         color: red;
         flex-direction: row;
@@ -42,7 +42,7 @@ describe('makeResetStyles', () => {
     expect(computeClassName({ dir: 'rtl', renderer })).toEqual('rjhindo');
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "r" **/
+      /** bucket "r" {"data-priority":"0"} **/
       .rgb6zd6 {
         padding: 40px 20px 10px 5px;
       }
@@ -60,11 +60,11 @@ describe('makeResetStyles', () => {
 
     expect(computeClassName({ dir: 'ltr', renderer })).toEqual('rbwcbv2');
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "r" **/
+      /** bucket "r" {"data-priority":"0"} **/
       .rbwcbv2 {
         color: red;
       }
-      /** bucket "s" **/
+      /** bucket "s" {"data-priority":"0"} **/
       @media (min-width: 100px) {
         .rbwcbv2 {
           color: blue;

diff --git a/packages/core/src/makeStaticStyles.test.ts b/packages/core/src/makeStaticStyles.test.ts
@@ -28,7 +28,7 @@ describe('makeStaticStyles', () => {
     useStyles({ renderer });
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       body {
         background: blue;
         transition: all 4s ease;
@@ -59,7 +59,7 @@ describe('makeStaticStyles', () => {
     useStyles({ renderer });
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       @font-face {
         font-family: Open Sans;
         src: url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
@@ -77,7 +77,7 @@ describe('makeStaticStyles', () => {
     useStyles({ renderer });
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       body {
         background: red;
       }
@@ -105,7 +105,7 @@ describe('makeStaticStyles', () => {
     useStyles2({ renderer });
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       body {
         background: blue;
       }
@@ -128,7 +128,7 @@ describe('makeStaticStyles', () => {
     expect(useStyles({ dir: 'ltr', renderer }).root).toBe('___23yvam0_0000000 fy9yzz7 f4ybsrx');
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       @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
@@ -34,7 +34,7 @@ describe('makeStyles', () => {
     expect(computeClasses({ dir: 'ltr', renderer }).root).toEqual('___afhpfp0 fe3e8s9');
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .fe3e8s9 {
         color: red;
       }
@@ -52,14 +52,14 @@ describe('makeStyles', () => {
 
     expect(computeClasses({ dir: 'ltr', renderer }).root).toEqual('___20fshm0 fe3e8s9 f1euv43f f10q6zxg');
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .fe3e8s9 {
         color: red;
       }
       .f1euv43f {
         position: absolute;
       }
-      /** bucket "h" **/
+      /** bucket "h" {"data-priority":"0"} **/
       .f10q6zxg:hover {
         color: blue;
       }
@@ -81,7 +81,7 @@ describe('makeStyles', () => {
     expect(rtlClasses).toEqual('___7x57i00 f81rol6 f19krssl');
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .frdkuqy {
         padding-left: 10px;
       }
@@ -115,7 +115,7 @@ describe('makeStyles', () => {
     expect(computeClasses({ dir: 'rtl', renderer }).root).toBe('___3kh5ri0 f1fp4ujf f1cpbl36 f1t9cprh');
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "k" **/
+      /** bucket "k" {"data-priority":"0"} **/
       @keyframes f1q8eu9e {
         from {
           transform: rotate(0deg);
@@ -132,7 +132,7 @@ describe('makeStyles', () => {
           transform: rotate(-360deg);
         }
       }
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .f1g6ul6r {
         animation-name: f1q8eu9e;
       }
@@ -169,7 +169,7 @@ describe('makeStyles', () => {
     expect(rendererA.stylesheets['d0']).not.toBe(rendererB.stylesheets['d0']);
 
     expect(rendererA).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .f22iagw {
         display: flex;
       }
@@ -181,7 +181,7 @@ describe('makeStyles', () => {
       }
     `);
     expect(rendererB).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .f22iagw {
         display: flex;
       }
@@ -227,7 +227,7 @@ describe('makeStyles', () => {
     expect(computeClasses({ dir: 'ltr', renderer })[42]).toEqual('___afhpfp0 fe3e8s9');
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .fe3e8s9 {
         color: red;
       }
@@ -244,7 +244,7 @@ describe('makeStyles', () => {
     expect(computeClassesC({ dir: 'ltr', renderer }).root).toEqual('___1919hol fihdeyh');
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .fihdeyh {
         background-color: 10px;
       }

diff --git a/packages/core/src/renderer/createDOMRenderer.test.ts b/packages/core/src/renderer/createDOMRenderer.test.ts
@@ -23,7 +23,7 @@ describe('createDOMRenderer', () => {
     renderer.insertCSSRules(cssRules);
 
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "d" **/
+      /** bucket "d" {"data-priority":"0"} **/
       .foo {
         background-color: red;
       }
@@ -45,7 +45,7 @@ describe('createDOMRenderer', () => {
 
     renderer.insertCSSRules(cssRules);
     expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "t" **/
+      /** bucket "t" {"data-priority":"0"} **/
       .foo {
         background-color: red;
       }