🚨(app-desk) add css linter

eslint is not enough for css, so we need a css linter too.
This commit adds stylelint to the project, we configure it
with prettier and add a check during the build process.

src/frontend/app/desk/package.json

@@ -4,11 +4,12 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "prettier --check . && yarn stylelint && next build",
     "build-theme": "cunningham -g css,ts -o src/cunningham --utility-classes",
     "start": "next start",
     "lint": "next lint",
-    "prettier": "prettier --write ."
+    "prettier": "prettier --write .",
+    "stylelint": "stylelint \"**/*.css\""
   },
   "dependencies": {
     "@openfun/cunningham-react": "2.4.0",
@@ -26,6 +27,9 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.2",
     "prettier": "3.1.1",
+    "stylelint": "16.1.0",
+    "stylelint-config-standard": "36.0.0",
+    "stylelint-prettier": "5.0.0",
     "typescript": "5"
   }
 }

src/frontend/app/desk/src/app/globals.css

@@ -1 +1 @@
-@import '../cunningham/cunningham-style.css';
+@import url('../cunningham/cunningham-style.css');

src/frontend/app/desk/src/cunningham/cunningham-custom-tokens.css

@@ -1,7 +1,7 @@
 :root {
   /**
-      * Input
-     */
+  * Input
+  */
   --c--components--forms-input--border-radius--hover: var(
     --c--components--forms-input--border-radius
   );
@@ -11,15 +11,17 @@
   --c--components--forms-input--border-color--hover: var(
     --c--components--forms-input--border-color
   );
+
   /**
-      * Datepicker
-     **/
+  * Datepicker
+  **/
   --c--components--forms-datepicker--border-color--hover: var(
     --c--components--forms-datepicker--border-color
   );
+
   /**
-      * Select
-     **/
+  * Select
+  **/
   --c--components--forms-select--value-color--disabled: var(
     --c--theme--colors--greyscale-400
   );

src/frontend/app/desk/src/cunningham/cunningham-style.css

@@ -1,8 +1,8 @@
-@import '@openfun/cunningham-react/icons';
-@import '@openfun/cunningham-react/style';
-@import '@openfun/cunningham-react/fonts';
-@import './cunningham-tokens.css';
-@import './cunningham-custom-tokens.css';
+@import url('@openfun/cunningham-react/icons');
+@import url('@openfun/cunningham-react/style');
+@import url('@openfun/cunningham-react/fonts');
+@import url('./cunningham-tokens.css');
+@import url('./cunningham-custom-tokens.css');
 
 .c__input,
 .c__field,
@@ -11,19 +11,24 @@
 .typo {
   font-family: var(--c--theme--font--families--base);
 }
+
 .c__field {
   line-height: initial;
 }
+
 .labelled-box label {
   color: var(--c--theme--colors--primary-500);
 }
+
 .labelled-box--disabled label {
   color: var(--c--components--forms-labelledbox--label-color--small--disabled);
 }
+
 .c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder {
   top: 50%;
   transform: translateY(-50%);
 }
+
 /**
  * Input
  * TextArea
@@ -33,55 +38,68 @@
   transition: all var(--c--theme--transitions--duration)
     var(--c--theme--transitions--ease-out);
 }
+
 .c__input__wrapper:has(input[readonly]),
 .c__input__wrapper:has(input[readonly]) * {
   cursor: default;
 }
+
 .c__textarea__wrapper:has(input.border-none),
 .c__textarea__wrapper:has(input.border-none) *,
 .c__input__wrapper:has(input.border-none),
 .c__input__wrapper:has(input.border-none) * {
   border: none;
 }
+
 .c__input__wrapper:hover,
 .c__textarea__wrapper:hover {
-  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
+  box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px;
 }
+
 .c__textarea__wrapper--disabled:hover,
 .c__input__wrapper--disabled:hover,
 .c__input__wrapper:hover:has(input[readonly]) {
-  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 0px;
+  box-shadow: var(--c--theme--colors--primary-500) 0 0 0 0;
 }
+
 .c__input__wrapper--disabled {
   color: var(--c--components--forms-input--value-color--disabled);
 }
+
 .c__input__wrapper .labelled-box__label.placeholder {
   cursor: inherit;
 }
+
 .c__input__wrapper .c__input,
 .c__textarea__wrapper .c__textarea {
   width: 100%;
 }
+
 .c__input__wrapper--disabled .c__input {
   color: var(--c--components--forms-input--value-color--disabled);
 }
+
 input:-webkit-autofill,
 input:-webkit-autofill:focus {
   transition:
     background-color 0s 600000s,
     color 0s 600000s;
 }
+
 .c__textarea__wrapper .c__textarea {
   color: var(--c--components--forms-textarea--color);
 }
+
 .c__textarea__wrapper:hover {
   border-color: var(--c--components--forms-textarea--border-color-hover);
 }
+
 .c__textarea__wrapper--disabled:hover {
   border-color: var(
     --c--components--forms-textarea--disabled--border-color-hover
   );
 }
+
 /**
  * Select
 */
@@ -93,53 +111,65 @@ input:-webkit-autofill:focus {
   border: none;
   box-shadow: none;
 }
+
 .c__select__wrapper {
   transition: all var(--c--theme--transitions--duration)
     var(--c--theme--transitions--ease-out);
   min-height: var(--c--components--forms-select--height);
   height: auto;
 }
+
 .c__select:not(.c__select--disabled) .c__select__wrapper:hover {
-  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
+  box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px;
 }
+
 .c__select__menu__item {
   transition: all var(--c--theme--transitions--duration)
     var(--c--theme--transitions--ease-out);
 }
+
 .c__select--disabled .c__select__wrapper label,
 .c__select--disabled .c__select__wrapper input,
 .c_select__no_bg .c__select__wrapper {
   background: none;
 }
+
 .c__select__wrapper:focus-within .labelled-box--disabled label {
   color: var(--c--components--forms-labelledbox--label-color--small--disabled);
 }
+
 .c__select__wrapper .labelled-box {
   display: flex;
   gap: 0.6rem;
   flex-direction: column;
   align-items: flex-start;
 }
+
 .c__select__wrapper .labelled-box .labelled-box__children {
   padding: unset;
   padding-right: 5rem;
 }
+
 .c__select__wrapper .labelled-box .c__select__inner__actions {
-  right: 0px;
+  right: 0;
   top: 50%;
   position: absolute;
 }
+
 .c__select__wrapper label {
   position: relative;
   padding-right: 5rem;
   max-width: none;
 }
+
 .c__select__wrapper .c__select__inner__actions__open:focus {
   outline: none;
 }
+
 .c__select__wrapper .labelled-box__label.c__offscreen {
   display: none;
 }
+
 /**
  * DataGrid
 */
@@ -149,46 +179,56 @@ input:-webkit-autofill:focus {
   color: var(--c--components--datagrid--cell--color);
   font-size: var(--c--components--datagrid--cell--size);
 }
+
 .c__datagrid > table th .c__datagrid__header {
   color: var(--c--theme--colors--primary-500);
   font-weight: var(--c--components--datagrid--header--weight);
   font-size: var(--c--components--datagrid--header--size);
 }
+
 .c__datagrid > table tbody tr {
   border: 1px var(--c--theme--colors--primary-100) solid;
 }
+
 .c__datagrid > .c__pagination {
   padding-top: 1rem;
   justify-content: flex-end;
 }
-@media (max-width: 380px) {
+
+@media (width <= 380px) {
   .c__datagrid > .c__pagination {
     flex-direction: column;
     align-items: center;
     gap: 1rem;
   }
 }
+
 /**
  * Date picker
 */
 .c__popover.c__popover--borderless {
   z-index: 3;
 }
+
 .c__date-picker__wrapper {
   transition: all var(--c--theme--transitions--duration)
     var(--c--theme--transitions--ease-out);
 }
+
 .c__date-picker:not(.c__date-picker--disabled):hover .c__date-picker__wrapper {
-  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
+  box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px;
 }
+
 .c__date-picker.c__date-picker--invalid:not(.c__date-picker--disabled):hover
   .c__date-picker__wrapper {
-  box-shadow: var(--c--theme--colors--danger-300) 0px 0px 0px 2px;
+  box-shadow: var(--c--theme--colors--danger-300) 0 0 0 2px;
 }
+
 .c__date-picker__wrapper button[aria-label='Clear date'],
 .c__date-picker.c__date-picker--invalid .c__date-picker__wrapper * {
   color: var(--c--theme--colors--danger-300);
 }
+
 /**
  * Others
 */
@@ -196,34 +236,42 @@ input:-webkit-autofill:focus {
   border-color: transparent;
   background-color: transparent;
 }
+
 .c__checkbox {
   transition: all 0.8s ease-in-out;
 }
+
 /**
  * Button
 */
 .c__button {
   text-decoration: none;
 }
+
 .c__button:hover.c__button-no-bg,
 .c__button.c__button-no-bg,
 .c__button:disabled.c__button-no-bg {
   background-color: transparent;
 }
+
 .c__button--medium {
   padding: 0.9rem var(--c--theme--spacings--s);
 }
+
 .c__button--small {
   padding: 0.6rem 0.75rem;
 }
+
 .c__button--with-icon--right {
   padding: 0.7rem var(--c--theme--spacings--t) 0.7rem
     var(--c--theme--spacings--s);
 }
+
 .c__button--primary {
   background-color: var(--c--components--button--primary--background--color);
   color: var(--c--components--button--primary--color);
 }
+
 .c__button--primary:active,
 .c__button--primary.c__button--active {
   background-color: var(
@@ -232,14 +280,17 @@ input:-webkit-autofill:focus {
   color: var(--c--components--button--primary--color-active);
   border-color: var(--c--components--button--primary--border--color-active);
 }
+
 .c__button:disabled {
   background-color: var(--c--components--button--disabled--background--color);
   color: var(--c--components--button--disabled--color);
 }
+
 .c__button--success {
   background-color: var(--c--components--button--success--background--color);
   color: var(--c--components--button--success--color);
 }
+
 .c__button--success:hover,
 .c__button--success:focus-visible {
   background-color: var(
@@ -247,17 +298,20 @@ input:-webkit-autofill:focus {
   );
   color: var(--c--components--button--success--color-hover);
 }
+
 .c__button--success:disabled {
   background-color: var(
     --c--components--button--success--background--color-disabled
   );
   color: var(--c--components--button--success--color-disabled);
 }
+
 .c__button--secondary {
   background-color: var(--c--components--button--secondary--background--color);
   color: var(--c--components--button--secondary--color);
   border: 1px solid var(--c--components--button--secondary--border--color);
 }
+
 .c__button--secondary:hover,
 .c__button--secondary:focus-visible {
   background-color: var(
@@ -265,10 +319,12 @@ input:-webkit-autofill:focus {
   );
   color: var(--c--components--button--secondary--color-hover);
 }
+
 .c__button--tertiary {
   color: var(--c--components--button--tertiary--color);
   border: none;
 }
+
 .c__button--tertiary:hover,
 .c__button--tertiary:focus-visible {
   background-color: var(
@@ -276,15 +332,18 @@ input:-webkit-autofill:focus {
   );
   color: var(--c--components--button--tertiary--color);
 }
+
 .c__button--tertiary:disabled {
   background-color: var(
     --c--components--button--tertiary--background--color-disabled
   );
   color: var(--c--components--button--tertiary--color-disabled);
 }
+
 .c__button--danger {
   background-color: var(--c--components--button--danger--background--color);
 }
+
 .c__button--danger:hover,
 .c__button--danger:focus-visible {
   background-color: var(
@@ -292,6 +351,7 @@ input:-webkit-autofill:focus {
   );
   color: var(--c--components--button--danger--color-hover);
 }
+
 .c__button--danger:disabled {
   background-color: var(
     --c--components--button--danger--background--color-disabled

src/frontend/app/desk/stylelint.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+  rules: {
+    'custom-property-pattern': null,
+    'selector-class-pattern': null,
+    'no-descending-specificity': null,
+  },
+};