feat: support bracket snippet in attr and class

windicss · May 23, 2021 · f9045bd · f9045bd
1 parent 933755e
commit f9045bd
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -30,6 +30,9 @@ export interface Attr {
       doc: string
     }[]
   },
+  bracket: {
+    [key:string]: string[]
+  },
   dynamic: {
     [key:string]: {
       label: string
@@ -44,6 +47,7 @@ export interface Completion {
     label: string
     doc: string
   }[],
+  bracket: string[]
   dynamic: {
     label: string
     pos: number

diff --git a/src/lib/completions.ts b/src/lib/completions.ts
@@ -73,10 +73,17 @@ export default class Completions {
           }
 
           if (enableDynamic) {
+            completions = completions.concat(
+              this.completions.bracket.map((label, index) => {
+                const item = new CompletionItem(label, CompletionItemKind.Struct);
+                item.sortText = '3-' + index.toString().padStart(8, '0');
+                return item;
+              })
+            );
             completions = completions.concat(
               this.completions.dynamic.map(({ label, pos }, index) => {
                 const item = new CompletionItem(label, CompletionItemKind.Variable);
-                item.sortText = '3-' + index.toString().padStart(8, '0');
+                item.sortText = '4-' + index.toString().padStart(8, '0');
                 item.command = {
                   command: 'cursorMove',
                   arguments: [{
@@ -103,6 +110,10 @@ export default class Completions {
             item.documentation = this.buildVariantDoc(item.detail);
             item.detail = undefined;
             break;
+          case CompletionItemKind.Struct:
+            item.documentation = buildStyle(this.processor.interpret(item.label).styleSheet);
+            item.insertText = new SnippetString(`${item.label.replace('-[', '-[${1:').slice(0, -1)}}]`);
+            break;
           case CompletionItemKind.Variable:
             // TODO
             break;
@@ -212,10 +223,19 @@ export default class Completions {
             }
 
             if (enableDynamic && key in this.completions.attr.dynamic) {
+              completions = completions.concat(
+                this.completions.attr.bracket[key].map((label, index) => {
+                  const item = new CompletionItem(label, CompletionItemKind.Struct);
+                  item.detail = key;
+                  item.sortText = '3-' + index.toString().padStart(8, '0');
+                  return item;
+                })
+              );
+
               completions = completions.concat(
                 this.completions.attr.dynamic[key].map(({ label, pos }, index) => {
                   const item = new CompletionItem(label, CompletionItemKind.Variable);
-                  item.sortText = '3-' + index.toString().padStart(8, '0');
+                  item.sortText = '5-' + index.toString().padStart(8, '0');
                   item.command = {
                     command: 'cursorMove',
                     arguments: [{
@@ -245,6 +265,11 @@ export default class Completions {
             item.documentation = this.buildAttrDoc(attr, variant, this.separator);
             item.detail = undefined;
             break;
+          case CompletionItemKind.Struct:
+            item.documentation = buildStyle(this.processor.attributify({ [item.detail ?? ''] : [ item.label ] }).styleSheet);
+            item.insertText = new SnippetString(`${item.label.replace('[', '[${1:').slice(0, -1)}}]`);
+            item.detail = undefined;
+            break;
           case CompletionItemKind.Variable:
             break;
           case CompletionItemKind.Color:

diff --git a/src/utils/completions.ts b/src/utils/completions.ts
@@ -9,19 +9,26 @@ export function generateCompletions(processor: Processor, colors: colorObject, a
   const completions: Completion = {
     static: [],
     color: [],
+    bracket: [],
     dynamic: [],
     attr: {
       static: {},
       color: {},
+      bracket: {},
       dynamic: {},
     },
   };
 
   const staticUtilities = processor.resolveStaticUtilities(true);
   // generate normal utilities completions
   for (const [config, list] of Object.entries(utilities)) {
-    list.forEach(utility => {
-      const mark = utility.search(/\$/);
+    for (const utility of list) {
+      const bracket = utility.indexOf('[');
+      if (bracket !== -1) {
+        completions.bracket.push(utility);
+        continue;
+      }
+      const mark = utility.indexOf('$');
       if (mark === -1) {
         completions.static.push(utility);
       } else {
@@ -55,11 +62,11 @@ export function generateCompletions(processor: Processor, colors: colorObject, a
           break;
         }
       }
-    });
+    }
   }
 
   // generate attributify completions
-  const attr: Attr = { static: {}, color: {}, dynamic: {} };
+  const attr: Attr = { static: {}, color: {}, bracket: {}, dynamic: {} };
   const addStatic = (key: string, value: string) => {
     key in attr.static ? attr.static[key].push(value) : attr.static[key] = [ value ];
   };
@@ -234,6 +241,13 @@ export function generateCompletions(processor: Processor, colors: colorObject, a
       }
     }
 
+    for (const utility of completions.bracket) {
+      const { key, body } = split(utility);
+      if (key) {
+        attr.bracket[key] = key in attr.bracket ? [...attr.bracket[key], body] : [ body ];
+      }
+    }
+
     for (const { label, pos } of completions.dynamic) {
       const { key, body } = split(label);
       if (key) {