Repository: microsoft/griffel
Pull request #83 (2022-03-22 15:30:29)

docs: improve README for Webpack loader
This PR updates README for `@griffel/webpack-loader` to include configuration guide for Webpack loader.


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-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..9740d2b 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,7 +102,7 @@ The default setup is:
 module.exports = {
   presets: [
     [
-      '@griffel/babel',
+      '@griffel',
       {
         evaluationRules: [
           {
@@ -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.
 
diff --git a/packages/babel-preset/src/index.ts b/packages/babel-preset/src/index.ts
index 889e24e..f9dcccf 100644
--- a/packages/babel-preset/src/index.ts
+++ b/packages/babel-preset/src/index.ts
@@ -8,7 +8,7 @@ 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');