DEV: Introduce stylelint (#29852)

Stylelint is a css linter: https://stylelint.io/

As part of this change we have added two javascript scripts:

```
pnpm lint:css
pnpm lint:css:fix
```

Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for
configuration in VSCode.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

plugins/styleguide/assets/stylesheets/colors.scss

@@ -2,141 +2,187 @@
   .primary-50 {
     background-color: var(--primary-50);
   }
+
   .primary-100 {
     background-color: var(--primary-100);
   }
+
   .primary-200 {
     background-color: var(--primary-200);
   }
+
   .primary-300 {
     background-color: var(--primary-300);
   }
+
   .primary-400 {
     background-color: var(--primary-400);
   }
+
   .primary-500 {
     background-color: var(--primary-500);
   }
+
   .primary-600 {
     background-color: var(--primary-600);
   }
+
   .primary-700 {
     background-color: var(--primary-700);
   }
+
   .primary-800 {
     background-color: var(--primary-800);
   }
+
   .primary-900 {
     background-color: var(--primary-900);
   }
+
   .primary-very-low {
     background-color: var(--primary-very-low);
   }
+
   .primary-low {
     background-color: var(--primary-low);
   }
+
   .primary-low-mid {
     background-color: var(--primary-low-mid);
   }
+
   .primary-medium {
     background-color: var(--primary-medium);
   }
+
   .primary-high {
     background-color: var(--primary-high);
   }
+
   .primary {
     background-color: var(--primary);
   }
+
   .secondary-low {
     background-color: var(--secondary-low);
   }
+
   .secondary-medium {
     background-color: var(--secondary-medium);
   }
+
   .secondary-high {
     background-color: var(--secondary-high);
   }
+
   .secondary {
     background-color: var(--secondary);
   }
+
   .tertiary-low {
     background-color: var(--tertiary-low);
   }
+
   .tertiary-medium {
     background-color: var(--tertiary-medium);
   }
+
   .tertiary-high {
     background-color: var(--tertiary-high);
   }
+
   .tertiary {
     background-color: var(--tertiary);
   }
+
   .tertiary-50 {
     background-color: var(--tertiary-50);
   }
+
   .tertiary-100 {
     background-color: var(--tertiary-100);
   }
+
   .tertiary-200 {
     background-color: var(--tertiary-200);
   }
+
   .tertiary-300 {
     background-color: var(--tertiary-300);
   }
+
   .tertiary-400 {
     background-color: var(--tertiary-400);
   }
+
   .tertiary-500 {
     background-color: var(--tertiary-500);
   }
+
   .tertiary-600 {
     background-color: var(--tertiary-600);
   }
+
   .tertiary-700 {
     background-color: var(--tertiary-700);
   }
+
   .tertiary-800 {
     background-color: var(--tertiary-800);
   }
+
   .tertiary-900 {
     background-color: var(--tertiary-900);
   }
+
   .quaternary-low {
     background-color: var(--quaternary-low);
   }
+
   .quaternary {
     background-color: var(--quaternary);
   }
+
   .highlight-bg {
     background-color: var(--highlight-bg);
   }
+
   .highlight {
     background-color: var(--highlight);
   }
+
   .danger-low {
     background-color: var(--danger-low);
   }
+
   .danger-low-mid {
     background-color: var(--danger-low-mid);
   }
+
   .danger-medium {
     background-color: var(--danger-medium);
   }
+
   .danger {
     background-color: var(--danger);
   }
+
   .success-low {
     background-color: var(--success-low);
   }
+
   .success-medium {
     background-color: var(--success-medium);
   }
+
   .success {
     background-color: var(--success);
   }
+
   .love-low {
     background-color: var(--love-low);
   }
+
   .love {
     background-color: var(--love);
   }

plugins/styleguide/assets/stylesheets/styleguide.scss

@@ -106,26 +106,29 @@
           }
         }
       }
-
       margin-bottom: 2em;
     }
 
     &.colors-examples {
       .styleguide-example {
         display: flex;
+
         .example-title {
           min-width: 15%;
           margin-right: 1em;
           border-bottom: none;
+
           &-text {
             color: var(--primary);
             text-transform: capitalize;
           }
+
           &-use-case {
             font-size: var(--font-down-1);
             display: block;
           }
         }
+
         .color-row {
           display: flex;
 
@@ -141,6 +144,7 @@
               flex: 4;
               border-bottom: 1px solid var(--primary-300);
             }
+
             .color-name {
               flex: 1;
               display: flex;
@@ -158,13 +162,16 @@
   pre {
     background: var(--primary-very-low);
     white-space: pre-wrap;
+
     &.pre-inline {
       display: inline-block;
       margin: 0;
       vertical-align: bottom;
     }
+
     span {
       color: var(--primary-medium);
+
       &.hljs-attribute {
         color: teal;
       }
@@ -218,11 +225,13 @@
     text-align: center;
     padding: 10px;
     overflow: hidden;
+
     svg {
       display: block;
       font-size: 3em;
       margin: 5px auto;
     }
+
     span {
       font-size: var(--font-down-1);
       word-wrap: break-word;

plugins/styleguide/assets/stylesheets/typography.scss

@@ -5,39 +5,51 @@ p[class*="font-"] {
 .font-up-6 {
   font-size: var(--font-up-6);
 }
+
 .font-up-5 {
   font-size: var(--font-up-5);
 }
+
 .font-up-4 {
   font-size: var(--font-up-4);
 }
+
 .font-up-3 {
   font-size: var(--font-up-3);
 }
+
 .font-up-2 {
   font-size: var(--font-up-2);
 }
+
 .font-up-1 {
   font-size: var(--font-up-1);
 }
+
 .font-0 {
   font-size: var(--font-0);
 }
+
 .font-down-1 {
   font-size: var(--font-down-1);
 }
+
 .font-down-2 {
   font-size: var(--font-down-2);
 }
+
 .font-down-3 {
   font-size: var(--font-down-3);
 }
+
 .font-down-4 {
   font-size: var(--font-down-4);
 }
+
 .font-down-5 {
   font-size: var(--font-down-5);
 }
+
 .font-down-6 {
   font-size: var(--font-down-6);
 }