spiracss/pseudo-nesting

疑似クラス / 疑似要素を & にネストして書くルールです。

目的

• 構造と状態の境界を明確にする
• セレクタの意図を読みやすくする

✅ 適切

.button {
  &:hover {
    opacity: 0.8;
  }
  &::before {
    content: "";
  }
}

❌ 不適切

.button:hover { // ❌: ネストなし
  opacity: 0.8;
}

& > .button:hover { // ❌: 疑似は対象セレクタにネストする
  opacity: 0.8;
}

理由

• 疑似は対象セレクタの責務として読める形にするため

エラー一覧

needNesting（疑似は & にネスト）

例:

// ❌
.button:hover {
  opacity: 0.8;
}

// ❌
& > .button:hover {
  opacity: 0.8;
}

// ✅
.button {
  &:hover {
    opacity: 0.8;
  }
}

理由: 疑似は対象セレクタの責務として読める形にする

selectorParseFailed（セレクタ解析失敗）

例:

// ❌
.button {
  > : {
    color: #111;
  }
}

// ✅
.button {
  > .item {
    color: #111;
  }
}

理由: 解析できないセレクタは検証できない

設定

• spiracss.config.js / stylelint.pseudo