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

…1887)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

- Fixes #1884

## Summary
<!-- Please brief explanation of the changes made -->

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

## Details
<!-- Please elaborate description of the changes -->

- 커스텀 PostCSS plugin을 통해 CSS를 갈아끼우는 방식으로 구현했습니다. 구현은 단순합니다.
- 불필요해진 *.module.scss의 `@layer components` at-rule을 제거했습니다.
- `*.module.scss` + `components` 디렉토리 내부에 위치한 파일만 처리하도록 구현했습니다. 여기엔
layout, margin props도 포함되니 이후 디렉터리명 변경에 유의해야합니다.
- 이전/이후 빌드된 CSS 파일이 동일한 것을 확인했습니다.

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

- https://postcss.org/docs/writing-a-postcss-plugin
- 공식 홈페이지는 CJS인데, ESM으로 만들기 위해 참고:
postcss/postcss#1771

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;
   }
 }