PurgeCSS

3ステップで試す

1. 1

   PurgeCSS 8.0.0を一時projectへ導入する

   stable releaseを固定し、content scanとunused selector除去をisolated projectで確認します。

   demo=$(mktemp -d "${TMPDIR:-/tmp}/purgecss.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact --save-dev purgecss@8.0.0コピー
2. 2

   使用中・未使用selectorを含むHTML/CSSを作る

   HTMLから参照される.usedと参照されない.unusedを用意し、scan結果を確認できる入力にします。

   printf "%s\n" '<div class="used">Hello</div>' > index.html && printf "%s\n" '.used { color: green; }' '.unused { color: red; }' > styles.cssコピー
3. 3

   CLIでunused selectorを除去する

   PurgeCSSがcontentをscanし、使用中selectorを残したまま未使用selectorを削除することを確認します。

   mkdir build && npx purgecss --css styles.css --content index.html --output build && grep -q ".used" build/styles.css && ! grep -q ".unused" build/styles.cssコピー

Built with

• TypeScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• ts-toolbelt7,150 Stars

  共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語

  Object・Union・Functionなど200超の型utilityで高度な型計算を再利用する

  TypeScript
• Superstruct7,127 Stars

  共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語

  小さなstructを組み合わせ、JavaScriptやTypeScriptの入力値を実行時に検証する

  TypeScript
• PostCSS28,974 Stars

  共通タグ 4件 · 共通カテゴリ 1件 · 同じ言語

  CSSをASTへ変換し、JavaScript pluginでbuild時のstyle処理を組み立てる

  TypeScript
• Linaria12,350 Stars

  共通タグ 4件 · 共通カテゴリ 1件 · 同じ言語

  CSS-in-JSのauthoring experienceを保ちつつ、styleをbuild時にstatic CSSへextractする

  TypeScript
• Panda CSS6,208 Stars

  共通タグ 4件 · 共通カテゴリ 1件

  type-safeなstyle定義をscanし、design tokenとatomic CSSをbuild時に生成する

  Rust
• Ant Design99,682 Stars

  共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語

  enterprise向けReact UIを完成済みcomponents・design token・theme機構で統一し、管理画面や業務画面を素早く構築する

  TypeScript