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

[sungik-choi]

Self Checklist

• I wrote a PR title in English and added an appropriate label to the PR.
• I wrote the commit message in English and to follow the Conventional Commits specification.
• I added the changeset about the changes that needed to be released. (or didn't have to)
• I wrote or updated documentation related to the changes. (or didn't have to)
• I wrote or updated tests related to the changes. (or didn't have to)
• 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

• Fixes Enchance to add @layer components at-rule in CSS post-processing #1884

Summary

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

Details

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

Breaking change? (Yes/No)

No

References

• https://postcss.org/docs/writing-a-postcss-plugin
• 공식 홈페이지는 CJS인데, ESM으로 만들기 위해 참고: Document how to declare a PostCSS plugin in an ES6/TypeScript module postcss/postcss#1771

[changeset-bot]

⚠️ No Changeset found

Latest commit: 78a6842

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7b4fb30) 86.20% compared to head (78a6842) 86.20%.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #1887   +/-   ##
=======================================
  Coverage   86.20%   86.20%           
=======================================
  Files         254      254           
  Lines        3530     3530           
  Branches      770      770           
=======================================
  Hits         3043     3043           
  Misses        403      403           
  Partials       84       84           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sungik-choi]

PostCSS를 들어내고 Lightning CSS로 갈아끼우고, Lightning CSS 플러그인을 구현할까 생각해봤는데...

• Vite에서도 아직 실험적 기능임 (https://ko.vitejs.dev/guide/features.html#lightning-css)
• SCSS를 사용 못함 (전처리기 지원을 안함). 현재 사용하고 있는 rollup postcss plugin을 scss 처리 직접 구현 -> output css를 사용하는 방식으로 변경해서 구현이 가능할텐데, rollup이랑 통합하는데 드는 비용 대비 얻는 이득이 굉장히 작을 거라고 판단