@geniemouse/stylelint-config

Keep project CSS formatting consistent and free of obvious errors across projects with stylelint and this base configuration.

This configuration is strict.

1. Installation
2. Configuration
   1. package.json
   2. .stylelintrc
   3. Adding new/overriding rules
   4. Using alongside Prettier

Installation

1. Install stylelint locally:

# Using npm:
npm install stylelint --save-dev

# Using yarn:
yarn add stylelint --dev

2. Install the GenieMouse stylelint configuration package locally:

# Using npm:
npm install @geniemouse/stylelint-config --save-dev

# Using yarn:
yarn add @geniemouse/stylelint-config --dev

Configuration

Add the stylelint set-up instructions to either the package.json or a .stylelintrc file in your project's root directory.

package.json

"stylelint": {
    "extends": ["@geniemouse/stylelint-config"]
    "rules": {
        // Add new/overriding rules, as necessary
    }
}

.stylelintrc

{
    "extends": ["@geniemouse/stylelint-config"],
    "rules": {
        // Add new/overriding rules, as necessary
    }
}

Adding new/overriding rules

Additional stylelint rules/overrides should be written to the rules property.

More information about stylelint's settings can be found on their site:

• configuration
• rules

Using alongside Prettier

If Prettier is being used in your project or editor, some additional node packages will be required to have the two configurations running well together.

# Using npm:
npm install stylelint-prettier stylelint-config-prettier --save-dev

# Using yarn:
yarn add stylelint-prettier stylelint-config-prettier --dev

Add the stylelint-prettier/recommended configuration to the plugins extends array.

E.g. For a .stylelintrc file, it looks like this:

{
    "extends": [
        "@geniemouse/stylelint-config",
        "stylelint-prettier/recommended" // Ensure that stylelint-prettier is called last
    ],
    "rules": {
        // Add new/overriding rules, as necessary
    }
}

Additional project script command

With the installation of stylelint-config-prettier, a new command can be added to the scripts section of your package.json file:

"scripts": {
    // ...
    "stylelint-check": "stylelint-config-prettier-check",
    // ...
}

Running this command will report any conflicting Prettier/stylelint rules.

• npm run stylelint-check
• yarn stylelint-check