From 0139d24583141ebf6f8118c3a7de61dcbfe199ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Fri, 29 Oct 2021 19:16:53 +0800 Subject: [PATCH] chore: remove useless css prefix & utils (#4075) --- .../components/globals/parallax-home.vue | 1 - docs/.vitepress/vitepress/styles/base.scss | 2 +- docs/.vitepress/vitepress/styles/code.scss | 5 ----- package.json | 1 + .../scrollbar/__tests__/scrollbar.spec.ts | 22 +++++++++---------- packages/theme-chalk/src/button.scss | 3 ++- packages/theme-chalk/src/checkbox-button.scss | 2 +- packages/theme-chalk/src/input.scss | 7 ------ packages/theme-chalk/src/mixins/mixins.scss | 15 ------------- packages/theme-chalk/src/mixins/utils.scss | 6 ----- packages/theme-chalk/src/radio-button.scss | 2 +- packages/theme-chalk/src/radio.scss | 2 +- packages/theme-chalk/src/tabs.scss | 16 -------------- 13 files changed, 18 insertions(+), 66 deletions(-) diff --git a/docs/.vitepress/vitepress/components/globals/parallax-home.vue b/docs/.vitepress/vitepress/components/globals/parallax-home.vue index d2b1a21b8d..82fa4343a3 100644 --- a/docs/.vitepress/vitepress/components/globals/parallax-home.vue +++ b/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; diff --git a/docs/.vitepress/vitepress/styles/base.scss b/docs/.vitepress/vitepress/styles/base.scss index 66ad98ff2f..c203ad4a8c 100644 --- a/docs/.vitepress/vitepress/styles/base.scss +++ b/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; diff --git a/docs/.vitepress/vitepress/styles/code.scss b/docs/.vitepress/vitepress/styles/code.scss index caefda9650..c771c1cdd7 100644 --- a/docs/.vitepress/vitepress/styles/code.scss +++ b/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; } diff --git a/package.json b/package.json index 081f34b978..fbb022bd84 100644 --- a/package.json +++ b/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", diff --git a/packages/components/scrollbar/__tests__/scrollbar.spec.ts b/packages/components/scrollbar/__tests__/scrollbar.spec.ts index 6e9933e69b..71c3a301f0 100644 --- a/packages/components/scrollbar/__tests__/scrollbar.spec.ts +++ b/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() diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss index c82503b552..bb80255c93 100644 --- a/packages/theme-chalk/src/button.scss +++ b/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; } diff --git a/packages/theme-chalk/src/checkbox-button.scss b/packages/theme-chalk/src/checkbox-button.scss index 7581e49a07..b78f9fe72e 100644 --- a/packages/theme-chalk/src/checkbox-button.scss +++ b/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'), diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss index 0c91a45733..824048bf07 100644 --- a/packages/theme-chalk/src/input.scss +++ b/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; -} diff --git a/packages/theme-chalk/src/mixins/mixins.scss b/packages/theme-chalk/src/mixins/mixins.scss index b66eba47ef..e972f4cd3e 100644 --- a/packages/theme-chalk/src/mixins/mixins.scss +++ b/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; diff --git a/packages/theme-chalk/src/mixins/utils.scss b/packages/theme-chalk/src/mixins/utils.scss index 8f2263b5e1..1d4fec4442 100644 --- a/packages/theme-chalk/src/mixins/utils.scss +++ b/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: &; diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss index d78f0d079e..f2541960d9 100644 --- a/packages/theme-chalk/src/radio-button.scss +++ b/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'), diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss index 1cfcd34f44..7fefc721a4 100644 --- a/packages/theme-chalk/src/radio.scss +++ b/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} { diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss index da4189881e..5d25c804ae 100644 --- a/packages/theme-chalk/src/tabs.scss +++ b/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; }