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

Compared to Stylelint, Prettier is very simple tool and I am quite supprised Stylelint is deprecating the whitespace rules in favor of Prettier. For LESS it seems ok, for JS, we should never enable Prettier as formatting is part of a code and improves readability.

As Prettier is an opinionated formatter instead of an linter, we need to satisfy it everywhere without exceptions.

When I was crafting this PR, I found several Prettier issues and proposed changes to Prettier:

Fix semicolon duplicated at the end of LESS file prettier/prettier#14007
Fix no space after unary minus when followed by opening parenthesis in LESS prettier/prettier#14008
Do not change case of property name if inside a variable declaration in LESS prettier/prettier#14034
In this PR, these changes are contained and Prettier is patched before it is run. Once the changes are merged in prettier and stable release is made, they can be removed.

This PR fixes minor whitespaces unfixed/undetected in GH-2610.

And also asserts:

PHP port of the LESS fails to compile colors.less #1832
feat(lint): add stylelint overrides and variation files #2593 (comment)
Prettier has no built in support to dump the diff - prettier/prettier#6885 - so we dump it in the CI using git.

.github/workflows/ci.yml

@@ -14,6 +14,12 @@ jobs:
       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
     - name: Lint JS and LESS files
       run: npm run lint
+    - name: Assert LESS files formatting using Prettier
+      run: >
+        yarn add -D github:fomantic/prettier#2.8.1-patched
+        && 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

@@ -256,7 +256,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 +284,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 +901,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/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

@@ -589,7 +589,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

@@ -11,8 +11,7 @@
     opacity @defaultDuration @defaultEasing,
     background-color @defaultDuration @defaultEasing,
     color @defaultDuration @defaultEasing,
-    background @defaultDuration @defaultEasing
-;
+    background @defaultDuration @defaultEasing;
 
 @hoverBackgroundColor: #e0e0e0;
 
@@ -24,18 +23,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/bootstrap3/elements/button.variables

@@ -38,24 +38,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/classic/elements/button.variables

@@ -14,8 +14,7 @@
 @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
 @boxShadow:
     0 0 0 1px @borderColor inset,
-    @shadowBoxShadow
-;
+    @shadowBoxShadow;
 
 /* Padding */
 @verticalPadding: 0.8em;
@@ -28,8 +27,7 @@
 @groupBoxShadow: none;
 @groupButtonBoxShadow:
     0 0 0 1px @borderColor inset,
-    @shadowBoxShadow
-;
+    @shadowBoxShadow;
 @verticalBoxShadow: 0 0 0 1px @borderColor inset;
 @groupButtonOffset: 0 0 0 -1px;
 @verticalGroupOffset: 0 0 -1px 0;
@@ -50,8 +48,7 @@
 @focusBackgroundImage: none;
 @focusBoxShadow:
     0 0 1px rgba(81, 167, 232, 0.8) inset,
-    0 0 3px 2px rgba(81, 167, 232, 0.8)
-;
+    0 0 3px 2px rgba(81, 167, 232, 0.8);
 @focusColor: @hoveredTextColor;
 @iconFocusOpacity: 0.85;
 
@@ -60,8 +57,7 @@
 @downBackgroundImage: "";
 @downBoxShadow:
     0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important
-;
+    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
 @downColor: @pressedTextColor;
 
 /* Active */
@@ -70,16 +66,14 @@
 @activeColor: @selectedTextColor;
 @activeBoxShadow:
     0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important
-;
+    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
 
 /* Active + Hovered */
 @activeHoverBackgroundColor: #dadada;
 @activeHoverBackgroundImage: none;
 @activeHoverBoxShadow:
     0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important
-;
+    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
 @activeHoverColor: @selectedTextColor;
 
 /* Loading */

src/themes/classic/views/card.overrides

@@ -17,8 +17,7 @@
 @width: 300px;
 @boxShadow:
     0 0 0 1px @borderColor,
-    0 3px 0 0 @borderColor
-;
+    0 3px 0 0 @borderColor;
 @border: none;
 @zIndex: "";
 
@@ -87,8 +86,7 @@
 @hoverBorder: none;
 @hoverBoxShadow:
     0 0 0 1px @selectedBorderColor,
-    0 3px 0 0 @selectedBorderColor
-;
+    0 3px 0 0 @selectedBorderColor;
 
 /* -------------------
       Variations

src/themes/colored/modules/checkbox.variables

@@ -24,6 +24,4 @@
 
 /* Handle */
 @handleBackground: @white @subtleGradient;
-@handleBoxShadow:
-    0 0 0 1px @selectedBorderColor inset
-;
+@handleBoxShadow: 0 0 0 1px @selectedBorderColor inset;

src/themes/default/collections/form.variables

@@ -37,8 +37,7 @@
 @inputColor: @textColor;
 @inputTransition:
     color @defaultDuration @defaultEasing,
-    border-color @defaultDuration @defaultEasing
-;
+    border-color @defaultDuration @defaultEasing;
 @inputBoxShadow: 0 0 0 0 transparent inset;
 
 /* Select */

src/themes/default/collections/menu.variables

@@ -27,8 +27,7 @@
 @itemTransition:
     background @defaultDuration @defaultEasing,
     box-shadow @defaultDuration @defaultEasing,
-    color @defaultDuration @defaultEasing
-;
+    color @defaultDuration @defaultEasing;
 @itemFontWeight: @normal;
 @itemTextColor: @textColor;
 
@@ -431,8 +430,7 @@
 @attachedBorder: @borderWidth solid @solidBorderColor;
 @attachedBottomBoxShadow:
     @boxShadow,
-    @attachedBoxShadow
-;
+    @attachedBoxShadow;
 
 /* Resize large sizes */
 @mini: @11px;