ergofriend / cra-clsx-purge

generated with Platane/snk

cra-clsx-purge's Issues

成果物のcssから参照していないクラスのスタイル定義を除きたい

前提

• create-react-app
• CSS modules
• clsx lukeed/clsx: A tiny (228B) utility for constructing className strings conditionally.

背景

リリース日が決まっている機能をコメントアウトしておきたい。
例えば、以下のコードなら main.3586cee0.css から.App_DangerousKeyword__iNAkiを隠したい。

https://github.com/ErgoFriend/cra-clsx-purge/blob/a02eface0cdc77f3c2a0ecbd59737e203f5f13db/src/App.tsx#L18-L20

手段

ビルド前

使われていないCSSルールを検出する stylelint-no-unused-selectors を作った - 徒然技術日記
パーサがclassnamesに対応しているが、clsxには未対応。
上記の例だと、該当箇所にclsxは使われていないが、1箇所でもclsxが使われているとパーサはclsxを解釈出来ないので、そのclassNameに使用しているクラス達を未使用と検知してしまう。
clsx対応したp-rを送りつけるとなんとかなりそう。

ビルド後

PurgeCSS

CSS modules | PurgeCSS

When using CSS modules, the names of your classes are replaced by a hash. For this reason, working with CSS modules and PurgeCSS might not be as straightforward as you would want it to be.

css modules はクラス名に自動でsuffixを付けるのでnpm run ejectするしかないが、出来れば避けたい。
react-app-rewiredでなんとかなるかもしれない

rollup-plugin-purgecss

create-react-appをやめて、viteからrollup-plugin-purgecss - npmを使う方法もある