cssnano

3ステップで試す

1. 1

   cssnano 9.3.1とPostCSSを導入する

   Node.js ^22.22.3 || ^24.15.0 || >=26.0 の対応環境でstable releaseを固定します。

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

   圧縮対象CSSとdefault preset実行scriptを作る

   default presetを使い、color・zero・whitespace等を圧縮できる小さな入力を用意します。

   printf "%s\n" '.card { color: #ff0000; margin: 0px 0px 0px 0px; }' > input.css && printf "%s\n" "import fs from 'node:fs';" "import postcss from 'postcss';" "import cssnano from 'cssnano';" "const css = fs.readFileSync('input.css', 'utf8');" "const result = await postcss([cssnano({ preset: 'default' })]).process(css, { from: 'input.css', to: 'output.css' });" "fs.writeFileSync('output.css', result.css);" > demo.mjsコピー
3. 3

   minifyして出力を確認する

   color短縮などが適用され、output CSSがinputより小さくなったことを確認します。

   node demo.mjs && grep -Eq '(red|#f00)' output.css && test "$(wc -c < output.css)" -lt "$(wc -c < input.css)"コピー

Built with

• CSS

カテゴリとタグ

GitHubデータ

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

あわせて探訪

• Panda CSS6,209 Stars

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

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

  Rust
• Dart Sass4,227 Stars

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

  Sassのreference implementationとしてSCSSをCLI・JavaScript APIからCSSへcompileする

  Dart
• Bulma50,052 Stars

  共通タグ 3件 · 同じ言語

  JavaScriptを同梱せず、CSS classとSass・CSS VariablesでUI layerを構築する

  CSS
• Spectrum CSS1,290 Stars

  共通タグ 3件 · 同じ言語

  Adobe Spectrumをdesign tokenと個別versioned CSS componentで実装する

  CSS
• Animate.css82,851 Stars

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

  classを追加するだけで再利用可能なCSS animationをUIへ適用する

  CSS
• normalize.css53,505 Stars

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

  browserのuseful defaultを残しながら、default styleの差異と既知bugを補正する

  CSS