From 473470680aa5beb384aee017346a24754c027eac Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sat, 7 Nov 2020 00:54:03 +0800 Subject: [PATCH] refactor: import styles in treeshakable manner --- src/auto-complete/styles/dark.js | 10 +++++---- src/auto-complete/styles/light.js | 10 +++++---- src/badge/styles/dark.js | 6 ++++-- src/badge/styles/light.js | 6 ++++-- src/cascader/styles/dark.js | 28 ++++++++++++------------- src/cascader/styles/light.js | 26 +++++++++++------------ src/input/styles/dark.js | 8 ++++++-- src/input/styles/light.js | 8 ++++++-- src/log/styles/dark.js | 10 +++++---- src/log/styles/light.js | 10 +++++---- src/popselect/styles/dark.js | 6 ++++-- src/popselect/styles/light.js | 6 ++++-- src/select/styles/dark.js | 10 +++++---- src/select/styles/light.js | 10 +++++---- src/spin/styles/dark.js | 6 ++++-- src/spin/styles/light.js | 6 ++++-- src/styles/index.js | 34 +++++++++++++++---------------- vue3.md | 2 +- 18 files changed, 115 insertions(+), 87 deletions(-) diff --git a/src/auto-complete/styles/dark.js b/src/auto-complete/styles/dark.js index ac40ee5dc..666017407 100644 --- a/src/auto-complete/styles/dark.js +++ b/src/auto-complete/styles/dark.js @@ -1,13 +1,15 @@ import create from '../../_styles/utils/create-component-base' -import baseSelectMenuStyle from '../../_base/select-menu/styles/dark' -import inputStyle from '../../input/styles/dark' +import { + baseSelectMenuDark, + inputDark +} from '../../styles' export default create({ theme: 'dark', name: 'AutoComplete', peer: [ - baseSelectMenuStyle, - inputStyle + baseSelectMenuDark, + inputDark ], getDerivedVariables ({ base, derived }) { return {} diff --git a/src/auto-complete/styles/light.js b/src/auto-complete/styles/light.js index e0a47e4ca..97a0d3fcb 100644 --- a/src/auto-complete/styles/light.js +++ b/src/auto-complete/styles/light.js @@ -1,13 +1,15 @@ import create from '../../_styles/utils/create-component-base' -import baseSelectMenuStyle from '../../_base/select-menu/styles/light' -import inputStyle from '../../input/styles/light' +import { + baseSelectMenuLight, + inputLight +} from '../../styles' export default create({ theme: 'light', name: 'AutoComplete', peer: [ - baseSelectMenuStyle, - inputStyle + baseSelectMenuLight, + inputLight ], getDerivedVariables ({ base, derived }) { return {} diff --git a/src/badge/styles/dark.js b/src/badge/styles/dark.js index 6b1bbe9f6..9abafbe21 100644 --- a/src/badge/styles/dark.js +++ b/src/badge/styles/dark.js @@ -1,11 +1,13 @@ import create from '../../_styles/utils/create-component-base' -import baseSlotMachineStyle from '../../_base/slot-machine/styles/dark' +import { + baseSlotMachineDark +} from '../../styles' export default create({ name: 'Badge', theme: 'dark', peer: [ - baseSlotMachineStyle + baseSlotMachineDark ], getDerivedVariables ({ derived }) { return { diff --git a/src/badge/styles/light.js b/src/badge/styles/light.js index 57d612b20..622df5b54 100644 --- a/src/badge/styles/light.js +++ b/src/badge/styles/light.js @@ -1,11 +1,13 @@ import create from '../../_styles/utils/create-component-base' -import baseSlotMachineStyle from '../../_base/slot-machine/styles/light' +import { + baseSlotMachineLight +} from '../../styles' export default create({ name: 'Badge', theme: 'light', peer: [ - baseSlotMachineStyle + baseSlotMachineLight ], getDerivedVariables ({ derived }) { return { diff --git a/src/cascader/styles/dark.js b/src/cascader/styles/dark.js index ef3f1b918..006cd4329 100644 --- a/src/cascader/styles/dark.js +++ b/src/cascader/styles/dark.js @@ -1,24 +1,24 @@ import create from '../../_styles/utils/create-component-base' import sizeVariables from './_common' -import baseMenuMaskStyle from '../../_base/menu-mask/styles/dark' -import baseSelectMenuStyle from '../../_base/select-menu/styles/dark' -import baseSelectionStyle from '../../_base/selection/styles/dark' -import baseLoadingStyle from '../../_base/loading/styles/dark' -import scrollbarStyle from '../../scrollbar/styles/dark' -import radioStyle from '../../radio/styles/dark' -import checkboxStyle from '../../checkbox/styles/dark' +import { + baseMenuMaskDark, + baseSelectMenuDark, + baseSelectionDark, + baseLoadingDark, + scrollbarDark, + checkboxDark +} from '../../styles' export default create({ theme: 'dark', name: 'Cascader', peer: [ - baseMenuMaskStyle, - baseSelectMenuStyle, - baseSelectionStyle, - baseLoadingStyle, - scrollbarStyle, - radioStyle, - checkboxStyle + baseMenuMaskDark, + baseSelectMenuDark, + baseSelectionDark, + baseLoadingDark, + scrollbarDark, + checkboxDark ], getDerivedVariables ({ base, derived }) { const { diff --git a/src/cascader/styles/light.js b/src/cascader/styles/light.js index 34097b6c7..ff3513319 100644 --- a/src/cascader/styles/light.js +++ b/src/cascader/styles/light.js @@ -1,24 +1,22 @@ import create from '../../_styles/utils/create-component-base' import sizeVariables from './_common' -import baseMenuMaskStyle from '../../_base/menu-mask/styles/light' -import baseSelectMenuStyle from '../../_base/select-menu/styles/light' -import baseSelectionStyle from '../../_base/selection/styles/light' -import baseLoadingStyle from '../../_base/loading/styles/light' -import scrollbarStyle from '../../scrollbar/styles/light' -import radioStyle from '../../radio/styles/light' -import checkboxStyle from '../../checkbox/styles/light' +import { + baseMenuMaskLight, + baseSelectMenuLight, + baseLoadingLight, + scrollbarLight, + checkboxLight +} from '../../styles' export default create({ theme: 'light', name: 'Cascader', peer: [ - baseMenuMaskStyle, - baseSelectMenuStyle, - baseSelectionStyle, - baseLoadingStyle, - scrollbarStyle, - radioStyle, - checkboxStyle + baseMenuMaskLight, + baseSelectMenuLight, + baseLoadingLight, + scrollbarLight, + checkboxLight ], getDerivedVariables ({ base, derived }) { const { diff --git a/src/input/styles/dark.js b/src/input/styles/dark.js index 44c74f0ed..dee2f169f 100644 --- a/src/input/styles/dark.js +++ b/src/input/styles/dark.js @@ -1,12 +1,16 @@ import create from '../../_styles/utils/create-component-base' import commonVariables from './_common' import { changeColor } from '../../_utils/color/index' -import suffixStyle from '../../_base/suffix/styles/dark' +import { + baseSuffixDark +} from '../../styles' export default create({ name: 'Input', theme: 'dark', - peer: [suffixStyle], + peer: [ + baseSuffixDark + ], getDerivedVariables ({ base, derived }) { const { textColor2Overlay, diff --git a/src/input/styles/light.js b/src/input/styles/light.js index 739035a76..0c153c92a 100644 --- a/src/input/styles/light.js +++ b/src/input/styles/light.js @@ -1,12 +1,16 @@ import create from '../../_styles/utils/create-component-base' import commonVariables from './_common' import { changeColor } from '../../_utils/color/index' -import suffixStyle from '../../_base/suffix/styles/light' +import { + baseSuffixLight +} from '../../styles' export default create({ name: 'Input', theme: 'light', - peer: [suffixStyle], + peer: [ + baseSuffixLight + ], getDerivedVariables ({ base, derived }) { const { textColor2, diff --git a/src/log/styles/dark.js b/src/log/styles/dark.js index 7c401a145..a7fce7073 100644 --- a/src/log/styles/dark.js +++ b/src/log/styles/dark.js @@ -1,13 +1,15 @@ import create from '../../_styles/utils/create-component-base' -import baseLoadingStyle from '../../_base/loading/styles/dark' -import scrollbarStyle from '../../scrollbar/styles/dark' +import { + baseLoadingDark, + scrollbarDark +} from '../../styles' export default create({ name: 'Log', theme: 'dark', peer: [ - baseLoadingStyle, - scrollbarStyle + baseLoadingDark, + scrollbarDark ], getDerivedVariables ({ base, derived }) { const { diff --git a/src/log/styles/light.js b/src/log/styles/light.js index 4c79e3e16..968be44af 100644 --- a/src/log/styles/light.js +++ b/src/log/styles/light.js @@ -1,13 +1,15 @@ import create from '../../_styles/utils/create-component-base' -import baseLoadingStyle from '../../_base/loading/styles/light' -import scrollbarStyle from '../../scrollbar/styles/light' +import { + baseLoadingLight, + scrollbarLight +} from '../../styles' export default create({ name: 'Log', theme: 'light', peer: [ - baseLoadingStyle, - scrollbarStyle + baseLoadingLight, + scrollbarLight ], getDerivedVariables ({ base, derived }) { const { diff --git a/src/popselect/styles/dark.js b/src/popselect/styles/dark.js index f5c1e8753..1bb2552dc 100644 --- a/src/popselect/styles/dark.js +++ b/src/popselect/styles/dark.js @@ -1,11 +1,13 @@ import create from '../../_styles/utils/create-component-base' -import selectMenuStyle from '../../_base/select-menu/styles/dark' +import { + baseSelectMenuDark +} from '../../styles' export default create({ name: 'Popselect', theme: 'dark', peer: [ - selectMenuStyle + baseSelectMenuDark ], getDerivedVariables ({ base, derived }) { return { diff --git a/src/popselect/styles/light.js b/src/popselect/styles/light.js index f5be98f80..9fa03d610 100644 --- a/src/popselect/styles/light.js +++ b/src/popselect/styles/light.js @@ -1,11 +1,13 @@ import create from '../../_styles/utils/create-component-base' -import selectMenuStyle from '../../_base/select-menu/styles/light' +import { + baseSelectMenuLight +} from '../../styles' export default create({ name: 'Popselect', theme: 'light', peer: [ - selectMenuStyle + baseSelectMenuLight ], getDerivedVariables ({ base, derived }) { return { diff --git a/src/select/styles/dark.js b/src/select/styles/dark.js index c0454cd1c..f70b9e170 100644 --- a/src/select/styles/dark.js +++ b/src/select/styles/dark.js @@ -1,13 +1,15 @@ import create from '../../_styles/utils/create-component-base' -import baseSelectionStyle from '../../_base/selection/styles/dark' -import baseSelectMenuStyle from '../../_base/select-menu/styles/dark' +import { + baseSelectionDark, + baseSelectMenuDark +} from '../../styles' export default create({ name: 'Select', theme: 'dark', peer: [ - baseSelectionStyle, - baseSelectMenuStyle + baseSelectionDark, + baseSelectMenuDark ], getDerivedVariables ({ derived, base }) { return {} diff --git a/src/select/styles/light.js b/src/select/styles/light.js index d662d3ccb..0478254ff 100644 --- a/src/select/styles/light.js +++ b/src/select/styles/light.js @@ -1,13 +1,15 @@ import create from '../../_styles/utils/create-component-base' -import baseSelectionStyle from '../../_base/selection/styles/light' -import baseSelectMenuStyle from '../../_base/select-menu/styles/light' +import { + baseSelectionLight, + baseSelectMenuLight +} from '../../styles' export default create({ name: 'Select', theme: 'light', peer: [ - baseSelectionStyle, - baseSelectMenuStyle + baseSelectionLight, + baseSelectMenuLight ], getDerivedVariables ({ derived, base }) { return {} diff --git a/src/spin/styles/dark.js b/src/spin/styles/dark.js index b8da07eb3..bdbb5be98 100644 --- a/src/spin/styles/dark.js +++ b/src/spin/styles/dark.js @@ -1,12 +1,14 @@ import create from '../../_styles/utils/create-component-base' import sizeVariables from './_common' -import baseLoadingStyle from '../../_base/loading/styles/dark' +import { + baseLoadingDark +} from '../../styles' export default create({ name: 'Spin', theme: 'dark', peer: [ - baseLoadingStyle + baseLoadingDark ], getDerivedVariables ({ base, derived }) { const { diff --git a/src/spin/styles/light.js b/src/spin/styles/light.js index 42f8f3030..595604b21 100644 --- a/src/spin/styles/light.js +++ b/src/spin/styles/light.js @@ -1,12 +1,14 @@ import create from '../../_styles/utils/create-component-base' import sizeVariables from './_common' -import baseLoadingStyle from '../../_base/loading/styles/light' +import { + baseLoadingLight +} from '../../styles' export default create({ name: 'Spin', theme: 'light', peer: [ - baseLoadingStyle + baseLoadingLight ], getDerivedVariables ({ base, derived }) { const { diff --git a/src/styles/index.js b/src/styles/index.js index cb7be2af8..2a3d957fc 100644 --- a/src/styles/index.js +++ b/src/styles/index.js @@ -1,6 +1,8 @@ // unified entry for styles - -// internal style +export { + scrollbarDark, + scrollbarLight +} from '../scrollbar/styles' export { baseMenuMaskDark, baseMenuMaskLight @@ -30,6 +32,18 @@ export { baseDark, baseLight } from '../_styles/base' +export { + iconDark, + iconLight +} from '../icon/styles' +export { + inputDark, + inputLight +} from '../input/styles' +export { + checkboxDark, + checkboxLight +} from '../checkbox/styles' export { tabsDark, tabsLight @@ -94,10 +108,6 @@ export { timePickerDark, timePickerLight } from '../time-picker/styles' -export { - inputDark, - inputLight -} from '../input/styles' export { notificationDark, notificationLight @@ -122,10 +132,6 @@ export { cascaderDark, cascaderLight } from '../cascader/styles' -export { - checkboxDark, - checkboxLight -} from '../checkbox/styles' export { transferDark, transferLight @@ -246,10 +252,6 @@ export { breadcrumbDark, breadcrumbLight } from '../breadcrumb/styles' -export { - iconDark, - iconLight -} from '../icon/styles' export { modalDark, modalLight @@ -270,10 +272,6 @@ export { tagDark, tagLight } from '../tag/styles' -export { - scrollbarDark, - scrollbarLight -} from '../scrollbar/styles' export { affixDark, affixLight diff --git a/vue3.md b/vue3.md index d4f5e9def..b4a1342c2 100644 --- a/vue3.md +++ b/vue3.md @@ -310,7 +310,7 @@ - [x] wait for new version of rollup-plugin-vue, https://github.com/vuejs/rollup-plugin-vue/issues/408 - tusimple theme - - clean delegate + - [x] clean delegate - [x] site production tag (bug) - [x] demo scrollbar 的问题 - [x] table x scroll 右侧阴影不消失