spiracss/page-layer

ページエントリ SCSS の page layer 境界を検証します。

目的

• ページ層を配置専用に保つ
• 子 Block のリンクコメントを必須化する

検証内容

• aliasRoots で解決した pageEntryAlias / pageEntrySubdir 配下のみ対象
• > .child-block を含むルールは先頭ノードにリンクコメントが必要
• リンクは componentsDirs 配下に解決される必要がある
• External クラスは除外
• selectorParseFailed はセレクタ解析失敗の警告（検証は部分的）

注意点 / 制約

これらは spiracss/rel-comments と同じ仕様です。

• > .child-block（または & > .child-block）で始まるセレクタのみを直接子として検出します。:is() や + / ~ は追いません。
• リンクコメントは rule 本文の先頭ノード限定です（宣言や @include が先行すると missing 扱い）。
• リンク先が componentsDirs 配下かどうかは判定しますが、ファイル実在は検証しません。存在チェックは spiracss/rel-comments の validatePath=true に委ねます。
• pageEntryAlias が aliasRoots に存在しない場合はスキップされます（警告なし）。
• Element の構造チェックはこのルールでは行わないため、必要なら spiracss/class-structure を使います。

OK

.main-container {
  > .about-content {
    // @components/pages/about/about-content/about-content.scss
    margin-top: 2rem;
  }
}

NG

.main-container {
  > .about-content {
    margin-top: 2rem; // NG: リンクコメント無し
  }
}

.main-container {
  > .about-content {
    // @assets/css/about.scss // NG: componentsDirs 外
    margin-top: 2rem;
  }
}

理由

• page entry SCSS を配置専用に保つ
• ページとコンポーネントの対応を安定させる

エラー一覧

missingComponentLink（子 Block のリンクコメント無し）

例:

// NG
.main-container {
  > .about-content {
    margin-top: 2rem;
  }
}

// OK
.main-container {
  > .about-content {
    // @components/pages/about/about-content/about-content.scss
    margin-top: 2rem;
  }
}

理由: 子 Block の参照先を明示する

nonComponentLink（リンク先が componentsDirs 外）

例:

// NG
.main-container {
  > .about-content {
    // @assets/css/about.scss
    margin-top: 2rem;
  }
}

// OK
.main-container {
  > .about-content {
    // @components/pages/about/about-content/about-content.scss
    margin-top: 2rem;
  }
}

理由: componentsDirs 内へのリンクを必須にする

selectorParseFailed（セレクタ解析失敗）

例:

// NG
.main-container {
  > : {
    margin-top: 2rem;
  }
}

// OK
.main-container {
  > .about-content {
    margin-top: 2rem;
  }
}

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

設定

• spiracss.config.js / stylelint.pageLayer