stylelint-disallow-bootstrap-properties

A Stylelint plugin to disallow bootstrap CSS properties.

Installation

1. If you haven't, install stylelint:

npm install stylelint --save-dev

2. Install stylelint-disallow-bootstrap-properties:

npm install stylelint-disallow-bootstrap-properties --save-dev

Usage

Add stylelint-disallow-bootstrap-properties to your stylelint config plugins array, then add the rule to the rules list. The rule from stylelint-disallow-bootstrap-properties need to be namespaced with plugin.

{
  ...
  "plugins": ["stylelint-disallow-bootstrap-properties"],
  "rules": {
    ...
    "plugin/stylelint-disallow-bootstrap-properties": true
  },
  ...

What this rule does?

  a::before {}
/** ↑
 * This pseudo-element selector */

  a:hover {}
/**↑
 * This pseudo-class selector */

This rule ignores:

• CSS pseudo-elements i.e. those prefixed with a single colon
• CSS pseudo-classes i.e. those prefixed with two colon
• selectors that use variable interpolation e.g. ::#{$variable} {}
• Media Queries that are 50px more or less than the breakpoints used on Bootstrap
• Media Queries that are not max-width

Options

boolean: true

Given:

true

The following patterns are considered violations:

a {
  display: flex;
}

div {
  display: block;
}

The following patterns are not considered violations:

div::before {
  display: flex;
  }

a:hover {
  display: block;
  }

div {
  color: red;
  }