@almacareer/stylelint-config
Version:
Alma Career's config for Stylelint
147 lines (105 loc) • 3.91 kB
Markdown
# `@almacareer/stylelint-config`
[](https://www.npmjs.org/package/@almacareer/stylelint-config)
[](http://nodejs.org/download/)
[](https://github.com/stylelint/stylelint)
> Alma Career’s config for Stylelint
## Usage
```bash
# Yarn:
yarn add --dev @almacareer/stylelint-config stylelint-prettier
# npm:
npm install --save-dev @almacareer/stylelint-config stylelint-prettier
```
> We assume you are using Prettier. That’s why we also recommend adding
> `stylelint-prettier` above.
Configuration extends community maintained config [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss).
This config:
- Extends the [`stylelint-config-recommended` shared config](https://github.com/stylelint/stylelint-config-recommended) and configures its rules for SCSS;
- extends the [`stylelint-config-recommended-scss` shared config](https://github.com/stylelint-scss/stylelint-config-recommended-scss) and configures its rules for SCSS;
- extends the [`stylelint-config-standard` shared config](https://github.com/stylelint/stylelint-config-standard) and configures its rules.
## Configuration
- **`@almacareer/stylelint-config`**
Use this ruleset to configure Stylelint to work with your code.
## Recommended Stylelint Configuration
```js
// .stylelintrc.mjs
export default {
extends: ['@almacareer/stylelint-config', 'stylelint-prettier/recommended'],
};
```
<details>
<summary><i>.stylelintrc</i> or <i>.stylelintrc.json</i></summary>
```json
{
"extends": ["@almacareer/stylelint-config", "stylelint-prettier/recommended"]
}
```
</details>
<details>
<summary><i>package.json</i></summary>
```json
{
"stylelint": {
"extends": ["@almacareer/stylelint-config", "stylelint-prettier/recommended"]
}
}
```
</details>
## Checking Properties Order
To further extend control over coding style of your stylesheets, we are also
checking for properties order.
The `order` config enforces a consistent order of content in your declaration blocks:
1. Sass variables,
2. CSS custom properties,
3. Sass `@extend`,
4. single-line Sass `@include`,
5. declarations,
6. nested rules,
For better flexibility, block at-rules (like `@media`, `@supports`, and also Sass `@if`, `@each`, etc.) can be placed
anywhere in the declaration block.
Besides, properties in the declarations must be ordered by following categories:
1. `all` properties,
2. `content`,
3. position,
4. `appearance`,
5. box model,
6. typography,
7. decorations,
8. effects and transforms,
9. interactions,
10. transitions and animations.
👉 To see the order of individual properties this config prescribes, please read
the [`order` config itself](./rules/order.js).
## Stylistic Rules
Stylistic rules (like indentation etc.) [were dropped][stylelint-v16-stylistic-rules]
in Stylelint v16. To enforce them, you can use
[`stylelint-prettier`][stylelint-prettier]:
```json
// `.stylelintrc`
{
"plugins": ["stylelint-prettier"],
"rules": {
"prettier/prettier": true
}
}
```
## FAQ
<details>
<summary>How do I change the indentation?</summary>
### With Prettier
If using Prettier, you can configure the indentation in your Prettier config:
```json
{
"tabWidth": 2
}
```
Or in your [`.editorconfig`][editorconfig]:
```ini
[*]
indent_size = 2
```
👉 See [Prettier][prettier] documentation for more options.
</details>
[prettier]: https://prettier.io
[stylelint-v16-stylistic-rules]: https://stylelint.io/migration-guide/to-16/#removed-deprecated-stylistic-rules
[stylelint-prettier]: https://github.com/prettier/stylelint-prettier