feat(lint): modernize/unify CSS but maintain IE11 compatibility

Fix several stylelint stylelint-config-standard config advisories.

Author: mvorisek

.stylelintrc.js

@@ -11,12 +11,15 @@ module.exports = {
         'at-rule-empty-line-before': null,
         'at-rule-name-case': null,
         'at-rule-no-unknown': null,
+        'block-no-empty': null,
         'color-function-notation': 'legacy',
         'color-hex-case': 'lower',
         'declaration-colon-newline-after': null, // handled by Prettier
+        'font-family-no-missing-generic-family-keyword': null,
         'function-no-unknown': null,
         'import-notation': null,
         indentation: null, // handled by Prettier
+        'keyframes-name-pattern': null,
         linebreaks: 'unix',
         'max-line-length': null,
         'no-descending-specificity': null,
@@ -39,21 +42,7 @@ 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
-        'keyframes-name-pattern': null, // 50 errors
-        'block-no-empty': null, // 25 errors
-        'selector-no-vendor-prefix': null, // 19 errors
-        'selector-class-pattern': null, // 19 errors
-        'declaration-block-no-redundant-longhand-properties': null, // 12 errors
-        'value-no-vendor-prefix': null, // 9 errors
-        'font-family-no-missing-generic-family-keyword': null, // 8 errors
-        'shorthand-property-no-redundant-values': null, // 5 errors
-        'declaration-block-no-duplicate-properties': null, // 2 errors
-        '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
+        'selector-no-vendor-prefix': null,
     },
     reportNeedlessDisables: true,
 };

src/definitions/collections/breadcrumb.less

@@ -42,7 +42,7 @@
 .ui.breadcrumb .divider {
     display: inline-block;
     opacity: @dividerOpacity;
-    margin: 0 @dividerSpacing 0;
+    margin: 0 @dividerSpacing;
     font-size: @dividerSize;
     color: @dividerColor;
     vertical-align: @dividerVerticalAlign;

src/definitions/collections/grid.less

@@ -23,8 +23,7 @@
 
 .ui.grid {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     align-items: stretch;
     padding: 0;
 }
@@ -34,10 +33,7 @@
 ----------------------- */
 
 .ui.grid {
-    margin-top: -(@rowSpacing / 2);
-    margin-bottom: -(@rowSpacing / 2);
-    margin-left: -(@gutterWidth / 2);
-    margin-right: -(@gutterWidth / 2);
+    margin: -(@rowSpacing / 2) -(@gutterWidth / 2);
 }
 & when (@variationGridRelaxed) {
     .ui.relaxed.grid {
@@ -84,8 +80,7 @@
 .ui.grid > .row {
     position: relative;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     justify-content: inherit;
     align-items: stretch;
     width: 100% !important;
@@ -1696,7 +1691,7 @@
         .ui.stackable.grid > .column:not(.row),
         .ui.grid > .stackable.stackable.stackable.row > .column {
             width: 100% !important;
-            margin: 0 0 !important;
+            margin: 0 !important;
             box-shadow: none !important;
             padding: (@stackableRowSpacing / 2) (@stackableGutter / 2);
         }
@@ -1908,10 +1903,7 @@
 
     /* Row */
     .ui.ui.ui.compact.grid > .row {
-        padding-top: (@compactRowSpacing / 2);
-        padding-bottom: (@compactRowSpacing / 2);
-        padding-left: 0;
-        padding-right: 0;
+        padding: (@compactRowSpacing / 2) 0;
     }
 
     /* Columns */
@@ -1955,10 +1947,7 @@
 
         /* Row */
         .ui.ui.ui[class*="very compact"].grid > .row {
-            padding-top: (@veryCompactRowSpacing / 2);
-            padding-bottom: (@veryCompactRowSpacing / 2);
-            padding-left: 0;
-            padding-right: 0;
+            padding: (@veryCompactRowSpacing / 2) 0;
         }
 
         /* Columns */

src/definitions/collections/menu.less

@@ -962,13 +962,11 @@ Floated Menu / Item
         }
 
         .ui.secondary.pointing.menu .item {
-            border-bottom-color: transparent;
-            border-bottom-style: solid;
+            border-bottom: @secondaryPointingBorderWidth solid transparent;
             border-radius: 0;
             align-self: flex-end;
             margin: 0 0 -@secondaryPointingBorderWidth;
             padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
-            border-bottom-width: @secondaryPointingBorderWidth;
             transition: @secondaryItemTransition;
         }
         .ui.secondary.pointing.menu .ui.dropdown .menu .item {
@@ -1034,17 +1032,13 @@ Floated Menu / Item
             /* Vertical Pointing */
             .ui.secondary.vertical.pointing.menu {
                 border-bottom-width: 0;
-                border-right-width: @secondaryPointingBorderWidth;
-                border-right-style: solid;
-                border-right-color: @secondaryPointingBorderColor;
+                border-right: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
             }
             .ui.secondary.vertical.pointing.menu .item {
                 border-bottom: none;
-                border-right-style: solid;
-                border-right-color: transparent;
+                border-right: @secondaryPointingBorderWidth solid transparent;
                 border-radius: 0 !important;
                 margin: @secondaryVerticalPointingItemMargin;
-                border-right-width: @secondaryPointingBorderWidth;
             }
 
             /* Vertical Active */
@@ -1590,6 +1584,7 @@ Floated Menu / Item
         .ui.compact.vertical.menu {
             & when (@supportIE) {
                 /* IE hack to make dropdown icons appear inline */
+                // stylelint-disable-next-line value-no-vendor-prefix
                 display: -ms-inline-flexbox !important;
             }
 

src/definitions/collections/table.less

@@ -1814,7 +1814,6 @@
     & when (@variationTableStuckHead) or (@variationTableStuckFoot) {
         .ui.head.stuck.table > thead,
         .ui.foot.stuck.table > tfoot {
-            position: -webkit-sticky;
             position: sticky;
             z-index: @stuckZIndex;
         }
@@ -1854,7 +1853,6 @@
         border-left: 0;
         & th:first-child,
         td:first-child {
-            position: -webkit-sticky;
             position: sticky;
             left: 0;
             border-left: @cellBorder;
@@ -1872,7 +1870,6 @@
         border-right: 0;
         & th:last-child,
         td:last-child {
-            position: -webkit-sticky;
             position: sticky;
             right: 0;
             border-right: @cellBorder;

src/definitions/elements/button.less

@@ -704,7 +704,7 @@
 
     .ui.compact.labeled.icon.buttons .button > .icon,
     .ui.compact.labeled.icon.button > .icon {
-        padding: @compactVerticalPadding 0 @compactVerticalPadding 0;
+        padding: @compactVerticalPadding 0;
     }
 }
 
@@ -1005,7 +1005,7 @@
         border-bottom-left-radius: inherit;
         text-align: center;
         animation: none;
-        padding: @verticalPadding 0 @verticalPadding 0;
+        padding: @verticalPadding 0;
         margin: @labeledIconMargin;
         width: @labeledIconWidth;
         background-color: @labeledIconBackgroundColor;

src/definitions/elements/divider.less

@@ -232,10 +232,7 @@
     .ui.divider.inverted,
     .ui.divider.inverted::after,
     .ui.divider.inverted::before {
-        border-top-color: @invertedShadowColor !important;
-        border-left-color: @invertedShadowColor !important;
-        border-bottom-color: @invertedHighlightColor !important;
-        border-right-color: @invertedHighlightColor !important;
+        border-color: @invertedShadowColor @invertedHighlightColor @invertedHighlightColor @invertedShadowColor !important;
     }
 }
 

src/definitions/elements/header.less

@@ -448,7 +448,7 @@
     .ui.attached.header {
         background: @attachedBackground;
         padding: @attachedVerticalPadding @attachedHorizontalPadding;
-        margin: 0 @attachedOffset 0 @attachedOffset;
+        margin: 0 @attachedOffset;
         box-shadow: @attachedBoxShadow;
         border: @attachedBorder;
         border-radius: 0;

src/definitions/elements/image.less

@@ -256,8 +256,7 @@ img.ui.image {
     }
     .ui.centered.images {
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
         align-items: stretch;
         justify-content: center;
     }
@@ -297,7 +296,7 @@ img.ui.image {
 
     .ui.images {
         font-size: 0;
-        margin: 0 -@imageHorizontalMargin 0;
+        margin: 0 -@imageHorizontalMargin;
     }
 
     .ui.images .image,

src/definitions/elements/label.less

@@ -899,7 +899,6 @@ a.ui.active.label:hover::before {
     .ui[class*="bottom pointing"].label::before,
     .ui[class*="pointing below"].label::before {
         border-width: 0 @borderWidth @borderWidth 0;
-        top: auto;
         right: auto;
         transform: translateX(-50%) translateY(-50%) rotate(45deg);
         top: 100%;