Skip to content

Bump stylelint

Jonathan Adeline requested to merge stylelint-v14 into develop

What is in this MR

This MR bumps stylelint to v16 instead of v13. The main reason for the change is that the vscode-style lint extension doesn't support stylelint v13 anymore. (see !2162 (comment 1826951456)

This upgrade comes with new rule configs :

  • stylelint-config-standard-scss : this config checks the scss syntax and best practices.
  • stylelint-selector-bem-pattern : this config checks whether our selectors comply with the BEM naming convention.

I had to change the default settings for a few rules (see stylelintrc.js) mainly because our Storybook version (6.5) seems to use an old Sass compiler, which is incompatible with some new CSS syntax.

How to test this MR

  • Checkout this branch

  • Run ./dev.sh restart --build to make sure you install the latest dependencies.

  • Run yarn install on your local web-frontend directory to update the dependencies used by your IDE.

  • If you are using VSCode add the following in your settings.json :

      "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss"]

  • Open web-frontend/modules/core/assets/scss/components/views/grid/file.scss and rename .grid-field-file__dragging to .grid_field-file__dragging.

    In the same file on line 30 replace :

      padding: 0 5px;

    with:

      padding: 0px 5px;

    Your IDE should display errors for these 2 changes.

  • Run yarn run stylelint in frontend container. The 2 same errors should be listed.

  • Run yarn run stylelint --fix in the frontend container. The padding error should be fixed automatically. The BEM CSS pattern error should still popup.

Merge Request Checklist

  • changelog.md has been updated if required.
  • New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
  • The latest Chrome and Firefox have been used to test any new frontend features
  • Documentation has been updated
  • Quality Standards are met
  • Performance: tables are still fast with 100k+ rows, 100+ field tables
  • The redoc API pages have been updated for any REST API changes
  • Our custom API docs are updated for changes to endpoints accessed via api tokens
  • The UI/UX has been updated following UI Style Guide
Edited by Andrea Disarò

Merge request reports