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

.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%;

src/definitions/elements/step.less

@@ -58,8 +58,7 @@
     position: relative;
     display: flex;
     flex: 1 0 auto;
-    flex-wrap: wrap;
-    flex-direction: row;
+    flex-flow: row wrap;
     vertical-align: middle;
     align-items: center;
     justify-content: @justifyContent;

src/definitions/modules/dropdown.less

@@ -435,7 +435,6 @@ select.ui.dropdown {
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
         border-top-width: 0 !important;
-        width: auto;
         outline: none;
         margin: 0 -@menuBorderWidth;
         min-width: @menuMinWidth;
@@ -557,7 +556,6 @@ select.ui.dropdown {
 
     /* User addition item */
     .ui.dropdown > .menu > .stuck.addition.item:first-child {
-        position: -webkit-sticky;
         position: sticky;
         top: 0;
         box-shadow: @selectionVisibleBoxShadow;
@@ -1412,6 +1410,7 @@ select.ui.dropdown {
         position: absolute;
         & when (@supportIE) {
             /* IE hack to make dropdown icons appear inline */
+            // stylelint-disable-next-line value-no-vendor-prefix
             display: -ms-inline-flexbox !important;
         }
 
@@ -1614,7 +1613,7 @@ select.ui.dropdown {
     .ui.left.pointing.dropdown > .menu::after {
         top: 1em;
         left: @pointingArrowOffset;
-        margin: 0 0 0 0;
+        margin: 0;
         transform: rotate(-45deg);
     }
     .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu {
@@ -1626,7 +1625,7 @@ select.ui.dropdown {
         top: 1em;
         left: auto;
         right: @pointingArrowOffset;
-        margin: 0 0 0 0;
+        margin: 0;
         transform: rotate(135deg);
     }
 
@@ -1641,7 +1640,7 @@ select.ui.dropdown {
         top: 1em;
         left: auto;
         right: @pointingArrowOffset;
-        margin: 0 0 0 0;
+        margin: 0;
         transform: rotate(135deg);
     }
 

src/definitions/views/card.less

@@ -530,8 +530,7 @@
 
     .ui.horizontal.cards > .card,
     .ui.card.horizontal {
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
         min-width: @horizontalMinWidth;
         width: @horizontalWidth;
         max-width: 100%;

src/definitions/views/statistic.less

@@ -371,7 +371,7 @@
         }
         .ui.stackable.statistics > .statistic {
             width: 100% !important;
-            margin: 0 0 !important;
+            margin: 0 !important;
             padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;
         }
     }

src/themes/amazon/elements/button.overrides

@@ -1,5 +1,5 @@
 .ui.button {
-    background-image: linear-gradient(center top, #f7f8fa, #e7e9ec) repeat scroll 0 0 rgba(0, 0, 0, 0);
+    background: linear-gradient(to bottom, #f7f8fa, #e7e9ec) repeat scroll 0 0 rgba(0, 0, 0, 0);
 }
 
 .ui.primary.button {

src/themes/default/collections/menu.variables

@@ -343,7 +343,7 @@
 @textMenuMargin: @relativeMedium -(@textMenuItemSpacing);
 @textMenuItemColor: @mutedTextColor;
 @textMenuItemFontWeight: @normal;
-@textMenuItemMargin: 0 0;
+@textMenuItemMargin: 0;
 @textMenuItemPadding: @relative5px @textMenuItemSpacing;
 @textMenuItemTransition: opacity @defaultDuration @defaultEasing;
 

src/themes/default/elements/button.variables

@@ -75,8 +75,8 @@
 @groupBoxShadow: none;
 @groupButtonBoxShadow: @boxShadow;
 @verticalBoxShadow: none;
-@groupButtonOffset: 0 0 0 0;
-@verticalGroupOffset: 0 0 0 0;
+@groupButtonOffset: 0;
+@verticalGroupOffset: 0;
 
 /* -------------------
         States

src/themes/default/elements/segment.variables

@@ -29,7 +29,7 @@
 @groupedBoxShadow: @boxShadow;
 @groupedBorderRadius: @borderRadius;
 
-@nestedGroupMargin: @verticalMargin @verticalMargin;
+@nestedGroupMargin: @verticalMargin;
 
 @groupedSegmentBorder: none;
 @groupedSegmentDivider: @border;

src/themes/default/globals/reset.overrides

@@ -62,6 +62,8 @@ hr {
  */
 
 pre {
+    // https://github.com/necolas/normalize.css/issues/519
+    // stylelint-disable-next-line font-family-no-duplicate-names
     font-family: monospace, monospace; /* 1 */
     font-size: 1em; /* 2 */
 }
@@ -105,6 +107,8 @@ strong {
 code,
 kbd,
 samp {
+    // https://github.com/necolas/normalize.css/issues/519
+    // stylelint-disable-next-line font-family-no-duplicate-names
     font-family: monospace, monospace; /* 1 */
     font-size: 1em; /* 2 */
 }

src/themes/default/modules/dropdown.variables

@@ -28,7 +28,7 @@
 /* Menu */
 @menuBackground: #fff;
 @menuMargin: 0;
-@menuPadding: 0 0;
+@menuPadding: 0;
 @menuTop: 100%;
 @menuTextAlign: left;
 
@@ -237,7 +237,7 @@
 @searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
 
 /* Inline */
-@inlineIconMargin: 0 @relative3px 0 @relative3px;
+@inlineIconMargin: 0 @relative3px;
 @inlineTextColor: inherit;
 @inlineTextFontWeight: @bold;
 @inlineMenuDistance: @relative3px;