Netsells Stylelint Config
This repository contains the defacto-standard stylelint configuration used on all Netsells projects, both internally and client.
Usage
Add the config to your project dependencies:
yarn add netsells/stylelint-config-netsells
Now extend the config in your project. For example, a .stylelintrc
file in your project root:
With webpack
Add the stylelint-webpack-plugin
to your project:
yarn add stylelint-webpack-plugin
Add the plugin to your webpack config:
const StyleLintPlugin = ; ... plugins: configFile: './.stylelintrc' files: './resources/assets/**/*'
Commands
create-rule
This command will create a blank rule template for you.
npm run create-rule core/brand-new-rule
Rules
Core
📍 block-no-empty
Disallow empty blocks.
🧟 Example of incorrect code for this rule:
{}
🦄 Example of correct code for this rule:
{}
📍 color-hex-case
Sets the case of hex values to lowercase.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 color-hex-length
Forces the length of hex codes used in styles to be long notation rather than short.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 color-named
Colors must never be named.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 color-no-invalid-hex
Disallow invalid hex colors.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 declaration-block-no-duplicate-properties
Disallow duplicate properties within declaration blocks. This rule ignores variables ($sass, @less, --custom-property).
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 declaration-block-no-shorthand-property-overrides
Prevents shorthand properties overriding longhand ones.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
/* the following examples are to be viewed as a single instance*/
📍 declaration-no-important
Disallow !important within declarations.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 indentation
Always indent at-rules, rules, comments, declarations, inside parentheses and multi-line values by 4 spaces.
🧟 Example of incorrect code for this rule:
{ {}
🦄 Example of correct code for this rule:
{} {}
📍 length-zero-no-unit
Zero lengths should not have units.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 max-empty-lines
Limit the number of adjacent empty lines.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 media-feature-colon-space-after
Require a single space after the colon in media features.
🧟 Example of incorrect code for this rule:
{ } { }
🦄 Example of correct code for this rule:
{ } { }
📍 no-extra-semicolons
Disallow extra semicolons.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 number-leading-zero
Requires a leading zero on fractional values that are less than one.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 property-case
Specify lowercase for properties.
🧟 Example of incorrect code for this rule:
{
🦄 Example of correct code for this rule:
{
📍 property-no-unknown
Prevents unknown properties being used.
🧟 Example of incorrect code for this rule:
📍 shorthand-property-no-redundant-values
Disallow redundant values in shorthand properties.
🧟 Example of incorrect code for this rule:
🦄 Example of correct code for this rule:
📍 unit-no-unknown
Prevents unknown units being used.
🧟 Example of incorrect code for this rule: