コンテンツにスキップ
SpiraCSS v0.3.2-beta

spiracss/rel-comments

@rel コメントによる親子リンクを検証します。

目的

  • ページエントリ SCSS と Block / 子 Block の関係を明示する
  • コメントリンクの自動ナビゲーションを安定させる

検証内容

  • 親 Block の @rel はルートスコープ先頭に配置（@use / @forward / @import は前置可、root Block 内は不可）
  • 親 Block は同一スコープ内で最初の rule に置く（親リンク必須設定時）
  • > .child-block 直下ルールの最初のノードが @rel コメント
  • shared セクションは対象、interaction セクションはデフォルトで対象外
  • コメント内パスの実在チェック（有効時）
  • 子リンクの期待ファイル名は fileCase に従う（デフォルト: preserve）
  • @rel パスに childDir を含む場合は childFileCase に従う（未指定なら fileCase にフォールバック）
  • 許容値: preserve | kebab | snake | camel | pascal
  • 子リンクは *.module.scss も許容（CSS Modules 用）

OK

// @rel/../components/card-list.scss


.page-home {
  > .card-list {
    // @rel/scss/card-list.scss
    margin-top: 8px;
  }
}

NG

.page-home {
  // @rel/../components/card-list.scss // NG: ルートスコープ先頭ではない
  > .card-list {
    margin-top: 8px;
  }
}
.page-home {
  > .card-list {
    margin-top: 8px; // NG: @rel が先頭にない
  }
}

fileCase の例

fileCase: 'pascal' の場合、子リンクのファイル名は PascalCase になります。 childFileCase を指定した場合は、childDir を含む @rel パスにのみ適用されます。

.page-home {
  > .card-list {
    // OK
    // @rel/scss/CardList.scss
  }
}
.page-home {
  > .card-list {
    // OK（CSS Modules）
    // @rel/scss/card-list.module.scss
  }
}

理由

  • 親子関係の起点を固定することでリンク解決が安定する

エラー一覧

missingParentRel（親 @rel が無い）

例:

// NG
.page-home {
  color: #111;
}


// OK
// @rel/../components/page-home.scss
.page-home {
  color: #111;
}

理由: 親リンクの入口を固定する

misplacedParentRel（親 @rel の位置が不正）

例:

// NG
.page-home {
  // @rel/../components/page-home.scss
  color: #111;
}


// OK
// @rel/../components/page-home.scss
.page-home {
  color: #111;
}

理由: 解析の起点を一意にする

rootBlockNotFirst（ルート Block が最初ではない）

例:

// NG
.util-reset {
  box-sizing: border-box;
}
.page-home {
  color: #111;
}


// OK
.page-home {
  color: #111;
}
.util-reset {
  box-sizing: border-box;
}

理由: 親リンクの先頭配置と整合を取る

missingChildRel（子 @rel が無い）

例:

// NG
.page-home {
  > .card-list {
    margin-top: 8px;
  }
}


// OK
.page-home {
  > .card-list {
    // @rel/scss/card-list.scss
    margin-top: 8px;
  }
}

理由: 子 Block へのリンクを明示する

notFound（リンク先が存在しない）

例:

// NG
// @rel/../components/missing-block.scss
.page-home {
  color: #111;
}


// OK
// @rel/../components/card-list.scss
.page-home {
  color: #111;
}

理由: ナビゲーションの整合性を保つ

childMismatch（子 Block 名と @rel が不一致）

例:

// NG
.page-home {
  > .card-list {
    // @rel/scss/hero-banner.scss
    margin-top: 8px;
  }
}


// OK
.page-home {
  > .card-list {
    // @rel/scss/card-list.scss
    margin-top: 8px;
  }
}

理由: fileCase / childFileCase に従ったファイル名を期待する（*.module.scss も許容）

selectorParseFailed（セレクタ解析失敗）

例:

// NG
.page-home {
  > : {
    margin-top: 8px;
  }
}


// OK
.page-home {
  > .card-list {
    margin-top: 8px;
  }
}

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

設定