feat(vscode): support intelligent prompt for css file

packages/autocomplete/src/utils.ts

@@ -2,7 +2,7 @@ export function searchUsageBoundary(line: string, index: number) {
   let start = index
   let end = index
 
-  const regex = /[^\s>"'`]/
+  const regex = /[^\s>"'`;]/
   while (start && regex.test(line.charAt(start - 1))) --start
   while (end < line.length && regex.test(line.charAt(end))) ++end
 

packages/vscode/src/annonation.ts

@@ -4,7 +4,7 @@ import { DecorationRangeBehavior, MarkdownString, Range, window, workspace } fro
 import type { UnocssPluginContext } from '@unocss/core'
 import { INCLUDE_COMMENT_IDE, getMatchedPositions } from './integration'
 import { log } from './log'
-import { getPrettiedMarkdown, throttle } from './utils'
+import { getPrettiedMarkdown, isCssId, throttle } from './utils'
 
 export async function registerAnnonations(
   cwd: string,
@@ -54,7 +54,7 @@ export async function registerAnnonations(
       const code = doc.getText()
       const id = doc.uri.fsPath
 
-      if (!code || (!code.includes(INCLUDE_COMMENT_IDE) && !filter(code, id)))
+      if (!code || (!code.includes(INCLUDE_COMMENT_IDE) && !isCssId(id) && !filter(code, id)))
         return reset()
 
       const result = await uno.generate(code, { id, preflights: false, minify: true })

packages/vscode/src/autocomplete.ts

@@ -2,14 +2,15 @@ import type { UnocssPluginContext } from '@unocss/core'
 import { createAutocomplete } from '@unocss/autocomplete'
 import type { CompletionItemProvider, ExtensionContext, Position, TextDocument } from 'vscode'
 import { CompletionItem, CompletionItemKind, CompletionList, MarkdownString, Range, languages } from 'vscode'
-import { getPrettiedMarkdown } from './utils'
+import { getPrettiedMarkdown, isCssId } from './utils'
 import { log } from './log'
 
 const languageIds = [
   'erb',
   'haml',
   'hbs',
   'html',
+  'css',
   'javascript',
   'javascriptreact',
   'markdown',
@@ -40,7 +41,7 @@ export async function registerAutoComplete(
       const code = doc.getText()
       const id = doc.uri.fsPath
 
-      if (!code || !filter(code, id))
+      if (!code || (!isCssId(id) && !filter(code, id)))
         return null
 
       try {

packages/vscode/src/utils.ts

@@ -1,8 +1,9 @@
 import type { UnoGenerator } from '@unocss/core'
+import { cssIdRE } from '@unocss/core'
 import prettier from 'prettier/standalone'
 import parserCSS from 'prettier/parser-postcss'
 
-export function throttle<T extends((...args: any) => any)>(func: T, timeFrame: number): T {
+export function throttle<T extends ((...args: any) => any)>(func: T, timeFrame: number): T {
   let lastTime = 0
   let timer: any
   return function () {
@@ -34,3 +35,7 @@ export async function getPrettiedCSS(uno: UnoGenerator, util: string) {
 export async function getPrettiedMarkdown(uno: UnoGenerator, util: string) {
   return `\`\`\`css\n${(await getPrettiedCSS(uno, util)).prettified}\n\`\`\``
 }
+
+export function isCssId(id: string) {
+  return cssIdRE.test(id)
+}

test/autocomplete-utils.test.ts

@@ -11,5 +11,8 @@ describe('searchUsageBoundary', () => {
 
     expect(searchUsageBoundary('<div p-1 p-2>', 10).content)
       .toMatchInlineSnapshot('"p-2"')
+
+    expect(searchUsageBoundary('.a{ @apply p-2; }', 14).content)
+      .toMatchInlineSnapshot('"p-2"')
   })
 })