feat: useCssModules

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 => {

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

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 <root>/types/v3-define-component.d.ts
  */

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<string, string> {
+  /* 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<string, string>
+  } else {
+    if (__DEV__) {
+      warn(`useCssModule() is not supported in the global build.`)
+    }
+    return emptyObject
+  }
+}