Stylelint

3ステップで試す

1. 1

   Stylelint 17.16.0を一時projectへ導入する

   Node.js 20.19.0以上の環境で17.16.0を固定して導入します。

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

   rule設定と違反CSSを作る

   built-in ruleだけを使い、不正hex colorを確実に検出できる最小configを用意します。

   printf "%s\n" "export default {" " rules: {" " 'color-no-invalid-hex': true" " }" "};" > stylelint.config.mjs && printf "%s\n" '.bad { color: #12zzzz; }' > input.cssコピー
3. 3

   CLIでlint errorを検出する

   Stylelintが違反を検出してnon-zero exitになることを確認し、CIでfailureとして扱えることを示します。

   if npx stylelint input.css; then exit 1; else echo "lint error detected"; fiコピー

Built with

• JavaScript

カテゴリとタグ

GitHubデータ

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

あわせて探訪

• Linaria12,350 Stars

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

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

  TypeScript
• vanilla-extract10,435 Stars

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

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

  TypeScript
• PurgeCSS8,050 Stars

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

  content fileをscanして実際に参照されるselectorだけを残し、unused CSSを削減する

  TypeScript
• Autoprefixer22,211 Stars

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

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

  JavaScript
• Less17,025 Stars

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

  変数・mixin・nestingを使うstylesheetをlesscで通常のCSSへcompileする

  JavaScript
• Stylus11,333 Stars

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

  indented syntaxと通常のCSS styleを同じcompilerで扱うexpressiveなstylesheet language

  JavaScript