CSSTools PostCSS Plugins

3ステップで試す

1. 1

   postcss-preset-env 11.6.0とPostCSSを導入する

   Node.js 20.19.0以上で代表的なplugin packとPostCSSをversion固定します。

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

   modern CSSと変換scriptを作る

   custom mediaとnestingを含むmodern CSSを、CSSDB featureを広く有効化したpresetで処理します。

   printf "%s\n" '@custom-media --narrow (width <= 50rem);' '.card { color: rebeccapurple; @media (--narrow) { color: blue; } }' > input.css && printf "%s\n" "import fs from 'node:fs';" "import postcss from 'postcss';" "import postcssPresetEnv from 'postcss-preset-env';" "const css = fs.readFileSync('input.css', 'utf8');" "const result = await postcss([postcssPresetEnv({ stage: 0 })]).process(css, { from: 'input.css', to: 'output.css' });" "fs.writeFileSync('output.css', result.css);" > demo.mjsコピー
3. 3

   変換後CSSを確認する

   custom mediaがtarget-compatibleなmedia queryへ変換され、元のdefinitionが除去されたことを確認します。

   node demo.mjs && grep -q "max-width: 50rem" output.css && ! grep -q "@custom-media" output.cssコピー

Built with

• CSS

カテゴリとタグ

GitHubデータ

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

あわせて探訪

• normalize.css53,505 Stars

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

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

  CSS
• cssnano4,978 Stars

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

  PostCSS pluginをpresetとして組み合わせ、production CSSをmodularに圧縮する

  CSS
• Bootstrap174,991 Stars

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

  responsive grid・utility・componentをCSS/Sassとnative JavaScriptから組み立てるfrontend framework

  MDX
• Electron123,388 Stars

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

  ChromiumとNode.jsを同梱し、HTML・CSS・JavaScriptから3 OS向けdesktop appを構築するruntime

  C++
• PostCSS28,974 Stars

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

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

  TypeScript
• Autoprefixer22,211 Stars

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

  BrowserslistとCan I Use dataから必要なvendor prefixだけを自動生成する

  JavaScript