Repository: microsoft/griffel
Pull request #82 (2022-03-22 14:50:46)

feat: export shaker evaluator
This PR re-exports the evaluator from `@linaria/shaker` and updates README file for `@griffel/babel-preset`.

We had the same experience with both existing internal customers of Webpack loader - it's required to tweak evaluation settings. For that we need to configure the evaluator, but it's not re-exported we need to add a dependency to third party module and update it separately 😯


Patch:
diff --git a/.github/workflows/bundle-size-comment.yml b/.github/workflows/bundle-size-comment.yml
new file mode 100644
index 0000000..8528117
--- /dev/null
+++ b/.github/workflows/bundle-size-comment.yml
@@ -0,0 +1,31 @@
+name: Bundle size | Comment on PR
+on:
+  workflow_run:
+    workflows: ['Bundle size']
+    types:
+      - completed
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - name: 'Download artifact'
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          name: monosize-report
+          path: ./results
+          run_id: ${{ github.event.workflow_run.id }}
+          workflow: ${{ github.event.workflow.id }}
+          workflow_conclusion: success
+
+      - name: Load PR number
+        id: pr_number
+        run: echo "::set-output name=id::$(cat pr.txt)"
+        working-directory: ./results
+
+      - name: 'Comment on PR'
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          number: ${{ steps.pr_number.outputs.id }}
+          path: ./results/monosize.md
diff --git a/apps/website/docs/react/api/create-dom-renderer.md b/apps/website/docs/react/api/create-dom-renderer.md
index 794ced1..8844048 100644
--- a/apps/website/docs/react/api/create-dom-renderer.md
+++ b/apps/website/docs/react/api/create-dom-renderer.md
@@ -21,3 +21,17 @@ function App(props) {
   );
 }
 ```
+
+### styleElementAttributes
+
+A map of attributes that's passed to the generated style elements. For example, is useful to set ["nonce" attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce).
+
+```js
+import { createDOMRenderer } from '@griffel/react';
+
+const renderer = createDOMRenderer(targetDocument, {
+  styleElementAttributes: {
+    nonce: 'random',
+  },
+});
+```
diff --git a/apps/website/docs/react/guides/child-window-rendering.md b/apps/website/docs/react/guides/child-window-rendering.md
index e6f2ecd..20365a3 100644
--- a/apps/website/docs/react/guides/child-window-rendering.md
+++ b/apps/website/docs/react/guides/child-window-rendering.md
@@ -9,7 +9,7 @@ When rendering in the main browser window, many components will need access to w
 
 ## Configure rendering
 
-We need to configure a renderer for makeStyles() and pass a targetDocument to FluentProvider:
+We need to configure a renderer for `makeStyles()` and pass a `targetDocument` to `RendererProvider`:
 
 ```jsx
 import { createDOMRenderer, RendererProvider } from '@griffel/react';
diff --git a/apps/website/docs/react/guides/ssr-usage.md b/apps/website/docs/react/guides/ssr-usage.md
index 20dfccd..033b16e 100644
--- a/apps/website/docs/react/guides/ssr-usage.md
+++ b/apps/website/docs/react/guides/ssr-usage.md
@@ -13,7 +13,7 @@ Griffel provides first class support for Server-Side Rendering.
 For basic instructions to setup Next.js, see [Getting Started](https://nextjs.org/docs/getting-started). Please complete following steps:
 
 1. Get a basic Next.js setup running, rendering a page from the `pages` folder, as guided by the tutorial.
-2. Add the Griffel to dependencies (`@griffel/react` package`), check [Install](/react/install) page.
+2. Add the Griffel to dependencies (`@griffel/react` package), check [Install](/react/install) page.
 
 A complete demo project is available on [CodeSandbox](https://codesandbox.io/s/next-js-project-with-griffel-react-f22mwn).
 
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index b80d6bf..4000337 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -92,7 +92,7 @@ jobs:
         displayName: Authenticate git for pushes
 
       - script: |
-          yarn beachball publish -b origin/main --access public -y -n $(npmTokenTmp)
+          yarn beachball publish -b origin/main --access public -y -n $(npmToken)
           git reset --hard origin/main
         env:
           GITHUB_PAT: $(githubPAT)
diff --git a/change/@griffel-babel-preset-3ee3f24c-8bd5-4263-9628-7245b5ab02c5.json b/change/@griffel-babel-preset-3ee3f24c-8bd5-4263-9628-7245b5ab02c5.json
new file mode 100644
index 0000000..b785cda
--- /dev/null
+++ b/change/@griffel-babel-preset-3ee3f24c-8bd5-4263-9628-7245b5ab02c5.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update README",
+  "packageName": "@griffel/babel-preset",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@griffel-babel-preset-893a7a76-6351-4d7d-95f0-4f85fc59cb2b.json b/change/@griffel-babel-preset-893a7a76-6351-4d7d-95f0-4f85fc59cb2b.json
new file mode 100644
index 0000000..f81d2ea
--- /dev/null
+++ b/change/@griffel-babel-preset-893a7a76-6351-4d7d-95f0-4f85fc59cb2b.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: export shaker evaluator",
+  "packageName": "@griffel/babel-preset",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@griffel-babel-preset-99d30eb2-d5e6-4809-8d5f-4bd74bd9b63f.json b/change/@griffel-babel-preset-99d30eb2-d5e6-4809-8d5f-4bd74bd9b63f.json
new file mode 100644
index 0000000..d8c2c6f
--- /dev/null
+++ b/change/@griffel-babel-preset-99d30eb2-d5e6-4809-8d5f-4bd74bd9b63f.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: add \"when to use it\" section",
+  "packageName": "@griffel/babel-preset",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@griffel-core-f0caf7c5-b487-47b5-8dbb-7f23f433c325.json b/change/@griffel-core-f0caf7c5-b487-47b5-8dbb-7f23f433c325.json
new file mode 100644
index 0000000..15ef622
--- /dev/null
+++ b/change/@griffel-core-f0caf7c5-b487-47b5-8dbb-7f23f433c325.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add \"styleElementAttributes\" to createDOMRenderer",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@griffel-jest-serializer-5907822c-f502-4720-9914-8382838e465a.json b/change/@griffel-jest-serializer-5907822c-f502-4720-9914-8382838e465a.json
new file mode 100644
index 0000000..4756ccb
--- /dev/null
+++ b/change/@griffel-jest-serializer-5907822c-f502-4720-9914-8382838e465a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update README, fix comments",
+  "packageName": "@griffel/jest-serializer",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@griffel-react-91a6f79f-816d-4ac0-8d0a-58fa0719a7d3.json b/change/@griffel-react-91a6f79f-816d-4ac0-8d0a-58fa0719a7d3.json
new file mode 100644
index 0000000..a699f02
--- /dev/null
+++ b/change/@griffel-react-91a6f79f-816d-4ac0-8d0a-58fa0719a7d3.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: add docs for createDOMRenderer",
+  "packageName": "@griffel/react",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@griffel-webpack-loader-4b1afebf-dac1-470b-a3fa-6b3e926d1c70.json b/change/@griffel-webpack-loader-4b1afebf-dac1-470b-a3fa-6b3e926d1c70.json
new file mode 100644
index 0000000..ef36ab9
--- /dev/null
+++ b/change/@griffel-webpack-loader-4b1afebf-dac1-470b-a3fa-6b3e926d1c70.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update README, fix caller & plugin names",
+  "packageName": "@griffel/webpack-loader",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@griffel-webpack-loader-e2524be4-c006-472d-887b-75edb392d60b.json b/change/@griffel-webpack-loader-e2524be4-c006-472d-887b-75edb392d60b.json
new file mode 100644
index 0000000..25dc0a4
--- /dev/null
+++ b/change/@griffel-webpack-loader-e2524be4-c006-472d-887b-75edb392d60b.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: update README to include configuration guide",
+  "packageName": "@griffel/webpack-loader",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/babel-preset/README.md b/packages/babel-preset/README.md
index 8e90cea..ee1f386 100644
--- a/packages/babel-preset/README.md
+++ b/packages/babel-preset/README.md
@@ -10,6 +10,11 @@ yarn add --dev @griffel/babel-preset
 npm install --dev @griffel/babel-preset
 ```
 
+## When to use it?
+
+- For library developers, please use the Babel preset (this package)
+- For application developers, please use [`@griffel/webpack-loader`](../webpack-loader)
+
 ## Usage
 
 `.babelrc`
@@ -34,7 +39,7 @@ By default, preset handles imports from `@griffel/react`, to handle imports from
 {
   "presets": [
     [
-      "@griffel/babel",
+      "@griffel",
       {
         "modules": [{ "moduleSource": "custom-package", "importName": "makeStyles" }]
       }
@@ -53,7 +58,7 @@ If you need to specify custom Babel configuration, you can pass them to `babelOp
 {
   "presets": [
     [
-      "@griffel/babel",
+      "@griffel",
       {
         "babelOptions": {
           "plugins": ["@babel/plugin-proposal-class-static-block"],
@@ -71,7 +76,7 @@ If you need to specify custom Babel configuration, you can pass them to `babelOp
 {
   "presets": [
     [
-      "@griffel/babel",
+      "@griffel",
       {
         "evaluationRules": []
       }
@@ -97,11 +102,11 @@ The default setup is:
 module.exports = {
   presets: [
     [
-      '@griffel/babel',
+      '@griffel',
       {
         evaluationRules: [
           {
-            action: require('@linaria/shaker').default,
+            action: require('@griffel/babel-preset').shakerEvaluator,
           },
           {
             test: /[/\\]node_modules[/\\]/,
@@ -116,7 +121,7 @@ module.exports = {
 
 ## Transforms
 
-This preset is designed to perform build time transforms for `@griffel/react`, it supports both ES modules and CommonJS thus can be used in post processing after TypeScript, for example.
+This preset is designed to perform build time transforms for `@griffel/react`, it supports both ES modules and CommonJS, thus can be used in post-processing after TypeScript, for example.
 
 Transforms applied by this preset allow stripping runtime part of `makeStyles()` and improve performance.
 
@@ -145,37 +150,25 @@ const useStyles = __styles(/* resolved styles */);
 This section focuses mainly on troubleshooting this babel preset in the [microsoft/fluentui](https://github.com/microsoft/fluentui) repo.
 However, the concepts are not coupled to the repo setup.
 
-### Linaria
+### Module evaluation
 
 The preset uses tools from [linaria](https://github.com/callstack/linaria) to evaluate runtime calls of `makeStyles`.
-[Linaria's debugging documentation can help here](https://github.com/callstack/linaria/blob/master/CONTRIBUTING.md#debugging-and-deep-dive-into-babel-plugin). Here are a few examples with building packages with linaria debug output.
+[Linaria's debugging documentation can help here](https://github.com/callstack/linaria/blob/master/CONTRIBUTING.md#debugging-and-deep-dive-into-babel-plugin).
 
-Directly from the package
+Debugging output can be activated with following environment variables:
 
 ```sh
 $ DEBUG=linaria\* LINARIA_LOG=debug yarn build
 ```
 
-Using Lage from the root of the repo
-
-```sh
-$ DEBUG=linaria\* LINARIA_LOG=debug yarn lage build --to <package-name>
-```
-
-Using `yarn workspace` from the root of the repo
-
-```sh
-$ DEBUG=linaria\* LINARIA_LOG=debug yarn workspace <package-name> build
-```
-
 On Windows it's required to set environment variables via [`set`](https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/set_1) or you can use `cross-env`, for example:
 
 ```sh
-$ yarn cross-env DEBUG=linaria\* LINARIA_LOG=debug yarn workspace <package-name> build
+$ cross-env DEBUG=linaria\* LINARIA_LOG=debug yarn build
 ```
 
 The debug output will include:
 
-- Transformed code
+- Prepared code
 - Evaluated code
 - AST that indicates what code has been shaken with `@linaria/shaker`
diff --git a/packages/babel-preset/src/index.ts b/packages/babel-preset/src/index.ts
index 889e24e..0342daf 100644
--- a/packages/babel-preset/src/index.ts
+++ b/packages/babel-preset/src/index.ts
@@ -3,12 +3,13 @@ import { transformPlugin } from './transformPlugin';
 import type { ConfigAPI } from '@babel/core';
 import type { BabelPluginOptions } from './types';
 
+export { default as shakerEvaluator } from '@linaria/shaker';
 export { configSchema } from './schema';
 
 export type { Evaluator, EvalRule } from '@linaria/babel-preset';
 export type { BabelPluginOptions };
 
-export default function linaria(babel: ConfigAPI, options: BabelPluginOptions) {
+export default function griffelPreset(babel: ConfigAPI, options: BabelPluginOptions) {
   return {
     plugins: [[transformPlugin, options]],
   };
diff --git a/packages/core/src/renderer/createDOMRenderer.ts b/packages/core/src/renderer/createDOMRenderer.ts
index 48cb05e..ead0828 100644
--- a/packages/core/src/renderer/createDOMRenderer.ts
+++ b/packages/core/src/renderer/createDOMRenderer.ts
@@ -5,7 +5,14 @@ let lastIndex = 0;
 
 export interface CreateDOMRendererOptions {
   /**
-   * A filter run before css rule insertion to systematically remove css rules at render time.
+   * A map of attributes that's passed to the generated style elements. Is useful to set "nonce" attribute.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+   */
+  styleElementAttributes?: Record<string, string>;
+
+  /**
+   * A filter run before CSS rule insertion to systematically remove CSS rules at render time.
    * This can be used to forbid specific rules from being written to the style sheet at run time without
    * affecting build time styles.
    *
@@ -35,7 +42,9 @@ export function createDOMRenderer(
       // eslint-disable-next-line guard-for-in
       for (const styleBucketName in cssRules) {
         const cssRulesForBucket = cssRules[styleBucketName as StyleBucketName]!;
-        const sheet = target && getStyleSheetForBucket(styleBucketName as StyleBucketName, target, renderer);
+        const sheet =
+          target &&
+          getStyleSheetForBucket(styleBucketName as StyleBucketName, target, renderer, options.styleElementAttributes);
 
         // 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++) {
diff --git a/packages/core/src/renderer/getStyleSheetForBucket.ts b/packages/core/src/renderer/getStyleSheetForBucket.ts
index 1783542..9e59742 100644
--- a/packages/core/src/renderer/getStyleSheetForBucket.ts
+++ b/packages/core/src/renderer/getStyleSheetForBucket.ts
@@ -35,6 +35,7 @@ export function getStyleSheetForBucket(
   bucketName: StyleBucketName,
   target: Document,
   renderer: GriffelRenderer,
+  elementAttributes: Record<string, string> = {},
 ): CSSStyleSheet {
   if (!renderer.styleElements[bucketName]) {
     let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
@@ -52,8 +53,12 @@ export function getStyleSheetForBucket(
     const tag = target.createElement('style');
 
     tag.dataset['makeStylesBucket'] = bucketName;
-    renderer.styleElements[bucketName] = tag;
 
+    for (const attribute in elementAttributes) {
+      tag.setAttribute(attribute, elementAttributes[attribute]);
+    }
+
+    renderer.styleElements[bucketName] = tag;
     target.head.insertBefore(tag, nextBucketFromCache);
   }
 
diff --git a/packages/jest-serializer/README.md b/packages/jest-serializer/README.md
index 4a7df50..b073d06 100644
--- a/packages/jest-serializer/README.md
+++ b/packages/jest-serializer/README.md
@@ -22,7 +22,7 @@ module.exports = {
 
 ## Overview
 
-When using Jest snapshot testing with components that use `@fluentui/make-styles`, classes will be
+When using Jest snapshot testing with components that use `@griffel/react`, classes will be
 rendered as such:
 
 ```html
diff --git a/packages/jest-serializer/src/index.ts b/packages/jest-serializer/src/index.ts
index 6fa6006..ffb2448 100644
--- a/packages/jest-serializer/src/index.ts
+++ b/packages/jest-serializer/src/index.ts
@@ -52,13 +52,13 @@ export function test(val: unknown) {
 }
 
 /**
- * lookupRegex returns all classNames definitions
- * that were generated by make-styles in a single regex declaration
+ * lookupRegex returns all classNames definitions hat were generated by Griffel
+ * in a single regex declaration
+ *
  * @example
  * const useStyles = makeStyles({display: { display: 'none' } });
  *
  * lookupRegex() // /(__1qdh4ig)/g
- *
  */
 function lookupRegex(): RegExp | undefined {
   const definitionKeys = Object.keys(DEFINITION_LOOKUP_TABLE);
diff --git a/packages/react/README.md b/packages/react/README.md
index 4d2616f..0587d98 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -133,6 +133,40 @@ function App() {
 }
 ```
 
+## `createDOMRenderer()`, `RendererProvider`
+
+`createDOMRenderer` is paired with `RendererProvider` component and is useful for child window rendering and SSR scenarios. This is the default renderer for web, and will make sure that styles are injected to a document.
+
+```jsx
+import { createDOMRenderer, RendererProvider } from '@griffel/react';
+
+function App(props) {
+  const { targetDocument } = props;
+  const renderer = React.useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);
+
+  return (
+    <RendererProvider renderer={renderer} targetDocument={targetDocument}>
+      {/* Children components */}
+      {/* ... */}
+    </RendererProvider>
+  );
+}
+```
+
+### styleElementAttributes
+
+A map of attributes that's passed to the generated style elements. For example, is useful to set ["nonce" attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce).
+
+```js
+import { createDOMRenderer } from '@griffel/react';
+
+const renderer = createDOMRenderer(targetDocument, {
+  styleElementAttributes: {
+    nonce: 'random',
+  },
+});
+```
+
 ## Features support
 
 ### 📃 pseudo & class selectors, at-rules, global styles
diff --git a/packages/webpack-loader/README.md b/packages/webpack-loader/README.md
index a3a5ae6..a2e54b2 100644
--- a/packages/webpack-loader/README.md
+++ b/packages/webpack-loader/README.md
@@ -10,24 +10,167 @@ yarn add --dev @griffel/webpack-loader
 npm install --dev @griffel/webpack-loader
 ```
 
+## When to use it?
+
+- For library developers, please use [`@griffel/babel-preset`](../babel-preset)
+- For application developers, please use Webpack loader (this package)
+
 ## Usage
 
 Webpack documentation: [Loaders](https://webpack.js.org/loaders/)
 
 Within your webpack configuration object, you'll need to add the `@griffel/webpack-loader` to the list of modules, like so:
 
-```javascript
-module: {
-  rules: [
-    {
-      test: /\.(ts|tsx)$/,
-      exclude: /node_modules/,
-      use: {
-        loader: '@griffel/webpack-loader',
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+        },
+      },
+    ],
+  },
+};
+```
+
+While the loader itself has a short circuit to avoid processing (invoking Babel transforms) it's better to reduce the scope of processed files. For example, you can enforce a restriction to have `makeStyles()` calls only in `.styles.ts` files:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.styles.ts$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+        },
+      },
+    ],
+  },
+};
+```
+
+### Handling Griffel re-exports
+
+```js
+import { makeStyles } from 'custom-package';
+// 👇 custom import names are also supported
+import { createStyles } from 'custom-package';
+```
+
+By default, the Webpack loader handles imports from `@griffel/react`. The webpack loader can be re-configured to handle re-exports of Griffel from custom packages. The `makeStyles` function itself can also be renamed in this case.
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+          options: {
+            modules: [{ moduleSource: 'custom-package', importName: 'makeStyles' }],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+> **Note**: "custom-package" should re-export `__styles` function from `@griffel/react`
+
+### Configuring Babel settings
+
+If you need to specify custom Babel configuration, you can pass them to `babelOptions`. These options will be used by the Webpack loader when parsing and evaluating modules.
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+          options: {
+            babelOptions: {
+              plugins: ['@babel/plugin-proposal-class-static-block'],
+              presets: ['@babel/preset-typescript'],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+### Configuring module evaluation
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+          options: {
+            evaluationRules: [],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+The set of rules that defines how the matched files will be transformed during the evaluation. `EvalRule` is an object with two fields:
+
+- test is a regular expression or a function `(path: string) => boolean`
+- action is an `Evaluator` function, "ignore" or a name of the module that exports `Evaluator` function as a **default** export
+
+_If `test` is omitted, the rule is applicable for all the files._
+
+The last matched rule is used for transformation. If the last matched action for a file is "ignore" the file will be evaluated as is, so that file must not contain any js code that cannot be executed in nodejs environment (it's usually true for any lib in `node_modules`).
+
+If you need to compile certain modules under `/node_modules/` (which can be the case in monorepo projects), it's recommended to do it on a module by module basis for faster transforms, e.g. ignore: `/node_modules[\/\\](?!some-module|other-module)/`.
+
+The default setup is:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+          options: {
+            evaluationRules: [
+              {
+                action: require('@griffel/babel-preset').shakerEvaluator,
+              },
+              {
+                test: /[/\\]node_modules[/\\]/,
+                action: 'ignore',
+              },
+            ],
+          },
+        },
       },
-    },
-  ];
-}
+    ],
+  },
+};
 ```
 
 ## Troubleshooting
diff --git a/packages/webpack-loader/src/transformSync.ts b/packages/webpack-loader/src/transformSync.ts
index 7725bed..4709d17 100644
--- a/packages/webpack-loader/src/transformSync.ts
+++ b/packages/webpack-loader/src/transformSync.ts
@@ -22,7 +22,7 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr
   // Parse the code first so Babel will use user's babel config for parsing
   // During transforms we don't want to use user's config
   const babelAST = Babel.parseSync(sourceCode, {
-    caller: { name: 'make-styles' },
+    caller: { name: 'griffel' },
 
     filename: options.filename,
     inputSourceMap: options.inputSourceMap,
diff --git a/packages/webpack-loader/src/webpackLoader.ts b/packages/webpack-loader/src/webpackLoader.ts
index bb4a054..11388c7 100644
--- a/packages/webpack-loader/src/webpackLoader.ts
+++ b/packages/webpack-loader/src/webpackLoader.ts
@@ -50,7 +50,7 @@ export function webpackLoader(
   const options = getOptions(this) as WebpackLoaderOptions;
 
   validate(configSchema, options, {
-    name: '@fluentui/make-styles-webpack-loader',
+    name: '@griffel/webpack-loader',
     baseDataPath: 'options',
   });
 


Test patch:
diff --git a/packages/core/src/renderer/createDOMRenderer.test.ts b/packages/core/src/renderer/createDOMRenderer.test.ts
index 48b8a4f..b2a3aef 100644
--- a/packages/core/src/renderer/createDOMRenderer.test.ts
+++ b/packages/core/src/renderer/createDOMRenderer.test.ts
@@ -49,4 +49,36 @@ describe('createDOMRenderer', () => {
       }
     `);
   });
+
+  it('applies custom attributes to elements', () => {
+    const renderer = createDOMRenderer(document, {
+      styleElementAttributes: {
+        'foo-bar': 'baz',
+        nonce: 'random',
+      },
+    });
+
+    // CSS rules are redundant for this test, but they are necessary as they trigger style nodes creation
+    const cssRules: CSSRulesByBucket = {
+      d: ['.foo { color: red; }'],
+      h: ['.foo:hover { color: blue; }'],
+    };
+
+    renderer.insertCSSRules(cssRules);
+
+    expect(document.head.children).toMatchInlineSnapshot(`
+      HTMLCollection [
+        <style
+          data-make-styles-bucket="d"
+          foo-bar="baz"
+          nonce="random"
+        />,
+        <style
+          data-make-styles-bucket="h"
+          foo-bar="baz"
+          nonce="random"
+        />,
+      ]
+    `);
+  });
 });
diff --git a/packages/jest-serializer/src/index.test.tsx b/packages/jest-serializer/src/index.test.tsx
index bad0e51..20040eb 100644
--- a/packages/jest-serializer/src/index.test.tsx
+++ b/packages/jest-serializer/src/index.test.tsx
@@ -30,7 +30,7 @@ const TestComponent: React.FC<{ id?: string }> = ({ id }) => {
 
 const RtlWrapper: React.FC = ({ children }) => <TextDirectionProvider dir="rtl">{children}</TextDirectionProvider>;
 
-describe('jest-serializer-make-styles', () => {
+describe('serializer', () => {
   it('should check styles', () => {
     expect(render(<TestComponent id="test" />).getByTestId('test')).toHaveStyle({
       display: 'none',
diff --git a/packages/webpack-loader/src/webpackLoader.test.ts b/packages/webpack-loader/src/webpackLoader.test.ts
index c99f357..4e260b8 100644
--- a/packages/webpack-loader/src/webpackLoader.test.ts
+++ b/packages/webpack-loader/src/webpackLoader.test.ts
@@ -201,7 +201,7 @@ describe('shouldTransformSourceCode', () => {
 });
 
 describe('webpackLoader', () => {
-  // Integration fixtures for base functionality, all scenarios are tested in "babel-make-styles"
+  // Integration fixtures for base functionality, all scenarios are tested in "@griffel/babel-preset"
   testFixture('object');
   testFixture('function');