Enchance to add @layer components at-rule in CSS post-processing

packages/bezier-react/package.json

@@ -106,7 +106,9 @@
     "identity-obj-proxy": "^3.0.0",
     "jest-styled-components": "^7.1.1",
     "lightningcss": "^1.22.1",
+    "minimatch": "^9.0.3",
     "paths.macro": "^3.0.1",
+    "postcss": "^8.4.33",
     "postcss-preset-env": "^9.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/bezier-react/postcss-auto-layer.mjs

@@ -0,0 +1,27 @@
+import { minimatch } from 'minimatch'
+
+/**
+ * @typedef {Object} Options
+ * @property {string} name The name of the layer.
+ * @property {string} path The path to the file to wrap in a layer.
+ */
+
+/**
+ * PostCSS plugin to automatically wrap the root node in a CSS layer at rule.
+ * @type {import('postcss').PluginCreator<Options>}
+ */
+const postcssAutoLayer = (opts = {}) => ({
+  postcssPlugin: 'postcss-auto-layer',
+  Once(root, { result, AtRule }) {
+    const filePath = result.opts.from
+    if (filePath && minimatch(filePath, opts.path)) {
+      const layer = new AtRule({ name: 'layer', params: opts.name })
+      root.nodes.forEach(node => { layer.append(node.clone()) })
+      root.removeAll().append(layer)
+    }
+  },
+})
+
+postcssAutoLayer.postcss = true
+
+export default postcssAutoLayer

packages/bezier-react/rollup.config.mjs

@@ -16,6 +16,8 @@ import nodeExternals from 'rollup-plugin-node-externals'
 import postcss from 'rollup-plugin-postcss'
 import { visualizer } from 'rollup-plugin-visualizer'
 
+import postcssAutoLayer from './postcss-auto-layer.mjs'
+
 const pkg = JSON.parse(
   readFileSync(fileURLToPath(new URL('./package.json', import.meta.url))),
 )
@@ -78,6 +80,10 @@ const generateConfig = ({
       plugins: [
         autoprefixer(),
         postcssPresetEnv(),
+        postcssAutoLayer({
+          name: 'components',
+          path: '**/components/**/*.module.scss',
+        }),
       ],
     }),
     /**

packages/bezier-react/src/components/Avatars/Avatar/Avatar.module.scss

@@ -1,87 +1,85 @@
-@layer components {
-  .Avatar {
-    position: relative;
-    display: block;
-    flex: none;
+.Avatar {
+  position: relative;
+  display: block;
+  flex: none;
 
-    &:where(.disabled) {
-      pointer-events: none;
-      opacity: var(--opacity-disabled);
-    }
+  &:where(.disabled) {
+    pointer-events: none;
+    opacity: var(--opacity-disabled);
+  }
 
-    &:where(.size-20) {
-      width: 20px;
-      height: 20px;
-    }
+  &:where(.size-20) {
+    width: 20px;
+    height: 20px;
+  }
 
-    &:where(.size-24) {
-      width: 24px;
-      height: 24px;
-    }
+  &:where(.size-24) {
+    width: 24px;
+    height: 24px;
+  }
 
-    &:where(.size-30) {
-      width: 30px;
-      height: 30px;
-    }
+  &:where(.size-30) {
+    width: 30px;
+    height: 30px;
+  }
 
-    &:where(.size-36) {
-      width: 36px;
-      height: 36px;
-    }
+  &:where(.size-36) {
+    width: 36px;
+    height: 36px;
+  }
 
-    &:where(.size-42) {
-      width: 42px;
-      height: 42px;
-    }
+  &:where(.size-42) {
+    width: 42px;
+    height: 42px;
+  }
 
-    &:where(.size-48) {
-      width: 48px;
-      height: 48px;
-    }
+  &:where(.size-48) {
+    width: 48px;
+    height: 48px;
+  }
 
-    &:where(.size-72) {
-      width: 72px;
-      height: 72px;
-    }
+  &:where(.size-72) {
+    width: 72px;
+    height: 72px;
+  }
 
-    &:where(.size-90) {
-      width: 90px;
-      height: 90px;
-    }
+  &:where(.size-90) {
+    width: 90px;
+    height: 90px;
+  }
 
-    &:where(.size-120) {
-      width: 120px;
-      height: 120px;
-    }
+  &:where(.size-120) {
+    width: 120px;
+    height: 120px;
   }
+}
 
-  .AvatarImage {
-    --b-avatar-status-gap: -2px;
-    --b-avatar-computed-status-gap: var(--b-avatar-status-gap);
+.AvatarImage {
+  --b-avatar-status-gap: -2px;
+  --b-avatar-computed-status-gap: var(--b-avatar-status-gap);
 
-    position: relative;
-    box-sizing: content-box;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    outline: none;
-
-    &:where(.big-size) {
-      --b-avatar-status-gap: 4px;
-    }
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  outline: none;
 
-    &:where(.bordered[data-state="enabled"]) {
-      --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius)));
-    }
+  &:where(.big-size) {
+    --b-avatar-status-gap: 4px;
   }
 
-  .StatusWrapper {
-    position: absolute;
-    right: var(--b-avatar-computed-status-gap);
-    bottom: var(--b-avatar-computed-status-gap);
-    display: flex;
+  &:where(.bordered[data-state="enabled"]) {
+    --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius)));
   }
 }
+
+.StatusWrapper {
+  position: absolute;
+  right: var(--b-avatar-computed-status-gap);
+  bottom: var(--b-avatar-computed-status-gap);
+  display: flex;
+}

packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.module.scss

@@ -1,82 +1,80 @@
-@layer components {
-  .AvatarGroup {
-    --b-avatar-group-spacing: 0;
-    --b-avatar-group-size: 0;
-
-    position: relative;
-    z-index: var(--z-index-base);
-    display: flex;
-
-    & > * + * {
-      margin-left: var(--b-avatar-group-spacing);
-    }
-  }
+.AvatarGroup {
+  --b-avatar-group-spacing: 0;
+  --b-avatar-group-size: 0;
 
-  .AvatarEllipsisIconWrapper {
-    position: relative;
-  }
+  position: relative;
+  z-index: var(--z-index-base);
+  display: flex;
 
-  .AvatarEllipsisIcon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: var(--z-index-floating);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    outline: none;
+  & > * + * {
+    margin-left: var(--b-avatar-group-spacing);
   }
+}
 
-  .AvatarEllipsisCountWrapper {
-    --b-avatar-group-ellipsis-pr: 0;
-    --b-avatar-group-ellipsis-ml: 0;
+.AvatarEllipsisIconWrapper {
+  position: relative;
+}
 
-    &:where(.size-20) {
-      --b-avatar-group-ellipsis-pr: 4px;
-    }
+.AvatarEllipsisIcon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: var(--z-index-floating);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  outline: none;
+}
 
-    &:where(.size-24) {
-      --b-avatar-group-ellipsis-pr: 5px;
-    }
+.AvatarEllipsisCountWrapper {
+  --b-avatar-group-ellipsis-pr: 0;
+  --b-avatar-group-ellipsis-ml: 0;
 
-    &:where(.size-30) {
-      --b-avatar-group-ellipsis-pr: 6px;
-    }
+  &:where(.size-20) {
+    --b-avatar-group-ellipsis-pr: 4px;
+  }
 
-    &:where(.size-36) {
-      --b-avatar-group-ellipsis-pr: 6px;
-    }
+  &:where(.size-24) {
+    --b-avatar-group-ellipsis-pr: 5px;
+  }
 
-    &:where(.size-42) {
-      --b-avatar-group-ellipsis-pr: 6px;
-    }
+  &:where(.size-30) {
+    --b-avatar-group-ellipsis-pr: 6px;
+  }
 
-    &:where(.size-48) {
-      --b-avatar-group-ellipsis-pr: 6px;
-    }
+  &:where(.size-36) {
+    --b-avatar-group-ellipsis-pr: 6px;
+  }
 
-    &:where(.size-72) {
-      --b-avatar-group-ellipsis-pr: 6px;
-    }
+  &:where(.size-42) {
+    --b-avatar-group-ellipsis-pr: 6px;
+  }
 
-    &:where(.size-90) {
-      --b-avatar-group-ellipsis-pr: 6px;
-    }
+  &:where(.size-48) {
+    --b-avatar-group-ellipsis-pr: 6px;
+  }
 
-    &:where(.size-120) {
-      --b-avatar-group-ellipsis-pr: 6px;
-    }
+  &:where(.size-72) {
+    --b-avatar-group-ellipsis-pr: 6px;
+  }
 
-    padding-right: var(--b-avatar-group-ellipsis-pr);
-    margin-left: var(--b-avatar-group-ellipsis-ml);
+  &:where(.size-90) {
+    --b-avatar-group-ellipsis-pr: 6px;
   }
 
-  .AvatarEllipsisCount {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--b-avatar-group-size);
+  &:where(.size-120) {
+    --b-avatar-group-ellipsis-pr: 6px;
   }
+
+  padding-right: var(--b-avatar-group-ellipsis-pr);
+  margin-left: var(--b-avatar-group-ellipsis-ml);
+}
+
+.AvatarEllipsisCount {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--b-avatar-group-size);
 }

packages/bezier-react/src/components/Box/Box.module.scss

@@ -1,17 +1,15 @@
-@layer components {
-  .Box {
-    box-sizing: border-box;
+.Box {
+  box-sizing: border-box;
 
-    &:where(.display-block) {
-      display: block;
-    }
+  &:where(.display-block) {
+    display: block;
+  }
 
-    &:where(.display-inline-block) {
-      display: inline-block;
-    }
+  &:where(.display-inline-block) {
+    display: inline-block;
+  }
 
-    &:where(.display-inline) {
-      display: inline;
-    }
+  &:where(.display-inline) {
+    display: inline;
   }
 }