Repository: microsoft/griffel
Pull request #298 (2022-12-20 11:05:26)

feat: expose "styleElementAttributes" on GriffelRenderer
Exposes `styleElementAttributes` on `GriffelRenderer` so attributes could be accessed and applied to other elements.

Is done to unblock https://github.com/microsoft/fluentui/issues/25421.

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

| Package & Exports                                                                                                            |    Baseline (minified/GZIP) |                         PR |                                                                                                                                                                                                 Change |
| :--------------------------------------------------------------------------------------------------------------------------- | --------------------------: | -------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <samp>react</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles + mergeClasses (build time)</abbr>        |   `3.946 kB`<br />`1.78 kB` | `4.004 kB`<br />`1.785 kB` |  `58 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`5 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /> |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeResetStyles-runtime.fixture.js'>makeResetStyles (runtime)</abbr>      | `18.829 kB`<br />`7.053 kB` | `18.887 kB`<br />`7.06 kB` |  `58 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`7 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /> |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStaticStyles-runtime.fixture.js'>makeStaticStyles (runtime)</abbr>    |  `9.674 kB`<br />`4.151 kB` | `9.732 kB`<br />`4.158 kB` |  `58 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`7 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /> |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStyles-runtime.fixture.js'>makeStyles + mergeClasses (runtime)</abbr> | `22.942 kB`<br />`8.584 kB` |    `23 kB`<br />`8.594 kB` | `58 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`10 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /> |

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

| Package & Exports                                                                                                          |        Size (minified/GZIP) |
| -------------------------------------------------------------------------------------------------------------------------- | --------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeResetStyles-runtime.fixture.js'>makeResetStyles (runtime)</abbr>     |  `17.05 kB`<br />`6.321 kB` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles + mergeClasses (build time)</abbr>     |   `2.19 kB`<br />`1.045 kB` |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStylesRuntime.fixture.js'>makeStyles + mergeClasses (runtime)</abbr> | `21.155 kB`<br />`7.888 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__css.fixture.js'>\_\_css + mergeClasses (build time)</abbr>            |  `2.227 kB`<br />`1.046 kB` |

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

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-core-a8eb3726-f851-4e4b-835a-a1b792aec1db.json b/change/@griffel-core-a8eb3726-f851-4e4b-835a-a1b792aec1db.json
new file mode 100644
index 0000000..b781f2b
--- /dev/null
+++ b/change/@griffel-core-a8eb3726-f851-4e4b-835a-a1b792aec1db.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: expose \"styleElementAttributes\" on GriffelRenderer",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/core/src/renderer/createDOMRenderer.ts b/packages/core/src/renderer/createDOMRenderer.ts
index 805edd1..59c0709 100644
--- a/packages/core/src/renderer/createDOMRenderer.ts
+++ b/packages/core/src/renderer/createDOMRenderer.ts
@@ -43,10 +43,11 @@ export function createDOMRenderer(
   target: Document | undefined = typeof document === 'undefined' ? undefined : document,
   options: CreateDOMRendererOptions = {},
 ): GriffelRenderer {
-  const { unstable_filterCSSRule, compareMediaQueries = defaultCompareMediaQueries } = options;
+  const { unstable_filterCSSRule, styleElementAttributes, compareMediaQueries = defaultCompareMediaQueries } = options;
   const renderer: GriffelRenderer = {
     insertionCache: {},
     stylesheets: {},
+    styleElementAttributes: Object.freeze(styleElementAttributes),
     compareMediaQueries,
 
     id: `d${lastIndex++}`,
@@ -59,13 +60,7 @@ export function createDOMRenderer(
         // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
         for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
           const [ruleCSS, metadata] = normalizeCSSBucketEntry(cssRulesForBucket[i]);
-          const sheet = getStyleSheetForBucket(
-            styleBucketName as StyleBucketName,
-            target,
-            renderer,
-            options.styleElementAttributes,
-            metadata,
-          );
+          const sheet = getStyleSheetForBucket(styleBucketName as StyleBucketName, target, renderer, metadata);
 
           if (renderer.insertionCache[ruleCSS]) {
             continue;
diff --git a/packages/core/src/renderer/getStyleSheetForBucket.ts b/packages/core/src/renderer/getStyleSheetForBucket.ts
index 446ddf3..2b92f46 100644
--- a/packages/core/src/renderer/getStyleSheetForBucket.ts
+++ b/packages/core/src/renderer/getStyleSheetForBucket.ts
@@ -47,7 +47,6 @@ export function getStyleSheetForBucket(
   bucketName: StyleBucketName,
   target: Document | undefined,
   renderer: GriffelRenderer,
-  elementAttributes: Record<string, string> = {},
   metadata: Record<string, unknown> = {},
 ): IsomorphicStyleSheet {
   const isMediaBucket = bucketName === 'm';
@@ -56,7 +55,7 @@ export function getStyleSheetForBucket(
   if (!renderer.stylesheets[stylesheetKey]) {
     const tag: HTMLStyleElement | undefined = target && target.createElement('style');
     const stylesheet = createIsomorphicStyleSheet(tag, bucketName, {
-      ...elementAttributes,
+      ...renderer.styleElementAttributes,
       ...(isMediaBucket && { media: metadata['m'] as string }),
     });
 
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 68b3bbd..a4513c7 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -266,6 +266,11 @@ export interface GriffelRenderer {
    */
   stylesheets: { [key in StyleBucketName]?: IsomorphicStyleSheet } & Record<string, IsomorphicStyleSheet>;
 
+  /**
+   * @private
+   */
+  styleElementAttributes?: Readonly<Record<string, string>>;
+
   /**
    * @private
    */


Test patch:
diff --git a/packages/core/src/renderer/getStyleSheetForBucket.test.ts b/packages/core/src/renderer/getStyleSheetForBucket.test.ts
index d71a14d..05888b8 100644
--- a/packages/core/src/renderer/getStyleSheetForBucket.test.ts
+++ b/packages/core/src/renderer/getStyleSheetForBucket.test.ts
@@ -47,23 +47,23 @@ describe('getStyleSheetForBucket', () => {
     getStyleSheetForBucket('d', target, renderer);
     getStyleSheetForBucket('v', target, renderer);
 
-    getStyleSheetForBucket('m', target, renderer, {}, { m: '(max-width: 3px)' });
+    getStyleSheetForBucket('m', target, renderer, { m: '(max-width: 3px)' });
 
     getStyleSheetForBucket('a', target, renderer);
     getStyleSheetForBucket('i', target, renderer);
 
-    getStyleSheetForBucket('m', target, renderer, {}, { m: '(max-width: 1px)' });
+    getStyleSheetForBucket('m', target, renderer, { m: '(max-width: 1px)' });
 
     getStyleSheetForBucket('h', target, renderer);
 
-    getStyleSheetForBucket('m', target, renderer, {}, { m: '(max-width: 4px)' });
+    getStyleSheetForBucket('m', target, renderer, { m: '(max-width: 4px)' });
 
     getStyleSheetForBucket('w', target, renderer);
     getStyleSheetForBucket('t', target, renderer);
     getStyleSheetForBucket('k', target, renderer);
     getStyleSheetForBucket('f', target, renderer);
 
-    getStyleSheetForBucket('m', target, renderer, {}, { m: '(max-width: 2px)' });
+    getStyleSheetForBucket('m', target, renderer, { m: '(max-width: 2px)' });
 
     const styleElements = target.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
     const styleElementOrder = Array.from(styleElements).map(styleElement =>