stylelint-disallow-bootstrap-properties

A stylelint plugin to disallow bootstrap css properties

Usage no npm install needed!

<script type="module">
  import stylelintDisallowBootstrapProperties from 'https://cdn.skypack.dev/stylelint-disallow-bootstrap-properties';
</script>

README

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
  1. 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;
  }