refactor: better support for variant nested and prefix completion

Author: voorjaar

src/lib/completions.ts

@@ -140,16 +140,22 @@ export default class Completions {
           if (text.match(/(<\w+\s*)[^>]*$/) !== null) {
             if (!text.match(/\S+(?=\s*=\s*["']?[^"']*$)/) || text.match(/<\w+\s+$/)) {
               let completions: CompletionItem[] = [];
-              if (enableUtility) {
-                completions = completions.concat(
-                  Object.keys(this.completions.attr.static).map(label => attrKey(label, CompletionItemKind.Field, 0))
-                );
+              const prefix = this.processor.config('attributify.prefix');
+              const disable = this.processor.config('attributify.disable') as string[] | undefined;
+              let prevKey = undefined;
+              if (text.endsWith(':')) {
+                prevKey = document.getText(document.getWordRangeAtPosition(new Position(position.line, position.character-1), /[^:\s]+/));
               }
-              if (enableVariant) {
-                const prefix = this.processor.config('attributify.prefix');
-                completions = completions.concat(
-                  Object.keys(this.extension.variants).map(label => attrKey(prefix ? prefix + label: label, CompletionItemKind.Module, 1))
-                );
+              if (!prevKey || (prevKey && (prevKey in this.extension.variants || this.extension.isAttrVariant(prevKey)))) {
+                if (enableUtility) {
+                  completions = completions.concat(
+                    Object.keys(this.completions.attr.static).map(label => attrKey(prefix && !text.endsWith(':') ? prefix + label : label, CompletionItemKind.Field, 0))
+                  );
+                }
+                if (enableVariant) {
+                  const variants = disable ? Object.keys(this.extension.variants).filter(i => !disable.includes(i)) : Object.keys(this.extension.variants);
+                  completions = completions.concat(variants.map(label => attrKey(prefix && !text.endsWith(':') ? prefix + label : label, CompletionItemKind.Module, 1)));
+                }
               }
               return completions;
             }

src/lib/index.ts

@@ -26,11 +26,13 @@ export default class Extension {
   processor: Processor | undefined;
   attrs: Attr['static'];
   colors: DictStr;
+  attrPrefix?: string;
   configFile?: string;
   variants: ResolvedVariants;
   disposables: Disposable[];
   constructor(ctx: ExtensionContext, pattern: GlobPattern) {
     this.ctx = ctx;
+    this.attrPrefix = undefined;
     this.pattern = pattern;
     this.colors = {};
     this.attrs = {};
@@ -45,6 +47,7 @@ export default class Extension {
         this.jiti = jiti(__filename);
         this.configFile = files[0] ? files[0].fsPath : undefined;
         this.processor = new Processor(this.loadConfig(this.configFile)) as Processor;
+        this.attrPrefix = this.processor.config('attributify.prefix') as string | undefined;
         this.variants = this.processor.resolveVariants();
         this.colors = flatColors(this.processor.theme('colors', {}) as colorObject);
         this.register();
@@ -224,12 +227,20 @@ export default class Extension {
   }
 
   isAttrVariant(word: string): boolean {
+    if (this.attrPrefix) {
+      if (!word.startsWith(this.attrPrefix)) return false;
+      word = word.slice(this.attrPrefix.length);
+    }
     const lastKey = word.match(/[^:-]+$/)?.[0] || word;
     return getConfig('windicss.enableAttrVariantCompletion') && lastKey in this.variants;
   }
 
   isAttrUtility(word?: string): string | undefined {
     if (!word) return;
+    if (this.attrPrefix) {
+      if (!word.startsWith(this.attrPrefix)) return;
+      word = word.slice(this.attrPrefix.length);
+    }
     const lastKey = word.match(/[^:-]+$/)?.[0] || word;
     return getConfig('windicss.enableAttrUtilityCompletion') && lastKey in this.attrs ? lastKey : undefined;
   }

src/utils/completions.ts

@@ -69,11 +69,9 @@ export function generateCompletions(processor: Processor, colors: colorObject, a
   const attr: Attr = { static: {}, color: {}, bracket: {}, dynamic: {} };
 
   if (attributify) {
-    const attrPrefix = processor.config('attributify.prefix') as string | undefined;
     const attrDisable = processor.config('attributify.disable') as string[] | undefined;
     const addAttr = (key: string, value: any, type: 'static' | 'color' | 'bracket' | 'dynamic' = 'static') => {
       if (attrDisable && attrDisable.includes(key)) return;
-      if (attrPrefix) key = attrPrefix + key;
       key in attr[type] ? attr[type][key].push(value) : attr[type][key] = [ value ];
     };