Shareable Stylelint Config
This npm package provides a set of shareable configurations for Stylelint 15+ — a linter for CSS and SCSS.
📄 About
Collection of stylelint configurations that can be used to enforce consistent styling across CSS and SCSS files.
The configurations provided in this package are designed to be flexible and easily extendable, allowing developers to customize the rules to fit their specific needs.
→ Purpose
Provide a set of opinionated yet flexible configurations for stylelint that help developers to maintain consistent code styling and avoid common errors. The configurations provided in this package:
- Provide a solid foundation for a project's code styling that can be extended and modified as needed
- Enforce common best practices for CSS and SCSS development, such as using consistent indentation, avoiding vendor prefixes, and avoiding unnecessary specificity
- Catch common errors, such as missing units for numeric values, using invalid colors, and using unsupported or deprecated CSS features
- Help developers to maintain consistency across their codebase by providing clear and consistent rules for code styling.
💿 Installation
To use @wayofdev/stylelint-config
in an app that uses CSS or SCSS, you need to install stylelint
and @wayofdev/stylelint-config
in the app's directory within the monorepository.
For example, if you have a Next.js app located in apps/web
, you would install stylelint
and @wayofdev/stylelint-config
in the apps/web
directory using the following command:
pnpm --filter=web add -D stylelint @wayofdev/stylelint-config
💻 Usage
You can use one of the provided configurations by adding it to your stylelint
configuration file.
For example, to use the @wayofdev/stylelint-config/scss
configuration for your Next.js app, add the following to your apps/web/.stylelintrc.js
file:
→ CSS
module.exports = {
extends: "@wayofdev/stylelint-config/css",
}
→ SCSS
module.exports = {
extends: "@wayofdev/stylelint-config/scss",
}
You can also customize the rules provided in the configurations or create your own configuration that extends one of the provided configurations. For more information on how to configure stylelint
, see the stylelint configuration documentation.
→ Extending
You can extend one of the provided configurations in @wayofdev/stylelint-config
by adding an overrides
section to your stylelint
configuration file. For example, to use a mixed CSS/SCSS configuration that ignores files in the dist
directory, add the following to your apps/web/.stylelintrc.js
file:
module.exports = {
ignoreFiles: ["dist/**"],
extends: "@wayofdev/stylelint-config/scss",
overrides: [
{
files: ["**/*.css"],
extends: "@wayofdev/stylelint-config/css",
},
],
}
This configuration will extend the @wayofdev/stylelint-config/scss
configuration for SCSS files and the @wayofdev/stylelint-config/css
configuration for CSS files, and will ignore all files in the dist
directory.
→ Add a NPM Script
To add an NPM script for running stylelint
use command, which will add the lint:styles
script to the scripts
section of your package.json
.
pnpm pkg set scripts.lint:styles="stylelint --fix **/*.{css,scss}"
This will run stylelint
on all CSS and SCSS files in your app's directory and its subdirectories. You can customize the files and directories to be linted as needed.
→ Add Pre-commit Hook
To automatically lint files with Stylelint before committing them, you can use lint-staged
and add it to your pre-commit hook. Here's how:
-
Follow the installation instructions for
lint-staged
in the @wayofdev/lint-staged-config package. This package provides a pre-configuredlint-staged
configuration that includes Husky and other tools. -
Add the following configuration to a
lint-staged.config.js
file at each application or package, that uses css or scss:module.exports = { '**/*.{css,scss}': [`prettier --cache --write`, `stylelint --cache --fix`], }
This will configure
lint-staged
to run Stylelint on all staged files in your monorepository.
🚗 Under The Hood
Under the hood, these configurations include various plugins and extends to enforce a range of best practices and standards for CSS and SCSS development.
css.js
-
Plugins
stylelint-order
stylelint-no-unsupported-browser-features
stylelint-high-performance-animation
-
Extends
stylelint-config-standard
@double-great/stylelint-a11y/recommendedstylelint-a11y
scss.js
-
Plugins
stylelint-order
stylelint-no-unsupported-browser-features
stylelint-high-performance-animation
-
Extends
stylelint-config-standard-scss
stylelint-config-sass-guidelines
@double-great/stylelint-a11y/recommended
🤝 License
🧱 Credits and Useful Resources
Based on:
Related projects:
This package builds on the work of others to provide a pre-configured Secretlint configuration that can be easily shared and reused across different projects. The related projects listed above may also be useful for integrating Secretlint into your project, particularly if you're using Git and want to automatically run Secretlint before committing changes.
🙆🏼♂️ Author Information
This repository was created in 2023 by lotyp / wayofdev.
🙌 Want to Contribute?
Thank you for considering contributing to the wayofdev community! We are open to all kinds of contributions. If you want to:
- 🤔 Suggest a feature
- 🐛 Report an issue
- 📖 Improve documentation
- 👨💻 Contribute to the code
You are more than welcome. Before contributing, kindly check our guidelines.