feat: add CSS Layer support to Avatar

[joshblack]

Part of https://github.com/github/primer/issues/6275

Adds the initial CSS layer migration test setup and migrates Avatar styles into a named Primer component layer.

Changelog

New

• Adds CSS layer coverage for migrated runtime CSS modules.
• Adds Avatar to the CSS layer migration set.

Changed

• Wraps Avatar CSS module styles in @layer primer.components.Avatar.

Removed

• None

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

• Run cd packages/react && npx vitest run src/__tests__/css-layers.test.ts --config vitest.config.mts.
• Review this PR as part of the CSS layers stack; this entry covers Avatar.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 11a730c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[Copilot]

Pull request overview

Adds initial automated coverage for CSS layer migrations and migrates Avatar’s CSS Module into a named Primer component layer to improve style override behavior and ensure consistent layering as more components migrate.

Changes:

• Added a new css-layers.test.ts and wired it into Vitest so CSS layer migrations can be validated in CI.
• Wrapped Avatar.module.css rules in @layer primer.components.Avatar.
• Added css-tree (+ typings) as a dev dependency to parse CSS for the new test.

Show a summary per file

File	Description
packages/react/vitest.config.mts	Includes the new CSS layers test in the node Vitest run.
packages/react/vitest.config.browser.mts	Excludes the CSS layers test from browser-mode Vitest runs.
packages/react/src/Avatar/Avatar.module.css	Wraps Avatar styles in a named @layer for cascade layer migration.
packages/react/src/__tests__/css-layers.test.ts	New test to enforce presence/naming of CSS layers for allowlisted CSS Modules.
packages/react/package.json	Adds css-tree and @types/css-tree for parsing CSS in tests.
package-lock.json	Lockfile updates for the new dependencies.
.changeset/avatar-css-layer.md	Patch changeset describing the Avatar override behavior improvement.

Copilot's findings

• Files reviewed: 6/7 changed files
• Comments generated: 3

[primer-integration]

Integration test results from github/github-ui PR:

  CI Passed
  VRT Failed
  Projects Passed

VRT check ensures that when visual differences are detected, the PR cannot proceed until someone acknowledges the changes by adding the "visual difference acknowledged" label.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.