chore: rework internals of makeStaticStyles (#398)

Author: layershifter

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"
+}

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;

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;}",
+      ]
     `);
   });
 });

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[]);
 }