refactor: new style installing api

package.json

@@ -5,6 +5,7 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "scripts": {
+    "start": "npm run dev",
     "build:style": "npm run clean && node build/buildStyle.js",
     "build:icon": "npm run clean && node build/buildIcon.js",
     "build:js": "npm run clean && rollup -c",

src/_base/selection/styles/dark.js

@@ -1,5 +1,5 @@
-import create from '../../_utils/create-component-base'
-import commonVariables from '../../_common-style/base-selection'
+import create from '../../../styles/_utils/create-component-base'
+import commonVariables from '../../../styles/_common-style/base-selection'
 import { changeColor } from '../../../_utils/color/index.js'
 import suffixStyle from '../../suffix/styles/light'
 

src/_base/selection/styles/light.js

@@ -1,5 +1,5 @@
-import create from '../../_utils/create-component-base'
-import commonVariables from '../../_common-style/base-selection'
+import create from '../../../styles/_utils/create-component-base'
+import commonVariables from '../../../styles/_common-style/base-selection'
 import { changeColor } from '../../../_utils/color'
 import suffixStyle from '../../suffix/styles/dark'
 

src/_base/suffix/styles/dark.js

@@ -1,4 +1,4 @@
-import create from '../../_utils/create-component-base'
+import create from '../../../styles/_utils/create-component-base'
 
 export default create({
   name: 'BaseSuffix',

src/_base/suffix/styles/light.js

@@ -1,4 +1,4 @@
-import create from '../../_utils/create-component-base'
+import create from '../../../styles/_utils/create-component-base'
 
 export default create({
   name: 'BaseSuffix',

src/_mixins/usecssr.js

@@ -54,7 +54,7 @@ function setupMutableStyle (
   const options = instance.$options
   const {
     fallbackTheme,
-    _themes
+    styles
   } = naive
   const renderedTheme = theme || fallbackTheme
   const dependencyValue = dependencyKey === 'syntheticTheme' ? renderedTheme : instance[dependencyKey]
@@ -71,7 +71,7 @@ function setupMutableStyle (
     dependencyValue
   )
   if (isStyleMounted(mountId)) return
-  const cssrPropsGetter = _themes[renderedTheme][options.name]
+  const cssrPropsGetter = styles[renderedTheme][options.name]
   if (process.env.NODE_ENV !== 'production' && !cssrPropsGetter) {
     console.error(`[naive-ui/mixins/usecssr]: ${options.name}'s style not found`)
   }

src/create.js

@@ -19,10 +19,10 @@ function createStylesObject (styles) {
       if (!stylesObject[style.theme][style.name]) {
         stylesObject[style.theme][style.name] = style
       }
+      if (style.peer) {
+        traverse(style.peer)
+      }
     })
-    if (rootStyles.peer) {
-      traverse(rootStyles.peer)
-    }
   }
   traverse(styles)
   return stylesObject

src/index.js

@@ -89,10 +89,9 @@ import darkInputGroupLabelStyle from './input-group-label/styles/dark' // Done
 import lightInputNumberStyle from './input-number/styles/light'// Done
 import darkInputNumberStyle from './input-number/styles/dark'// Done
 
-// import lightBaseSelectionStyle from './styles/_base/selection/light'
-// import darkBaseSelectionStyle from './styles/_base/selection/dark'
-// import lightBaseSuffixStyle from './styles/_base/suffix/light'
-// import darkBaseSuffixStyle from './styles/_base/suffix/dark'
+// Can be remove after refactoring
+import lightBaseSelectionStyle from './_base/selection/styles/light'
+import darkBaseSelectionStyle from './_base/selection/styles/dark'
 
 // Deprecated Components
 import NimbusFormCard from './_deprecated/NimbusFormCard'
@@ -196,7 +195,10 @@ export default create({
     lightInputGroupLabelStyle,
     darkInputGroupLabelStyle,
     lightInputNumberStyle,
-    darkInputNumberStyle
+    darkInputNumberStyle,
+    // Can be remove after refactoring
+    lightBaseSelectionStyle,
+    darkBaseSelectionStyle
   ],
   // deprecated
   styleSchemes: {

src/input-number/styles/dark.js

@@ -4,7 +4,7 @@ import inputCommonVariables from '../../styles/_common-style/input'
 import inputNumberCommonVariables from '../../styles/_common-style/input-number'
 
 export default create({
-  name: 'InputGroup',
+  name: 'InputNumber',
   theme: 'dark',
   getDerivedVariables ({ base, derived }) {
     const {

src/input-number/styles/light.js

@@ -4,7 +4,7 @@ import inputCommonVariables from '../../styles/_common-style/input'
 import inputNumberCommonVariables from '../../styles/_common-style/input-number'
 
 export default create({
-  name: 'InputGroup',
+  name: 'InputNumber',
   theme: 'light',
   getDerivedVariables ({ base, derived }) {
     const {

src/input/src/styles/themed-size.cssr.js

@@ -4,7 +4,7 @@ import pxfy from '../../../_utils/css/pxfy'
 
 export default c([
   ({ props }) => {
-    const size = props.$instance.size
+    const size = props.$instance.syntheticSize
     const height = props.$local.height[size]
     const fontSize = props.$local.fontSize[size]
     const lineHeight = pxfy(Math.round(depx(fontSize) * 1.5))

src/styles/_utils/create-component-base.js

@@ -3,6 +3,7 @@ export default function createBaseComponent (component) {
   return {
     name: component.name,
     theme: component.theme,
+    peer: component.peer,
     getDerivedVariables: component.getDerivedVariables,
     cssrProps (themeVariables) {
       if (!cachedCssrProps) {

src/styles/_utils/create-theme-base.js

@@ -18,6 +18,8 @@ export default function createThemeBase (theme) {
   let cachedBased = null
   let cachedDerived = null
   return {
+    name: theme.name,
+    theme: theme.theme,
     get base () {
       if (!cachedBased) {
         return this.getBaseVariables()

src/styles/base/light.js

@@ -3,7 +3,7 @@ import { read, composite } from '../../_utils/color/index.js'
 import commonVariables from '../_common-style/base.js'
 
 export default create({
-  theme: 'dark',
+  theme: 'light',
   name: 'base',
   getBaseVariables () {
     return Object.assign({