Setup CSS

1. Add dependencies

To get started, add the following dependencies your devDependencies in the package.json.

package.json

{
  "devDependencies": {
    "stylelint": "^16",
  }
}

2. Add Stylelint config

Stylelint offers many ways to provide a configuration. You can provide a configuration trough following file names: stylelint.config.js, stylelint.config.mjs & stylelint.config.cjs.

If you are facing issues while integrating Stylelint, consult Stylelint docs for help.

Syntax

When enabling our linter rules, make sure to use the correct syntax for the configuration file. We provide an example in ECMAScript JavaScript (.mjs) as it is the de facto standard.

stylelint.config.mjs

import {
  CSS_RULES_PRESET
} from "@ogs-gmbh/linter";

/** @type {import('stylelint').Config} */
export default {
  rules: CSS_RULES_PRESET
}

3. (Optional) Integrate Lint-Staged

Recommendation

We recommend to integrate Lint-Staged.

It enables faster lint times while ensuring consitency across the project.

To integrate Lint-Staged, follow their guide: Lint-Staged integration

4. (Optional) Integrate Husky

Recommendation

We recommend to integrate Husky.

Enforce consistent code quality by Git hooks, before it can enter your codebase.

To integrate Husky, follow their guide: Husky integration

5. Try it out

Run ESLint against your project, to see results. Either by using the inbuilt LSP of your IDE or by running following command:

npm

$ npx stylelint "**/*.css"

pnpm

$ pnpx stylelint "**/*.css"

yarn

$ yarn stylelint "**/*.css"

bun

$ bunx stylelint "**/*.css"