stylelint-config

@almacareer/stylelint-config

Alma Career’s config for Stylelint

Usage

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

This config:

• Extends the stylelint-config-recommended shared config and configures its rules for SCSS;
• extends the stylelint-config-recommended-scss shared config and configures its rules for SCSS;
• extends the stylelint-config-standard shared config and configures its rules.

Configuration

• @almacareer/stylelint-config

Use this ruleset to configure Stylelint to work with your code.

Recommended Stylelint Configuration

// .stylelintrc.mjs

export default {
  extends: ['@almacareer/stylelint-config', 'stylelint-prettier/recommended'],
};

.stylelintrc or .stylelintrc.json

{
  "extends": ["@almacareer/stylelint-config", "stylelint-prettier/recommended"]
}

package.json

{
  "stylelint": {
    "extends": ["@almacareer/stylelint-config", "stylelint-prettier/recommended"]
  }
}

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.

Stylistic Rules

Stylistic rules (like indentation etc.) were dropped in Stylelint v16. To enforce them, you can use stylelint-prettier:

// `.stylelintrc`
{
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  }
}

FAQ

How do I change the indentation?

### With Prettier

If using Prettier, you can configure the indentation in your Prettier config:

{
  "tabWidth": 2
}

Or in your [.editorconfig][editorconfig]:

[*]
indent_size = 2

👉 See Prettier documentation for more options.