fix: make annotation mach only when number was given (#21)

Author: tujoworker

package.json

@@ -3,7 +3,7 @@
   "displayName": "DNB Eufemia Tools",
   "description": "DNB Eufemia Design System Extension",
   "categories": [],
-  "version": "1.3.4",
+  "version": "1.3.5",
   "publisher": "dnbexperience",
   "author": "Tobias Høegh <tobias.hoegh@dnb.no>",
   "license": "SEE LICENSE IN LICENSE",

src/extension/__tests__/helpers.test.ts

@@ -0,0 +1,95 @@
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import {
+  getConfig,
+  loadConfig,
+  matchLineWhen,
+  cleanZero,
+  isSpacing,
+  findNearestType,
+} from '../helpers'
+
+vi.mock('vscode', () => {
+  const workspace = {
+    getConfiguration: () => getConfig(),
+  }
+
+  return { workspace }
+})
+
+beforeAll(() => {
+  loadConfig()
+})
+
+describe('matchLineWhen', () => {
+  it('should match on px', () => {
+    expect(matchLineWhen('12.5px')).toBeTruthy()
+  })
+
+  it('should match on rem', () => {
+    expect(matchLineWhen('12.5rem')).toBeTruthy()
+  })
+
+  it('should match on var', () => {
+    expect(matchLineWhen('var(--spacing-large)')).toBeTruthy()
+  })
+
+  it('should not match on var only', () => {
+    expect(matchLineWhen('var')).toBeFalsy()
+  })
+
+  it('should not match on calc only', () => {
+    expect(matchLineWhen('calc')).toBeFalsy()
+  })
+
+  it('should match on calc', () => {
+    expect(
+      matchLineWhen("margin-bottom: ${calc('small', 'large')};")
+    ).toBeTruthy()
+  })
+
+  it('should not match when no number was given', () => {
+    expect(matchLineWhen('document.body.removeListener')).toBeFalsy()
+  })
+})
+
+describe('isSpacing', () => {
+  it('should return true on condition', () => {
+    expect(isSpacing('margin')).toBeTruthy()
+    expect(isSpacing('padding')).toBeTruthy()
+    expect(isSpacing('top')).toBeTruthy()
+    expect(isSpacing('bottom')).toBeTruthy()
+    expect(isSpacing('left')).toBeTruthy()
+    expect(isSpacing('right')).toBeTruthy()
+    expect(isSpacing('inset')).toBeTruthy()
+  })
+})
+
+describe('cleanZero', () => {
+  it('should remove leading zero', () => {
+    expect(cleanZero(0.5)).toBe('.5')
+  })
+})
+
+describe('findNearestType', () => {
+  const list = { small: '8', basis: '16', large: '24' }
+
+  it('should find large', () => {
+    expect(findNearestType(17, list)).toBe('large')
+  })
+
+  it('should find small', () => {
+    expect(findNearestType(7, list)).toBe('small')
+  })
+
+  it('should find basis', () => {
+    expect(findNearestType(15, list)).toBe('basis')
+  })
+
+  it('should find large', () => {
+    expect(findNearestType(100, list)).toBe('large')
+  })
+
+  it('should return basis if empty list was given', () => {
+    expect(findNearestType(1, {})).toBe('basis')
+  })
+})

src/extension/annotation.ts

@@ -10,7 +10,7 @@ import {
   ThemeColor,
   window,
 } from 'vscode'
-import { conf, isIngore } from './helpers'
+import { conf, isIngore, matchLineWhen } from './helpers'
 import type { HoverResult, Line } from './types'
 import { RULES } from '../rules'
 
@@ -132,12 +132,7 @@ export class LineAnnotation implements Disposable {
       return null
     }
 
-    const values = line.match(
-      // 1. Match px/rem values, but do skip support for comments, like // 3rem
-      // 2. Match CSS var(--*)
-      // 3. Match JS calc('*')
-      /(?<!\/\/.*)([.0-9]+(px|rem))|var\(--(.*)\)|calc\(['"\`](.*)\)/g
-    )
+    const values = matchLineWhen(line)
 
     if (!values) {
       return null

src/extension/helpers.ts

@@ -3,7 +3,7 @@ import { existsSync, readFileSync } from 'fs'
 import { parse } from 'jsonc-parser'
 import { join, resolve } from 'path'
 import { Uri, workspace } from 'vscode'
-import type { Config } from './types'
+import type { Config, Line } from './types'
 
 export let conf!: Config
 export const eufemiaConfigFileName = '.vscode-eufemia.json'
@@ -102,7 +102,7 @@ export function cleanZero(val: number) {
   return val + ''
 }
 
-export function findNearestTypes(
+export function findNearestType(
   size: number,
   list: Record<string, string>,
   initialValue = 'basis'
@@ -158,3 +158,12 @@ export function getConfig() {
     return acc
   }, {} as Accumulator) as Config
 }
+
+export function matchLineWhen(line: Line) {
+  return line.match(
+    // 1. Match px/rem values, but do skip support for comments, like // 3rem
+    // 2. Match CSS var(--*)
+    // 3. Match JS calc('*')
+    /(?<!\/\/.*)(\d+(px|rem))|var\(--(.*)\)|calc\(['"\`](.*)\)/g
+  )
+}

src/rules/handleFontSize.ts

@@ -1,7 +1,7 @@
 import properties from '@dnb/eufemia/style/properties'
 import {
   conf,
-  findNearestTypes,
+  findNearestType,
   localize,
   cleanProperties,
 } from '../extension/helpers'
@@ -24,7 +24,7 @@ export const handleFontSize = (): Rule => {
         const resultValue = +(
           isPx ? fromValue / conf.rootFontSize : fromValue
         ).toFixed(conf.fixedDigits)
-        const size = findNearestTypes(resultValue, sizes, 'basis')
+        const size = findNearestType(resultValue, sizes, 'basis')
         const toValue = `var(${varId}${size})`
         const unit = isPx ? 'px' : 'rem'
         const label = `${fromValue}${unit} 👉 ${toValue}`

src/rules/handleLineHeight.ts

@@ -1,7 +1,7 @@
 import properties from '@dnb/eufemia/style/properties'
 import {
   conf,
-  findNearestTypes,
+  findNearestType,
   localize,
   cleanProperties,
 } from '../extension/helpers'
@@ -24,7 +24,7 @@ export const handleLineHeight = (): Rule => {
         const resultValue = +(
           isPx ? fromValue / conf.rootFontSize : fromValue
         ).toFixed(conf.fixedDigits)
-        const size = findNearestTypes(resultValue, sizes, 'basis')
+        const size = findNearestType(resultValue, sizes, 'basis')
         const toValue = `var(${varId}${size})`
         const unit = isPx ? 'px' : 'rem'
         const label = `${fromValue}${unit} 👉 ${toValue}`