fix: support negated rem values

Author: sastan

src/language-service.ts

@@ -319,7 +319,9 @@ export class TwindTemplateLanguageService implements TemplateLanguageService {
         ? vscode.CompletionItemKind.EnumMember
         : completion.kind == 'variant'
         ? vscode.CompletionItemKind.Module
-        : vscode.CompletionItemKind.Property,
+        : completion.interpolation
+        ? vscode.CompletionItemKind.Variable
+        : vscode.CompletionItemKind.Constant,
       data: completion.kind,
       label:
         rule.prefix && completion.label !== '&' && completion.kind == 'utility'
@@ -518,6 +520,8 @@ function translateCompletionItemKind(
     case vscode.CompletionItemKind.Unit:
     case vscode.CompletionItemKind.Value:
       return typescript.ScriptElementKind.constElement
+    case vscode.CompletionItemKind.Variable:
+      return typescript.ScriptElementKind.variableElement
     case vscode.CompletionItemKind.Enum:
       return typescript.ScriptElementKind.enumElement
     case vscode.CompletionItemKind.EnumMember:

src/plugin.ts

@@ -27,17 +27,39 @@ export class TwindPlugin {
       return info.languageService
     }
 
-    // Set up decorator
-    // const proxy: ts.LanguageService = {
+    // // Set up decorator
+    // const { languageService } = info
+
+    // info.languageService = {
     //   ...info.languageService,
-    //   getCompletionsAtPosition: (fileName, position, options) => {
-    //     // emmetCompletions: false
-    //     const prior = info.languageService.getCompletionsAtPosition(fileName, position, options)
+
+    //   getCompletionEntrySymbol(fileName, position, name, source) {
+    //     const prior = languageService.getCompletionEntrySymbol(fileName, position, name, source)
 
     //     logger.log(
-    //       'getCompletionsAtPosition: ' + JSON.stringify({ fileName, position, prior }, null, 2),
+    //       'getCompletionEntrySymbol: ' + JSON.stringify({ fileName, position, name, source }),
     //     )
 
+    //     // prior.entries = prior.entries.filter((e) => e.name !== 'caller')
+    //     return prior
+    //   },
+    //   getCompletionsAtPosition: (fileName, position, options) => {
+    //     // emmetCompletions: false
+    //     const prior = languageService.getCompletionsAtPosition(fileName, position, options)
+
+    //     // TODO match file [t]sx?
+    //     const contents = info.project.readFile(fileName)
+
+    //     // logger.log('getCompletionsAtPosition: ' + JSON.stringify({ fileName, position }))
+
+    //     console.log('')
+    //     console.log('')
+    //     console.log(
+    //       'getCompletionsAtPosition',
+    //       JSON.stringify({ fileName, position, options, prior }, null, 2),
+    //     )
+    //     console.log('')
+    //     console.log('')
     //     // prior.entries = prior.entries.filter((e) => e.name !== 'caller')
     //     return prior
     //   },

src/twind.ts

@@ -37,7 +37,7 @@ const sameValueToUndefined = (ref: string, value: string | undefined): string |
   ref === value ? undefined : value
 
 const convertRem = (value: string | undefined): string | undefined => {
-  const replaced = value?.replace(/((?:\d+\.)\d+)rem/g, (_, number) => `${Number(number) * 16}px`)
+  const replaced = value?.replace(/(-?(?:\d+\.)\d+)rem/g, (_, number) => `${Number(number) * 16}px`)
 
   return value === replaced ? value : `${value} (${replaced})`
 }