refactor(css): update CSS Modules to use CSS Layers

.changeset/happy-dogs-trade.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update CSS files to be wrapper in `primer.*` CSS Layers

packages/react/.storybook/storybook.css

@@ -1,3 +1,5 @@
+@import '../src/layer.css';
+
 .story-wrap {
   font-family: var(--fontStack-system);
   color: var(--fgColor-default);

packages/react/package.json

@@ -32,6 +32,7 @@
   "typings": "dist/index.d.ts",
   "sideEffects": [
     "dist/**/*.css",
+    "src/**/*.css",
     "src/**/test-helpers.tsx",
     "dist/**/test-helpers.js"
   ],
@@ -107,7 +108,6 @@
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
-    "@tanstack/react-virtual": "^3.13.12",
     "@rollup/plugin-babel": "6.1.0",
     "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-json": "6.1.0",
@@ -119,11 +119,13 @@
     "@storybook/addon-links": "^10.1.4",
     "@storybook/icons": "^2.0.1",
     "@storybook/react-vite": "^10.1.4",
+    "@tanstack/react-virtual": "^3.13.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/css-tree": "^2.3.11",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.isempty": "4.4.9",
     "@types/lodash.isobject": "3.0.9",
@@ -149,6 +151,7 @@
     "concurrently": "9.1.2",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
+    "css-tree": "^2.3.1",
     "fast-glob": "3.3.2",
     "filesize": "10.1.6",
     "front-matter": "4.0.2",

packages/react/src/ActionBar/ActionBar.module.css

@@ -1,53 +1,55 @@
-.List {
-  position: relative;
-  display: flex;
-  min-width: 0;
-
-  /* wonder why this is here */
-  /* stylelint-disable-next-line primer/spacing */
-  margin-bottom: -1px;
-  white-space: nowrap;
-  list-style: none;
-  align-items: center;
-  gap: var(--actionbar-gap, var(--stack-gap-condensed));
-
-  /* Gap scale (mirrors Stack) */
-  &:where([data-gap='none']) {
-    --actionbar-gap: 0;
-
-    .Divider {
-      padding: 0 var(--base-size-8);
+@layer primer.components.ActionBar {
+  .List {
+    position: relative;
+    display: flex;
+    min-width: 0;
+
+    /* wonder why this is here */
+    /* stylelint-disable-next-line primer/spacing */
+    margin-bottom: -1px;
+    white-space: nowrap;
+    list-style: none;
+    align-items: center;
+    gap: var(--actionbar-gap, var(--stack-gap-condensed));
+
+    /* Gap scale (mirrors Stack) */
+    &:where([data-gap='none']) {
+      --actionbar-gap: 0;
+
+      .Divider {
+        padding: 0 var(--base-size-8);
+      }
     }
-  }
 
-  &:where([data-gap='condensed']) {
-    --actionbar-gap: var(--stack-gap-condensed);
+    &:where([data-gap='condensed']) {
+      --actionbar-gap: var(--stack-gap-condensed);
+    }
   }
-}
 
-.Nav {
-  display: flex;
-  padding-inline: var(--base-size-16);
-  justify-content: flex-end;
-  align-items: center;
+  .Nav {
+    display: flex;
+    padding-inline: var(--base-size-16);
+    justify-content: flex-end;
+    align-items: center;
 
-  &:where([data-flush='true']) {
-    padding-inline: 0;
+    &:where([data-flush='true']) {
+      padding-inline: 0;
+    }
   }
-}
 
-.Divider {
-  &::before {
-    display: block;
-    width: var(--borderWidth-thin);
-    height: var(--base-size-20);
-    content: '';
-    /* stylelint-disable-next-line primer/colors */
-    background: var(--borderColor-muted);
+  .Divider {
+    &::before {
+      display: block;
+      width: var(--borderWidth-thin);
+      height: var(--base-size-20);
+      content: '';
+      /* stylelint-disable-next-line primer/colors */
+      background: var(--borderColor-muted);
+    }
   }
-}
 
-.Group {
-  display: flex;
-  gap: inherit;
+  .Group {
+    display: flex;
+    gap: inherit;
+  }
 }