chore(deps-dev): bump prettier 2 → 3 (#875)

* chore(deps-dev): bump prettier 2 → 3

prettier 3.x is async-only (prettier.format returns a Promise). With
@griffel/* packages now on vitest, the runtime can handle async matchers
natively, so:

- Bump root prettier from 2.8.2 to 3.8.3 (and drop @types/prettier;
  prettier 3 ships its own types)
- Add @griffel/core's new async \`toMatchFormattedInlineSnapshot\` matcher
  in packages/core/src/common/snapshotMatchers.ts. Accepts a renderer,
  a [classMap, rulesByBucket] tuple from resolveStyleRules, an array
  from resolveResetStyleRules, or a raw CSS string; awaits prettier 3
  formatting before delegating to vitest's toMatchInlineSnapshot
- Delete packages/core/src/common/snapshotSerializers.ts (the prettier-
  sync-based snapshot serializers)
- Convert 8 core test files (makeStyles/makeResetStyles/makeStaticStyles/
  resolveStyleRules{,.scope}/resolveResetStyleRules{,.scope}/
  createDOMRenderer) to use the new async matcher
- Replace the sync \`cssSerializer\`/HTML serializer pattern in 5 other
  test files with explicit async \`formatCss\`/\`formatHtml\` helpers
- Add \`await\` to direct prettier.format() calls in 3 webpack-related
  test files

One snapshot (resolveStyleRules \`boxShadow with multiple values\`) reflects
prettier 3's new line-wrapping for multi-value box-shadow — formatting only,
no logic change.

babel-plugin-tester callers (babel-preset/transformPlugin.test.ts and
webpack-extraction-plugin/babelPluginStripGriffelRuntime.test.ts) are
unchanged — babel-plugin-tester v12 already handles prettier 3 internally.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Change files

---------

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

change/@griffel-core-7941f1cb-e2e7-4833-a57e-4466ee1d7ed2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: bump prettier from 2.8.2 to 3.8.3",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-webpack-plugin-f182ce10-286c-4dac-89e9-54526eb8764c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: bump prettier from 2.8.2 to 3.8.3",
+  "packageName": "@griffel/webpack-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

e2e/utils/src/compareSnapshots.ts

@@ -8,8 +8,8 @@ type CompareSnapshotsOptions = {
   resultFile: string;
 };
 
-function formatCSS(css: string): string {
-  return prettier.format(css, { parser: 'css' }).trim();
+async function formatCSS(css: string): Promise<string> {
+  return (await prettier.format(css, { parser: 'css' })).trim();
 }
 
 export async function compareSnapshots(options: CompareSnapshotsOptions): Promise<void> {
@@ -18,9 +18,9 @@ export async function compareSnapshots(options: CompareSnapshotsOptions): Promis
   const resultContentRaw = await fs.promises.readFile(resultFile, 'utf8');
   // Remove meta info added by Rspack
   const resultContentCleaned = resultContentRaw.replace(/head{--webpack-rspack-(\d+)-(\w+)-(\d+):&_(\d+);}/, '');
-  const resultContent = formatCSS(resultContentCleaned);
+  const resultContent = await formatCSS(resultContentCleaned);
 
-  const snapshotContent = formatCSS(await fs.promises.readFile(snapshotFile, 'utf8'));
+  const snapshotContent = await formatCSS(await fs.promises.readFile(snapshotFile, 'utf8'));
 
   const diff = snapshotDiff(snapshotContent, resultContent, {
     colors: true,

package.json

@@ -94,7 +94,6 @@
     "@types/js-beautify": "^1.14.3",
     "@types/mini-css-extract-plugin": "2.5.1",
     "@types/node": "25.6.0",
-    "@types/prettier": "2.7.3",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@types/stylis": "4.2.7",
@@ -131,7 +130,7 @@
     "nano-staged": "~1.0.2",
     "nx": "22.7.1",
     "playwright": "^1.59.1",
-    "prettier": "2.8.2",
+    "prettier": "3.8.3",
     "prism-react-renderer": "2.4.1",
     "raw-loader": "4.0.2",
     "react": "19.2.5",

packages/core/src/common/snapshotMatchers.ts

@@ -0,0 +1,110 @@
+import { expect, chai, Snapshots } from 'vitest';
+import * as prettier from 'prettier';
+
+import { DATA_BUCKET_ATTR } from '../constants.js';
+import type { resolveStyleRules } from '../runtime/resolveStyleRules.js';
+import { normalizeCSSBucketEntry } from '../runtime/utils/normalizeCSSBucketEntry.js';
+import type { CSSRulesByBucket, GriffelRenderer } from '../types.js';
+import type { resolveResetStyleRules } from '../runtime/resolveResetStyleRules.js';
+
+const { toMatchInlineSnapshot } = Snapshots;
+
+// eslint-disable-next-line eqeqeq
+const isObject = (value: unknown) => value != null && !Array.isArray(value) && typeof value === 'object';
+
+type StyleRulesTuple = ReturnType<typeof resolveStyleRules>;
+type ResetStyleRulesTuple = ReturnType<typeof resolveResetStyleRules>;
+
+const isRenderer = (value: unknown): value is GriffelRenderer =>
+  isObject(value) && isObject((value as GriffelRenderer).stylesheets);
+const isStyleRulesTuple = (value: unknown): value is StyleRulesTuple =>
+  Array.isArray(value) && value.length === 2 && !Array.isArray(value[0]);
+
+function rendererToCSS(renderer: GriffelRenderer): string {
+  const stylesheetKeys = Object.keys(renderer.stylesheets) as (keyof (typeof renderer)['stylesheets'])[];
+
+  const rules = stylesheetKeys.reduce((acc, styleEl) => {
+    const stylesheet = renderer.stylesheets[styleEl];
+
+    if (stylesheet) {
+      const cssRules = stylesheet.cssRules() ?? ([] as string[]);
+      const attributes = Object.entries(stylesheet.elementAttributes).filter(([key]) => key !== DATA_BUCKET_ATTR);
+
+      if (cssRules.length === 0) {
+        return acc;
+      }
+
+      return [
+        ...acc,
+        `/** bucket "${styleEl.slice(0, 1)}"${
+          attributes.length > 0 ? ' ' + JSON.stringify(Object.fromEntries(attributes)) : ''
+        } **/`,
+        ...cssRules,
+      ];
+    }
+
+    return acc;
+  }, [] as string[]);
+
+  return rules.join('\n');
+}
+
+function styleRulesToCSS(value: StyleRulesTuple): string {
+  const cssRulesByBucket = value[1];
+  const keys = Object.keys(cssRulesByBucket) as (keyof typeof cssRulesByBucket)[];
+
+  return keys
+    .flatMap(styleBucketName => cssRulesByBucket[styleBucketName]!.map(entry => normalizeCSSBucketEntry(entry)[0]))
+    .join('\n');
+}
+
+function resetStyleRulesToCSS(value: ResetStyleRulesTuple): string {
+  const cssRulesByBucket: CSSRulesByBucket = Array.isArray(value[2]) ? { r: value[2] } : value[2];
+
+  return Object.entries(cssRulesByBucket)
+    .filter(([, rules]) => rules.length > 0)
+    .flatMap(([key, rules]) => [`/** bucket "${key}" */`, (rules as string[]).join('\n')])
+    .join('\n');
+}
+
+function toRawCSS(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (isRenderer(value)) {
+    return rendererToCSS(value);
+  }
+  if (isStyleRulesTuple(value)) {
+    return styleRulesToCSS(value);
+  }
+  if (Array.isArray(value)) {
+    return resetStyleRulesToCSS(value as ResetStyleRulesTuple);
+  }
+  throw new Error(`toMatchFormattedInlineSnapshot: unsupported value type "${typeof value}"`);
+}
+
+expect.extend({
+  async toMatchFormattedInlineSnapshot(received: unknown, inlineSnapshot?: string) {
+    // Capture the call site synchronously so vitest reports the right location on failure.
+    // Must set the flag on this.assertion (the Chai assertion object) because toMatchInlineSnapshot
+    // reads the error via chai.util.flag(assertion, 'error') where assertion = this.assertion.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    chai.util.flag((this as any).assertion, 'error', new Error());
+
+    const rawCSS = toRawCSS(received);
+    const formatted = (await prettier.format(rawCSS, { parser: 'css' })).trim();
+
+    return toMatchInlineSnapshot.call(this, formatted, inlineSnapshot);
+  },
+});
+
+interface CustomMatchers<R = unknown> {
+  toMatchFormattedInlineSnapshot(inlineSnapshot?: string): R;
+}
+
+declare module 'vitest' {
+  /* eslint-disable @typescript-eslint/no-empty-object-type, @typescript-eslint/no-empty-interface, @typescript-eslint/no-explicit-any */
+  interface Assertion<T = any> extends CustomMatchers<T> {}
+  interface AsymmetricMatchersContaining extends CustomMatchers {}
+  /* eslint-enable @typescript-eslint/no-empty-object-type, @typescript-eslint/no-empty-interface, @typescript-eslint/no-explicit-any */
+}

packages/core/src/common/snapshotSerializers.ts

@@ -1,11 +1,9 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { griffelRendererSerializer } from './common/snapshotSerializers.js';
+import './common/snapshotMatchers.js';
 import { createDOMRenderer } from './renderer/createDOMRenderer.js';
 import { makeResetStyles } from './makeResetStyles.js';
 import type { GriffelRenderer } from './types.js';
 
-expect.addSnapshotSerializer(griffelRendererSerializer);
-
 describe('makeResetStyles', () => {
   let renderer: GriffelRenderer;
 
@@ -18,50 +16,50 @@ describe('makeResetStyles', () => {
     document.head.innerHTML = '';
   });
 
-  it('returns a single classname for a single style', () => {
+  it('returns a single classname for a single style', async () => {
     const computeClassName = makeResetStyles({
       color: 'red',
       flexDirection: 'row',
     });
 
     expect(computeClassName({ dir: 'ltr', renderer })).toEqual('r7lmmpp');
-    expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "r" {"data-priority":"0"} **/
+    await expect(renderer).toMatchFormattedInlineSnapshot(`
+      "/** bucket "r" {"data-priority":"0"} **/
       .r7lmmpp {
         color: red;
         flex-direction: row;
-      }
+      }"
     `);
   });
 
-  it('handles RTL', () => {
+  it('handles RTL', async () => {
     const computeClassName = makeResetStyles({
       padding: '40px 20px 10px 5px',
     });
 
     expect(computeClassName({ dir: 'ltr', renderer })).toEqual('rgb6zd6');
     expect(computeClassName({ dir: 'rtl', renderer })).toEqual('rjhindo');
 
-    expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "r" {"data-priority":"0"} **/
+    await expect(renderer).toMatchFormattedInlineSnapshot(`
+      "/** bucket "r" {"data-priority":"0"} **/
       .rgb6zd6 {
         padding: 40px 20px 10px 5px;
       }
       .rjhindo {
         padding: 40px 5px 10px 20px;
-      }
+      }"
     `);
   });
 
-  it('handles at rules', () => {
+  it('handles at rules', async () => {
     const computeClassName = makeResetStyles({
       color: 'red',
       '@media (min-width: 100px)': { color: 'blue' },
     });
 
     expect(computeClassName({ dir: 'ltr', renderer })).toEqual('rbwcbv2');
-    expect(renderer).toMatchInlineSnapshot(`
-      /** bucket "r" {"data-priority":"0"} **/
+    await expect(renderer).toMatchFormattedInlineSnapshot(`
+      "/** bucket "r" {"data-priority":"0"} **/
       .rbwcbv2 {
         color: red;
       }
@@ -70,7 +68,7 @@ describe('makeResetStyles', () => {
         .rbwcbv2 {
           color: blue;
         }
-      }
+      }"
     `);
   });