refactor(macros): add global defineStyle type if not used

Author: zhiyuanzmj

packages/eslint/src/rules/index.ts

@@ -1,12 +1,12 @@
-import defineStyle from './define-style'
+import _defineStyle from './define-style'
 import jsxSortProps from './jsx-sort-props'
 import type { DefineStyleRuleOptions } from './define-style/types'
 import type { JsxSortPropsRuleOptions } from './jsx-sort-props/types'
 import type { Linter } from 'eslint'
 
 const ruleOptions = {
   'jsx-sort-props': jsxSortProps,
-  'define-style': defineStyle,
+  'define-style': _defineStyle,
 }
 
 export interface RuleOptions {

packages/eslint/test/define-style.spec.ts

@@ -1,11 +1,11 @@
 import { createRuleTester } from 'eslint-vitest-rule-tester'
 import { describe, expect, it } from 'vitest'
-import defineStyle from '../src/rules/define-style'
+import _defineStyle from '../src/rules/define-style'
 
 describe('define-style', () => {
   const { invalid } = createRuleTester({
     name: 'define-style',
-    rule: defineStyle,
+    rule: _defineStyle,
   })
 
   it('basic', async () => {

packages/macros/src/volar.ts

@@ -23,8 +23,8 @@ const plugin: PluginReturn<Options | undefined> = createPlugin(
         const rootMap = getRootMap(options)
         if (rootMap.size) {
           transformJsxMacros(rootMap, options)
-          codes.push(getGlobalTypes(options))
         }
+        codes.push(getGlobalTypes(rootMap, options))
       },
     }
   },

packages/macros/src/volar/global-types.ts

@@ -1,44 +1,52 @@
 import { HELPER_PREFIX } from '@vue-macros/common'
-import type { TransformOptions } from '.'
+import type { RootMap, TransformOptions } from '.'
+
+export function getGlobalTypes(
+  rootMap: RootMap,
+  options: TransformOptions,
+): string {
+  let defineStyle = ''
+  if (options.defineSlots.alias) {
+    defineStyle = options.defineStyle.alias
+      .map(
+        (alias) =>
+          `declare const ${alias}: { <T>(...args: ${HELPER_PREFIX}StyleArgs): T; scss: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T; sass: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T; stylus: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T; less: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T; postcss: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T };`,
+      )
+      .join('\n')
+    defineStyle += `type ${HELPER_PREFIX}StyleArgs = [style: string, options?: { scoped?: boolean }];`
+  }
+  if (!rootMap.size) {
+    return defineStyle
+  }
 
-export function getGlobalTypes(options: TransformOptions): string {
   const defineSlots = options.defineSlots.alias
     .flatMap((alias) => [
       `declare function ${alias}<T extends Record<string, any>>(): Partial<T>;`,
-      `declare function ${alias}<T extends Record<string, any>>(slots: T): T;\n`,
+      `declare function ${alias}<T extends Record<string, any>>(slots: T): T;`,
     ])
-    .join('')
+    .join('\n')
   const defineExpose = options.defineExpose.alias
     .map(
       (alias) =>
         `declare function ${alias}<Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed): Exposed;`,
     )
-    .join('')
-  const defineStyle = options.defineStyle.alias
-    .map(
-      (alias) =>
-        `declare const ${alias}: { <T>(...args: ${HELPER_PREFIX}StyleArgs): T; scss: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T; sass: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T; stylus: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T; less: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T; postcss: <T>(...args: ${HELPER_PREFIX}StyleArgs)=> T };\n`,
-    )
-    .join('')
-  const defineModel = options.defineModel.alias
-    .map((alias) =>
-      alias === 'defineModel' ? 'defineModel' : `defineModel: ${alias}`,
-    )
-    .join(', ')
-  const defineComponent = options.defineComponent.alias
-    .map((alias) =>
-      ['defineComponent', 'defineVaporComponent'].includes(alias)
-        ? ''
-        : `defineComponent: ${alias}`,
-    )
+    .join('\n')
+  const defineModel = options.defineModel.alias.map((alias) =>
+    alias === 'defineModel' ? 'defineModel' : `defineModel: ${alias}`,
+  )
+  const defineComponent = options.defineComponent.alias.map((alias) =>
+    ['defineComponent', 'defineVaporComponent'].includes(alias)
+      ? ''
+      : `defineComponent: ${alias}`,
+  )
+  const VueMacros = [...defineModel, ...defineComponent]
     .filter(Boolean)
-    .join(', ')
+    .join(',')
   return `
-declare const { ${defineModel}, ${defineComponent} }: typeof import('vue')
+${VueMacros ? `declare const { ${VueMacros} }: typeof import('vue');` : ''}
 ${defineSlots}
 ${defineExpose}
 ${defineStyle}
-type ${HELPER_PREFIX}StyleArgs = [style: string, options?: { scoped?: boolean }];
 // @ts-ignore
 type __VLS_IsAny<T> = 0 extends 1 & T ? true : false; type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
 `

packages/macros/src/volar/transform.ts

@@ -14,7 +14,8 @@ export function transformJsxMacros(
       transformDefineStyle(defaultStyle, defineStyleIndex++, root, options),
     )
 
-    if (!root?.body) continue
+    if (!root?.body || (Object.keys(macros).length === 1 && macros.defineStyle))
+      continue
 
     const asyncModifier = root.modifiers?.find(
       (modifier) => modifier.kind === ts.SyntaxKind.AsyncKeyword,