@lucca/stylelint-config-prisme

lucca-prisme / Stylelint config

This package is a shareable stylelint configuration.

Stylelint checks for common mistakes in CSS and CSS-like files, and allows to define rules for tools and developers.

Prettier should be used to handle coding style-guides when possible.

• This configuration lints your code with default CSS & SCSS rules, and adapts some of them for Lucca Front specifics
• It will trigger warnings for deprecated LF features and errors for deleted LF features.

Install

npm i --save-dev stylelint @lucca/stylelint-config-prisme

Avoid conflicts

Remove any pre-existing configuration (file or statements in package.json).

Configure

For your local project

Use this package in a stylelint.config.js file in your repository:

module.exports = {
  extends: ['@lucca/stylelint-config-prisme'],
  rules: {},
};

For your CI

Add the relevant script to lint the code in Jenkins.

"stylelint": "stylelint \"./**/*.scss\"",

You can be more specific and restrict the path of scss files being linted: "stylelint": "stylelint \"./SOME_PATH/**/*.scss\"",

showCachePath parameter

To avoid hitting Github’s rate limit, the script caches Milestones versions in a local file. Knowing which file has been created can be useful, but also hard to find.

Webstorm has an issue with outputting the information during the linting, so outputting the path is optional with a parameter:

npx stylelint "./**/*.scss" showCachePath

Breaking the rules

Overrides

You can apply specific rules with overrides as needed.

Rules can be disabled while incrementally fixing your code. Set them to null. The following example will ignore the no-descending-specificity rule in all SCSS files within `some-path :

module.exports = {
 extends: ['@lucca/stylelint-config-prisme'],
 overrides: [
  {
   files: ['some-path/**/*.scss'],
   rules: {
    'no-descending-specificity': null,
   }
  },
 ],
 rules: {};
};

Ignoring code inline

If needed, each rule can be ignored with stylelint-(dis|en)able.

Please explain why with a comment if you’re doing so. Use stylelint-disable[-*] -- Comment and enable stylelint back as soon as possible: stylelint-enable.

LF versions and Github rate limit

Dates or versions from LF might not show in Stylelint messages.

The cause can be the request to the Github API is blocked because of rate limits on your current IP, resulting in an empty file.

Workaround

• Delete the cache file (showCachePath tells you where).
• Change the IP used to connect to Github (enable or disable your VPN, for example).
• Launch linting again: npx stylelint "./**/*.scss".

Testing locally

• From the root of this package, run npm pack. This will generate a .tgz file.
• From the root of the project you want to lint, run npm i PATH_TO_LUCCA_FRONT_REPOSITORY/packages/stylelint-config/lucca-stylelint-config-prisme-0.0.0.tgz.

The configuration from your local repository should be applied right away. If in doubt, restart your editor.

Configuring your editor

VS Code

⚠️ A VSCode extension bug might prevent you from using stylelint 16+. See below for a fix through VS-code settings.

Those settings in .vscode/settings.json should be fine, but you can also follow instructions on the extension page: :

  "[scss]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "stylelint.vscode-stylelint",
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit"
    }
  },
  "stylelint.reportInvalidScopeDisables": true,
  "stylelint.reportNeedlessDisables": true,
  "stylelint.snippet": ["css", "scss"],
  "stylelint.validate": ["css", "scss"],

Please note the VSCode extension does not take overrides into account.

bug: double slash comments appended to the nearest property

A hackfix is available.

Add the following line in .vscode/settings.json if the issue arises:

  "stylelint.customSyntax": "postcss-scss"

WebStorm

You might need to rename stylelint.config.js to stylelint.config.cjs (CommonJS) and adapt the code in consequence.

In Stylelint settings, make sure Run for files is for SCSS files (**/*.{scss}). It is only for CSS files by default (**/*.{css}).