chore: remove useless css prefix & utils (#4075)

docs/.vitepress/vitepress/components/globals/parallax-home.vue

@@ -496,7 +496,6 @@ useEventListener(window, 'scroll', handleScroll)
       top: 50%;
       left: 50%;
       position: fixed;
-      -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       box-sizing: border-box;
       text-align: center;

docs/.vitepress/vitepress/styles/base.scss

@@ -9,7 +9,7 @@
 html {
   line-height: 1.4;
   font-size: 16px;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   font-family: var(--font-family);
   font-weight: 400;
   -webkit-font-smoothing: antialiased;

docs/.vitepress/vitepress/styles/code.scss

@@ -51,12 +51,7 @@ li > div[class*='language-'] {
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
 }
 

package.json

@@ -19,6 +19,7 @@
     "clean": "pnpm run clean:lib && pnpm run clean -r --stream",
     "clean:lib": "rimraf dist",
     "build": "gulp --require sucrase/register/ts -f build/gulpfile.ts",
+    "build:theme": "pnpm run build -C packages/theme-chalk",
     "format": "prettier --write .",
     "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 && pretty-quick --check --branch dev",
     "lint:fix": "eslint --fix . --ext .vue,.js,.ts,.jsx,.tsx && pretty-quick --branch dev",

packages/components/scrollbar/__tests__/scrollbar.spec.ts

@@ -36,11 +36,11 @@ describe('ScrollBar', () => {
 
     await makeScroll(scrollDom, 'scrollTop', 100)
     expect(wrapper.find('.is-vertical div').attributes('style')).toContain(
-      'height: 80px; transform: translateY(50%); webkit-transform: translateY(50%)'
+      'height: 80px; transform: translateY(50%);'
     )
     await makeScroll(scrollDom, 'scrollTop', 300)
     expect(wrapper.find('.is-vertical div').attributes('style')).toContain(
-      'height: 80px; transform: translateY(150%); webkit-transform: translateY(150%)'
+      'height: 80px; transform: translateY(150%);'
     )
     offsetHeightRestore()
     scrollHeightRestore()
@@ -70,11 +70,11 @@ describe('ScrollBar', () => {
 
     await makeScroll(scrollDom, 'scrollLeft', 100)
     expect(wrapper.find('.is-horizontal div').attributes('style')).toContain(
-      'width: 80px; transform: translateX(50%); webkit-transform: translateX(50%)'
+      'width: 80px; transform: translateX(50%);'
     )
     await makeScroll(scrollDom, 'scrollLeft', 300)
     expect(wrapper.find('.is-horizontal div').attributes('style')).toContain(
-      'width: 80px; transform: translateX(150%); webkit-transform: translateX(150%)'
+      'width: 80px; transform: translateX(150%);'
     )
     offsetWidthRestore()
     scrollWidthRestore()
@@ -117,18 +117,18 @@ describe('ScrollBar', () => {
     await makeScroll(scrollDom, 'scrollTop', 100)
     await makeScroll(scrollDom, 'scrollLeft', 100)
     expect(wrapper.find('.is-vertical div').attributes('style')).toContain(
-      'height: 80px; transform: translateY(50%); webkit-transform: translateY(50%)'
+      'height: 80px; transform: translateY(50%);'
     )
     expect(wrapper.find('.is-horizontal div').attributes('style')).toContain(
-      'width: 80px; transform: translateX(50%); webkit-transform: translateX(50%)'
+      'width: 80px; transform: translateX(50%);'
     )
     await makeScroll(scrollDom, 'scrollTop', 300)
     await makeScroll(scrollDom, 'scrollLeft', 300)
     expect(wrapper.find('.is-vertical div').attributes('style')).toContain(
-      'height: 80px; transform: translateY(150%); webkit-transform: translateY(150%)'
+      'height: 80px; transform: translateY(150%);'
     )
     expect(wrapper.find('.is-horizontal div').attributes('style')).toContain(
-      'width: 80px; transform: translateX(150%); webkit-transform: translateX(150%)'
+      'width: 80px; transform: translateX(150%);'
     )
 
     offsetHeightRestore()
@@ -218,10 +218,10 @@ describe('ScrollBar', () => {
     await nextTick()
 
     expect(wrapper.find('.is-vertical div').attributes('style')).toContain(
-      'height: 80px; transform: translateY(0%); webkit-transform: translateY(0%);'
+      'height: 80px; transform: translateY(0%);'
     )
     expect(wrapper.find('.is-horizontal div').attributes('style')).toContain(
-      'width: 80px; transform: translateX(0%); webkit-transform: translateX(0%);'
+      'width: 80px; transform: translateX(0%);'
     )
 
     offsetHeightRestore()
@@ -254,7 +254,7 @@ describe('ScrollBar', () => {
 
     await makeScroll(scrollDom, 'scrollTop', 0)
     expect(wrapper.find('.is-vertical div').attributes('style')).toContain(
-      'height: 20px; transform: translateY(0%); webkit-transform: translateY(0%);'
+      'height: 20px; transform: translateY(0%);'
     )
     offsetHeightRestore()
     scrollHeightRestore()

packages/theme-chalk/src/button.scss

@@ -30,7 +30,8 @@
   margin: 0;
   transition: 0.1s;
   font-weight: var(--el-button-font-weight);
-  @include utils-user-select(none);
+  user-select: none;
+
   & + & {
     margin-left: 10px;
   }

packages/theme-chalk/src/checkbox-button.scss

@@ -35,7 +35,7 @@
     margin: 0;
     position: relative;
     transition: var(--el-transition-all);
-    @include utils-user-select(none);
+    user-select: none;
 
     @include button-size(
       map.get($button-padding-vertical, 'default'),

packages/theme-chalk/src/input.scss

@@ -382,10 +382,3 @@
     }
   }
 }
-
-/** disalbe default clear on IE */
-.#{$namespace}-input__inner::-ms-clear {
-  display: none;
-  width: 0;
-  height: 0;
-}

packages/theme-chalk/src/mixins/mixins.scss

@@ -49,21 +49,6 @@
   }
 }
 
-// Placeholder
-@mixin placeholder {
-  &::-webkit-input-placeholder {
-    @content;
-  }
-
-  &::-moz-placeholder {
-    @content;
-  }
-
-  &:-ms-input-placeholder {
-    @content;
-  }
-}
-
 // BEM
 @mixin b($block) {
   $B: $namespace + '-' + $block !global;

packages/theme-chalk/src/mixins/utils.scss

@@ -1,9 +1,3 @@
-@mixin utils-user-select($value) {
-  -moz-user-select: $value;
-  -webkit-user-select: $value;
-  -ms-user-select: $value;
-}
-
 @mixin utils-clearfix {
   $selector: &;
 

packages/theme-chalk/src/radio-button.scss

@@ -36,7 +36,7 @@
     position: relative;
     cursor: pointer;
     transition: var(--el-transition-all);
-    @include utils-user-select(none);
+    user-select: none;
 
     @include button-size(
       map.get($button-padding-vertical, 'default'),

packages/theme-chalk/src/radio.scss

@@ -23,7 +23,7 @@
   user-select: none;
   margin-right: 30px;
   height: map.get($radio-height, 'default');
-  @include utils-user-select(none);
+  user-select: none;
 
   @each $size in (medium, small, mini) {
     &.#{$namespace}-radio--#{$size} {

packages/theme-chalk/src/tabs.scss

@@ -545,33 +545,25 @@
 @keyframes slideInRight-enter {
   0% {
     opacity: 0;
-    -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
-    -webkit-transform: translateX(100%);
     transform: translateX(100%);
   }
 
   to {
     opacity: 1;
-    -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
-    -webkit-transform: translateX(0);
     transform: translateX(0);
   }
 }
 @keyframes slideInRight-leave {
   0% {
-    -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
-    -webkit-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
   }
 
   100% {
-    -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
-    -webkit-transform: translateX(100%);
     transform: translateX(100%);
     opacity: 0;
   }
@@ -579,33 +571,25 @@
 @keyframes slideInLeft-enter {
   0% {
     opacity: 0;
-    -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
-    -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
   }
 
   to {
     opacity: 1;
-    -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
-    -webkit-transform: translateX(0);
     transform: translateX(0);
   }
 }
 @keyframes slideInLeft-leave {
   0% {
-    -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
-    -webkit-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
   }
 
   100% {
-    -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
-    -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
     opacity: 0;
   }