stylelint-no-browser-hacks

stylelint-no-browser-hacks

A stylelint plugin that disallow browser hacks that are irrelevant to the browsers you are targeting, using stylehacks.

Original rule: stylelint/no-browser-hacks.

Disallow browser hacks that are irrelevant to the browsers you are targeting.

h1 { _color: white; }
/**  ↑
 * Hacks like this */

If you are uncertain what "browser hacks" are, "An Introduction to Browser-Specific Hacks" explains it well.

This rule uses stylehacks to detect the hacks. Then, in the spirit of stylelint, it tells you that you've done something wrong. If instead you would like to automatically remove browser hacks, use stylehacks directly.

stylehacks is only compatible with standard CSS syntax, and does not support nested properties nor custom property sets.

Bugs and feature requests should be reported on the stylehacks issue tracker.

Installation

npm install stylelint-no-browser-hacks

Usage

Add stylelint-no-browser-hacks to your stylelint config plugins array, then add rules you need to the rules list. Note that the rule is namespaced with plugin/.

Like so:

// .stylelintrc
{
	"plugins": [
		"/path/to/stylelint-no-browser-hacks/lib"
	],
	"rules": {
		// ...
		"plugin/no-browser-hacks": [true, {
            browsers: [
                "last 2 versions",
                "ie >=7"
            ]
        }],
		// ...
	}
}

Options

true

Defaults to the browserslist default, which targets modern browsers.

The following patterns are considered warnings:

a { color/*\**/: pink\9; }

As this hack targets IE7-8.

Optional secondary options

browsers: "browserslist string"

A string interpreted by browserslist that designates precisely which browsers you wish to support. Something like "> 1%, last 2 versions, ie >= 8". For details about the syntax (which is the same as when using Autoprefixer, by the way), please read the browserslist documentation.

If you set browsers: [ "last 2 versions", "ie >=7" ] the hack above is allowed.