feat(macros/define-style): support navigation for css-modules

Author: zhiyuanzmj

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

@@ -1,4 +1,4 @@
-import { replaceRange } from 'ts-macro'
+import { allCodeFeatures, replaceRange, type Code } from 'ts-macro'
 import type { DefineStyle, TransformOptions } from '.'
 
 export function transformDefineStyle(
@@ -20,14 +20,45 @@ export function transformDefineStyle(
       `<{`,
       ...parseCssClassNames(
         expression.arguments[0].getText(ast).slice(1, -1),
-      ).map(({ text }) => `\n'${text.slice(1)}': string`),
+      ).flatMap(
+        ({ text, offset }) =>
+          [
+            `\n`,
+            [
+              `'${text.slice(1)}'`,
+              `style_${index}`,
+              expression.arguments.pos + offset + 1,
+              { navigation: true },
+            ],
+            `: string`,
+          ] as Code[],
+      ),
       '\n}>',
     )
   }
 
   addEmbeddedCode(expression, index, options)
 }
 
+const commentReg = /(?<=\/\*)[\s\S]*?(?=\*\/)|(?<=\/\/)[\s\S]*?(?=\n)/g
+const cssClassNameReg = /(?=(\.[a-z_][-\w]*)[\s.,+~>:#)[{])/gi
+const fragmentReg = /(?<=\{)[^{]*(?=(?<!\\);)/g
+
+function parseCssClassNames(css: string) {
+  for (const reg of [commentReg, fragmentReg]) {
+    css = css.replace(reg, (match) => ' '.repeat(match.length))
+  }
+  const matches = css.matchAll(cssClassNameReg)
+  const result = []
+  for (const match of matches) {
+    const matchText = match[1]
+    if (matchText) {
+      result.push({ offset: match.index, text: matchText })
+    }
+  }
+  return result
+}
+
 function addEmbeddedCode(
   expression: import('typescript').CallExpression,
   index: number,
@@ -57,35 +88,9 @@ function addEmbeddedCode(
         sourceOffsets: [style.getStart(ast) + 1],
         generatedOffsets: [0],
         lengths: [styleText.length],
-        data: {
-          completion: true,
-          format: true,
-          navigation: true,
-          semantic: true,
-          structure: true,
-          verification: true,
-        },
+        data: allCodeFeatures,
       },
     ],
     embeddedCodes: [],
   })
 }
-
-const commentReg = /(?<=\/\*)[\s\S]*?(?=\*\/)|(?<=\/\/)[\s\S]*?(?=\n)/g
-const cssClassNameReg = /(?=(\.[a-z_][-\w]*)[\s.,+~>:#)[{])/gi
-const fragmentReg = /(?<=\{)[^{]*(?=(?<!\\);)/g
-
-function parseCssClassNames(css: string) {
-  for (const reg of [commentReg, fragmentReg]) {
-    css = css.replace(reg, (match) => ' '.repeat(match.length))
-  }
-  const matches = css.matchAll(cssClassNameReg)
-  const result = []
-  for (const match of matches) {
-    const matchText = match[1]
-    if (matchText) {
-      result.push({ offset: match.index, text: matchText })
-    }
-  }
-  return result
-}

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

@@ -250,7 +250,7 @@ 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/0?scopeId=4e9d5cd0&scoped=true&lang.css";import style1 from "vue-jsx-vapor/macros/define-style/1?scopeId=13f8dd3a&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) => {
@@ -265,13 +265,13 @@ export default defineComponent((__MACROS_props) => {
   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 {...{style:{'--13f8dd3a-color-value': color.value}}} data-v-13f8dd3a="" class={styles.bar}>foo</div>
+      <div {...{style:{'--13f8dd3a-color-value': color.value}}} data-v-13f8dd3a="" class="bar">
+        <span data-v-13f8dd3a="" class={styles['bar-baz']}>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="" />
+      <Default {...{style:{'--13f8dd3a-color-value': color.value}}} data-v-13f8dd3a-s="" />
+      <slots.title {...{style:{'--13f8dd3a-color-value': color.value}}} data-v-13f8dd3a-s="" />
     </>
   )
 })

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

@@ -15,7 +15,7 @@ export default defineComponent(() => {
   const styles = defineStyle.scss(`
     .bar {
       color: ${color.value};
-      .barBaz {
+      .bar-baz {
         background: red;
       }
     }
@@ -25,7 +25,7 @@ export default defineComponent(() => {
     <>
       <div class={styles.bar}>foo</div>
       <div class="bar">
-        <span>bar</span>
+        <span class={styles['bar-baz']}>bar</span>
       </div>
 
       <Default />