Merge adjacent layers with the same name#216
Merged
devongovett merged 1 commit intoparcel-bundler:masterfrom Jul 3, 2022
Merged
Merge adjacent layers with the same name#216devongovett merged 1 commit intoparcel-bundler:masterfrom
devongovett merged 1 commit intoparcel-bundler:masterfrom
Conversation
6 tasks
sungik-choi
added a commit
to channel-io/bezier-react
that referenced
this pull request
Dec 14, 2023
<!-- 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 ## Summary <!-- Please brief explanation of the changes made --> 라이브러리 사용처에 제공되는 CSS output(style.css)의 용량을 줄입니다. ## Details <!-- Please elaborate description of the changes --> [rollup-plugin-postcss](https://www.npmjs.com/package/rollup-plugin-postcss)의 minify 옵션을 사용해서 내부의 [CSS Nano](https://cssnano.co/)를 통해 구현할 수 있었습니다. 하지만 CSS Nano로는 '중복되는 Cascade layer 블록을 합쳐주면 좋겠다' 라는 요구사항을 충족하지 못했습니다. 아래와 같은 상황입니다. ```css /* AS-IS */ @layer foo { .a { } } @layer foo { .b { } } /* TO-BE */ @layer foo { .a { } .b { } } ``` 새로운 스타일 시스템의 components layer에선 CSS modules를 사용하게되면서, 각 css module 파일을 `@layer components` 로 감싸게 됩니다. 이를 빌드 시 `style.css` 로 병합하는 과정에서, 중복된 `@layer components` 블록이 생기게됩니다. Parcel에서 기본적으로 제공하고, Vite에서 CSS를 처리하는 데 옵셔널로 사용할 수 있는 lightning CSS에서 이 기능이 구현되어 있었습니다. (parcel-bundler/lightningcss#216) 이 기능만을 사용하기 위해서 번들러를 변경하거나, 혹은 lightning CSS가 CSS 전처리기를 지원하지 않는 이유로 SCSS module을 CSS module로 변경하는 작업은 불필요하다고 판단했습니다. 따라서 build generate과정에서 만들어진 `style.css` 를 lightning css의 node 패키지를 통해 최적화하는 작업을 수행하도록 했습니다. 추가로, minify시에도 줄어들지 않는 className이나 css variable property name의 길이를 함께 조금 줄이는 작업을 진행했습니다. - css module class name의 길이를 디버깅 시 가독성을 해치지 않는다고 판단하는 선에서 줄였습니다. - css variable의 `--bezier` prefix를 `--b` 로 줄였습니다. - 그 과정에서 Spinner에 누락되어있던 css variable 관련 style util을 적용했습니다. 그 외: `style.css` 을 `styles.css` 로 변경합니다. bezier-tokens와 통일하기 위해서입니다. ### Diff ef56dc1 commit 기준 - AS-IS: 22K - TO-BE: 17K (약 -23%) ### 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://lightningcss.dev/docs.html - parcel-bundler/lightningcss#211 - parcel-bundler/lightningcss#216
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #211
Literally installed Rust a few hours ago, "please go read a Rust tutorial first" is a valid reply and I'd be happy to do another round :)
I'll probably need to do that to implement my other suggestion about hoisting layers. Adjacent style rules are also not merged inside layers, but that's not a regression. I guess it needs another pass of
minify?