refactor: import styles directly from component folders, not styles.js

scripts/generate-style-imports.js

@@ -7,18 +7,19 @@ const { camelCase } = require('lodash')
   const files = await fs.opendir(
     srcPath
   )
-  let code = ''
+  const code = []
   for await (const file of files) {
     if (file.isDirectory() && !file.name.startsWith('_')) {
       if (await fs.stat(path.resolve(srcPath, file.name, 'styles')).then(() => false).catch(() => {
         return true
       })) continue
-      code += `export {
+      code.push(`export {
   ${camelCase(file.name)}Dark,
   ${camelCase(file.name)}Light
-} from '../${file.name}/styles\n`
+} from './${file.name}/styles'\n`)
       // await fs.writeFile(path.resolve(srcPath, file.name, 'styles', 'index.js'), code)
     }
   }
-  console.log(code)
+  code.sort()
+  console.log(code.join(''))
 })()

src/auto-complete/styles/dark.js

@@ -1,8 +1,10 @@
 import create from '../../_styles/utils/create-component-base'
 import {
-  baseSelectMenuDark,
+  baseSelectMenuDark
+} from '../../_base/select-menu/styles'
+import {
   inputDark
-} from '../../styles'
+} from '../../input/styles'
 
 export default create({
   theme: 'dark',

src/auto-complete/styles/light.js

@@ -1,8 +1,10 @@
 import create from '../../_styles/utils/create-component-base'
 import {
-  baseSelectMenuLight,
+  baseSelectMenuLight
+} from '../../_base/select-menu/styles'
+import {
   inputLight
-} from '../../styles'
+} from '../../input/styles'
 
 export default create({
   theme: 'light',

src/badge/styles/dark.js

@@ -1,7 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import {
   baseSlotMachineDark
-} from '../../styles'
+} from '../../_base/slot-machine/styles'
 
 export default create({
   name: 'Badge',

src/badge/styles/light.js

@@ -1,7 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import {
   baseSlotMachineLight
-} from '../../styles'
+} from '../../_base/slot-machine/styles'
 
 export default create({
   name: 'Badge',

src/button/styles/dark.js

@@ -1,5 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
-import { baseWaveDark } from '../../styles'
+import {
+  baseWaveDark
+} from '../../_base/wave/styles'
 import commonVariables from './_common'
 
 export default create({

src/button/styles/light.js

@@ -1,5 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
-import { baseWaveLight } from '../../styles'
+import {
+  baseWaveLight
+} from '../../_base/wave/styles'
 import commonVariables from './_common'
 
 export default create({

src/cascader/styles/dark.js

@@ -1,13 +1,11 @@
 import create from '../../_styles/utils/create-component-base'
 import sizeVariables from './_common'
-import {
-  baseMenuMaskDark,
-  baseSelectMenuDark,
-  baseSelectionDark,
-  baseLoadingDark,
-  scrollbarDark,
-  checkboxDark
-} from '../../styles'
+import { baseMenuMaskDark } from '../../_base/menu-mask/styles'
+import { baseLoadingDark } from '../../_base/loading/styles'
+import { baseSelectionDark } from '../../_base/selection/styles'
+import { baseSelectMenuDark } from '../../_base/select-menu/styles'
+import { scrollbarDark } from '../../scrollbar/styles'
+import { checkboxDark } from '../../checkbox/styles'
 
 export default create({
   theme: 'dark',

src/cascader/styles/light.js

@@ -1,18 +1,18 @@
 import create from '../../_styles/utils/create-component-base'
 import sizeVariables from './_common'
-import {
-  baseMenuMaskLight,
-  baseSelectMenuLight,
-  baseLoadingLight,
-  scrollbarLight,
-  checkboxLight
-} from '../../styles'
+import { baseMenuMaskLight } from '../../_base/menu-mask/styles'
+import { baseLoadingLight } from '../../_base/loading/styles'
+import { baseSelectionLight } from '../../_base/selection/styles'
+import { baseSelectMenuLight } from '../../_base/select-menu/styles'
+import { scrollbarLight } from '../../scrollbar/styles'
+import { checkboxLight } from '../../checkbox/styles'
 
 export default create({
   theme: 'light',
   name: 'Cascader',
   peer: [
     baseMenuMaskLight,
+    baseSelectionLight,
     baseSelectMenuLight,
     baseLoadingLight,
     scrollbarLight,

src/dynamic-input/styles/dark.js

@@ -1,5 +1,10 @@
 import create from '../../_styles/utils/create-component-base'
-import { inputDark, buttonDark } from '../../styles'
+import {
+  inputDark
+} from '../../input/styles'
+import {
+  buttonDark
+} from '../../button/styles'
 import commonVariables from './_common'
 
 export default create({

src/dynamic-input/styles/light.js

@@ -1,5 +1,10 @@
 import create from '../../_styles/utils/create-component-base'
-import { inputLight, buttonLight } from '../../styles'
+import {
+  inputLight
+} from '../../input/styles'
+import {
+  buttonLight
+} from '../../button/styles'
 import commonVariables from './_common'
 
 export default create({

src/dynamic-tags/styles/dark.js

@@ -1,7 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import {
   tagDark
-} from '../../styles'
+} from '../../tag/styles'
 
 export default create({
   name: 'DynamicTags',

src/dynamic-tags/styles/light.js

@@ -1,7 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import {
   tagLight
-} from '../../styles'
+} from '../../tag/styles'
 
 export default create({
   name: 'DynamicTags',

src/input/styles/dark.js

@@ -3,7 +3,7 @@ import commonVariables from './_common'
 import { changeColor } from 'seemly'
 import {
   baseSuffixDark
-} from '../../styles'
+} from '../../_base/suffix/styles'
 
 export default create({
   name: 'Input',

src/input/styles/light.js

@@ -3,7 +3,7 @@ import commonVariables from './_common'
 import { changeColor } from 'seemly'
 import {
   baseSuffixLight
-} from '../../styles'
+} from '../../_base/suffix/styles'
 
 export default create({
   name: 'Input',

src/log/styles/dark.js

@@ -1,8 +1,6 @@
 import create from '../../_styles/utils/create-component-base'
-import {
-  baseLoadingDark,
-  scrollbarDark
-} from '../../styles'
+import { baseLoadingDark } from '../../_base/loading/styles'
+import { scrollbarDark } from '../../scrollbar/styles'
 
 export default create({
   name: 'Log',

src/log/styles/light.js

@@ -1,8 +1,6 @@
 import create from '../../_styles/utils/create-component-base'
-import {
-  baseLoadingLight,
-  scrollbarLight
-} from '../../styles'
+import { baseLoadingLight } from '../../_base/loading/styles'
+import { scrollbarLight } from '../../scrollbar/styles'
 
 export default create({
   name: 'Log',

src/pagination/styles/dark.js

@@ -1,6 +1,9 @@
 import create from '../../_styles/utils/create-component-base'
 import { changeColor } from 'seemly'
-import { baseDark, selectDark, inputDark, iconDark } from '../../styles'
+import { selectDark } from '../../select/styles'
+import { inputDark } from '../../input/styles'
+import { iconDark } from '../../icon/styles'
+import { baseDark } from '../../_styles/base'
 import commonVariables from './_common.js'
 
 export default create({

src/pagination/styles/light.js

@@ -1,5 +1,8 @@
 import create from '../../_styles/utils/create-component-base'
-import { baseLight, selectLight, inputLight, iconLight } from '../../styles'
+import { selectLight } from '../../select/styles'
+import { inputLight } from '../../input/styles'
+import { iconLight } from '../../icon/styles'
+import { baseLight } from '../../_styles/base'
 import commonVariables from './_common.js'
 
 export default create({

src/popselect/styles/dark.js

@@ -1,7 +1,5 @@
 import create from '../../_styles/utils/create-component-base'
-import {
-  baseSelectMenuDark
-} from '../../styles'
+import { baseSelectMenuDark } from '../../_base/select-menu/styles'
 
 export default create({
   name: 'Popselect',

src/popselect/styles/light.js

@@ -1,7 +1,5 @@
 import create from '../../_styles/utils/create-component-base'
-import {
-  baseSelectMenuLight
-} from '../../styles'
+import { baseSelectMenuLight } from '../../_base/select-menu/styles'
 
 export default create({
   name: 'Popselect',

src/select/styles/dark.js

@@ -1,8 +1,6 @@
 import create from '../../_styles/utils/create-component-base'
-import {
-  baseSelectionDark,
-  baseSelectMenuDark
-} from '../../styles'
+import { baseSelectionDark } from '../../_base/selection/styles'
+import { baseSelectMenuDark } from '../../_base/select-menu/styles'
 
 export default create({
   name: 'Select',

src/select/styles/light.js

@@ -1,8 +1,6 @@
 import create from '../../_styles/utils/create-component-base'
-import {
-  baseSelectionLight,
-  baseSelectMenuLight
-} from '../../styles'
+import { baseSelectionLight } from '../../_base/selection/styles'
+import { baseSelectMenuLight } from '../../_base/select-menu/styles'
 
 export default create({
   name: 'Select',

src/spin/styles/dark.js

@@ -2,7 +2,7 @@ import create from '../../_styles/utils/create-component-base'
 import sizeVariables from './_common'
 import {
   baseLoadingDark
-} from '../../styles'
+} from '../../_base/loading/styles'
 
 export default create({
   name: 'Spin',

src/spin/styles/light.js

@@ -2,7 +2,7 @@ import create from '../../_styles/utils/create-component-base'
 import sizeVariables from './_common'
 import {
   baseLoadingLight
-} from '../../styles'
+} from '../../_base/loading/styles'
 
 export default create({
   name: 'Spin',

src/styles.js

@@ -1,28 +1,24 @@
 // unified entry for styles
 export {
-  scrollbarDark,
-  scrollbarLight
-} from './scrollbar/styles'
+  baseLoadingDark,
+  baseLoadingLight
+} from './_base/loading/styles'
 export {
   baseMenuMaskDark,
   baseMenuMaskLight
 } from './_base/menu-mask/styles'
-export {
-  baseSelectMenuDark,
-  baseSelectMenuLight
-} from './_base/select-menu/styles'
 export {
   baseSelectionDark,
   baseSelectionLight
 } from './_base/selection/styles'
+export {
+  baseSelectMenuDark,
+  baseSelectMenuLight
+} from './_base/select-menu/styles'
 export {
   baseSlotMachineDark,
   baseSlotMachineLight
 } from './_base/slot-machine/styles'
-export {
-  baseLoadingDark,
-  baseLoadingLight
-} from './_base/loading/styles'
 export {
   baseSuffixDark,
   baseSuffixLight
@@ -36,6 +32,122 @@ export {
   baseDark,
   baseLight
 } from './_styles/base'
+export {
+  affixDark,
+  affixLight
+} from './affix/styles'
+export {
+  alertDark,
+  alertLight
+} from './alert/styles'
+export {
+  anchorDark,
+  anchorLight
+} from './anchor/styles'
+export {
+  autoCompleteDark,
+  autoCompleteLight
+} from './auto-complete/styles'
+export {
+  avatarDark,
+  avatarLight
+} from './avatar/styles'
+export {
+  backTopDark,
+  backTopLight
+} from './back-top/styles'
+export {
+  badgeDark,
+  badgeLight
+} from './badge/styles'
+export {
+  breadcrumbDark,
+  breadcrumbLight
+} from './breadcrumb/styles'
+export {
+  buttonDark,
+  buttonLight
+} from './button/styles'
+export {
+  buttonGroupDark,
+  buttonGroupLight
+} from './button-group/styles'
+export {
+  cardDark,
+  cardLight
+} from './card/styles'
+export {
+  cascaderDark,
+  cascaderLight
+} from './cascader/styles'
+export {
+  checkboxDark,
+  checkboxLight
+} from './checkbox/styles'
+export {
+  codeDark,
+  codeLight
+} from './code/styles'
+export {
+  collapseDark,
+  collapseLight
+} from './collapse/styles'
+export {
+  dataTableDark,
+  dataTableLight
+} from './data-table/styles'
+export {
+  datePickerDark,
+  datePickerLight
+} from './date-picker/styles'
+export {
+  descriptionsDark,
+  descriptionsLight
+} from './descriptions/styles'
+export {
+  dialogDark,
+  dialogLight
+} from './dialog/styles'
+export {
+  dividerDark,
+  dividerLight
+} from './divider/styles'
+export {
+  drawerDark,
+  drawerLight
+} from './drawer/styles'
+export {
+  dropdownDark,
+  dropdownLight
+} from './dropdown/styles'
+export {
+  dynamicInputDark,
+  dynamicInputLight
+} from './dynamic-input/styles'
+export {
+  dynamicTagsDark,
+  dynamicTagsLight
+} from './dynamic-tags/styles'
+export {
+  elementDark,
+  elementLight
+} from './element/styles'
+export {
+  emptyDark,
+  emptyLight
+} from './empty/styles'
+export {
+  formDark,
+  formLight
+} from './form/styles'
+export {
+  gradientTextDark,
+  gradientTextLight
+} from './gradient-text/styles'
+export {
+  gridDark,
+  gridLight
+} from './grid/styles'
 export {
   iconDark,
   iconLight
@@ -45,270 +157,158 @@ export {
   inputLight
 } from './input/styles'
 export {
-  buttonDark,
-  buttonLight
-} from './button/styles'
-export {
-  selectDark,
-  selectLight
-} from './select/styles'
-export {
-  popoverDark,
-  popoverLight
-} from './popover/styles'
-export {
-  checkboxDark,
-  checkboxLight
-} from './checkbox/styles'
-export {
-  tagDark,
-  tagLight
-} from './tag/styles'
-export {
-  tabsDark,
-  tabsLight
-} from './tabs/styles'
-export {
-  elementDark,
-  elementLight
-} from './element/styles'
-export {
-  treeDark,
-  treeLight
-} from './tree/styles'
-export {
-  rateDark,
-  rateLight
-} from './rate/styles'
-export {
-  dropdownDark,
-  dropdownLight
-} from './dropdown/styles'
-export {
-  drawerDark,
-  drawerLight
-} from './drawer/styles'
-export {
-  paginationDark,
-  paginationLight
-} from './pagination/styles'
-export {
-  formDark,
-  formLight
-} from './form/styles'
-export {
-  tooltipDark,
-  tooltipLight
-} from './tooltip/styles'
-export {
-  resultDark,
-  resultLight
-} from './result/styles'
-export {
-  radioDark,
-  radioLight
-} from './radio/styles'
-export {
-  cardDark,
-  cardLight
-} from './card/styles'
-export {
-  emptyDark,
-  emptyLight
-} from './empty/styles'
-export {
-  inputNumberDark,
-  inputNumberLight
-} from './input-number/styles'
-export {
-  autoCompleteDark,
-  autoCompleteLight
-} from './auto-complete/styles'
-export {
-  progressDark,
-  progressLight
-} from './progress/styles'
-export {
-  timePickerDark,
-  timePickerLight
-} from './time-picker/styles'
-export {
-  notificationDark,
-  notificationLight
-} from './notification/styles'
-export {
-  alertDark,
-  alertLight
-} from './alert/styles'
-export {
-  popconfirmDark,
-  popconfirmLight
-} from './popconfirm/styles'
-export {
-  layoutDark,
-  layoutLight
-} from './layout/styles'
-export {
-  dynamicInputDark,
-  dynamicInputLight
-} from './dynamic-input/styles'
-export {
-  cascaderDark,
-  cascaderLight
-} from './cascader/styles'
-export {
-  transferDark,
-  transferLight
-} from './transfer/styles'
-export {
-  codeDark,
-  codeLight
-} from './code/styles'
-export {
-  dynamicTagsDark,
-  dynamicTagsLight
-} from './dynamic-tags/styles'
-export {
-  descriptionsDark,
-  descriptionsLight
-} from './descriptions/styles'
-export {
-  sliderDark,
-  sliderLight
-} from './slider/styles'
-export {
-  messageDark,
-  messageLight
-} from './message/styles'
-export {
-  collapseDark,
-  collapseLight
-} from './collapse/styles'
-export {
-  backTopDark,
-  backTopLight
-} from './back-top/styles'
-export {
-  spinDark,
-  spinLight
-} from './spin/styles'
-export {
-  popselectDark,
-  popselectLight
-} from './popselect/styles'
-export {
-  timeDark,
-  timeLight
-} from './time/styles'
-export {
-  dialogDark,
-  dialogLight
-} from './dialog/styles'
-export {
-  thingDark,
-  thingLight
-} from './thing/styles'
-export {
-  stepsDark,
-  stepsLight
-} from './steps/styles'
-export {
-  datePickerDark,
-  datePickerLight
-} from './date-picker/styles'
-export {
-  tableDark,
-  tableLight
-} from './table/styles'
-export {
-  loadingBarDark,
-  loadingBarLight
-} from './loading-bar/styles'
-export {
-  listDark,
-  listLight
-} from './list/styles'
-export {
-  dividerDark,
-  dividerLight
-} from './divider/styles'
-export {
-  menuDark,
-  menuLight
-} from './menu/styles'
-export {
-  avatarDark,
-  avatarLight
-} from './avatar/styles'
-export {
-  typographyDark,
-  typographyLight
-} from './typography/styles'
-export {
-  switchDark,
-  switchLight
-} from './switch/styles'
-export {
-  logDark,
-  logLight
-} from './log/styles'
-export {
-  anchorDark,
-  anchorLight
-} from './anchor/styles'
-export {
-  statisticDark,
-  statisticLight
-} from './statistic/styles'
-export {
-  breadcrumbDark,
-  breadcrumbLight
-} from './breadcrumb/styles'
-export {
-  modalDark,
-  modalLight
-} from './modal/styles'
-export {
-  spaceDark,
-  spaceLight
-} from './space/styles'
-export {
-  timelineDark,
-  timelineLight
-} from './timeline/styles'
+  inputGroupDark,
+  inputGroupLight
+} from './input-group/styles'
 export {
   inputGroupLabelDark,
   inputGroupLabelLight
 } from './input-group-label/styles'
 export {
-  affixDark,
-  affixLight
-} from './affix/styles'
+  inputNumberDark,
+  inputNumberLight
+} from './input-number/styles'
+export {
+  layoutDark,
+  layoutLight
+} from './layout/styles'
+export {
+  listDark,
+  listLight
+} from './list/styles'
+export {
+  loadingBarDark,
+  loadingBarLight
+} from './loading-bar/styles'
+export {
+  logDark,
+  logLight
+} from './log/styles'
+export {
+  menuDark,
+  menuLight
+} from './menu/styles'
+export {
+  messageDark,
+  messageLight
+} from './message/styles'
+export {
+  modalDark,
+  modalLight
+} from './modal/styles'
+export {
+  notificationDark,
+  notificationLight
+} from './notification/styles'
+export {
+  paginationDark,
+  paginationLight
+} from './pagination/styles'
+export {
+  popconfirmDark,
+  popconfirmLight
+} from './popconfirm/styles'
+export {
+  popoverDark,
+  popoverLight
+} from './popover/styles'
+export {
+  popselectDark,
+  popselectLight
+} from './popselect/styles'
+export {
+  progressDark,
+  progressLight
+} from './progress/styles'
+export {
+  radioDark,
+  radioLight
+} from './radio/styles'
+export {
+  rateDark,
+  rateLight
+} from './rate/styles'
+export {
+  resultDark,
+  resultLight
+} from './result/styles'
+export {
+  scrollbarDark,
+  scrollbarLight
+} from './scrollbar/styles'
+export {
+  selectDark,
+  selectLight
+} from './select/styles'
+export {
+  sliderDark,
+  sliderLight
+} from './slider/styles'
+export {
+  spaceDark,
+  spaceLight
+} from './space/styles'
+export {
+  spinDark,
+  spinLight
+} from './spin/styles'
+export {
+  statisticDark,
+  statisticLight
+} from './statistic/styles'
+export {
+  stepsDark,
+  stepsLight
+} from './steps/styles'
+export {
+  switchDark,
+  switchLight
+} from './switch/styles'
+export {
+  tableDark,
+  tableLight
+} from './table/styles'
+export {
+  tabsDark,
+  tabsLight
+} from './tabs/styles'
+export {
+  tagDark,
+  tagLight
+} from './tag/styles'
+export {
+  thingDark,
+  thingLight
+} from './thing/styles'
+export {
+  timeDark,
+  timeLight
+} from './time/styles'
+export {
+  timePickerDark,
+  timePickerLight
+} from './time-picker/styles'
+export {
+  timelineDark,
+  timelineLight
+} from './timeline/styles'
+export {
+  tooltipDark,
+  tooltipLight
+} from './tooltip/styles'
+export {
+  transferDark,
+  transferLight
+} from './transfer/styles'
+export {
+  treeDark,
+  treeLight
+} from './tree/styles'
+export {
+  typographyDark,
+  typographyLight
+} from './typography/styles'
 export {
   uploadDark,
   uploadLight
 } from './upload/styles'
-export {
-  gridDark,
-  gridLight
-} from './grid/styles'
-export {
-  badgeDark,
-  badgeLight
-} from './badge/styles'
-export {
-  dataTableDark,
-  dataTableLight
-} from './data-table/styles'
-export {
-  gradientTextDark,
-  gradientTextLight
-} from './gradient-text/styles'
-export {
-  buttonGroupDark,
-  buttonGroupLight
-} from './button-group/styles'
-export {
-  inputGroupDark,
-  inputGroupLight
-} from './input-group/styles'

src/tag/styles/dark.js

@@ -1,7 +1,9 @@
 import create from '../../_styles/utils/create-component-base'
 import commonVariables from './_common'
 import { changeColor } from 'seemly'
-import { iconDark } from '../../styles'
+import {
+  iconDark
+} from '../../icon/styles'
 
 export default create({
   theme: 'dark',

src/tag/styles/light.js

@@ -1,7 +1,9 @@
 import create from '../../_styles/utils/create-component-base'
 import commonVariables from './_common'
 import { changeColor } from 'seemly'
-import { iconLight } from '../../styles'
+import {
+  iconLight
+} from '../../icon/styles'
 
 export default create({
   theme: 'light',

src/tooltip/styles/dark.js

@@ -1,7 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import {
   popoverDark
-} from '../../styles'
+} from '../../popover/styles'
 
 export default create({
   theme: 'dark',

src/tooltip/styles/light.js

@@ -1,7 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import {
   popoverLight
-} from '../../styles'
+} from '../../popover/styles'
 
 export default create({
   theme: 'light',

src/transfer/styles/dark.js

@@ -1,10 +1,14 @@
 import create from '../../_styles/utils/create-component-base'
 import commonVariables from './_common'
 import {
-  checkboxDark,
-  scrollbarDark,
+  checkboxDark
+} from '../../checkbox/styles'
+import {
+  scrollbarDark
+} from '../../scrollbar/styles'
+import {
   inputDark
-} from '../../styles'
+} from '../../input/styles'
 
 export default create({
   theme: 'dark',

src/transfer/styles/light.js

@@ -2,10 +2,14 @@ import create from '../../_styles/utils/create-component-base'
 import commonVariables from './_common'
 import { composite } from 'seemly'
 import {
-  checkboxLight,
-  scrollbarLight,
+  checkboxLight
+} from '../../checkbox/styles'
+import {
+  scrollbarLight
+} from '../../scrollbar/styles'
+import {
   inputLight
-} from '../../styles'
+} from '../../input/styles'
 
 export default create({
   theme: 'light',

vue3.md

@@ -354,6 +354,7 @@
   - [x] drawer api
   - [x] chrome date-picker overflow (focus({ preventScroll }))
   - [x] slider 键盘好像会激活不该激活的 tooltip...
+  - [ ] transfer 打包之后有问题
 
 ## Info
 https://github.com/vuejs/vue-next/issues/2549