fix: enhance annotation mach on decimal numbers (#22)

package.json

@@ -3,7 +3,7 @@
   "displayName": "DNB Eufemia Tools",
   "description": "DNB Eufemia Design System Extension",
   "categories": [],
-  "version": "1.3.5",
+  "version": "1.3.6",
   "publisher": "dnbexperience",
   "author": "Tobias Høegh <[email protected]>",
   "license": "SEE LICENSE IN LICENSE",

src/extension/__tests__/helpers.test.ts

@@ -22,33 +22,50 @@ beforeAll(() => {
 
 describe('matchLineWhen', () => {
   it('should match on px', () => {
-    expect(matchLineWhen('12.5px')).toBeTruthy()
+    const match = matchLineWhen('12.5px')
+    expect(match).toBeTruthy()
+    expect(match).toEqual(['12.5px'])
   })
 
   it('should match on rem', () => {
-    expect(matchLineWhen('12.5rem')).toBeTruthy()
+    const match = matchLineWhen('12.5rem')
+    expect(match).toBeTruthy()
+    expect(match).toEqual(['12.5rem'])
+  })
+
+  it('should match wtih leading zero', () => {
+    const match = matchLineWhen('0.5rem')
+    expect(match).toBeTruthy()
+    expect(match).toEqual(['0.5rem'])
   })
 
   it('should match on var', () => {
-    expect(matchLineWhen('var(--spacing-large)')).toBeTruthy()
+    const match = matchLineWhen('var(--spacing-large)')
+    expect(match).toBeTruthy()
+    expect(match).toEqual(['var(--spacing-large)'])
   })
 
   it('should not match on var only', () => {
-    expect(matchLineWhen('var')).toBeFalsy()
+    const match = matchLineWhen('var')
+    expect(match).toBeFalsy()
   })
 
   it('should not match on calc only', () => {
-    expect(matchLineWhen('calc')).toBeFalsy()
+    const match = matchLineWhen('calc')
+    expect(match).toBeFalsy()
   })
 
   it('should match on calc', () => {
-    expect(
-      matchLineWhen("margin-bottom: ${calc('small', 'large')};")
-    ).toBeTruthy()
+    const match = matchLineWhen(
+      "margin-bottom: ${calc('small', 'large')};"
+    )
+    expect(match).toBeTruthy()
+    expect(match).toEqual(["calc('small', 'large')"])
   })
 
   it('should not match when no number was given', () => {
-    expect(matchLineWhen('document.body.removeListener')).toBeFalsy()
+    const match = matchLineWhen('document.body.removeListener')
+    expect(match).toBeFalsy()
   })
 })
 

src/extension/helpers.ts

@@ -161,9 +161,11 @@ export function getConfig() {
 
 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
+    // 1. Do skip support for comments, like // 3rem
+    // 2. Match px/rem values like "5rem"
+    // 3. Match px/rem values, like "0.5rem" or ".5rem"
+    // 4. Match CSS var(--*)
+    // 5. Match JS calc('*')
+    /(?<!\/\/.*)(\d+(px|rem))|(\d{0,}.\d+(px|rem))|var\(--(.*)\)|calc\(['"\`](.*)\)/g
   )
 }

src/extension/hover.ts

@@ -15,7 +15,7 @@ export default class implements HoverProvider {
     const point = pos.character
     let text = ''
 
-    line.replace(/[.0-9]+(px|rem)/g, (a, _, idx) => {
+    line.replace(/[.\d]+(px|rem)/g, (a, _, idx) => {
       const start = idx + 1
       const end = idx + a.length + 1
       if (!text && point >= start && point <= end) {

src/rules/__tests__/handleValues.test.ts

@@ -157,6 +157,20 @@ describe('hover', () => {
       })
     })
 
+    it('should show rem to px with leading zero', () => {
+      const rule = handleValues()
+      const text = '-0.5rem'
+      const line = `margin-top: ${text};`
+      const result = rule.hover?.hoverHandler?.(text, line)
+
+      expect(result).toEqual({
+        documentation: 'Equivalent to `-8px`',
+        from: '-0.5rem',
+        to: '-8px',
+        type: 'handleValues',
+      })
+    })
+
     it('should not include comments (//)', () => {
       const rule = handleValues()
       const text = '-10.5rem'