feat(lint): remove unneeded vendor prefixes

Some CSS properties like transform - caniuse.com/transforms3d - has wide enough support without vendor prefix.
fomantic · Dec 20, 2022 · b0a1399 · b0a1399
1 parent c959704
commit b0a1399
Show file tree

Hide file tree

Showing 15 changed files with 22 additions and 77 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -24,6 +24,14 @@ module.exports = {
         'no-duplicate-selectors': null,
         'number-max-precision': 5,
         'property-case': null,
+        'property-no-vendor-prefix': [true, {
+            ignoreProperties: [
+                'background-clip', // https://caniuse.com/background-clip-text
+                'appearance', // https://caniuse.com/css-appearance
+                'backdrop-filter', // https://caniuse.com/css-backdrop-filter
+                'text-size-adjust', // https://caniuse.com/text-size-adjust
+            ],
+        }],
         'rule-empty-line-before': null,
         'string-quotes': 'double',
         'value-keyword-case': null,
@@ -35,7 +43,6 @@ module.exports = {
         'selector-not-notation': null, // 169 errors
         'import-notation': null, // 56 errors
         'keyframes-name-pattern': null, // 50 errors
-        'property-no-vendor-prefix': null, // 49 errors
         'block-no-empty': null, // 25 errors
         'selector-no-vendor-prefix': null, // 19 errors
         'selector-class-pattern': null, // 19 errors

diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
@@ -641,6 +641,8 @@
         font-weight: @definitionHeaderFontWeight;
         color: @definitionHeaderColor;
         box-shadow: -@coloredBorderSizeCover -@coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
+        // https://github.com/fomantic/Fomantic-UI/pull/884
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-transform: scale(1);
     }
 
@@ -654,6 +656,8 @@
         font-weight: @definitionFooterFontWeight;
         color: @definitionFooterColor;
         box-shadow: -@coloredBorderSizeCover @coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
+        // https://github.com/fomantic/Fomantic-UI/pull/884
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-transform: scale(1);
     }
 

diff --git a/src/definitions/elements/image.less b/src/definitions/elements/image.less
@@ -161,8 +161,6 @@ img.ui.image {
     .ui.circular.image,
     .ui.circular.images .image > *,
     .ui.circular.image > * {
-        -webkit-border-radius: @circularRadius;
-        -moz-border-radius: @circularRadius;
         border-radius: @circularRadius;
     }
 }
@@ -199,8 +197,6 @@ img.ui.image {
         display: inline-block;
         width: @avatarSize;
         height: @avatarSize;
-        -webkit-border-radius: @circularRadius;
-        -moz-border-radius: @circularRadius;
         border-radius: @circularRadius;
     }
 }

diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less
@@ -328,6 +328,8 @@
     .ui.elastic.loading.loading.loading > i.icon::before,
     .ui.elastic.loader.loader::before {
         animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
+        // https://github.com/fomantic/Fomantic-UI/pull/363
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
         border-right-color: transparent;
     }

diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
@@ -455,7 +455,9 @@
         .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
             flex: 1 1 auto;
             & when (@supportIE) {
-                -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+                // https://github.com/Semantic-Org/Semantic-UI/issues/2550
+                // stylelint-disable-next-line property-no-vendor-prefix
+                -ms-flex: 1 1 0;
             }
         }
         .ui.horizontal.segments > .segment {

diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less
@@ -155,6 +155,8 @@
         perspective: @perspective;
         transform-origin: center center;
         &.modals {
+            // https://github.com/fomantic/Fomantic-UI/pull/1491
+            // stylelint-disable-next-line property-no-vendor-prefix
             -moz-perspective: none;
         }
     }
@@ -302,7 +304,6 @@ body.dimmable > .dimmer {
     .ui[class*="center dimmer"] {
         top: 50%;
         transform: translateY(-50%);
-        -webkit-transform: translateY(calc(-50% - 0.5px));
     }
 
     .ui.segment > .ui.ui[class*="top dimmer"] {
@@ -336,48 +337,40 @@ body.dimmable > .dimmer {
         0% {
             opacity: 0;
             transform: translateY(-40%);
-            -webkit-transform: translateY(calc(-40% - 0.5px));
         }
         100% {
             opacity: 1;
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
     }
     @keyframes fadeInDownCenter {
         0% {
             opacity: 0;
             transform: translateY(-60%);
-            -webkit-transform: translateY(calc(-60% - 0.5px));
         }
         100% {
             opacity: 1;
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
     }
     @keyframes fadeOutUpCenter {
         0% {
             opacity: 1;
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
         100% {
             opacity: 0;
             transform: translateY(-45%);
-            -webkit-transform: translateY(calc(-45% - 0.5px));
         }
     }
     @keyframes fadeOutDownCenter {
         0% {
             opacity: 1;
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
         100% {
             opacity: 0;
             transform: translateY(-55%);
-            -webkit-transform: translateY(calc(-55% - 0.5px));
         }
     }
     @keyframes bounceCenter {
@@ -387,7 +380,6 @@ body.dimmable > .dimmer {
         80%,
         100% {
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
         40% {
             transform: translateY(calc(-50% - 30px));

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -434,7 +434,6 @@ select.ui.dropdown {
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        -webkit-overflow-scrolling: touch;
         border-top-width: 0 !important;
         width: auto;
         outline: none;
@@ -634,7 +633,7 @@ select.ui.dropdown {
     }
     & when (@variationDropdownScrollhint) {
         /* CSS specific to iOS devices or firefox mobile only */
-        @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance: none) {
+        @supports (-webkit-touch-callout: none) or (-moz-appearance: none) {
             @media (-moz-touch-enabled), (pointer: coarse) {
                 .ui.dropdown .scrollhint.menu:not(.hidden)::before {
                     animation: scrollhint @scrollhintDuration @scrollhintEasing @scrollhintIteration;
@@ -751,7 +750,6 @@ select.ui.dropdown {
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        -webkit-overflow-scrolling: touch;
     }
     @media only screen and (max-width: @largestMobileScreen) {
         .ui.search.dropdown .menu {
@@ -1295,7 +1293,6 @@ select.ui.dropdown {
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        -webkit-overflow-scrolling: touch;
         min-width: 100% !important;
         width: auto !important;
     }

diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less
@@ -31,7 +31,6 @@
     will-change: transform;
     transform: translate3d(0, 0, 0);
     visibility: hidden;
-    -webkit-overflow-scrolling: touch;
     height: 100%;
     max-height: 100%;
     max-width: 100%;

diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
@@ -446,7 +446,6 @@
     .scrolling.dimmable.dimmed > .dimmer {
         overflow: auto;
         overscroll-behavior: @overscrollBehavior;
-        -webkit-overflow-scrolling: touch;
     }
     .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
         margin: @scrollingMargin auto;
@@ -463,7 +462,6 @@
     .scrolling.undetached.dimmable.dimmed {
         overflow: auto;
         overscroll-behavior: @overscrollBehavior;
-        -webkit-overflow-scrolling: touch;
     }
     .scrolling.undetached.dimmable.dimmed > .dimmer {
         overflow: hidden;

diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less
@@ -175,6 +175,8 @@
     [data-tooltip][data-position="left center"]:hover::after,
     [data-tooltip][data-position="right center"]:hover::after {
         transform: translateY(-50%) scale(1) !important;
+        // https://github.com/fomantic/Fomantic-UI/pull/1537
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-transform: translateY(-50%) scale(1.0001) !important;
     }
     [data-tooltip][data-position="top left"]::after,

diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less
@@ -387,7 +387,6 @@
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        -webkit-overflow-scrolling: touch;
     }
 }
 

diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less
@@ -31,7 +31,6 @@
     will-change: transform;
     transform: translate3d(0, 0, 0);
     visibility: hidden;
-    -webkit-overflow-scrolling: touch;
     height: 100% !important;
     max-height: 100%;
     border-radius: 0 !important;

diff --git a/src/definitions/modules/sticky.less b/src/definitions/modules/sticky.less
@@ -62,13 +62,6 @@
 *******************************/
 
 .ui.native.sticky {
-    position: -webkit-sticky;
-    position: -moz-sticky;
-    & when (@supportIE) {
-        position: -ms-sticky;
-    }
-
-    position: -o-sticky;
     position: sticky;
 }
 

diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
@@ -550,13 +550,6 @@
         background-position: center;
         justify-content: center;
         align-items: center;
-        display: -webkit-box;
-        display: -moz-box;
-        & when (@supportIE) {
-            display: -ms-flexbox;
-        }
-
-        display: -webkit-flex;
         display: flex;
         width: 100%;
         border-radius: @defaultBorderRadius 0 0 @defaultBorderRadius;

diff --git a/src/themes/pulsar/elements/loader.overrides b/src/themes/pulsar/elements/loader.overrides
@@ -3,67 +3,29 @@
 *******************************/
 
 .ui.loader::after {
-    -webkit-animation: loader-pulsar 2s infinite linear;
     animation: loader-pulsar 2s infinite linear;
 }
 
-@-webkit-keyframes loader-pulsar {
-    0% {
-        -webkit-transform: rotate(0);
-        transform: rotate(0);
-        opacity: 0;
-    }
-    20% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-    40% {
-        -webkit-transform: rotate(740deg);
-        transform: rotate(740deg);
-        opacity: 1;
-    }
-    60% {
-        -webkit-transform: rotate(1120deg);
-        transform: rotate(1120deg);
-        opacity: 1;
-    }
-    80% {
-        -webkit-transform: rotate(1440deg);
-        transform: rotate(1440deg);
-    }
-    100% {
-        -webkit-transform: rotate(1800deg);
-        transform: rotate(1800deg);
-        opacity: 0;
-    }
-}
-
 @keyframes loader-pulsar {
     0% {
-        -webkit-transform: rotate(0);
         transform: rotate(0);
         opacity: 0;
     }
     20% {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
     40% {
-        -webkit-transform: rotate(740deg);
         transform: rotate(740deg);
         opacity: 1;
     }
     60% {
-        -webkit-transform: rotate(1120deg);
         transform: rotate(1120deg);
         opacity: 1;
     }
     80% {
-        -webkit-transform: rotate(1440deg);
         transform: rotate(1440deg);
     }
     100% {
-        -webkit-transform: rotate(1800deg);
         transform: rotate(1800deg);
         opacity: 0;
     }