npm package: @springernature/stylelint-config
Description: Springernature shareable config for Stylelint
Author: Springer Nature
Latest version: 3.0.0

# Springer Nature Stylelint Configuration

[![MIT licensed][badge-license]][info-license]
![NPM Version](https://img.shields.io/npm/v/%40springernature%2Fstylelint-config)

[Shareable Stylelint config](https://stylelint.io/) 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](https://github.com/springernature/frontend-tooling/tree/main/linting/prettier).

## 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](https://nodejs.org/en/download/releases)
- `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.25.0 stylelint-config-recommended-scss@^16.0.2 stylelint-order@^7.0.0 @springernature/stylelint-config
```

## Usage

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

1. Create a file called `.stylelintrc.json` in your root folder. 

2. Inside the file add:

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

3. Run `stylelint`, specifying the `scss` syntax

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

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

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

5. Add `stylelint` scripts to your package.json

```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](https://stylelint.io/user-guide/customize), for example:

```json
{
  "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](https://kumardeepak.xyz/blog/stylelint-scss-and-visual-studio-code/) to help set it up.
- Intellij also has a plugin for [Stylelint](https://www.jetbrains.com/help/idea/using-stylelint-code-quality-tool.html#ws_stylelint_lint_your_code).
- SublimeText can use the [SublimeLinter-stylelint plugin](https://github.com/SublimeLinter/SublimeLinter-stylelint).

## 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.

## License

The prettier-config-springernature repository is licensed under the [MIT License][info-license].    
All packages within this repository are licensed under the [MIT License][info-license].    
Copyright &copy; 2025, Springer Nature

[info-license]: /LICENSE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg