fix: support parsing of dynamic styles using square bracket notation

tw-in-js · Mar 18, 2021 · bc75a98 · bc75a98
1 parent 86a7fda
commit bc75a98
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 3 deletions.
diff --git a/src/language-service.ts b/src/language-service.ts
@@ -321,7 +321,7 @@ export class TwindTemplateLanguageService implements TemplateLanguageService {
         ? vscode.CompletionItemKind.Module
         : completion.interpolation
         ? vscode.CompletionItemKind.Variable
-        : vscode.CompletionItemKind.Constant,
+        : vscode.CompletionItemKind.Property,
       data: completion.kind,
       label:
         rule.prefix && completion.label !== '&' && completion.kind == 'utility'

diff --git a/src/parser.test.ts b/src/parser.test.ts
@@ -230,6 +230,87 @@ const test = suite('Parser')
       },
     ],
   ],
+  [
+    'top-[-123px] grid-cols-[minmax(100px,max-content)repeat(auto-fill,200px)20%] grid-rows-auto-1fr-auto bg-[#1da1f2]',
+    [
+      {
+        raw: 'top-[-123px]',
+        value: 'top-[-123px]',
+        name: 'top-[-123px]',
+        prefix: '',
+        important: false,
+        negated: false,
+        loc: {
+          start: 0,
+          end: 12,
+        },
+        spans: [
+          {
+            start: 0,
+            end: 12,
+          },
+        ],
+        variants: [],
+      },
+      {
+        raw: 'grid-cols-[minmax(100px,max-content)repeat(auto-fill,200px)20%]',
+        value: 'grid-cols-[minmax(100px,max-content)repeat(auto-fill,200px)20%]',
+        name: 'grid-cols-[minmax(100px,max-content)repeat(auto-fill,200px)20%]',
+        prefix: '',
+        important: false,
+        negated: false,
+        loc: {
+          start: 13,
+          end: 76,
+        },
+        spans: [
+          {
+            start: 13,
+            end: 76,
+          },
+        ],
+        variants: [],
+      },
+      {
+        raw: 'grid-rows-auto-1fr-auto',
+        value: 'grid-rows-auto-1fr-auto',
+        name: 'grid-rows-auto-1fr-auto',
+        prefix: '',
+        important: false,
+        negated: false,
+        loc: {
+          start: 77,
+          end: 100,
+        },
+        spans: [
+          {
+            start: 77,
+            end: 100,
+          },
+        ],
+        variants: [],
+      },
+      {
+        raw: 'bg-[#1da1f2]',
+        value: 'bg-[#1da1f2]',
+        name: 'bg-[#1da1f2]',
+        prefix: '',
+        important: false,
+        negated: false,
+        loc: {
+          start: 101,
+          end: 113,
+        },
+        spans: [
+          {
+            start: 101,
+            end: 113,
+          },
+        ],
+        variants: [],
+      },
+    ],
+  ],
 ] as const).forEach(([input, expected]) => {
   test(`parse: ${JSON.stringify(input)}`, () => {
     // console.log(JSON.stringify(parse(input)))

diff --git a/src/parser.ts b/src/parser.ts
@@ -279,14 +279,20 @@ export function astish(text: string, atPosition = Infinity): Group {
   let parent: Exclude<Node, null> = root
   let node: Exclude<Node, null> = root
 
-  for (let char: string, position = 0; position < text.length; position++) {
+  for (let char: string, dynamic = false, position = 0; (char = text[position]); position++) {
     if (position >= atPosition) {
       node.next = createIdentifier(node, parent, buffer, start)
 
       return root
     }
 
-    switch ((char = text[position])) {
+    if (dynamic || char == '[') {
+      buffer += char
+      dynamic = char != ']'
+      continue
+    }
+
+    switch (char) {
       case ':':
         if (buffer) {
           buffer += char