@shopify/stylelint-plugin

Shopify's stylelint rules and config

Installation

Install stylelint and @shopify/stylelint-plugin:

With Yarn

yarn add --dev stylelint @shopify/stylelint-plugin

With npm

npm install stylelint @shopify/stylelint-plugin --save-dev

Usage

Shopify’s stylelint rules come bundled in @shopify/stylelint-plugin. To enable these rules, add a stylelint property in your package.json. See the stylelint configuration docs for more details.

"stylelint": {
  "extends": ["@shopify/stylelint-plugin"]
}

Now you can run stylelint by adding the following linting script to your package.json. See the stylelint CLI docs for more details.

"scripts": {
  "stylelint": "stylelint 'src/**/*.scss'"
}

Run it:

With Yarn

yarn run stylelint

With npm

npm run stylelint

Prettier

This config also includes a prettier config which can be extended to format .scss. Using the stylelint-prettier plugin, prettier changes are exposed as stylelint rule violations.

Install prettier:

$ yarn add --dev prettier

Extend the config in your package.json:

"stylelint": {
  "extends": [
    "@shopify/stylelint-plugin/prettier"
  ]
}

Add a prettier config in package.json:

"prettier": {
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": false
}

Prettier fixes shall be reported when you run stylelint **/*.css and shall be autofixed when you run stylelint --fix **/*.scss.