From 2fd9f2b72c59621b5d3714064996e039c2c4a15c Mon Sep 17 00:00:00 2001
From: Markus Bucher <bucher@atix.de>
Date: Thu, 21 Dec 2023 09:52:29 +0000
Subject: [PATCH] Add (S)CSS linting

---
 .github/workflows/javascript_tests.yml        |  1 +
 .stylelintrc                                  |  5 +++++
 package.json                                  |  4 ++++
 .../ApplicationInstanceReport.scss            | 22 +++++++++----------
 .../ExistingHostSelection.scss                | 10 ++++-----
 .../ParameterSelection.scss                   | 20 ++++++++---------
 6 files changed, 36 insertions(+), 26 deletions(-)
 create mode 100644 .stylelintrc

diff --git a/.github/workflows/javascript_tests.yml b/.github/workflows/javascript_tests.yml
index 82dd6f30..cf480099 100644
--- a/.github/workflows/javascript_tests.yml
+++ b/.github/workflows/javascript_tests.yml
@@ -24,6 +24,7 @@ jobs:
         run: |
           # FIXME: we need to fix the findings, first
           #npm run lint
+          npm run stylelint
       - name: Testing
         run: npm run test
 ...
diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 00000000..5f8bb229
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+  ],
+}
diff --git a/package.json b/package.json
index 0e50ea04..dbfc9b33 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,15 @@
     "prettier": "^1.19.1",
     "react-redux-test-utils": "^0.1.1",
     "sortabular": "^1.5.1",
+    "stylelint": "^9.3.0",
+    "stylelint-config-standard": "^18.0.0",
     "table-resolver": "^3.2.0"
   },
   "scripts": {
     "lint": "tfm-lint --plugin -d *.js,webpack",
     "lint-fix": "tfm-lint --plugin -d *.js,webpack --fix",
+    "stylelint": "stylelint webpack/**/*.scss",
+    "stylelint-fix": "stylelint webpack/**/*.scss --fix",
     "test": "jest --no-cache"
   },
   "repository": {
diff --git a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.scss b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.scss
index a4456e80..49e6f060 100644
--- a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.scss
+++ b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.scss
@@ -5,26 +5,26 @@
 }
 
 .deploy_status_head {
-  float:left;
-  width:25%;
-  height:10%;
+  float: left;
+  width: 25%;
+  height: 10%;
 }
 
 .deploy_status_content {
-  float:left;
-  width:75%;
-  height:10%;
+  float: left;
+  width: 75%;
+  height: 10%;
 }
 
 .deploy_report_hosts {
-  float:left;
-  width:25%;
-  height:100%;
+  float: left;
+  width: 25%;
+  height: 100%;
 }
 
 .deploy_report_tasks {
-  float:left;
-  width:75%;
+  float: left;
+  width: 75%;
   min-height: 300px;
   background-color: #ecf9fe;
   padding: 10px;
diff --git a/webpack/components/ExistingHostSelection/ExistingHostSelection.scss b/webpack/components/ExistingHostSelection/ExistingHostSelection.scss
index 35adca3c..dd987c20 100644
--- a/webpack/components/ExistingHostSelection/ExistingHostSelection.scss
+++ b/webpack/components/ExistingHostSelection/ExistingHostSelection.scss
@@ -1,11 +1,11 @@
 @import '~@theforeman/vendor/scss/variables';
 
 .add_existing_hosts_modal {
-    margin-top: 0;
-    margin-bottom: 0;
-    height: 100%;
-    width: 80%;
-    max-width: none !important;
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 100%;
+  width: 80%;
+  max-width: none !important;
 }
 
 .row {
diff --git a/webpack/components/ParameterSelection/ParameterSelection.scss b/webpack/components/ParameterSelection/ParameterSelection.scss
index cc031ae0..f24f1f2a 100644
--- a/webpack/components/ParameterSelection/ParameterSelection.scss
+++ b/webpack/components/ParameterSelection/ParameterSelection.scss
@@ -1,17 +1,17 @@
 @import '~@theforeman/vendor/scss/variables';
 
 .param_selection_modal {
-    margin-top: 0;
-    margin-bottom: 0;
-    height: 100%;
-    width: 80%;
-    max-width: none !important;
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 100%;
+  width: 80%;
+  max-width: none !important;
 }
 
 .complex_data_modal {
-    margin-top: 0;
-    margin-bottom: 0;
-    height: 80%;
-    width: 40%;
-    max-width: none !important;
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 80%;
+  width: 40%;
+  max-width: none !important;
 }