refactor: rename usecssr -> withCssr, asformitem -> asFormItem

src/_base/loading/src/Loading.vue

@@ -25,13 +25,13 @@
 </template>
 
 <script>
-import usecssr from '../../../_mixins/usecssr'
+import { withCssr } from '../../../_mixins'
 import styles from './styles/'
 
 export default {
   name: 'BaseLoading',
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     radius: {

src/_base/menu-mask/src/MenuMask.vue

@@ -17,13 +17,13 @@
 
 <script>
 import { ref, onBeforeUnmount } from 'vue'
-import usecssr from '../../../_mixins/usecssr'
+import { withCssr } from '../../../_mixins'
 import styles from './styles'
 
 export default {
   name: 'BaseMenuMask',
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     theme: {

src/_base/select-menu/src/SelectMenu.vue

@@ -84,7 +84,7 @@ import NSelectGroupHeader from './SelectGroupHeader.js'
 import NEmpty from '../../../empty'
 import { depx, formatLength } from '../../../_utils'
 import { createKey } from '../../../_utils/cssr'
-import { usecssr } from '../../../_mixins'
+import { withCssr } from '../../../_mixins'
 import styles from './styles'
 
 export default {
@@ -97,7 +97,7 @@ export default {
     NSelectGroupHeader
   },
   mixins: [
-    usecssr(styles, {
+    withCssr(styles, {
       themeKey: 'theme',
       injectCssrProps: true
     })

src/_base/selection/src/Selection.vue

@@ -188,7 +188,7 @@
 <script>
 import NBaseSuffix from '../../suffix/index.js'
 import NTag from '../../../tag/index.js'
-import usecssr from '../../../_mixins/usecssr.js'
+import { withCssr } from '../../../_mixins'
 import styles from './styles/index.js'
 
 export default {
@@ -198,7 +198,7 @@ export default {
     NTag
   },
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   inject: {
     NFormItem: {

src/_base/slot-machine/src/SlotMachine.vue

@@ -30,7 +30,7 @@
 <script>
 import { NFadeInExpandTransition } from '../../../_base'
 import SlotMachineNumber from './SlotMachineNumber.vue'
-import { usecssr } from '../../../_mixins'
+import { withCssr } from '../../../_mixins'
 import styles from './styles/index.js'
 
 export default {
@@ -40,7 +40,7 @@ export default {
     SlotMachineNumber
   },
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     value: {

src/_base/suffix/src/Suffix.vue

@@ -47,7 +47,7 @@ import CancelIcon from './CancelIcon.vue'
 import { NIconSwitchTransition } from '../../../_base'
 import NBaseLoading from '../../loading'
 import {
-  usecssr
+  withCssr
 } from '../../../_mixins'
 import styles from './styles'
 
@@ -59,7 +59,7 @@ export default {
     NIconSwitchTransition
   },
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   inject: {
     NFormItem: {

src/_base/wave/src/Wave.vue

@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import usecssr from '../../../_mixins/usecssr'
+import { withCssr } from '../../../_mixins'
 import styles from './styles/index.js'
 
 export default {
   name: 'NBaseWave',
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   data () {
     return {

src/_mixins/index.js

@@ -1,8 +1,8 @@
 export { default as useAsFormItem } from './use-as-form-item'
-export { default as asformitem } from './asformitem'
+export { default as asFormItem } from './as-form-item'
 export { default as locale } from './locale'
 export { default as placeable } from './placeable/index'
 export { default as themeable } from './themeable'
 export { default as configurable } from './configurable'
-export { default as usecssr } from './usecssr'
+export { default as withCssr } from './with-cssr'
 export { default as registerable } from './registerable'

src/_mixins/with-cssr.js

@@ -62,7 +62,7 @@ function setupMutableStyle (
     __DEV__ &&
     (depValue === null || depValue === undefined)
   ) {
-    warn('mixins/usecssr', `dependency key ${name}.${depKey} should not be nullable`)
+    warn('mixins/with-cssr', `dependency key ${name}.${depKey} should not be nullable`)
   }
   const mountId = createMutableStyleId(
     id,
@@ -73,7 +73,7 @@ function setupMutableStyle (
   if (find(mountId)) return
   const cssrPropsGetter = styles[renderedTheme][name]
   if (__DEV__ && !cssrPropsGetter) {
-    warn('mixins/usecssr', `${name}'s style not found`)
+    warn('mixins/with-cssr', `${name}'s style not found`)
   }
   // themeVariables: { base, derived }
   const themeVariables = getThemeVariables(naive, renderedTheme)
@@ -134,7 +134,7 @@ function getCssrProps (
   }
 }
 
-const usecssr = function (styles = [], cssrPropsOption) {
+const withCssr = function (styles = [], cssrPropsOption) {
   // collect watchers
   const watchers = {}
   if (
@@ -224,4 +224,4 @@ const usecssr = function (styles = [], cssrPropsOption) {
   }
 }
 
-export default usecssr
+export default withCssr

src/affix/src/Affix.vue

@@ -13,7 +13,7 @@
 
 <script>
 import getScrollParent from '../../_utils/dom/get-scroll-parent'
-import { usecssr } from '../../_mixins'
+import { withCssr } from '../../_mixins'
 import styles from './styles/index.js'
 import getTarget from '../../_utils/dom/get-target'
 import { warn } from '../../_utils/naive/warn'
@@ -21,7 +21,7 @@ import { warn } from '../../_utils/naive/warn'
 export default {
   name: 'Affix',
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     listenTo: {

src/alert/src/Alert.vue

@@ -73,7 +73,7 @@ import { NFadeInExpandTransition } from '../../_base'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { warn } from '../../_utils/naive'
 import styles from './styles'
@@ -101,7 +101,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     title: {

src/anchor/src/BaseAnchor.vue

@@ -29,7 +29,7 @@ import getScrollParent from '../../_utils/dom/get-scroll-parent'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { onFontsReady } from 'vooks'
 import { warn } from '../../_utils/naive/warn'
@@ -56,7 +56,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/auto-complete/src/AutoComplete.vue

@@ -74,9 +74,9 @@ import { createTreeMate } from 'treemate'
 import {
   configurable,
   themeable,
-  asformitem,
+  asFormItem,
   placeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import {
   clickoutside,
@@ -108,8 +108,8 @@ export default {
     configurable,
     themeable,
     placeable,
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   props: {
     placeholder: {

src/avatar/src/Avatar.vue

@@ -33,7 +33,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 import { validSize } from './config'
@@ -43,7 +43,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     size: {

src/back-top/src/BackTop.vue

@@ -57,7 +57,7 @@ import getScrollParent from '../../_utils/dom/get-scroll-parent'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { formatLength, warn } from '../../_utils'
 import styles from './styles'
@@ -72,7 +72,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     show: {

src/badge/src/Badge.vue

@@ -40,7 +40,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { NBaseSlotMachine, NBaseWave } from '../../_base'
 import styles from './styles/index.js'
@@ -54,7 +54,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     value: {

src/breadcrumb/src/Breadcrumb.vue

@@ -13,7 +13,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/index.js'
 
@@ -22,7 +22,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/button-group/src/ButtonGroup.vue

@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import usecssr from '../../_mixins/usecssr'
+import { withCssr } from '../../_mixins'
 import styles from './styles/index.js'
 
 export default {
   name: 'ButtonGroup',
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/button/src/Button.vue

@@ -73,7 +73,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import {
   NFadeInExpandTransition,
@@ -97,7 +97,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   inject: {
     NButtonGroup: {

src/card/src/Card.vue

@@ -48,7 +48,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import NIcon from '../../icon'
 import {
@@ -65,7 +65,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     title: {

src/cascader/src/Cascader.vue

@@ -82,7 +82,7 @@ import {
   configurable,
   themeable,
   locale,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { useCascader } from './composables'
 import { warn, call } from '../../_utils'
@@ -102,7 +102,7 @@ export default {
     configurable,
     themeable,
     locale('Cascader'),
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/checkbox/src/Checkbox.vue

@@ -56,8 +56,8 @@ import { useMergedState, useMemo } from 'vooks'
 import {
   configurable,
   themeable,
-  asformitem,
-  usecssr
+  asFormItem,
+  withCssr
 } from '../../_mixins'
 import { render } from '../../_utils/vue'
 import CheckMark from './CheckMark.vue'
@@ -77,7 +77,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    asformitem({
+    asFormItem({
       mergedSize () {
         const { size } = this
         if (size !== undefined) return size
@@ -95,7 +95,7 @@ export default {
         return 'medium'
       }
     }),
-    usecssr(styles)
+    withCssr(styles)
   ],
   inject: {
     NCheckboxGroup: {

src/checkbox/src/CheckboxGroup.js

@@ -2,7 +2,7 @@ import { h } from 'vue'
 import {
   configurable,
   themeable,
-  asformitem
+  asFormItem
 } from '../../_mixins'
 import { getSlot } from '../../_utils/vue'
 import { warn, call } from '../../_utils'
@@ -12,7 +12,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    asformitem()
+    asFormItem()
   ],
   provide () {
     return {

src/code/src/Code.js

@@ -2,7 +2,7 @@ import { h, nextTick } from 'vue'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/index.js'
 import { warn } from '../../_utils/naive/warn'
@@ -12,7 +12,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     language: {

src/collapse/src/Collapse.js

@@ -3,7 +3,7 @@ import { intersection } from 'lodash-es'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import {
   call,
@@ -21,7 +21,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     expandedNames: {

src/data-table/src/DataTable.vue

@@ -66,7 +66,7 @@ import { ref } from 'vue'
 import {
   configurable,
   themeable,
-  usecssr,
+  withCssr,
   locale
 } from '../../_mixins'
 import { setCheckStatusOfRow, createRowKey } from './utils'
@@ -138,7 +138,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles),
+    withCssr(styles),
     locale('DataTable')
   ],
   provide () {

src/date-picker/src/DatePicker.vue

@@ -151,8 +151,8 @@ import {
   configurable,
   themeable,
   placeable,
-  asformitem,
-  usecssr,
+  asFormItem,
+  withCssr,
   locale
 } from '../../_mixins'
 import {
@@ -215,8 +215,8 @@ export default {
     themeable,
     placeable,
     locale('DatePicker'),
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   provide () {
     return {

src/descriptions/src/Descriptions.js

@@ -2,7 +2,7 @@ import { h } from 'vue'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 import { warn } from '../../_utils/naive/warn'
@@ -15,7 +15,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     title: {

src/dialog/src/Dialog.vue

@@ -71,7 +71,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { render } from '../../_utils/vue'
 import NIcon from '../../icon'
@@ -98,7 +98,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     icon: {

src/divider/src/Divider.vue

@@ -30,7 +30,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -39,7 +39,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     titlePlacement: {

src/drawer/src/Drawer.vue

@@ -40,7 +40,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { zindexable } from '../../_directives'
 import { warn, formatLength } from '../../_utils'
@@ -61,7 +61,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/dropdown/src/Dropdown.js

@@ -3,7 +3,7 @@ import { TreeMate } from 'treemate'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { KEY_CODE } from '../../_utils'
 import keyboardDelegate from '../../_utils/delegate/keyboardDelegate'
@@ -67,7 +67,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/dynamic-input/src/DynamicInput.vue

@@ -75,8 +75,8 @@ import NDynamicInputPairPreset from './PairPreset.vue'
 import {
   configurable,
   themeable,
-  usecssr,
-  asformitem,
+  withCssr,
+  asFormItem,
   locale
 } from '../../_mixins'
 import styles from './styles'
@@ -99,8 +99,8 @@ export default {
     configurable,
     themeable,
     locale('DynamicInput'),
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   provide () {
     return {

src/dynamic-tags/src/DynamicTags.vue

@@ -47,9 +47,9 @@ import { AddIcon } from '../../_base/icons'
 import {
   configurable,
   themeable,
-  asformitem,
+  asFormItem,
   locale,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import commonProps from '../../tag/src/common-props'
 import styles from './styles'
@@ -67,8 +67,8 @@ export default {
     configurable,
     themeable,
     locale('Tag'),
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   props: {
     ...commonProps,

src/empty/src/Empty.vue

@@ -30,7 +30,7 @@ import {
   configurable,
   themeable,
   locale,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import {
   EmptyIcon
@@ -48,7 +48,7 @@ export default {
     configurable,
     themeable,
     locale('Empty'),
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     description: {

src/form/src/FormItem.vue

@@ -94,7 +94,7 @@ import { get } from 'lodash-es'
 import {
   configurable,
   themeable,
-  usecssr,
+  withCssr,
   registerable
 } from '../../_mixins'
 import styles from './styles'
@@ -151,7 +151,7 @@ export default {
     registerable('NForm', 'formItems', 'path'),
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   inject: {
     NForm: {

src/gradient-text/src/GradientText.vue

@@ -19,7 +19,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { formatLength } from '../../_utils'
 import styles from './styles/index'
@@ -29,7 +29,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     size: {

src/grid/src/Col.vue

@@ -25,13 +25,13 @@
 
 <script>
 import { formatLength } from '../../_utils'
-import { usecssr } from '../../_mixins'
+import { withCssr } from '../../_mixins'
 import styles from './styles/col.js'
 
 export default {
   name: 'Col',
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   inject: {
     NRow: {

src/grid/src/Row.vue

@@ -17,13 +17,13 @@
 
 <script>
 import { formatLength } from '../../_utils'
-import { usecssr } from '../../_mixins'
+import { withCssr } from '../../_mixins'
 import styles from './styles/row.js'
 
 export default {
   name: 'Row',
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/icon/src/Icon.js

@@ -2,7 +2,7 @@ import { h } from 'vue'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/index'
 import { formatLength } from '../../_utils'
@@ -14,7 +14,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     size: {

src/input-group-label/src/InputGroupLabel.vue

@@ -14,7 +14,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -23,7 +23,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     size: {

src/input-group/src/InputGroup.vue

@@ -5,13 +5,13 @@
 </template>
 
 <script>
-import usecssr from '../../_mixins/usecssr'
+import { withCssr } from '../../_mixins'
 import styles from './styles'
 
 export default {
   name: 'InputGroup',
   mixins: [
-    usecssr(styles)
+    withCssr(styles)
   ]
 }
 </script>

src/input-number/src/InputNumber.vue

@@ -68,8 +68,8 @@ import {
 import {
   configurable,
   themeable,
-  asformitem,
-  usecssr,
+  asFormItem,
+  withCssr,
   locale
 } from '../../_mixins'
 import { warn, call } from '../../_utils'
@@ -101,8 +101,8 @@ export default {
     configurable,
     themeable,
     locale('InputNumber'),
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   props: {
     placeholder: {

src/input/src/Input.vue

@@ -163,9 +163,9 @@ import { NBaseSuffix } from '../../_base'
 import {
   configurable,
   themeable,
-  asformitem,
+  asFormItem,
   locale,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { call } from '../../_utils'
 import styles from './styles'
@@ -179,8 +179,8 @@ export default {
     configurable,
     themeable,
     locale('Input'),
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   props: {
     type: {

src/layout/src/Layout.vue

@@ -29,7 +29,7 @@ import layoutModeMixin from './layoutModeMixin'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/layout'
 
@@ -44,7 +44,7 @@ export default {
     configurable,
     themeable,
     layoutModeMixin,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/layout/src/LayoutFooter.vue

@@ -17,7 +17,7 @@ import layoutModeMixin from './layoutModeMixin'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/layout-header-footer'
 
@@ -29,7 +29,7 @@ export default {
     configurable,
     themeable,
     layoutModeMixin,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     bordered: {

src/layout/src/LayoutHeader.vue

@@ -17,7 +17,7 @@ import layoutModeMixin from './layoutModeMixin'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/layout-header-footer'
 
@@ -29,7 +29,7 @@ export default {
     configurable,
     themeable,
     layoutModeMixin,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     bordered: {

src/layout/src/LayoutSider.vue

@@ -51,7 +51,7 @@ import layoutModeMixin from './layoutModeMixin'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import ToggleButton from './ToggleButton.vue'
 import ToggleBar from './ToggleBar.vue'
@@ -71,7 +71,7 @@ export default {
     configurable,
     themeable,
     layoutModeMixin,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     bordered: {

src/list/src/List.vue

@@ -21,13 +21,13 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
 export default {
   name: 'List',
-  mixins: [configurable, themeable, usecssr(styles)],
+  mixins: [configurable, themeable, withCssr(styles)],
   props: {
     size: {
       type: String,

src/loading-bar/src/LoadingBar.vue

@@ -25,7 +25,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -38,7 +38,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   data () {
     return {

src/log/src/Log.vue

@@ -33,7 +33,7 @@ import { ref } from 'vue'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import NScrollbar from '../../scrollbar'
 import NLogLoader from './LogLoader.vue'
@@ -52,7 +52,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/menu/src/Menu.js

@@ -3,7 +3,7 @@ import { useCompitable, useMergedState } from 'vooks'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/index'
 import {
@@ -23,7 +23,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     items: {

src/message/src/Message.js

@@ -12,7 +12,7 @@ import { render } from '../../_utils/vue'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 import props from './message-props'
@@ -22,7 +22,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props,
   methods: {

src/modal/src/Modal.js

@@ -1,6 +1,6 @@
 import { h, withDirectives, Transition, ref, computed } from 'vue'
 import { zindexable } from '../../_directives'
-import { configurable, themeable, usecssr } from '../../_mixins'
+import { configurable, themeable, withCssr } from '../../_mixins'
 import presetProps from './presetProps'
 import { useIsMounted, useClicked, useClickPosition } from 'vooks'
 import { warn } from '../../_utils/naive/warn'
@@ -20,7 +20,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     show: {

src/notification/src/Notification.vue

@@ -59,7 +59,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { render } from '../../_utils/vue'
 import styles from './styles'
@@ -86,7 +86,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     closable: {

src/pagination/src/Pagination.vue

@@ -106,7 +106,7 @@ import {
   configurable,
   themeable,
   locale,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { pageItems } from './utils'
 import styles from './styles'
@@ -126,7 +126,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles),
+    withCssr(styles),
     locale('Pagination')
   ],
   props: {

src/popconfirm/src/PopconfirmPanel.vue

@@ -46,7 +46,7 @@ import {
   configurable,
   themeable,
   locale,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -62,7 +62,7 @@ export default {
     locale('Popconfirm'),
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     positiveText: {

src/popover/src/PopoverBody.js

@@ -5,7 +5,7 @@ import {
   Transition
 } from 'vue'
 import { clickoutside, mousemoveoutside, zindexable } from '../../_directives'
-import { configurable, themeable, placeable, usecssr } from '../../_mixins'
+import { configurable, themeable, placeable, withCssr } from '../../_mixins'
 import styles from './styles'
 import { formatLength } from '../../_utils'
 import { getSlot } from '../../_utils/vue'
@@ -94,7 +94,7 @@ export default {
     configurable,
     themeable,
     placeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   data () {
     return {

src/popselect/src/PopselectPanel.vue

@@ -17,7 +17,7 @@ import { NBaseSelectMenu } from '../../_base'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 import { call } from '../../_utils/vue'
@@ -31,7 +31,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   inject: {
     NPopselect: {

src/progress/src/Progress.vue

@@ -247,7 +247,7 @@ import {
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/index.js'
 import { formatLength } from '../../_utils'
@@ -271,7 +271,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     processing: {

src/radio/src/Radio.vue

@@ -43,8 +43,8 @@
 import {
   configurable,
   themeable,
-  asformitem,
-  usecssr
+  asFormItem,
+  withCssr
 } from '../../_mixins'
 import radioMixin from './radio-mixin'
 import styles from './styles/radio/index.js'
@@ -55,8 +55,8 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles),
-    asformitem({
+    withCssr(styles),
+    asFormItem({
       mergedSize () {
         const { size } = this
         if (size !== undefined) return size

src/radio/src/RadioButton.vue

@@ -33,7 +33,7 @@ import setup from './radio-setup'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/radio-button/index.js'
 
@@ -45,7 +45,7 @@ export default {
     configurable,
     themeable,
     radioMixin,
-    usecssr(styles)
+    withCssr(styles)
   ],
   setup
 }

src/radio/src/RadioGroup.js

@@ -2,11 +2,11 @@ import { h } from 'vue'
 import {
   configurable,
   themeable,
-  asformitem
+  asFormItem,
+  withCssr
 } from '../../_mixins'
 import { getSlot, flatten } from '../../_utils/vue'
 import { warn } from '../../_utils/naive/warn'
-import usecssr from '../../_mixins/usecssr'
 import styles from './styles/radio-group/index.js'
 
 function mapSlot (h, defaultSlot, groupInstance) {
@@ -92,8 +92,8 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles),
-    asformitem()
+    withCssr(styles),
+    asFormItem()
   ],
   props: {
     name: {

src/rate/src/Rate.vue

@@ -30,8 +30,8 @@
 import {
   configurable,
   themeable,
-  usecssr,
-  asformitem
+  withCssr,
+  asFormItem
 } from '../../_mixins'
 import {
   toRef,
@@ -56,8 +56,8 @@ export default {
   mixins: [
     configurable,
     themeable,
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   props: {
     count: {

src/result/src/Result.vue

@@ -46,7 +46,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import {
   InfoIcon,
@@ -77,7 +77,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     size: {

src/scrollbar/src/ScrollBar.vue

@@ -102,7 +102,7 @@ import {
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/index.js'
 import { useIsIos } from 'vooks'
@@ -115,7 +115,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     size: {

src/select/src/Select.vue

@@ -108,9 +108,9 @@ import {
   configurable,
   placeable,
   themeable,
-  asformitem,
+  asFormItem,
   locale,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import {
   clickoutside,
@@ -172,8 +172,8 @@ export default {
     themeable,
     placeable,
     locale('Select'),
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   provide () {
     return {

src/slider/src/Slider.vue

@@ -107,8 +107,8 @@ import {
   configurable,
   themeable,
   placeable,
-  asformitem,
-  usecssr
+  asFormItem,
+  withCssr
 } from '../../_mixins'
 import {
   zindexable
@@ -151,8 +151,8 @@ export default {
     configurable,
     themeable,
     placeable,
-    usecssr(styles),
-    asformitem()
+    withCssr(styles),
+    asFormItem()
   ],
   props: {
     marks: {

src/spin/src/Spin.vue

@@ -45,7 +45,7 @@ import { NBaseLoading } from '../../_base'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -66,7 +66,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     stroke: {

src/statistic/src/Statistic.vue

@@ -35,7 +35,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -44,7 +44,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     label: {

src/steps/src/Steps.js

@@ -2,7 +2,7 @@ import { h } from 'vue'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { getSlot } from '../../_utils/vue'
 import styles from './styles/steps'
@@ -27,7 +27,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     current: {

src/switch/src/Switch.vue

@@ -23,8 +23,8 @@
 import {
   configurable,
   themeable,
-  asformitem,
-  usecssr
+  asFormItem,
+  withCssr
 } from '../../_mixins'
 import {
   call
@@ -39,8 +39,8 @@ export default {
   mixins: [
     configurable,
     themeable,
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   props: {
     value: {

src/table/src/Table.vue

@@ -17,7 +17,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -26,7 +26,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     bordered: {

src/tabs/src/Tabs.vue

@@ -95,7 +95,7 @@ import NIcon from '../../icon'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import {
   ChevronLeftIcon as BackwardIcon,
@@ -120,7 +120,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/tag/src/Tag.vue

@@ -29,7 +29,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { CloseIcon } from '../../_base/icons'
 import { warn } from '../../_utils'
@@ -44,7 +44,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     ...commonProps,

src/thing/src/Thing.vue

@@ -75,7 +75,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -84,7 +84,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     title: {

src/time-picker/src/TimePicker.vue

@@ -188,7 +188,7 @@ import { NBaseLazyTeleport, NBaseFocusDetector } from '../../_base'
 import NScrollbar from '../../scrollbar'
 import NInput from '../../input'
 import NIcon from '../../icon'
-import { configurable, themeable, locale, usecssr, asformitem, placeable } from '../../_mixins'
+import { configurable, themeable, locale, withCssr, asFormItem, placeable } from '../../_mixins'
 import { zindexable, clickoutside } from '../../_directives'
 import {
   isValid,
@@ -242,8 +242,8 @@ export default {
     themeable,
     placeable,
     locale('TimePicker'),
-    asformitem(),
-    usecssr(styles)
+    asFormItem(),
+    withCssr(styles)
   ],
   props: {
     placeholder: {

src/timeline/src/Timeline.vue

@@ -15,7 +15,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles'
 
@@ -24,7 +24,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

src/transfer/src/Transfer.vue

@@ -207,9 +207,9 @@ import {
 } from '../../_base/icons'
 import {
   configurable,
-  asformitem,
+  asFormItem,
   themeable,
-  usecssr,
+  withCssr,
   locale
 } from '../../_mixins'
 import styles from './styles'
@@ -236,14 +236,14 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(
+    withCssr(
       styles, {
         themeKey: 'mergedTheme',
         injectCssrProps: true
       }
     ),
     locale('Transfer'),
-    asformitem()
+    asFormItem()
   ],
   provide () {
     return {

src/tree/src/Tree.js

@@ -4,7 +4,7 @@ import {
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import NTreeNode from './TreeNode'
 import { isLeaf, isLoaded, getAllKeys, keysWithFilter } from './utils'
@@ -17,7 +17,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return { NTree: this }

src/typography/src/a.vue

@@ -22,7 +22,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/a'
 
@@ -33,7 +33,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     to: {

src/typography/src/blockquote.vue

@@ -14,7 +14,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/blockquote'
 
@@ -25,7 +25,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     alignText: {

src/typography/src/header.js

@@ -2,7 +2,7 @@ import { h } from 'vue'
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { getSlot } from '../../_utils/vue'
 import styles from './styles/header'
@@ -28,7 +28,7 @@ export default level => ({
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   render () {
     const props = this.$props

src/typography/src/hr.vue

@@ -13,7 +13,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/hr'
 
@@ -24,7 +24,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ]
 }
 </script>

src/typography/src/ol.vue

@@ -15,7 +15,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/list'
 
@@ -26,7 +26,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     alignText: {

src/typography/src/p.vue

@@ -14,7 +14,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/p'
 
@@ -25,7 +25,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     depth: {

src/typography/src/text.vue

@@ -56,7 +56,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import {
   warn
@@ -73,7 +73,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     code: {

src/typography/src/ul.vue

@@ -15,7 +15,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import styles from './styles/list'
 
@@ -26,7 +26,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   props: {
     alignText: {

src/upload/src/Upload.vue

@@ -43,7 +43,7 @@
 import {
   configurable,
   themeable,
-  usecssr
+  withCssr
 } from '../../_mixins'
 import { warn } from '../../_utils/naive'
 import { createId } from '../../_utils/vue'
@@ -169,7 +169,7 @@ export default {
   mixins: [
     configurable,
     themeable,
-    usecssr(styles)
+    withCssr(styles)
   ],
   provide () {
     return {

think.md

@@ -186,7 +186,7 @@ light {
 我目前觉得第一种好点，因为扩展一般是按照种类扩展，每次插入一个同样结构的块。而第二种是每次扩展的时候在每个块里同样的位置插入一行，这样扩展的时候写起来很别扭。
 
 ## 2020.7.1
-shouldMount 可以加到 usecssr
+shouldMount 可以加到 withCssr
 
 ## 2020.7.8
 style overrides RFC