fix(vscode): remove css-directive transformer to get matched result f…

…rom source code (#1639)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/shared-common/src/index.ts

@@ -95,15 +95,23 @@ export function getMatchedPositions(code: string, matched: string[], hasVariantG
   return result.sort((a, b) => a[0] - b[0])
 }
 
+// remove css-directive transformer to get matched result from source code
+const ignoreTransformers = [
+  'css-directive',
+  'compile-class',
+]
+
 export async function getMatchedPositionsFromCode(uno: UnoGenerator, code: string, id = '') {
   const s = new MagicString(code)
   const tokens = new Set()
   const ctx = { uno, tokens } as any
-  for (const i of uno.config.transformers?.filter(i => i.enforce === 'pre') || [])
+
+  const transformers = uno.config.transformers?.filter(i => !ignoreTransformers.includes(i.name))
+  for (const i of transformers?.filter(i => i.enforce === 'pre') || [])
     await i.transform(s, id, ctx)
-  for (const i of uno.config.transformers?.filter(i => !i.enforce || i.enforce === 'default') || [])
+  for (const i of transformers?.filter(i => !i.enforce || i.enforce === 'default') || [])
     await i.transform(s, id, ctx)
-  for (const i of uno.config.transformers?.filter(i => i.enforce === 'post') || [])
+  for (const i of transformers?.filter(i => i.enforce === 'post') || [])
     await i.transform(s, id, ctx)
   const hasVariantGroup = !!uno.config.transformers?.find(i => i.name === 'variant-group')
   const result = await uno.generate(s.toString(), { preflights: false })

test/pos.test.ts

@@ -4,6 +4,7 @@ import presetUno from '@unocss/preset-uno'
 import { createGenerator } from '@unocss/core'
 import { getMatchedPositionsFromCode as match } from '@unocss/shared-common'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
+import cssDirectives from '@unocss/transformer-directives'
 
 describe('matched-positions', async () => {
   test('attributify', async () => {
@@ -31,6 +32,36 @@ describe('matched-positions', async () => {
       `)
   })
 
+  test('css-directive', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetUno(),
+      ],
+      transformers: [cssDirectives()],
+    })
+
+    expect(await match(uno, '.btn-center{@apply text-center my-0 font-medium;\n}'))
+      .toMatchInlineSnapshot(`
+        [
+          [
+            19,
+            30,
+            "text-center",
+          ],
+          [
+            31,
+            35,
+            "my-0",
+          ],
+          [
+            36,
+            47,
+            "font-medium",
+          ],
+        ]
+      `)
+  })
+
   test('class-based', async () => {
     const uno = createGenerator({
       presets: [