Migrate LESS to SCSS (jenkinsci#7850)

Author: janfaracik

.editorconfig

@@ -1,6 +1,6 @@
 root = true
 
-[*.{js, less, css, hbs}]
+[*.{js, scss, css, hbs}]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

war/.stylelintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   extends: "stylelint-config-standard",
-  customSyntax: "postcss-less",
+  customSyntax: "postcss-scss",
+  ignoreFiles: ["src/main/scss/pluginSetupWizard.less"],
   rules: {
     "no-descending-specificity": null,
     "selector-class-pattern": "[a-z]",
@@ -15,6 +16,20 @@ module.exports = {
     ],
     "property-no-vendor-prefix": null,
     "at-rule-no-vendor-prefix": null,
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          "function",
+          "if",
+          "each",
+          "include",
+          "mixin",
+          "for",
+          "use",
+        ],
+      },
+    ],
     "color-function-notation": "legacy",
     "alpha-value-notation": "number",
     "number-max-precision": 5,

war/package.json

@@ -16,10 +16,10 @@
     "start": "yarn dev --watch",
     "lint:js": "eslint --config .eslintrc.js ../ --ext js && prettier --check ../",
     "lint:js-ci": "eslint --config .eslintrc.js ../ --ext js -f checkstyle -o target/eslint-warnings.xml && prettier --check ../",
-    "lint:css": "stylelint src/main/less",
-    "lint:css-ci": "stylelint src/main/less --custom-formatter stylelint-checkstyle-reporter -o target/stylelint-warnings.xml",
+    "lint:css": "stylelint src/main/scss",
+    "lint:css-ci": "stylelint src/main/scss --custom-formatter stylelint-checkstyle-reporter -o target/stylelint-warnings.xml",
     "lint:ci": "yarn lint:js-ci && yarn lint:css-ci",
-    "lint:fix": "prettier --write ../ && stylelint src/main/less --fix && eslint --config .eslintrc.js --fix ../",
+    "lint:fix": "prettier --write ../ && stylelint src/main/scss --fix && eslint --config .eslintrc.js --fix ../",
     "lint": "yarn lint:js && yarn lint:css"
   },
   "devDependencies": {
@@ -39,9 +39,11 @@
     "less-loader": "11.1.0",
     "mini-css-extract-plugin": "2.7.5",
     "postcss": "8.4.21",
-    "postcss-less": "6.0.0",
     "postcss-loader": "7.2.4",
+    "postcss-scss": "4.0.6",
     "prettier": "2.8.7",
+    "sass": "1.62.0",
+    "sass-loader": "13.2.2",
     "style-loader": "3.3.2",
     "stylelint": "15.5.0",
     "stylelint-checkstyle-reporter": "0.2.0",

war/postcss.config.js

@@ -1,5 +1,5 @@
 /* eslint-env node */
 module.exports = {
-  parser: "postcss-less",
+  parser: "postcss-scss",
   plugins: [require("autoprefixer")],
 };

war/src/main/js/add-item.less

@@ -0,0 +1,6 @@
+@use "widgets/variables";
+
+/*
+ * Widget styles
+ */
+@use "widgets/add/addform";

war/src/main/js/add-item.scss

@@ -1,5 +1,3 @@
-@import "../../../less/abstracts/theme.less";
-
 #add-item-panel {
   form > .header {
     position: relative;
@@ -266,14 +264,7 @@
     border-color: var(--input-border);
     box-shadow: inset 999rem 0 var(--background);
     -webkit-touch-callout: text;
-    -webkit-user-select: text;
-    -khtml-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
     user-select: text;
-    -moz-transition: 0.5s;
-    -webkit-transition: 0.5s;
-    -o-transition: 0.5s;
     transition: 0.5s;
 
     .icon {
@@ -283,10 +274,6 @@
 
   li {
     -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     cursor: pointer;
     border: 1px solid transparent;

war/src/main/js/widgets/add/addform.less war/src/main/js/widgets/add/addform.scss

@@ -14,5 +14,3 @@
 
   --input-line-height: 2.25em;
 }
-
-@border-radius: 3px;

war/src/main/js/widgets/layout-mixins.less

@@ -0,0 +1,44 @@
+@use "theme";
+
+// Generates a series of color override classes and their variations,
+// e.g. .jenkins-!-color-blue, .jenkins-!-color-light-blue, .jenkins-!-color-dark-blue
+@each $key, $value in theme.$colors {
+  .jenkins-\!-color-light-#{$key} {
+    --color: var(--light-#{$key});
+
+    color: var(--light-#{$key}) !important;
+  }
+  .jenkins-\!-color-#{$key} {
+    --color: var(--#{$key});
+
+    color: var(--#{$key}) !important;
+  }
+  .jenkins-\!-color-dark-#{$key} {
+    --color: var(--dark-#{$key});
+
+    color: var(--dark-#{$key}) !important;
+  }
+}
+
+@each $key, $value in theme.$semantics {
+  .jenkins-\!-#{$key}-color {
+    --color: #{$value};
+
+    color: #{$value} !important;
+  }
+}
+
+// Deprecated - don't use the below classes
+.greyed {
+  color: #999;
+}
+
+.redbold {
+  color: var(--red);
+  font-weight: bold;
+}
+
+.greenbold {
+  color: var(--green);
+  font-weight: bold;
+}