fomantic · lubber-de · Dec 21, 2022 · Dec 18, 2022 · Dec 20, 2022 · Dec 20, 2022
diff --git a/.github/workflows/ci.yml b/.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

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+    tabWidth: 4,
+    overrides: [
+        {
+            files: ['*.less', '*.overrides', '*.variables'],
+            options: {
+                parser: 'less',
+                printWidth: Infinity,
+            },
+        },
+    ],
+};
diff --git a/.stylelintrc.js b/.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

diff --git a/src/definitions/elements/button.less b/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)

diff --git a/src/definitions/elements/icon.less b/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) */

diff --git a/src/definitions/modules/rating.less b/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;

diff --git a/src/definitions/modules/toast.less b/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,

diff --git a/src/definitions/views/card.less b/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) {

diff --git a/src/themes/amazon/elements/button.variables b/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;

diff --git a/src/themes/bootstrap3/elements/button.variables b/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;
 

diff --git a/src/themes/classic/elements/button.variables b/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 */

diff --git a/src/themes/classic/views/card.overrides b/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

diff --git a/src/themes/colored/modules/checkbox.variables b/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;
diff --git a/src/themes/default/collections/form.variables b/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 */

diff --git a/src/themes/default/collections/menu.variables b/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;