Repository: microsoft/griffel
Pull request #398 (2023-07-18 13:26:30)

chore: rework internals of makeStaticStyles
This PR reworks `resolveStaticStyleRules` to make it simpler and follow the same approach as `makeResetStyles` to unify insertion process.

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

| Package & Exports                                                                                                 |   Baseline (minified/GZIP) |                         PR |                                                                                                                                                                                                  Change |
| :---------------------------------------------------------------------------------------------------------------- | -------------------------: | -------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStaticStyles.fixture.js'>makeStaticStyles (runtime)</abbr> | `8.753 kB`<br />`3.868 kB` | `8.733 kB`<br />`3.862 kB` | `-20 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/decrease.png" /><br />`-6 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/decrease.png" /> |

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

| Package & Exports                                                                                                          |        Size (minified/GZIP) |
| -------------------------------------------------------------------------------------------------------------------------- | --------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/__resetStyles.fixture.js'>\_\_resetStyles (makeResetStyles)</abbr>       |        `207 B`<br />`174 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles (makeStyles)</abbr>                      |     `1.608 kB`<br />`772 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeResetStyles.fixture.js'>makeResetStyles (runtime)</abbr>             | `16.886 kB`<br />`6.442 kB` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles (runtime)</abbr>                       | `21.224 kB`<br />`8.025 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.101 kB`<br />`1.405 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.463 kB`<br />`1.578 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeResetStyles.fixture.js'>makeResetStyles (runtime)</abbr>            | `18.776 kB`<br />`7.223 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles (runtime)</abbr>                      | `23.129 kB`<br />`8.791 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/2ee1ee7305064beeb7a61fbf50d4fcbba4bb14ba'>2ee1ee7305064beeb7a61fbf50d4fcbba4bb14ba</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-core-05c2915c-0733-4518-995d-e78d3784bc5e.json b/change/@griffel-core-05c2915c-0733-4518-995d-e78d3784bc5e.json
new file mode 100644
index 0000000..2f9ed42
--- /dev/null
+++ b/change/@griffel-core-05c2915c-0733-4518-995d-e78d3784bc5e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: rework internals of makeStaticStyles",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/core/src/makeStaticStyles.ts b/packages/core/src/makeStaticStyles.ts
index 09276a6..b1ef3ed 100644
--- a/packages/core/src/makeStaticStyles.ts
+++ b/packages/core/src/makeStaticStyles.ts
@@ -16,16 +16,16 @@ export function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyl
   const stylesSet: GriffelStaticStyles[] = Array.isArray(styles) ? styles : [styles];
 
   function useStaticStyles(options: MakeStaticStylesOptions): void {
-    const cacheKey = options.renderer.id;
-    if (styleCache[cacheKey]) {
-      return;
-    }
+    const { renderer } = options;
+    const cacheKey = renderer.id;
 
-    for (const styleRules of stylesSet) {
-      options.renderer.insertCSSRules(resolveStaticStyleRules(styleRules));
+    if (!styleCache[cacheKey]) {
+      renderer.insertCSSRules({
+        // 👇 static rules should be inserted into default bucket
+        d: resolveStaticStyleRules(stylesSet),
+      });
+      styleCache[cacheKey] = true;
     }
-
-    styleCache[cacheKey] = true;
   }
 
   return useStaticStyles;
diff --git a/packages/core/src/runtime/resolveStaticStyleRules.ts b/packages/core/src/runtime/resolveStaticStyleRules.ts
index ba51f24..5b2243c 100644
--- a/packages/core/src/runtime/resolveStaticStyleRules.ts
+++ b/packages/core/src/runtime/resolveStaticStyleRules.ts
@@ -1,30 +1,29 @@
 import type { GriffelStaticStyles } from '@griffel/style-types';
-import type { CSSRulesByBucket } from '../types';
+
+import type { CSSBucketEntry } from '../types';
 import { compileCSSRules } from './compileCSSRules';
 import { compileStaticCSS } from './compileStaticCSS';
 
-export function resolveStaticStyleRules(styles: GriffelStaticStyles, result: CSSRulesByBucket = {}): CSSRulesByBucket {
-  if (typeof styles === 'string') {
-    const cssRules = compileCSSRules(styles, false);
+export function resolveStaticStyleRules(stylesSet: GriffelStaticStyles[]): CSSBucketEntry[] {
+  return stylesSet.reduce((acc, styles) => {
+    if (typeof styles === 'string') {
+      const cssRules = compileCSSRules(styles, false);
+
+      for (const rule of cssRules) {
+        acc.push(rule);
+      }
 
-    for (const rule of cssRules) {
-      addResolvedStyles(rule, result);
+      return acc;
     }
-  } else {
+
     // eslint-disable-next-line guard-for-in
     for (const property in styles) {
       const value = styles[property];
       const staticCSS = compileStaticCSS(property, value);
 
-      addResolvedStyles(staticCSS, result);
+      acc.push(staticCSS);
     }
-  }
-
-  return result;
-}
 
-function addResolvedStyles(cssRule: string, result: CSSRulesByBucket = {}): void {
-  // 👇 static rules should be inserted into default bucket
-  result.d = result.d || [];
-  result.d.push(cssRule);
+    return acc;
+  }, [] as CSSBucketEntry[]);
 }


Test patch:
diff --git a/packages/core/src/runtime/resolveStaticStyleRules.test.ts b/packages/core/src/runtime/resolveStaticStyleRules.test.ts
index bdcc805..965ac79 100644
--- a/packages/core/src/runtime/resolveStaticStyleRules.test.ts
+++ b/packages/core/src/runtime/resolveStaticStyleRules.test.ts
@@ -3,50 +3,48 @@ import { resolveStaticStyleRules } from './resolveStaticStyleRules';
 describe('resolveStaticStyleRules', () => {
   it('handles font-face', () => {
     expect(
-      resolveStaticStyleRules({
-        '@font-face': {
-          fontFamily: 'Open Sans',
-          src: `url("webfont.woff2") format("woff2")`,
+      resolveStaticStyleRules([
+        {
+          '@font-face': {
+            fontFamily: 'Open Sans',
+            src: `url("webfont.woff2") format("woff2")`,
+          },
         },
-      }),
+      ]),
     ).toMatchInlineSnapshot(`
-      Object {
-        "d": Array [
-          "@font-face{font-family:Open Sans;src:url(\\"webfont.woff2\\") format(\\"woff2\\");}",
-        ],
-      }
+      Array [
+        "@font-face{font-family:Open Sans;src:url(\\"webfont.woff2\\") format(\\"woff2\\");}",
+      ]
     `);
   });
 
   it('handles static css', () => {
     expect(
-      resolveStaticStyleRules({
-        body: {
-          background: 'blue',
+      resolveStaticStyleRules([
+        {
+          body: {
+            background: 'blue',
+          },
+          '.foo': {
+            background: 'yellow',
+            marginLeft: '5px',
+          },
         },
-        '.foo': {
-          background: 'yellow',
-          marginLeft: '5px',
-        },
-      }),
+      ]),
     ).toMatchInlineSnapshot(`
-      Object {
-        "d": Array [
-          "body{background:blue;}",
-          ".foo{background:yellow;margin-left:5px;}",
-        ],
-      }
+      Array [
+        "body{background:blue;}",
+        ".foo{background:yellow;margin-left:5px;}",
+      ]
     `);
   });
 
   it('handles css string', () => {
-    expect(resolveStaticStyleRules('body {background: red;} div {color: green;}')).toMatchInlineSnapshot(`
-      Object {
-        "d": Array [
-          "body{background:red;}",
-          "div{color:green;}",
-        ],
-      }
+    expect(resolveStaticStyleRules(['body {background: red;} div {color: green;}'])).toMatchInlineSnapshot(`
+      Array [
+        "body{background:red;}",
+        "div{color:green;}",
+      ]
     `);
   });
 });