stylelint-config-rivet

This package extends stylelint-config-standard (see stylelint documentation) with rules specific to creating projects within the Rivet extended universe.

Installation

You can include this package in your project by installing it via npm:

npm install --save-dev stylelint-config-rivet

Usage

Next you will need to setup the configuration for your project using one of the following options:

1. package.json

{
  "stylelint": {
    "extends": "stylelint-config-rivet"
  }
}

2. .stylelintrc

{
  "extends": "stylelint-config-rivet"
}

3. stylelint.config.js

module.exports = {
  'extends': 'stylelint-config-rivet'
}

Build tools

Gulp

Many traditional Rivet projects use Gulp to handle their build processes. This stylelint configuration is ideal for integrating with Gulp.

First, you will need to make sure that Gulp and its stylelint build tool are installed.

npm install --save-dev gulp gulp-stylelint

Next, you will need to incorporate this into your Gulp setup. Below is an example gulpfile.js, which shows how to include the build tool in your file and how to write the linting task.

const { src } = require("gulp");
const stylelint = require("gulp-stylelint");

function lintSassWatch() {
  return src("src/sass/**/*.scss")
  .pipe(stylelint({
    failAfterError: false,
    reporters: [
      {formatter: 'string', console: true}
    ]
  }));
}

function lintSassBuild() {
  return src("src/sass/**/*.scss")
  .pipe(stylelint({
    reporters: [
      {formatter: 'string', console: true}
    ]
  }));
}

We recommend writing separate functions for linting build versus watch tasks. For lint functions related to your watch tasks we recommend including the failAfterError: false option. This option defaults to true, and will cause your watch process to fail if it encounters an error. While this functionality is desirable for a build task, it can be more annoying than helpful for a watch task.

webpack

Finally, there are a number of Rivet-based applications which rely on webpack to bundle their code.

First, you will need to make sure that the stylelint plugin for webpack is installed. There is a different stylelint-loader available; however, it does not allow for @imports, and will therefore only lint the main file for each require/entry (see plugin documentation).

npm install --save-dev stylelint-webpack-plugin

Next, you will need to setup stylelint in your webpack configuration. Below is an example webpack.config.js file.

const stylelint = require('stylelint-webpack-plugin');
 
module.exports = {
  // ...
  plugins: [
    new stylelint({ failOnError: true }),
  ],
  // ...
}

It's important to note that when using transpilers (such as babel) and linting tools, the order they are listed in usually matters as you want to ensure that your code is linted before being transpiled.

Additional integrations

Stylelint has integrations available for most of the major, modern code editors.