diff --git a/scripts/config.js b/scripts/config.js index a1c871a6e..851dc2297 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -279,7 +279,8 @@ function genConfig(name) { const vars = { __VERSION__: version, __DEV__: `process.env.NODE_ENV !== 'production'`, - __TEST__: false + __TEST__: false, + __GLOBAL__: opts.format === 'umd' || name.includes('browser') } // feature flags Object.keys(featureFlags).forEach(key => { diff --git a/src/global.d.ts b/src/global.d.ts index 1b88325cb..badbd1e02 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,5 +1,6 @@ declare const __DEV__: boolean declare const __TEST__: boolean +declare const __GLOBAL__: boolean interface Window { __VUE_DEVTOOLS_GLOBAL_HOOK__: DevtoolsHook diff --git a/src/v3/index.ts b/src/v3/index.ts index 1c521e463..044fd27c4 100644 --- a/src/v3/index.ts +++ b/src/v3/index.ts @@ -76,6 +76,8 @@ export { useSlots, useAttrs, mergeDefaults } from './apiSetup' export { nextTick } from 'core/util/next-tick' export { set, del } from 'core/observer' +export { useCssModule } from './sfc-helpers/useCssModule' + /** * @internal type is manually declared in /types/v3-define-component.d.ts */ diff --git a/src/v3/sfc-helpers/useCssModule.ts b/src/v3/sfc-helpers/useCssModule.ts new file mode 100644 index 000000000..df49931af --- /dev/null +++ b/src/v3/sfc-helpers/useCssModule.ts @@ -0,0 +1,24 @@ +import { emptyObject, warn } from '../../core/util' +import { currentInstance } from '../currentInstance' + +export function useCssModule(name = '$style'): Record { + /* istanbul ignore else */ + if (!__GLOBAL__) { + if (!currentInstance) { + __DEV__ && warn(`useCssModule must be called inside setup()`) + return emptyObject + } + const mod = currentInstance[name] + if (!mod) { + __DEV__ && + warn(`Current instance does not have CSS module named "${name}".`) + return emptyObject + } + return mod as Record + } else { + if (__DEV__) { + warn(`useCssModule() is not supported in the global build.`) + } + return emptyObject + } +}