spiracss/pseudo-nesting

Require pseudo-classes / pseudo-elements to be nested under &.

Purpose

• Clarify boundaries between structure and state
• Make selector intent easier to read

✅ Correct

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

❌ Incorrect

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

& > .button:hover { // ❌: pseudo should be nested under the target selector
  opacity: 0.8;
}

Why

• Pseudos should read as responsibilities of the target selector

Error list

needNesting (pseudos must be nested under &)

Example:

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

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

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

Reason: make pseudos read as responsibilities of the target selector

selectorParseFailed (selector parse failed)

Example:

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

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

Reason: unparseable selectors cannot be validated

Settings

• spiracss.config.js / stylelint.pseudo