https://github.com/myxvisual/stylelint-disable-top-level-selector

https://github.com/myxvisual/stylelint-disable-top-level-selector

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/myxvisual/stylelint-disable-top-level-selector
• Owner: myxvisual
• License: mit
• Created: 2025-04-02T15:08:07.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-04-03T13:20:17.000Z (over 1 year ago)
• Last Synced: 2025-06-01T11:07:32.234Z (about 1 year ago)
• Language: TypeScript
• Size: 27.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# stylelint-disable-top-level-selector ✂️

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

[![npm version](https://badge.fury.io/js/stylelint-disable-top-level-selector.svg)](https://www.npmjs.com/package/stylelint-disable-top-level-selector)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 🚀 Installation

```bash

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

```

## 🛠 Configuration

Add to your Stylelint config:

```js

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

```css

.container {

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

}

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

```

## ❌ Invalid CSS

```css

body { /* Error: Top-level element */ }

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

```