Laying the groundwork for good handling of unused CSS

[sungik-choi]

Description

애플리케이션에서 라이브러리의 Unused CSS를 잘 처리할 수 있는 환경을 마련해두자.

Reasons for suggestion

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

• TailwindCSS와 같은 케이스처럼, PurgeCSS와 같은 unused CSS 처리 툴들을 잘 지원하려면 classname을 display && styles[display-${display}] 와 같이 사용하지 말아야 할 거 같습니다.
• CSS Modules와 결합되었을 때 유의미한 일인지 체크해봐야합니다.

Proposed solution

컴포넌트가 Tree shaking 되었을 때, 애플리케이션의 최종 CSS에 포함되지 않은 컴포넌트의 CSS도 포함되는지 테스트가 필요함.

References

• https://answers.netlify.com/t/purging-tailwindcss-classes-from-custom-npm-package/28454/4
• https://blog.logrocket.com/complete-best-practices-minifying-css/#byob
• https://blog.logrocket.com/removing-unused-css-code-with-purgecss/