PostCSS

3ステップで試す

1. 1

   PostCSS 8.5.29を一時projectへ導入する

   review対象releaseを固定し、既存projectから分離した一時directoryでplugin APIを確認します。

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

   最小custom pluginと入力CSSを作る

   Declaration visitorでAST上のcolor値を変更する最小pluginを作り、from/toも明示します。

   printf "%s\n" '.card { color: rebeccapurple; }' > input.css && printf "%s\n" "import fs from 'node:fs';" "import postcss from 'postcss';" "const plugin = { postcssPlugin: 'demo-color', Declaration(decl) { if (decl.prop === 'color' && decl.value === 'rebeccapurple') decl.value = '#663399'; } };" "const css = fs.readFileSync('input.css', 'utf8');" "const result = await postcss([plugin]).process(css, { from: 'input.css', to: 'output.css' });" "fs.writeFileSync('output.css', result.css);" > demo.mjsコピー
3. 3

   pluginを実行して変換結果を確認する

   PostCSSがCSSをparseし、custom pluginによるAST変更をCSSへserializeできることを確認します。

   node demo.mjs && grep -q "#663399" output.cssコピー

Built with

• TypeScript

カテゴリとタグ

GitHubデータ

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

あわせて探訪

• Faker15,509 Stars

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

  テストや開発向けに人物・住所・商品など現実らしいダミーデータを大量生成する

  TypeScript
• vanilla-extract10,435 Stars

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

  TypeScriptで型安全なstyleを記述し、build時に静的CSSへ変換する

  TypeScript
• Valibot9,027 Stars

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

  小さな関数を組み合わせ、TypeScript型推論と実行時のスキーマ検証を両立する

  TypeScript
• openapi-typescript8,391 Stars

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

  OpenAPI 3.0/3.1の定義から実行時コードを増やさずTypeScript型を生成する

  TypeScript
• modern-normalize7,417 Stars

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

  modern browserだけを対象に、base style normalizationを小さく保つ

  TypeScript
• ts-toolbelt7,150 Stars

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

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

  TypeScript