`@shopify/loom-plugin-stylelint`

This package provides a loom plugin that runs stylelint as part of the loom lint command.

This package does not make any assumptions about what version of stylelint or what ruleset you should use. You will need to install stylelint as a peerDependency and you will need to configure stylelint yourself. We recommend using the presets provided by @shopify/stylelint-plugin.

Installation

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

Usage

Add stylelint to your loom worksace plugins.

import {createWorkspace} from '@shopify/loom';
import {stylelint} from '@shopify/loom-plugin-stylelint';

// `createWorkspace` may be `createPackage`, or `createApp` if your workspace
// consists of a single project
export default createWorkspace((workspace) => {
  workspace.use(stylelint());
});

By default stylelint runs over css files. You can modify the files that are processed by passing in a files glob to the plugin's options.

export default createWorkspace((workspace) => {
  // Run stylelint on css and scss files
  workspace.use(stylelint({files: '**/*.{css,scss}'}));
});

Running only Stylelint when linting

To run only the Stylelint linting step, you can use --isolate-step:

loom lint --isolate-step=Stylelint

Hooks

This plugin adds the following hooks to LintWorkspaceConfigurationCustomHooks:

stylelintFlags: an object of options to convert into command line flags for the stylelint command. These options are camelcase versions of their CLI counterparts.

import {createWorkspacePlugin} from '@shopify/loom';

function demoPlugin() {
  return createWorkspacePlugin('Demo', ({tasks: {lint}}) => {
    lint.hook(({hooks}) => {
      hooks.configure.hook((configure) => {
        // Modify the maximum number of allowed warnings from the default of 0
        configure.stylelintFlags?.hook((flags) => ({
          ...flags,
          maxWarnings: 5,
        }));
      });
    });
  });
}