feat(lint): add stylelint overrides and variation files

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/setup-node@v3
     - name: Install dependencies
       run: yarn
-    - name: Lint JS files
+    - name: Lint JS and CSS/LESS files
       run: npm run lint
   test:
     name: Test build process on node ${{ matrix.node-version }}

.stylelintrc.js

@@ -8,39 +8,52 @@ module.exports = {
         '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,
+        'block-closing-brace-newline-before': null, // fix bad formatting with "each()"
+        'declaration-block-trailing-semicolon': null, // fix bad formatting with "each()"
+        indentation: null, // TODO change to "4" once https://github.com/fomantic/Fomantic-UI/pull/2593#discussion_r1045131096 is fixed
         'max-line-length': null,
+        'no-descending-specificity': null,
+        'no-extra-semicolons': null, // fix GH-1832 - workaround for wikimedia/less.php parser
         '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
+        'string-quotes': null, // 1676 errors
+        'at-rule-no-unknown': null, // 1081 errors
+        'property-case': null, // 866 errors
+        'at-rule-name-case': null, // 764 errors
+        'no-duplicate-selectors': null, // 224 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
+        'function-no-unknown': null, // 67 errors
+        'length-zero-no-unit': null, // 64 errors
+        'import-notation': null, // 56 errors
+        'keyframes-name-pattern': null, // 50 errors
+        'property-no-vendor-prefix': null, // 49 errors
+        'number-leading-zero': null, // 49 errors
+        'color-function-notation': null, // 32 errors
+        'alpha-value-notation': null, // 32 errors
+        'color-hex-case': null, // 32 errors
+        'block-no-empty': null, // 25 errors
         'selector-no-vendor-prefix': null, // 19 errors
-        'number-leading-zero': null, // 19 errors
+        'selector-class-pattern': null, // 19 errors
+        'number-no-trailing-zeros': null, // 16 errors
+        'font-family-name-quotes': null, // 13 errors
         'declaration-block-no-redundant-longhand-properties': null, // 12 errors
-        'value-keyword-case': null, // 11 errors
+        'value-keyword-case': null, // 12 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
+        'color-hex-length': null, // 9 errors
+        'no-empty-source': null, // 8 errors
+        'font-family-no-missing-generic-family-keyword': null, // 8 errors
+        'number-max-precision': null, // 7 errors
         'selector-attribute-quotes': null, // 7 errors
-        'number-no-trailing-zeros': null, // 6 errors
         'shorthand-property-no-redundant-values': null, // 5 errors
+        'function-url-quotes': 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
+        'font-family-no-duplicate-names': null, // 2 errors
+        'function-linear-gradient-no-nonstandard-direction': null, // 1 error
+        'at-rule-no-vendor-prefix': null, // 1 error
+        'declaration-block-no-shorthand-property-overrides': null, // 1 error
     },
+    reportNeedlessDisables: true,
 };

package.json

@@ -26,8 +26,8 @@
   "scripts": {
     "build": "gulp build",
     "changelog": "auto-changelog -p",
-    "lint": "eslint --ext .js . && stylelint \"**/*.{css,less}\"",
-    "lint-fix": "eslint --ext .js . --fix && stylelint \"**/*.{css,less}\" --fix"
+    "lint": "eslint --ext .js . && stylelint \"**/*.{css,less,overrides,variables}\"",
+    "lint-fix": "eslint --ext .js . --fix && stylelint \"**/*.{css,less,overrides,variables}\" --fix"
   },
   "dependencies": {
     "@actions/core": "^1.6.0",

src/_site/collections/menu.overrides

@@ -1,3 +1,3 @@
 /*******************************
          Site Overrides
-*******************************/
+*******************************/

src/_site/elements/flag.variables

@@ -1,3 +1,3 @@
-/*-------------------
+/* -------------------
    Flag Variables
---------------------*/
+-------------------- */

src/_site/globals/site.variables

@@ -1,3 +1,3 @@
 /*******************************
      User Global Variables
-*******************************/
+*******************************/

src/definitions/collections/breadcrumb.less

@@ -43,7 +43,6 @@
     display: inline-block;
     opacity: @dividerOpacity;
     margin: 0 @dividerSpacing 0;
-
     font-size: @dividerSize;
     color: @dividerColor;
     vertical-align: @dividerVerticalAlign;

src/definitions/collections/form.less

@@ -123,11 +123,9 @@
     outline: none;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-
     line-height: @inputLineHeight;
     padding: @inputPadding;
     font-size: @inputFontSize;
-
     background: @inputBackground;
     border: @inputBorder;
     color: @inputColor;
@@ -152,7 +150,6 @@
     margin: 0;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-
     padding: @textAreaPadding;
     background: @textAreaBackground;
     border: @textAreaBorder;
@@ -796,15 +793,12 @@
         content: '';
         top: 50%;
         left: 50%;
-
         margin: @loaderMargin;
         width: @loaderSize;
         height: @loaderSize;
-
         animation: loader @loaderSpeed infinite linear;
         border: @loaderLineWidth solid @loaderLineColor;
         border-radius: @circularRadius;
-
         box-shadow: 0 0 0 1px transparent;
         visibility: visible;
         z-index: @loaderLineZIndex;
@@ -1119,10 +1113,8 @@
     .ui.form .inline.field > select {
         display: inline-block;
         width: auto;
-
         margin-top: 0;
         margin-bottom: 0;
-
         vertical-align: middle;
         font-size: @inlineInputSize;
     }

src/definitions/collections/grid.less

@@ -66,7 +66,6 @@
 .ui.grid > .row > .column {
     position: relative;
     display: inline-block;
-
     width: @oneWide;
     padding-left: (@gutterWidth / 2);
     padding-right: (@gutterWidth / 2);
@@ -1096,10 +1095,8 @@
             content: "";
             top: 0;
             left: 0;
-
             width: e(%("calc(100%% - %d)", @gutterWidth));
             height: 1px;
-
             margin: 0 (@gutterWidth / 2);
             box-shadow: @verticallyDividedBorder;
         }

src/definitions/collections/menu.less

@@ -82,7 +82,6 @@
     -webkit-tap-highlight-color: transparent;
     flex: 0 0 auto;
     user-select: none;
-
     background: @itemBackground;
     padding: @itemVerticalPadding @itemHorizontalPadding;
     text-transform: @itemTextTransform;
@@ -102,7 +101,6 @@
     top: 0;
     right: 0;
     height: 100%;
-
     width: @dividerSize;
     background: @dividerBackground;
 }
@@ -292,6 +290,7 @@
             /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
             min-width: 0;
         }
+
         min-width: max-content;
         margin: 0 0 0 @dropdownMenuDistance;
         box-shadow: @dropdownVerticalMenuBoxShadow;
@@ -643,7 +642,6 @@ Floated Menu / Item
     .ui.tabular.menu .item {
         background: transparent;
         border-bottom: none;
-
         border-left: @tabularBorderWidth solid transparent;
         border-right: @tabularBorderWidth solid transparent;
         border-top: @tabularOppositeBorderWidth solid transparent;
@@ -968,7 +966,6 @@ Floated Menu / Item
             border-bottom-style: solid;
             border-radius: 0;
             align-self: flex-end;
-
             margin: 0 0 -@secondaryPointingBorderWidth;
             padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
             border-bottom-width: @secondaryPointingBorderWidth;
@@ -1094,7 +1091,6 @@ Floated Menu / Item
         border-radius: 0;
         box-shadow: none;
         border: none;
-
         margin: @textMenuMargin;
     }
     .ui.text.menu .item {
@@ -1596,6 +1592,7 @@ Floated Menu / Item
                 /* IE hack to make dropdown icons appear inline */
                 display: -ms-inline-flexbox !important;
             }
+
             display: inline-block;
         }
     }
@@ -1764,15 +1761,12 @@ Floated Menu / Item
         left: 50%;
         transform: translateX(-50%) translateY(-50%) rotate(45deg);
         background: none;
-
         margin: (@arrowBorderWidth / 2) 0 0;
         width: @arrowSize;
         height: @arrowSize;
-
         border: none;
         border-bottom: @arrowBorder;
         border-right: @arrowBorder;
-
         z-index: @arrowZIndex;
         transition: @arrowTransition;
     }
@@ -1783,10 +1777,8 @@ Floated Menu / Item
             right: 0;
             bottom: auto;
             left: auto;
-
             transform: translateX(50%) translateY(-50%) rotate(45deg);
             margin: 0 -(@arrowBorderWidth / 2) 0 0;
-
             border: none;
             border-top: @arrowBorder;
             border-right: @arrowBorder;

src/definitions/collections/message.less

@@ -296,39 +296,39 @@
             text           : @positiveTextColor;
             invertedText   : @positiveBorderColor;
         };
-        @negative: { // stylelint-disable-line indentation
+        @negative: {
             background     : @negativeBackgroundColor;
             header         : @negativeHeaderColor;
             boxShadow      : @negativeBoxShadow;
             boxFloatShadow : @negativeBoxFloatingShadow;
             text           : @negativeTextColor;
             invertedText   : @negativeBorderColor;
         };
-        @info: { // stylelint-disable-line indentation
+        @info: {
             background     : @infoBackgroundColor;
             header         : @infoHeaderColor;
             boxShadow      : @infoBoxShadow;
             boxFloatShadow : @infoBoxFloatingShadow;
             text           : @infoTextColor;
             invertedText   : @formInfoLabelBackground;
         };
-        @warning: { // stylelint-disable-line indentation
+        @warning: {
             background     : @warningBackgroundColor;
             header         : @warningHeaderColor;
             boxShadow      : @warningBoxShadow;
             boxFloatShadow : @warningBoxFloatingShadow;
             text           : @warningTextColor;
             invertedText   : @formWarningLabelBackground;
         };
-        @error: { // stylelint-disable-line indentation
+        @error: {
             background     : @errorBackgroundColor;
             header         : @errorHeaderColor;
             boxShadow      : @errorBoxShadow;
             boxFloatShadow : @errorBoxFloatingShadow;
             text           : @errorTextColor;
             invertedText   : @formErrorLabelBackground;
         };
-        @success: { // stylelint-disable-line indentation
+        @success: {
             background     : @successBackgroundColor;
             header         : @successHeaderColor;
             boxShadow      : @successBoxShadow;