stylelint-disable-top-level-selector ✂️

A Stylelint plugin that prevents the use of restricted selectors at the top level of your CSS.

🚀 Installation

npm install stylelint-disable-top-level-selector --save-dev

🛠 Configuration

Add to your Stylelint config:

module.exports = {
  plugins: ['stylelint-disable-top-level-selector'],
  rules: {
    'plugin/disable-top-level-selector': [true, {
      restrictedSelectors: ['body', 'html', /^[a-z]+$/],
      ignoreSelectors: [':root', /^--/],
      customMessage: selector => `"${selector}" should be nested`
    }]
  }
}

🔧 Options

• restrictedSelectors: (string|RegExp)[]
  Selectors that trigger errors when at top level
• ignoreSelectors: (string|RegExp)[]
  Selectors to exclude from checking
• customMessage: string|function
  Custom error message (default shows selector)

✅ Valid CSS

.container {
  & > div { /* OK: Nested element */ }
}

:root { /* OK: In ignore list */ }

❌ Invalid CSS

body { /* Error: Top-level element */ }
div { /* Error: Matches /^[a-z]+$/ */ }