feat(lint): add stylelint for LESS and normalize whitespaces

Like #2501, but for LESS. No functionality change.

Author: mvorisek

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
         sourceType: 'module',
     },
     ignorePatterns: [
+        '!.*',
         '/dist',
         '/examples/assets/library',
         '/test/coverage',

.stylelintrc.js

@@ -0,0 +1,46 @@
+module.exports = {
+    extends: [
+        'stylelint-config-standard',
+    ],
+    customSyntax: 'postcss-less',
+    ignoreFiles: [
+        'dist/**',
+        'test/coverage/**',
+    ],
+    rules: {
+        indentation: 4,
+        'at-rule-empty-line-before': null,
+        'block-closing-brace-newline-before': null,
+        'declaration-block-trailing-semicolon': null, // bad formatting with "each()"
+        'declaration-empty-line-before': null,
+        'max-line-length': null,
+        'rule-empty-line-before': null,
+
+        // TODO
+        'no-descending-specificity': null, // 11532 errors
+        'property-case': null, // 338 errors
+        'string-quotes': null, // 249 errors
+        'no-duplicate-selectors': null, // 212 errors
+        'selector-not-notation': null, // 169 errors
+        'no-invalid-position-at-import-rule': null, // 104 errors
+        'at-rule-no-unknown': null, // 104 errors
+        'import-notation': null, // 55 errors
+        'function-no-unknown': null, // 43 errors
+        'property-no-vendor-prefix': null, // 31 errors
+        'selector-no-vendor-prefix': null, // 19 errors
+        'number-leading-zero': null, // 19 errors
+        'declaration-block-no-redundant-longhand-properties': null, // 12 errors
+        'value-keyword-case': null, // 11 errors
+        'value-no-vendor-prefix': null, // 9 errors
+        'keyframes-name-pattern': null, // 9 errors
+        'color-function-notation': null, // 8 errors
+        'alpha-value-notation': null, // 8 errors
+        'selector-attribute-quotes': null, // 7 errors
+        'number-no-trailing-zeros': null, // 6 errors
+        'shorthand-property-no-redundant-values': null, // 5 errors
+        'declaration-block-no-duplicate-properties': null, // 2 errors
+        'number-max-precision': null, // 2 errors
+        'color-hex-case': null, // 1 error
+        'color-hex-length': null, // 1 error
+    },
+};

package.json

@@ -26,8 +26,8 @@
   "scripts": {
     "build": "gulp build",
     "changelog": "auto-changelog -p",
-    "lint": "eslint -c .eslintrc.js --ext .js .",
-    "lint-fix": "eslint -c .eslintrc.js --ext .js . --fix"
+    "lint": "eslint --ext .js . && stylelint \"**/*.{css,less}\"",
+    "lint-fix": "eslint --ext .js . --fix && stylelint \"**/*.{css,less}\" --fix"
   },
   "dependencies": {
     "@actions/core": "^1.6.0",
@@ -77,7 +77,11 @@
     "auto-changelog": "^2.4.0",
     "eslint": "^8.28.0",
     "node-fetch": "^2.6.0",
-    "semver": "^7.3.5"
+    "postcss": "^8.4.19",
+    "postcss-less": "^6.0.0",
+    "semver": "^7.3.5",
+    "stylelint": "^14.16.0",
+    "stylelint-config-standard": "^29.0.0"
   },
   "engines": {
     "node": ">=12",

src/definitions/collections/breadcrumb.less

@@ -12,27 +12,26 @@
             Theme
 *******************************/
 
-@type    : 'collection';
+@type : 'collection';
 @element : 'breadcrumb';
 
 @import (multiple) '../../theme.config';
 
-
 /*******************************
            Breadcrumb
 *******************************/
 
 .ui.breadcrumb {
-  line-height: @lineHeight;
-  display: @display;
-  margin: @verticalMargin 0;
-  vertical-align: @verticalAlign;
+    line-height: @lineHeight;
+    display: @display;
+    margin: @verticalMargin 0;
+    vertical-align: @verticalAlign;
 }
 .ui.breadcrumb:first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 .ui.breadcrumb:last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 /*******************************
@@ -41,82 +40,80 @@
 
 /* Divider */
 .ui.breadcrumb .divider {
-  display: inline-block;
-  opacity: @dividerOpacity;
-  margin: 0 @dividerSpacing 0;
+    display: inline-block;
+    opacity: @dividerOpacity;
+    margin: 0 @dividerSpacing 0;
 
-  font-size: @dividerSize;
-  color: @dividerColor;
-  vertical-align: @dividerVerticalAlign;
+    font-size: @dividerSize;
+    color: @dividerColor;
+    vertical-align: @dividerVerticalAlign;
 }
 
 /* Link */
 .ui.breadcrumb a {
-  color: @linkColor;
+    color: @linkColor;
 }
 .ui.breadcrumb a:hover {
-  color: @linkHoverColor;
+    color: @linkHoverColor;
 }
 
-
 /* Icon Divider */
 .ui.breadcrumb .icon.divider {
-  font-size: @iconDividerSize;
-  vertical-align: @iconDividerVerticalAlign;
+    font-size: @iconDividerSize;
+    vertical-align: @iconDividerVerticalAlign;
 }
 
 /* Section */
 .ui.breadcrumb a.section {
-  cursor: pointer;
+    cursor: pointer;
 }
 .ui.breadcrumb .section {
-  display: inline-block;
-  margin: @sectionMargin;
-  padding: @sectionPadding;
+    display: inline-block;
+    margin: @sectionMargin;
+    padding: @sectionPadding;
 }
 
 /* Loose Coupling */
 .ui.breadcrumb.segment {
-  display: inline-block;
-  padding: @segmentPadding;
+    display: inline-block;
+    padding: @segmentPadding;
 }
 
 & when (@variationBreadcrumbInverted) {
-  /* Inverted */
-  .ui.inverted.breadcrumb {
-    color: @invertedColor;
-  }
-  .ui.inverted.breadcrumb > .active.section {
-    color: @invertedActiveColor;
-  }
-  .ui.inverted.breadcrumb > .divider {
-    color: @invertedDividerColor;
-  }
+    /* Inverted */
+    .ui.inverted.breadcrumb {
+        color: @invertedColor;
+    }
+    .ui.inverted.breadcrumb > .active.section {
+        color: @invertedActiveColor;
+    }
+    .ui.inverted.breadcrumb > .divider {
+        color: @invertedDividerColor;
+    }
 }
 
 /*******************************
             States
 *******************************/
 
 .ui.breadcrumb .active.section {
-  font-weight: @activeFontWeight;
+    font-weight: @activeFontWeight;
 }
 
-
 /*******************************
            Variations
 *******************************/
 
 .ui.breadcrumb {
-  font-size: @medium;
+    font-size: @medium;
 }
 & when not (@variationBreadcrumbSizes = false) {
-  each(@variationBreadcrumbSizes, {
-    @s: @@value;
-    .ui.@{value}.breadcrumb {
-      font-size: @s;
-    }
-  })
+    each(@variationBreadcrumbSizes, {
+        @s: @@value;
+        .ui.@{value}.breadcrumb {
+            font-size: @s;
+        }
+    })
 }
 
 .loadUIOverrides();