refactor(mixins): remove themeable & with-cssr

src/_mixins/index.js

@@ -1,5 +1,3 @@
-export { default as themeable } from './themeable'
-export { default as withCssr } from './with-cssr'
 export { default as registerable } from './registerable'
 
 export { default as useFormItem } from './use-form-item'

src/_mixins/with-cssr.js

@@ -1,183 +0,0 @@
-import { find } from '../_utils/cssr'
-import { warn } from '../_utils'
-import { fallbackTheme } from './themeable'
-
-if (__DEV__) {
-  if (!window.naive) window.naive = {}
-  window.naive.styleRenderingDuration = 0
-}
-
-function getRenderedTheme (vm) {
-  return vm.mergedTheme || vm.theme || fallbackTheme
-}
-
-function getGlobalVars (styles, theme) {
-  const {
-    [theme]: { base }
-  } = styles
-  return base.getGlobalVars() // style[theme].base, for example style.light.base
-}
-
-function getLocalStyle (styles, theme, resolveId) {
-  return styles[theme][resolveId]
-}
-
-function getLocalVars (localStyle, globalVars) {
-  return localStyle.getLocalVars(globalVars)
-}
-
-function createMutableStyleId (
-  componentCssrId,
-  renderedTheme,
-  depKey,
-  depValue
-) {
-  if (depKey === 'mergedTheme' || depKey === 'theme') {
-    return componentCssrId + '-' + renderedTheme
-  }
-  return (
-    componentCssrId +
-    '-' +
-    renderedTheme +
-    '-' +
-    depKey +
-    (depValue ? '-' + depValue : '')
-  )
-}
-
-function setupMutableStyle (vm, theme, depKey, CNode) {
-  const {
-    $options: options,
-    // deprecated
-    // finally, we shouldn't use any value comes from $naive
-    // NConfigProvider should do all the stuff
-    $naive: { styles }
-  } = vm
-  const resolvedStyles = vm.NConfigProvider?.mergedStyles ?? styles
-  const resolveId = options.cssrName || options.name
-  const mountPrefix = options.cssrId || options.name
-  const depValue =
-    depKey === 'mergedTheme' || depKey === 'theme' ? theme : vm[depKey]
-  if (depValue === null || depValue === undefined) {
-    if (__DEV__) {
-      warn(
-        'mixins/with-cssr',
-        `dependency key ${resolveId}.${depKey} should not be nullable`
-      )
-    }
-    return
-  }
-  // create mount id
-  const mountId = createMutableStyleId(mountPrefix, theme, depKey, depValue)
-  if (find(mountId)) return
-  // get global style
-  const globalVars = getGlobalVars(resolvedStyles, theme)
-  // get component sytle
-  const localStyle = getLocalStyle(resolvedStyles, theme, resolveId)
-  const localVars = getLocalVars(localStyle, globalVars)
-  // get cssr props
-  const cssrProps = createCssrProps(vm, theme, globalVars, localVars)
-  // mount the style
-  CNode.mount({
-    target: mountId,
-    props: cssrProps,
-    count: false
-  })
-}
-
-function createCssrProps (vm, theme, globalVars, localVars) {
-  return {
-    $vm: vm,
-    $theme: theme,
-    $global: globalVars,
-    $local: localVars
-  }
-}
-
-function getCssrProps (vm, theme) {
-  const {
-    $options: options,
-    // deprecated
-    // finally, we shouldn't use any value comes from $naive
-    // NConfigProvider should do all the stuff
-    $naive: { styles }
-  } = vm
-  const resolvedStyles = vm.NConfigProvider?.mergedStyles ?? styles
-  const resolveId = options.cssrName || options.name
-  const globalVars = getGlobalVars(resolvedStyles, theme)
-  const localStyle = getLocalStyle(resolvedStyles, theme, resolveId)
-  const localVars = getLocalVars(localStyle, globalVars)
-  return createCssrProps(vm, theme, globalVars, localVars)
-}
-
-const withCssr = function (styles = [], options = {}) {
-  let data
-  // collect watchers
-  const watchers = {}
-  const { themeKey, injectCssrProps } = options
-  if (themeKey && injectCssrProps) {
-    watchers[themeKey] = [
-      (vm) => {
-        vm.cssrProps = getCssrProps(vm, vm[themeKey])
-      }
-    ]
-    data = function () {
-      return {
-        cssrProps: getCssrProps(this, this[themeKey])
-      }
-    }
-  }
-  styles.forEach((style) => {
-    if (__DEV__ && !style.watch) {
-      warn('with-cssr', 'Style option has no `watch` field.')
-      return
-    }
-    style.watch.forEach((watchKey) => {
-      if (!watchers[watchKey]) watchers[watchKey] = []
-      watchers[watchKey].push(function (vm, mergedTheme) {
-        if (__DEV__) {
-          window.naive.styleRenderingDuration -= performance.now()
-        }
-        setupMutableStyle(vm, mergedTheme, style.key, style.CNode)
-        if (__DEV__) {
-          window.naive.styleRenderingDuration += performance.now()
-        }
-      })
-    })
-  })
-  // create component watch options
-  const watchOptions = {}
-  Object.keys(watchers).forEach((watchKey) => {
-    watchOptions[watchKey] = function () {
-      watchers[watchKey].forEach((watcher) => {
-        watcher(this, getRenderedTheme(this))
-      })
-    }
-  })
-  return {
-    data,
-    beforeMount () {
-      styles.forEach((style) => {
-        if (__DEV__) {
-          window.naive.styleRenderingDuration -= performance.now()
-        }
-        if (style.key) {
-          setupMutableStyle(
-            this,
-            getRenderedTheme(this),
-            style.key,
-            style.CNode
-          )
-        } else if (__DEV__) {
-          warn('mixins/with-cssr', 'style has no dependency key')
-        }
-        if (__DEV__) {
-          window.naive.styleRenderingDuration += performance.now()
-        }
-      })
-    },
-    watch: watchOptions
-  }
-}
-
-export default withCssr

src/_utils/cssr/index.js

@@ -1,7 +1,5 @@
 import CSSRender from 'css-render'
 import BEMPlugin from '@css-render/plugin-bem'
-import { fallbackTheme } from '../../_mixins/themeable'
-import { warn } from '../naive'
 
 const namespace = 'n'
 const prefix = `.${namespace}-`
@@ -33,21 +31,6 @@ function insideModal (style) {
   return c(`${prefix}modal, ${prefix}drawer`, [style])
 }
 
-function cTB (selector, ...rest) {
-  return cB(selector, [
-    c(({ props }) => {
-      const theme = props.$theme
-      if (__DEV__ && !theme) {
-        warn(
-          'utils/cssr',
-          'No theme when rendering styles, this could be a bug of naive-ui.'
-        )
-      }
-      return theme === fallbackTheme ? '' : `&.${namespace}-${theme}-theme`
-    }, ...rest)
-  ])
-}
-
 function createKey (keyPrefix, ...suffixs) {
   return (
     keyPrefix +
@@ -70,7 +53,6 @@ function withPrefix (selector) {
 
 export {
   c,
-  cTB,
   cRB,
   cB,
   cE,