Skip to content
SpiraCSS v0.3.2-beta

spiracss/page-layer

Validates page-layer boundaries in page entry SCSS.

Purpose

  • Keep page entry SCSS focused on placement
  • Require explicit links to component files for child Blocks

What it checks

  • Applies only to page entry SCSS under pageEntryAlias / pageEntrySubdir resolved via aliasRoots
  • Rules that include a direct child Block selector (> .child-block) must start with a link comment
  • Link comments must resolve inside componentsDirs
  • External classes are ignored
  • selectorParseFailed warns when selector parsing fails (coverage becomes partial)

Notes / limitations

These behaviors intentionally match spiracss/rel-comments:

  • Direct child detection is limited to selectors that start with > .child-block (or & > .child-block). It does not follow :is() or sibling combinators.
  • Link comments must be the first node in the rule body (declarations or @include before it will still be reported).
  • Link targets are checked for being inside componentsDirs, but this rule does not verify file existence. Use spiracss/rel-comments with validatePath=true for path existence checks.
  • If pageEntryAlias does not resolve in aliasRoots, the rule is skipped (no warning).
  • Element selectors are not validated by this rule; use spiracss/class-structure if you need structure checks.

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: missing link comment
  }
}
.main-container {
  > .about-content {
    // @assets/css/about.scss // NG: outside componentsDirs
    margin-top: 2rem;
  }
}

Why

  • Keep page entry SCSS as a placement-only boundary
  • Keep navigation between page entries and components consistent

Error list

Example:

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


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

Reason: child Blocks must link to their component file

Example:

// 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;
  }
}

Reason: link comments must point inside componentsDirs

selectorParseFailed (selector parse failed)

Example:

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


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

Reason: unparseable selectors cannot be validated

Settings