@springernature/stylelint-config

v2.0.0

Published

18 days ago

Springernature shareable config for Stylelint

Springer Nature Stylelint Configuration

Shareable Stylelint config used at Springer Nature for linting sass using the scss syntax.

This plugin extends standard stylelint configurations with rules used by SpringerNature.

[!IMPORTANT]
As of version 2.0.0 of this configuration all code format rules have been removed, and you should be using this in conjunction with our prettier configuration.

Requirements

Although this configuration can be used with different kind of setups (i.e. Gulp or Webpack) or directly used from the IDE, the current package was created to be used with the Frontend Tooling found on the same repository.

This package requires:

Node version 22 or greater
stylelint@^16.23.0
stylelint-config-recommended-scss@^15.0.1
stylelint-order@^7.0.0

Installation

Our default export contains all of our Stylelint rules.

stylelint is defined in peerDependencies, which means that you will need to add these to your own project's devDependencies.

Install our config and all it's required dependencies to your devDependencies with the following command:

npm install -D stylelint@^16.23.0 stylelint-config-recommended-scss@^15.0.1 stylelint-order@^7.0.0 @springernature/stylelint-config

Usage

You then need to setup the configuration so it can be used in your project.

Create a file called .stylelintrc.json in your root folder.
Inside the file add:

{
    "extends": ["@springernature/stylelint-config"]  
}

Run stylelint, specifying the scss syntax

stylelint './path/to/scss/*.scss'

Run stylelint fixing issues automatically (not all are fixable).

stylelint './path/to/scss/*.scss' --fix

Add stylelint scripts to your package.json

    "stylelint": "stylelint '**/*.scss'",
    "stylelint-fix": "stylelint '**/*.scss' --fix"

Extending the configuration

Although this configuration is already quite comprehensive, you can extend it with your own rules or plugins.

You can add more rules or plugins by following the stylelint config format, for example:

{
  "extends": ["@springernature/stylelint-config"],
  "rules": {
    "declaration-property-unit-allowed-list": {
      "/^border/": ["px"],
      "/^padding|^gap/": ["rem"]
    },
    "unit-allowed-list": ["%", "deg", "px", "rem", "ms"]
  }
}

IDE Plugins

One of the big advantages of Stylelint is that most of the major IDE's have a plugin that can help you write the code without the need to run Stylelint.

VScode has a very good plugin for Stylelint. Follow the instructions on this article to help set it up.
Intellij also has a plugin for Stylelint.
SublimeText can use the SublimeLinter-stylelint plugin.

Contributing

This package is used by many active Springer Nature projects. We always welcome issues and pull requests, but we may not always be able to merge your suggestions.

If we decide that we can't merge your PR or act on your issue, it's nothing personal! We love to see new contributors, and we strive to provide a welcoming and inclusive environment.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme