feat(lint): unify LESS files whitespaces and string quotes

.stylelintrc.js

@@ -9,41 +9,37 @@ module.exports = {
     ],
     rules: {
         'at-rule-empty-line-before': null,
+        'at-rule-name-case': null,
+        'at-rule-no-unknown': null,
         'block-closing-brace-newline-before': null, // fix bad formatting with "each()"
+        'color-function-notation': 'legacy',
         'declaration-block-trailing-semicolon': null, // fix bad formatting with "each()"
+        'function-no-unknown': null,
         indentation: null, // TODO change to "4" once https://github.com/fomantic/Fomantic-UI/pull/2593#discussion_r1045131096 is fixed
         linebreaks: 'unix',
         'max-line-length': null,
         'no-descending-specificity': null,
         'no-extra-semicolons': null, // fix GH-1832 - workaround for wikimedia/less.php parser
+        'no-duplicate-selectors': null,
         'number-max-precision': 5,
+        'property-case': null,
         'rule-empty-line-before': null,
+        'string-quotes': null,
+        'value-keyword-case': null,
 
         // TODO rules to be removed/fixed in v2.10.0 as fixes are not compatible with IE11
         'alpha-value-notation': 'number', // https://caniuse.com/mdn-css_properties_opacity_percentages
-        'color-function-notation': 'legacy', // https://caniuse.com/mdn-css_types_color_rgba_space_separated_parameters
 
         // TODO
-        '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
-        '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
         'block-no-empty': null, // 25 errors
         'selector-no-vendor-prefix': null, // 19 errors
         'selector-class-pattern': null, // 19 errors
-        'font-family-name-quotes': null, // 13 errors
         'declaration-block-no-redundant-longhand-properties': null, // 12 errors
-        'value-keyword-case': null, // 12 errors
         'value-no-vendor-prefix': null, // 9 errors
-        'no-empty-source': null, // 8 errors
         'font-family-no-missing-generic-family-keyword': null, // 8 errors
         'selector-attribute-quotes': null, // 7 errors
         'shorthand-property-no-redundant-values': null, // 5 errors

src/_site/modules/embed.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/definitions/collections/breadcrumb.less

@@ -12,8 +12,8 @@
             Theme
 *******************************/
 
-@type : 'collection';
-@element : 'breadcrumb';
+@type: 'collection';
+@element: 'breadcrumb';
 
 @import (multiple) '../../theme.config';
 

src/definitions/collections/form.less

@@ -12,8 +12,8 @@
             Theme
 *******************************/
 
-@type : 'collection';
-@element : 'form';
+@type: 'collection';
+@element: 'form';
 
 @import (multiple) '../../theme.config';
 
@@ -98,8 +98,8 @@
 }
 
 /* Set max height on unusual input */
-.ui.form ::-webkit-datetime-edit,
-.ui.form ::-webkit-inner-spin-button {
+.ui.form::-webkit-datetime-edit,
+.ui.form::-webkit-inner-spin-button {
     height: @inputLineHeight;
 }
 
@@ -383,24 +383,24 @@
 --------------------- */
 
 /* browsers require these rules separate */
-.ui.form ::-webkit-input-placeholder {
+.ui.form::-webkit-input-placeholder {
     color: @inputPlaceholderColor;
 }
-.ui.form :-ms-input-placeholder when (@supportIE) {
+.ui.form:-ms-input-placeholder when (@supportIE) {
     color: @inputPlaceholderColor !important;
 }
-.ui.form ::-moz-placeholder {
+.ui.form::-moz-placeholder {
     color: @inputPlaceholderColor;
     opacity: 1;
 }
 
-.ui.form :focus::-webkit-input-placeholder {
+.ui.form:focus::-webkit-input-placeholder {
     color: @inputPlaceholderFocusColor;
 }
-.ui.form :focus:-ms-input-placeholder when (@supportIE) {
+.ui.form:focus:-ms-input-placeholder when (@supportIE) {
     color: @inputPlaceholderFocusColor !important;
 }
-.ui.form :focus::-moz-placeholder {
+.ui.form:focus::-moz-placeholder {
     color: @inputPlaceholderFocusColor;
 }
 
@@ -750,15 +750,15 @@
 
     .ui.form .disabled.fields .field,
     .ui.form .disabled.field,
-    .ui.form .field :disabled {
+    .ui.form .field:disabled {
         pointer-events: @disabledPointerEvents;
         opacity: @disabledOpacity;
     }
     .ui.form .field.disabled > label,
     .ui.form .fields.disabled > label {
         opacity: @disabledLabelOpacity;
     }
-    .ui.form .field.disabled :disabled {
+    .ui.form .field.disabled:disabled {
         opacity: 1;
     }
 }

src/definitions/collections/grid.less

@@ -12,8 +12,8 @@
             Theme
 *******************************/
 
-@type : 'collection';
-@element : 'grid';
+@type: 'collection';
+@element: 'grid';
 
 @import (multiple) '../../theme.config';
 
@@ -141,7 +141,7 @@
     margin: (@rowSpacing / 2) (@gutterWidth / 2);
 }
 .ui.grid .column + .ui.vertical.divider {
-    height: e(%("calc(50%% - %d)", (@rowSpacing / 2)));
+    height: e(%('calc(50%% - %d)', (@rowSpacing / 2)));
 }
 
 /* Remove Border on Last Horizontal Segment */
@@ -1092,10 +1092,10 @@
         }
         .ui[class*="vertically divided"].grid > .row::before {
             position: absolute;
-            content: "";
+            content: '';
             top: 0;
             left: 0;
-            width: e(%("calc(100%% - %d)", @gutterWidth));
+            width: e(%('calc(100%% - %d)', @gutterWidth));
             height: 1px;
             margin: 0 (@gutterWidth / 2);
             box-shadow: @verticallyDividedBorder;
@@ -1136,13 +1136,13 @@
         .ui.relaxed[class*="vertically divided"].grid > .row::before {
             margin-left: (@relaxedGutterWidth / 2);
             margin-right: (@relaxedGutterWidth / 2);
-            width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
+            width: e(%('calc(100%% - %d)', @relaxedGutterWidth));
         }
         & when (@variationGridVeryRelaxed) {
             .ui[class*="very relaxed"][class*="vertically divided"].grid > .row::before {
                 margin-left: (@veryRelaxedGutterWidth / 2);
                 margin-right: (@veryRelaxedGutterWidth / 2);
-                width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
+                width: e(%('calc(100%% - %d)', @veryRelaxedGutterWidth));
             }
         }
     }

src/definitions/collections/menu.less

@@ -13,8 +13,8 @@
             Theme
 *******************************/
 
-@type : 'collection';
-@element : 'menu';
+@type: 'collection';
+@element: 'menu';
 
 @import (multiple) '../../theme.config';
 
@@ -207,7 +207,7 @@
 
 /* Menu */
 .ui.menu .dropdown.item .menu {
-    min-width: e("calc(100% - 1px)");
+    min-width: e('calc(100% - 1px)');
     border-radius: 0 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
     background: @dropdownBackground;
     margin: @dropdownMenuDistance 0 0;
@@ -281,7 +281,7 @@
     /* Vertical */
     .ui.vertical.menu .dropdown.item > i.icon {
         float: right;
-        content: "\f0da";
+        content: '\f0da';
         margin-left: 1em;
     }
     .ui.vertical.menu .dropdown.item .menu {

src/definitions/collections/message.less

@@ -12,8 +12,8 @@
             Theme
 *******************************/
 
-@type : 'collection';
-@element : 'message';
+@type: 'collection';
+@element: 'message';
 
 @import (multiple) '../../theme.config';
 
@@ -289,52 +289,52 @@
 
     @consequences: {
         @positive: {
-            background     : @positiveBackgroundColor;
-            header         : @positiveHeaderColor;
-            boxShadow      : @positiveBoxShadow;
-            boxFloatShadow : @positiveBoxFloatingShadow;
-            text           : @positiveTextColor;
-            invertedText   : @positiveBorderColor;
+            background: @positiveBackgroundColor;
+            header: @positiveHeaderColor;
+            boxShadow: @positiveBoxShadow;
+            boxFloatShadow: @positiveBoxFloatingShadow;
+            text: @positiveTextColor;
+            invertedText: @positiveBorderColor;
         };
         @negative: {
-            background     : @negativeBackgroundColor;
-            header         : @negativeHeaderColor;
-            boxShadow      : @negativeBoxShadow;
-            boxFloatShadow : @negativeBoxFloatingShadow;
-            text           : @negativeTextColor;
-            invertedText   : @negativeBorderColor;
+            background: @negativeBackgroundColor;
+            header: @negativeHeaderColor;
+            boxShadow: @negativeBoxShadow;
+            boxFloatShadow: @negativeBoxFloatingShadow;
+            text: @negativeTextColor;
+            invertedText: @negativeBorderColor;
         };
         @info: {
-            background     : @infoBackgroundColor;
-            header         : @infoHeaderColor;
-            boxShadow      : @infoBoxShadow;
-            boxFloatShadow : @infoBoxFloatingShadow;
-            text           : @infoTextColor;
-            invertedText   : @formInfoLabelBackground;
+            background: @infoBackgroundColor;
+            header: @infoHeaderColor;
+            boxShadow: @infoBoxShadow;
+            boxFloatShadow: @infoBoxFloatingShadow;
+            text: @infoTextColor;
+            invertedText: @formInfoLabelBackground;
         };
         @warning: {
-            background     : @warningBackgroundColor;
-            header         : @warningHeaderColor;
-            boxShadow      : @warningBoxShadow;
-            boxFloatShadow : @warningBoxFloatingShadow;
-            text           : @warningTextColor;
-            invertedText   : @formWarningLabelBackground;
+            background: @warningBackgroundColor;
+            header: @warningHeaderColor;
+            boxShadow: @warningBoxShadow;
+            boxFloatShadow: @warningBoxFloatingShadow;
+            text: @warningTextColor;
+            invertedText: @formWarningLabelBackground;
         };
         @error: {
-            background     : @errorBackgroundColor;
-            header         : @errorHeaderColor;
-            boxShadow      : @errorBoxShadow;
-            boxFloatShadow : @errorBoxFloatingShadow;
-            text           : @errorTextColor;
-            invertedText   : @formErrorLabelBackground;
+            background: @errorBackgroundColor;
+            header: @errorHeaderColor;
+            boxShadow: @errorBoxShadow;
+            boxFloatShadow: @errorBoxFloatingShadow;
+            text: @errorTextColor;
+            invertedText: @formErrorLabelBackground;
         };
         @success: {
-            background     : @successBackgroundColor;
-            header         : @successHeaderColor;
-            boxShadow      : @successBoxShadow;
-            boxFloatShadow : @successBoxFloatingShadow;
-            text           : @successTextColor;
-            invertedText   : @formSuccessLabelBackground;
+            background: @successBackgroundColor;
+            header: @successHeaderColor;
+            boxShadow: @successBoxShadow;
+            boxFloatShadow: @successBoxFloatingShadow;
+            text: @successTextColor;
+            invertedText: @formSuccessLabelBackground;
         };
     }
 

src/definitions/collections/table.less

@@ -12,8 +12,8 @@
             Theme
 *******************************/
 
-@type : 'collection';
-@element : 'table';
+@type: 'collection';
+@element: 'table';
 
 @import (multiple) '../../theme.config';
 
@@ -485,7 +485,7 @@
                 scrollbar-arrow-color: @trackInvertedBackgroundHex;
             }
 
-            /* firefox : first color thumb, second track */
+            /* firefox: first color thumb, second track */
             scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
         }
     }

src/definitions/elements/button.less

@@ -12,8 +12,8 @@
             Theme
 *******************************/
 
-@type : 'element';
-@element : 'button';
+@type: 'element';
+@element: 'button';
 
 @import (multiple) '../../theme.config';
 
@@ -259,7 +259,7 @@
             transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
         }
         .ui.vertical.animated.button .visible.content {
-            transform: translateY(0%);
+            transform: translateY(0);
             right: auto;
         }
         .ui.vertical.animated.button .hidden.content {
@@ -1725,13 +1725,13 @@
     each(@variationButtonConsequences, {
         @consequence: @value;
 
-        @_backgroundColor: "@{consequence}Color";
-        @_backgroundColorHover: "@{consequence}ColorHover";
-        @_backgroundColorFocus: "@{consequence}ColorFocus";
-        @_backgroundColorDown: "@{consequence}ColorDown";
-        @_backgroundColorActive: "@{consequence}ColorActive";
-        @_textColor: "@{consequence}TextColor";
-        @_textShadow: "@{consequence}TextShadow";
+        @_backgroundColor: '@{consequence}Color';
+        @_backgroundColorHover: '@{consequence}ColorHover';
+        @_backgroundColorFocus: '@{consequence}ColorFocus';
+        @_backgroundColorDown: '@{consequence}ColorDown';
+        @_backgroundColorActive: '@{consequence}ColorActive';
+        @_textColor: '@{consequence}TextColor';
+        @_textShadow: '@{consequence}TextShadow';
 
         /* Standard */
         .ui.@{consequence}.buttons .button,
@@ -1827,7 +1827,7 @@
 
     /* Clearfix */
     .ui.buttons::after {
-        content: ".";
+        content: '.';
         display: block;
         height: 0;
         clear: both;
@@ -1975,7 +1975,7 @@
             }
             & when (@variationButtonInverted) {
                 .ui.spaced.basic.inverted.buttons .basic.button {
-                    margin-bottom: e(%("calc(%d + %d)", @spacedMargin, @basicColoredBorderSize));
+                    margin-bottom: e(%('calc(%d + %d)', @spacedMargin, @basicColoredBorderSize));
                     margin-top: @basicColoredBorderSize;
                 }
             }