feat(lint): add prettier formatter to assert LESS files whitespaces

.github/workflows/ci.yml

@@ -11,9 +11,13 @@ jobs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
     - name: Install dependencies
-      run: yarn && yarn add -D eslint-config-airbnb-base eslint-plugin-unicorn eslint-plugin-jest@^26.9.0 @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript
+      run: yarn && yarn add -D eslint-config-airbnb-base eslint-plugin-unicorn eslint-plugin-jest@^26.9.0 @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript github:fomantic/prettier#ca4fc1130f
     - name: Lint JS and LESS files
-      run: npm run lint
+      run: >
+        npm run lint
+        && npx prettier --loglevel warn '!dist' '!test/coverage' '!src/semantic.less' '**/*.{css,less,overrides,variables}' --write
+        && git restore package.json yarn.lock
+        && git add . -N && git diff --exit-code
   test:
     name: Test build process on node ${{ matrix.node-version }}
     runs-on: ubuntu-latest

.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+    tabWidth: 4,
+    overrides: [
+        {
+            files: ['*.less', '*.overrides', '*.variables'],
+            options: {
+                parser: 'less',
+                printWidth: Infinity,
+            },
+        },
+    ],
+};

.stylelintrc.js

@@ -11,16 +11,16 @@ module.exports = {
         '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',
         'color-hex-case': 'lower',
-        'declaration-block-trailing-semicolon': null, // fix bad formatting with "each()"
+        'declaration-colon-newline-after': null, // handled by Prettier
         'function-no-unknown': null,
-        indentation: null, // TODO change to "4" once https://github.com/fomantic/Fomantic-UI/pull/2593#discussion_r1045131096 is fixed
+        'import-notation': null,
+        indentation: null, // handled by Prettier
         linebreaks: 'unix',
         'max-line-length': null,
         'no-descending-specificity': null,
-        'no-extra-semicolons': null, // fix GH-1832 - workaround for wikimedia/less.php parser
+        'no-extra-semicolons': null, // handled by Prettier
         'no-duplicate-selectors': null,
         'number-max-precision': 5,
         'property-case': null,
@@ -38,10 +38,9 @@ module.exports = {
 
         // 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
+        'selector-not-notation': null, // https://caniuse.com/css-not-sel-list
 
         // TODO
-        'selector-not-notation': null, // 169 errors
-        'import-notation': null, // 56 errors
         'keyframes-name-pattern': null, // 50 errors
         'block-no-empty': null, // 25 errors
         'selector-no-vendor-prefix': null, // 19 errors

src/definitions/elements/button.less

@@ -215,7 +215,9 @@
     }
 
     .ui.animated.button .content {
-        will-change: transform, opacity;
+        will-change:
+            transform,
+            opacity;
     }
     .ui.animated.button .visible.content {
         position: relative;
@@ -256,7 +258,9 @@
         /* Vertical */
         .ui.vertical.animated.button .visible.content,
         .ui.vertical.animated.button .hidden.content {
-            transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+            transition:
+                top @animationDuration @animationEasing,
+                transform @animationDuration @animationEasing;
         }
         .ui.vertical.animated.button .visible.content {
             transform: translateY(0);
@@ -282,7 +286,9 @@
         /* Fade */
         .ui.fade.animated.button .visible.content,
         .ui.fade.animated.button .hidden.content {
-            transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+            transition:
+                opacity @animationDuration @animationEasing,
+                transform @animationDuration @animationEasing;
         }
         .ui.fade.animated.button .visible.content {
             left: auto;
@@ -897,6 +903,7 @@
     .ui.tertiary.button {
         transition: color @defaultDuration @defaultEasing !important;
         border-radius: 0;
+        // prettier-ignore
         margin:
             (@verticalPadding - @tertiaryVerticalPadding)
             (@horizontalMargin)

src/definitions/elements/icon.less

@@ -443,8 +443,7 @@ i.icons {
     }
 }
 
-& when ((@variationIconGroups) or (@variationIconCorner))
-and ((@variationIconBordered) or (@variationIconCircular)) {
+& when ((@variationIconGroups) or (@variationIconCorner)) and ((@variationIconBordered) or (@variationIconCircular)) {
     /*************************************************
        Bordered/circular with corner or group icons
     *************************************************/
@@ -527,7 +526,7 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
             }
         }
     });
-};
+}
 
 & when (@variationIconDeprecated) {
     /* Deprecated *In/Out Naming Conflict) */

src/definitions/modules/dropdown.less

@@ -58,7 +58,9 @@
     border-radius: @menuBorderRadius;
     transition: @menuTransition;
     z-index: @menuZIndex;
-    will-change: transform, opacity;
+    will-change:
+        transform,
+        opacity;
 }
 
 .ui.dropdown .menu > * {

src/definitions/modules/modal.less

@@ -33,7 +33,12 @@
     flex: 0 0 auto;
     border-radius: @borderRadius;
     user-select: text;
-    will-change: top, left, margin, transform, opacity;
+    will-change:
+        top,
+        left,
+        margin,
+        transform,
+        opacity;
 }
 
 .ui.modal > :first-child:not(.close):not(.dimmer),

src/definitions/modules/rating.less

@@ -107,8 +107,7 @@
                 0 -@shadowWidth 0 @c,
                 -@shadowWidth 0 0 @c,
                 0 @shadowWidth 0 @c,
-                @shadowWidth 0 0 @c
-            ;
+                @shadowWidth 0 0 @c;
         }
         .ui.@{color}.rating .icon.selected,
         .ui.@{color}.rating .icon.selected.active,
@@ -119,8 +118,7 @@
                 0 -@shadowWidth 0 @h,
                 -@shadowWidth 0 0 @h,
                 0 @shadowWidth 0 @h,
-                @shadowWidth 0 0 @h
-            ;
+                @shadowWidth 0 0 @h;
 
             -webkit-text-stroke: unset;
             background-clip: unset;

src/definitions/modules/toast.less

@@ -126,7 +126,9 @@
         margin-bottom: @toastBoxMarginBottom;
         border-radius: @defaultBorderRadius;
         cursor: default;
-        will-change: transform, opacity;
+        will-change:
+            transform,
+            opacity;
         &:hover {
             opacity: @toastOpacityOnHover;
         }
@@ -589,7 +591,9 @@
 }
 
 .ui.hoverfloating.message:hover when (@variationToastMessage) and (@variationToastFloating) {
-    box-shadow: 0 0 0 1px inset, @floatingShadow;
+    box-shadow:
+        0 0 0 1px inset,
+        @floatingShadow;
 }
 
 .ui.center.toast-container .toast-box,

src/definitions/views/card.less

@@ -675,8 +675,7 @@
             box-shadow:
                 @borderShadow,
                 0 @coloredShadowDistance 0 0 @c,
-                @shadowBoxShadow
-            ;
+                @shadowBoxShadow;
         }
         & when (@variationCardLink) {
             .ui.cards a.@{color}.card:hover,
@@ -688,8 +687,7 @@
                 box-shadow:
                     @borderShadow,
                     0 @coloredShadowDistance 0 0 @h,
-                    @shadowHoverBoxShadow
-                ;
+                    @shadowHoverBoxShadow;
             }
         }
         & when (@variationCardBasic) {
@@ -727,8 +725,7 @@
                 box-shadow:
                     0 @shadowDistance 3px 0 @solidWhiteBorderColor,
                     0 @coloredShadowDistance 0 0 @l,
-                    0 0 0 @borderWidth @solidWhiteBorderColor
-                ;
+                    0 0 0 @borderWidth @solidWhiteBorderColor;
             }
             & when (@variationCardLink) {
                 .ui.inverted.cards a.@{color}.card:hover,
@@ -740,8 +737,7 @@
                     box-shadow:
                         0 @shadowDistance 3px 0 @solidWhiteBorderColor,
                         0 @coloredShadowDistance 0 0 @lh,
-                        0 0 0 @borderWidth @solidWhiteBorderColor
-                    ;
+                        0 0 0 @borderWidth @solidWhiteBorderColor;
                 }
             }
             & when (@variationCardBasic) {

src/themes/amazon/elements/button.variables

@@ -3,16 +3,19 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textTransform: none;
 @textColor: #111;
 @fontWeight: normal;
 @transition:
     opacity @defaultDuration @defaultEasing,
     background-color @defaultDuration @defaultEasing,
     color @defaultDuration @defaultEasing,
-    background @defaultDuration @defaultEasing
-;
+    background @defaultDuration @defaultEasing;
 
 @hoverBackgroundColor: #e0e0e0;
 
@@ -24,18 +27,14 @@
 @backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
 @boxShadow:
     0 1px 0 1px rgba(255, 255, 255, 0.3) inset,
-    0 0 0 1px #adb2bb inset
-;
+    0 0 0 1px #adb2bb inset;
 
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
-@coloredBoxShadow:
-    0 1px 0 0 rgba(255, 255, 255, 0.2) inset
-;
+@coloredBoxShadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
 
 @downBoxShadow:
     0 0 0 1px #adb2bb inset,
-    0 1px 3px rgba(0, 0, 0, 0.2) inset
-;
+    0 1px 3px rgba(0, 0, 0, 0.2) inset;
 
 @labeledIconBackgroundColor: #313a43;
 @labeledIconColor: #fff;

src/themes/bookish/elements/header.variables

@@ -2,7 +2,10 @@
        Header
 -------------------- */
 
-@headerFont: "Karma", "Times New Roman", serif;
+@headerFont:
+    "Karma",
+    "Times New Roman",
+    serif;
 @fontWeight: @normal;
 
 @iconSize: 1.5em;

src/themes/bootstrap3/elements/button.variables

@@ -3,7 +3,11 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textTransform: none;
 @fontWeight: @normal;
 @textColor: rgba(51, 51, 51, 1);
@@ -38,24 +42,20 @@
 @basicHoverBackground: transparent;
 @basicDownBoxShadow:
     0 0 0 1px #adadad inset,
-    0 3px 5px rgba(0, 0, 0, 0.125) inset
-;
+    0 3px 5px rgba(0, 0, 0, 0.125) inset;
 
 @groupButtonOffset: 0 0 0 -1px;
 @verticalGroupOffset: 0 0 -1px 0;
 
 /* States */
 
 @hoverBackgroundColor: #e6e6e6;
-@hoverBoxShadow:
-    0 0 0 1px #adadad inset
-;
+@hoverBoxShadow: 0 0 0 1px #adadad inset;
 
 @downBackgroundColor: #e6e6e6;
 @downBoxShadow:
     0 0 0 1px #adadad inset,
-    0 3px 5px rgba(0, 0, 0, 0.125) inset
-;
+    0 3px 5px rgba(0, 0, 0, 0.125) inset;
 
 @activeBackgroundColor: #e6e6e6;
 

src/themes/chubby/elements/button.variables

@@ -3,7 +3,10 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: "Source Sans Pro", Arial, sans-serif;
+@pageFont:
+    "Source Sans Pro",
+    Arial,
+    sans-serif;
 
 @textTransform: none;
 @fontWeight: @normal;

src/themes/chubby/elements/header.variables

@@ -2,7 +2,12 @@
        Header
 -------------------- */
 
-@headerFont: "Source Sans Pro", Helvetica Neue, Helvetica, Arial, sans-serif;
+@headerFont:
+    "Source Sans Pro",
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @fontWeight: bold;
 @textTransform: none;