feat(macros): support :slotted for defineStyle

Author: zhiyuanzmj

packages/macros/src/core/define-component/index.ts

@@ -1,6 +1,6 @@
 import { importHelperFn, type MagicStringAST } from '@vue-macros/common'
 import { walkIdentifiers } from '@vue/compiler-sfc'
-import { isFunctionalNode, type FunctionalNode, type RootMapValue } from '..'
+import { isFunctionalNode, type FunctionalNode, type Macros } from '..'
 import { getDefaultValue, restructure } from '../restructure'
 import { transformAwait } from './await'
 import { transformReturn } from './return'
@@ -9,7 +9,7 @@ import type { Node, ObjectExpression } from '@babel/types'
 export function transformDefineComponent(
   root: FunctionalNode,
   propsName: string,
-  macros: RootMapValue,
+  macros: Macros,
   s: MagicStringAST,
   autoReturnFunction = false,
 ): void {
@@ -143,7 +143,7 @@ function getWalkedIds(root: FunctionalNode, propsName: string) {
 
 function transformDefineModel(
   s: MagicStringAST,
-  defineModel: RootMapValue['defineModel'],
+  defineModel: Macros['defineModel'],
   props: Record<string, string | null>,
 ) {
   for (const { expression, isRequired } of defineModel || []) {

packages/macros/src/core/define-style.ts

@@ -1,7 +1,12 @@
 import { walkAST, type MagicStringAST } from '@vue-macros/common'
 import hash from 'hash-sum'
 import { helperPrefix } from './helper'
-import { isFunctionalNode, type DefineStyle, type FunctionalNode } from '.'
+import {
+  isFunctionalNode,
+  type DefineStyle,
+  type FunctionalNode,
+  type Macros,
+} from '.'
 import type { Node } from '@babel/types'
 
 export function transformDefineStyle(
@@ -10,6 +15,7 @@ export function transformDefineStyle(
   root: FunctionalNode | undefined,
   s: MagicStringAST,
   importMap: Map<string, string>,
+  { defineSlots }: Macros,
 ): void {
   const { expression, lang, isCssModules } = defineStyle
   if (expression.arguments[0]?.type !== 'TemplateLiteral') return
@@ -62,14 +68,37 @@ export function transformDefineStyle(
     }
   }
 
-  if (scoped && returnExpression) {
-    walkAST<Node>(returnExpression, {
+  if (scoped && root) {
+    const slotNames = defineSlots?.id
+      ? defineSlots.id.type === 'Identifier'
+        ? defineSlots.id.name
+        : defineSlots.id.type === 'ObjectPattern'
+          ? defineSlots.id.properties.map((prop) =>
+              s.sliceNode(
+                prop.type === 'RestElement' ? prop.argument : prop.value,
+              ),
+            )
+          : []
+      : []
+    walkAST<Node>(root, {
       enter(node) {
         if (
           node.type === 'JSXElement' &&
           s.sliceNode(node.openingElement.name) !== 'template'
         ) {
-          s.appendRight(node.openingElement.name.end!, ` data-v-${scopeId}=""`)
+          let subfix = ''
+          if (slotNames.length) {
+            const name = s.sliceNode(
+              node.openingElement.name.type === 'JSXMemberExpression'
+                ? node.openingElement.name.object
+                : node.openingElement.name,
+            )
+            subfix = slotNames.includes(name) ? '-s' : ''
+          }
+          s.appendRight(
+            node.openingElement.name.end!,
+            ` data-v-${scopeId}${subfix}=""`,
+          )
         }
       },
     })

packages/macros/src/core/index.ts

@@ -18,6 +18,7 @@ import type {
   CallExpression,
   FunctionDeclaration,
   FunctionExpression,
+  LVal,
   Node,
   Program,
 } from '@babel/types'
@@ -35,13 +36,16 @@ export type DefineStyle = {
   lang: string
 }
 
-export type RootMapValue = {
+export type Macros = {
   defineComponent?: CallExpression
   defineModel?: {
     expression: CallExpression
     isRequired: boolean
   }[]
-  defineSlots?: CallExpression
+  defineSlots?: {
+    expression: CallExpression
+    id?: LVal
+  }
   defineExpose?: CallExpression
   defineStyle?: DefineStyle[]
 }
@@ -59,7 +63,14 @@ export function transformJsxMacros(
   let defineStyleIndex = 0
   for (const [root, macros] of rootMap) {
     macros.defineStyle?.forEach((defineStyle) => {
-      transformDefineStyle(defineStyle, defineStyleIndex++, root, s, importMap)
+      transformDefineStyle(
+        defineStyle,
+        defineStyleIndex++,
+        root,
+        s,
+        importMap,
+        macros,
+      )
     })
 
     if (root === undefined) continue
@@ -109,7 +120,7 @@ export function transformJsxMacros(
       })
     }
     if (macros.defineSlots) {
-      transformDefineSlots(macros.defineSlots, s)
+      transformDefineSlots(macros.defineSlots.expression, s)
     }
     if (macros.defineExpose) {
       transformDefineExpose(macros.defineExpose, s, options.version)
@@ -121,7 +132,7 @@ export function transformJsxMacros(
 
 function getRootMap(ast: Program, s: MagicStringAST, options: OptionsResolved) {
   const parents: (Node | undefined | null)[] = []
-  const rootMap = new Map<FunctionalNode | undefined, RootMapValue>()
+  const rootMap = new Map<FunctionalNode | undefined, Macros>()
   walkAST<Node>(ast, {
     enter(node, parent) {
       parents.unshift(parent)
@@ -174,7 +185,13 @@ function getRootMap(ast: Program, s: MagicStringAST, options: OptionsResolved) {
             lang,
           })
         } else if (options.defineSlots.alias.includes(macroName)) {
-          rootMap.get(root)!.defineSlots = macroExpression
+          rootMap.get(root)!.defineSlots = {
+            expression: macroExpression,
+            id:
+              node.type === 'VariableDeclaration'
+                ? node.declarations[0].id
+                : undefined,
+          }
         } else if (options.defineExpose.alias.includes(macroName)) {
           rootMap.get(root)!.defineExpose = macroExpression
         }

packages/macros/tests/__snapshots__/fixtures.spec.ts.snap

@@ -250,7 +250,8 @@ export default function (__MACROS_props) {
 `;
 
 exports[`fixtures > ./fixtures/define-style.tsx 1`] = `
-"import "vue-jsx-vapor/macros/define-style/0?scopeId=4e9d5cd0&scoped=true&lang.css";import style1 from "vue-jsx-vapor/macros/define-style/1?scopeId=426a859d&scoped=true&lang.module.scss";import "vue-jsx-vapor/macros/define-style/2?scopeId=63a7910c&scoped=false&lang.scss";import { defineComponent, ref } from 'vue'
+"import "vue-jsx-vapor/macros/define-style/0?scopeId=4e9d5cd0&scoped=true&lang.css";import style1 from "vue-jsx-vapor/macros/define-style/1?scopeId=426a859d&scoped=true&lang.module.scss";
+import { useSlots as __MACROS_useSlots } from "vue";import "vue-jsx-vapor/macros/define-style/2?scopeId=63a7910c&scoped=false&lang.scss";import { defineComponent, ref } from 'vue'
 
 export const Comp = (__MACROS_props) => {
   const color = ref('red')
@@ -261,12 +262,16 @@ export const Comp = (__MACROS_props) => {
 export default defineComponent((__MACROS_props) => {
   const color = ref('red')
   const styles = style1
+  const { default: Default, ...slots } = Object.assign({}, __MACROS_useSlots())
   return () => (
     <>
       <div {...{style:{'--426a859d-color-value': color.value}}} data-v-426a859d="" class={styles.bar}>foo</div>
       <div {...{style:{'--426a859d-color-value': color.value}}} data-v-426a859d="" class="bar">
         <span data-v-426a859d="">bar</span>
       </div>
+
+      <Default {...{style:{'--426a859d-color-value': color.value}}} data-v-426a859d-s="" />
+      <slots.title {...{style:{'--426a859d-color-value': color.value}}} data-v-426a859d-s="" />
     </>
   )
 })

packages/macros/tests/fixtures/define-style.tsx

@@ -20,12 +20,16 @@ export default defineComponent(() => {
       }
     }
   `)
+  const { default: Default, ...slots } = defineSlots()
   return () => (
     <>
       <div class={styles.bar}>foo</div>
       <div class="bar">
         <span>bar</span>
       </div>
+
+      <Default />
+      <slots.title />
     </>
   )
 })