feat: add rem to px preview #13

windicss · Mar 2, 2021 · 04834ef · 04834ef
1 parent 9170fe7
commit 04834ef
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/completions.ts b/src/lib/completions.ts
@@ -1,5 +1,5 @@
 import { ExtensionContext, languages, Range, Position, CompletionItem, CompletionItemKind, Color, ColorInformation, Hover } from 'vscode';
-import { highlightCSS, isColor, getConfig } from '../utils';
+import { highlightCSS, isColor, getConfig, rem2px } from '../utils';
 import { fileTypes } from '../utils/filetypes';
 import { HTMLParser, ClassParser } from 'windicss/utils/parser';
 import type { Core } from '../interfaces';
@@ -27,7 +27,7 @@ export async function registerCompletions(ctx: ExtensionContext, core: Core): Pr
             if(matchCursorIsInCorrectPosition === null) { return; }
             const staticCompletion = getConfig('windicss.enableUtilityCompletion') ? core.staticCompletions.filter(i => !classesInCurrentLine.includes(i)).map(classItem => {
               const item = new CompletionItem(classItem, CompletionItemKind.Constant);
-              item.documentation = highlightCSS(core.processor?.interpret(classItem).styleSheet.build());
+              item.documentation = highlightCSS(rem2px(core.processor?.interpret(classItem).styleSheet.build()));
               return item;
             }): [];
 
@@ -80,7 +80,7 @@ export async function registerCompletions(ctx: ExtensionContext, core: Core): Pr
           provideHover: (document, position, token) => {
             const word = document.getText(document.getWordRangeAtPosition(position, /[\w-:+.@!/]+/));
             const style = core.processor?.interpret(word);
-            if (style && style.ignored.length === 0) { return new Hover(highlightCSS(style.styleSheet.build()) ?? ''); }
+            if (style && style.ignored.length === 0) { return new Hover(highlightCSS(rem2px(style.styleSheet.build())) ?? ''); }
           },
         }));
       }

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -111,3 +111,21 @@ export function toggleConfig(key: string) {
   const config = getConfig(key) as boolean;
   setConfig(key, !config);
 }
+
+export function rem2px(str?: string) {
+  if (!str) return;
+  let index = 0;
+  const output: string[] = [];
+
+  while (index < str.length) {
+    const rem = str.slice(index, ).match(/-?[\d.]+rem;/);
+    if (!rem || !rem.index) break;
+    const px = ` /* ${parseFloat(rem[0].slice(0, -4)) * 16}px */`;
+    const end = index + rem.index + rem[0].length;
+    output.push(str.slice(index, end));
+    output.push(px);
+    index = end;
+  }
+  output.push(str.slice(index,));
+  return output.join('');
+}