webui: setup lint for style files

ui/webui/.stylelintrc.json

@@ -0,0 +1,38 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "declaration-colon-newline-after": null,
+    "selector-list-comma-newline-after": null,
+
+    "at-rule-empty-line-before": null,
+    "declaration-colon-space-before": null,
+    "declaration-empty-line-before": null,
+    "custom-property-empty-line-before": null,
+    "comment-empty-line-before": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "scss/dollar-variable-colon-space-after": null,
+
+    "custom-property-pattern": null,
+    "declaration-block-no-duplicate-properties": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "declaration-block-no-shorthand-property-overrides": null,
+    "declaration-block-single-line-max-declarations": null,
+    "font-family-no-duplicate-names": null,
+    "function-url-quotes": null,
+    "indentation": null,
+    "keyframes-name-pattern": null,
+    "max-line-length": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/at-import-partial-extension": null,
+    "scss/at-mixin-pattern": null,
+    "scss/comment-no-empty": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/double-slash-comment-whitespace-inside": null,
+    "scss/no-global-function-names": null,
+    "scss/operator-no-unspaced": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null
+  }
+}

ui/webui/build.js

@@ -10,6 +10,7 @@ import { cleanPlugin } from './pkg/lib/esbuild-cleanup-plugin.js';
 import { cockpitPoEsbuildPlugin } from './pkg/lib/cockpit-po-plugin.js';
 import { cockpitRsyncEsbuildPlugin } from './pkg/lib/cockpit-rsync-plugin.js';
 import { eslintPlugin } from './pkg/lib/esbuild-eslint-plugin.js';
+import { stylelintPlugin } from './pkg/lib/esbuild-stylelint-plugin.js';
 import { replace } from 'esbuild-plugin-replace';
 import { sassPlugin } from 'esbuild-sass-plugin';
 
@@ -70,6 +71,7 @@ const context = await esbuild.context({
         cleanPlugin(),
         ...lint
             ? [
+                stylelintPlugin({ filter: new RegExp(cwd + '/src/.*\\.(css?|scss?)$') }),
                 eslintPlugin({ filter: new RegExp(cwd + '\/src\/.*\.(jsx?|js?)$') })
             ]
             : [],

ui/webui/package.json

@@ -9,7 +9,9 @@
     "watch": "ESBUILD_WATCH=true ./build.js",
     "build": "./build.js",
     "eslint": "eslint --ext .js --ext .jsx src/",
-    "eslint:fix": "eslint --fix --ext .js --ext .jsx src/"
+    "eslint:fix": "eslint --fix --ext .js --ext .jsx src/",
+    "stylelint": "stylelint 'src/**/*{.css,scss}'",
+    "stylelint:fix": "stylelint --fix 'src/**/*{.css,scss}'"
   },
   "devDependencies": {
     "chrome-remote-interface": "^0.32.0",
@@ -35,7 +37,10 @@
     "qunit": "^2.19.0",
     "sass": "^1.59.3",
     "sizzle": "^2.3.6",
-    "stdio": "^2.1.1"
+    "stdio": "^2.1.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-formatter-pretty": "^3.1.1"
   },
   "dependencies": {
     "@patternfly/patternfly": "4.224.2",

ui/webui/src/components/HeaderKebab.scss

@@ -17,11 +17,12 @@
     display: none;
 }
 
-/* Make the close button more obvious, since we hide the side graphic*/
+/* Make the close button more obvious, since we hide the side graphic */
 .pf-c-about-modal-box__close .pf-c-button.pf-m-plain {
   --pf-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
   position: absolute;
 }
+
 .pf-c-about-modal-box__close .pf-c-button.pf-m-plain:hover {
   --pf-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
 }
@@ -30,6 +31,7 @@
   .title {
       font-size: var(--pf-c-title--m-3xl--FontSize);
   }
+
   .subtitle {
     font-size: var(--pf-c-title--m-xl--FontSize);
   }

ui/webui/src/components/app.scss

@@ -14,6 +14,7 @@ html:not(.index-page) body {
 #installation-wizard .pf-c-wizard__main {
   display: flex;
 }
+
 #installation-wizard .pf-c-wizard__main-body {
   flex: 1 1 auto;
 }
@@ -23,6 +24,7 @@ html:not(.index-page) body {
   .ct-table .pf-c-table__expandable-row-content {
     display: flex;
   }
+
   .ct-table .ct-table {
     flex: 75% 0 0;
   }

ui/webui/src/components/installation/InstallationProgress.scss

@@ -1,6 +1,7 @@
 .pf-c-empty-state__content {
-    width: 100%
+    width: 100%;
 }
+
 .installation-progress-status {
     &-success .pf-c-empty-state__icon {
         color: var(--pf-global--success-color--100);

ui/webui/src/components/storage/DiskEncryption.scss

@@ -1,4 +1,4 @@
 // Span disk encryption password fields to take slightly more width than the default
-#disk-encryption-encrypt-devices ~.pf-c-check__body {
+#disk-encryption-encrypt-devices ~ .pf-c-check__body {
   width: min(60ch, 100%);
 }