#Swissquote Stylelint configuration

#Features

• Lint style sheets following the Swissquote CSS Guideline (on form and function).
• Uses standard Stylelint rules and includes 4 custom rules.
• Provides a simpler standard for legacy code.

#Presets

• recommended: Contains all BEM specific rules.
• legacy: Contains rules specific to legacy code.
• common: Enforces the styleguide of the CSS. (included in both recommended and legacy)

#Rules

• no-hack-reassignment: Hacks (._*) must be applied directly on the concerned element.
• no-state-without-component: States (.is-*|.has-*) must appear next to a component.
• no-type-outside-scope: Types (a, div …) must appear inside a scope (.s-*).
• no-utility-reassignment: Utilities (.u-*) must be applied directly on the concerned element.
• no-negative-var: Using -var(...) does not work, it should be calc(var(...) * -1)
• no-variable-in-transpiled-function: Using var() inside a transpiled function will make the value static. This means that some parts of your CSS will be dynamic, and some will not.

#Usage within Crafty

Crafty includes those rules and presets by default, you don’t need to do any specific action to use them.

#Usage outside Crafty

Outside Crafty, you have to use it as you would for any Stylelint plugin or preset.

1. You install it:

   npm install @swissquote/stylelint-config-swissquote --save
   

2. You import the plugin and extend from it:

   {
     "plugins": ["@swissquote/stylelint-config-swissquote"],
     "extends": ["@swissquote/stylelint-config-swissquote/recommended"],
     "rules": {
       // your custom rules here
     }
   }