feat(config): load config file on nested packages (#25)

* chore: run build "as a test"

* feat(config): load config file on nested packages

Author: tujoworker

.github/workflows/verify.yml

@@ -47,5 +47,8 @@ jobs:
       - name: Run type check
         run: yarn test:types
 
+      - name: Build check
+        run: yarn build
+
       - name: Run tests
         run: yarn test

README.md

@@ -43,7 +43,7 @@ span {
 
 ## Configuration
 
-You can either change the settings inside your VSCode (`eufemia.x`) or in a config file (`.vscode-eufemia.json`) you commit to your repository. This way, everyone on the team can use the same settings:
+You can either change the settings inside your VSCode (`eufemia.x`) or in a config file (`.vscode-eufemia.json`) you commit to your repository. The config file can be placed on every relative directory level (mono-repo support). This way, everyone on the team can use the same settings. Above the default options:
 
 ```json
 {
@@ -52,7 +52,7 @@ You can either change the settings inside your VSCode (`eufemia.x`) or in a conf
   "autoRemovePrefixZero": true,
   "ingoresViaCommand": [],
   "addMark": false,
-  "hover": "onlyMark",
+  "hover": "onlyMark" /* disabled | always | onlyMark */,
   "ingores": [],
   "languages": [
     "css",
@@ -72,7 +72,7 @@ You can either change the settings inside your VSCode (`eufemia.x`) or in a conf
     "right",
     "inset"
   ],
-  "currentLine": "show",
+  "currentLine": "show" /* disabled | show */,
   "calcMethodName": "calc"
 }
 ```

package.json

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

src/extension.ts

@@ -1,24 +1,17 @@
-import { commands, ExtensionContext, languages, workspace } from 'vscode'
+import { commands, languages } from 'vscode'
 import CssRemProvider from './extension/completion'
-import {
-  conf,
-  eufemiaConfigFileName,
-  loadConfig,
-} from './extension/helpers'
+import { conf, initConfig } from './extension/helpers'
 import { initRules } from './rules'
 import CssRemHoverProvider from './extension/hover'
 import { LineAnnotation } from './extension/annotation'
 import { CSSProcessor } from './extension/convert'
-
-let process: CSSProcessor
+import type { ExtensionContext } from 'vscode'
 
 export function activate(context: ExtensionContext) {
-  loadConfig()
+  initConfig(context)
   initRules()
 
-  workspace.onDidChangeConfiguration(loadConfig)
-
-  process = new CSSProcessor()
+  let process = new CSSProcessor()
 
   const syntaxLanguages = [...conf.languages]
   for (const lang of syntaxLanguages) {
@@ -28,6 +21,7 @@ export function activate(context: ExtensionContext) {
     )
     context.subscriptions.push(providerDisposable)
   }
+
   if (conf.hover !== 'disabled') {
     const hoverProvider = new CssRemHoverProvider()
     context.subscriptions.push(
@@ -71,16 +65,6 @@ export function activate(context: ExtensionContext) {
   if (conf.currentLine !== 'disabled') {
     context.subscriptions.push(new LineAnnotation())
   }
-
-  const eufemiaConfigWatcher = workspace.createFileSystemWatcher(
-    `**/${eufemiaConfigFileName}`
-  )
-
-  eufemiaConfigWatcher.onDidChange(loadConfig)
-  eufemiaConfigWatcher.onDidCreate(loadConfig)
-  eufemiaConfigWatcher.onDidDelete(loadConfig)
-
-  context.subscriptions.push(eufemiaConfigWatcher)
 }
 
 export function deactivate() {}

src/extension/__tests__/loadConfigFromFile.test.ts

@@ -0,0 +1,89 @@
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'
+import * as vscode from 'vscode'
+import { getConfig, loadConfigFromFile, conf } from '../helpers'
+import * as helpers from '../helpers'
+import * as nodeFs from 'fs'
+import * as nodePath from 'path'
+
+vi.mock('fs', async () => {
+  const original = (await vi.importActual('fs')) as {
+    readFileSync: (
+      file: nodeFs.PathOrFileDescriptor,
+      encoding: BufferEncoding
+    ) => string
+    existsSync: (file: nodeFs.PathOrFileDescriptor) => boolean
+  }
+
+  return {
+    ...original,
+    readFileSync: vi.fn((file, encoding) => {
+      if (file.includes('package.json')) {
+        return original.readFileSync(file, encoding)
+      }
+
+      return JSON.stringify({})
+    }),
+  }
+})
+
+vi.mock('path', async () => {
+  const original = (await vi.importActual('path')) as {
+    resolve: (...paths: string[]) => string
+  }
+
+  return {
+    ...original,
+  }
+})
+
+vi.mock('vscode', () => {
+  const workspace = {
+    getConfiguration: () => getConfig(),
+  }
+  const window = {}
+
+  return { workspace, window }
+})
+
+describe('loadConfigFromFile', () => {
+  beforeEach(() => {
+    const dirPath = '/Users/user/dir'
+    const fileName = `${dirPath}/file.css`
+
+    vscode.window.activeTextEditor = {
+      document: { fileName },
+    } as vscode.TextEditor
+
+    const readFileSync = vi.fn(() => {
+      return JSON.stringify({ foo: 'bar' })
+    })
+    vi.spyOn(nodeFs, 'readFileSync').mockImplementation(readFileSync)
+
+    const existsSync = vi.fn((file) => {
+      return file.includes('.vscode-eufemia.json')
+    })
+    vi.spyOn(nodeFs, 'existsSync').mockImplementation(existsSync)
+
+    const resolve = vi.fn(() => {
+      return dirPath
+    })
+    vi.spyOn(nodePath, 'resolve').mockImplementation(resolve)
+
+    const info = vi.fn()
+    vi.spyOn(console, 'info').mockImplementation(info)
+  })
+
+  it('should load and set config', () => {
+    loadConfigFromFile()
+
+    expect(conf).toEqual(
+      expect.objectContaining({
+        foo: 'bar',
+      })
+    )
+    expect(console.info).toHaveBeenCalledTimes(1)
+    expect(console.info).toHaveBeenCalledWith(
+      'Using config from file: /Users/user/dir/.vscode-eufemia.json'
+    )
+  })
+})

src/extension/helpers.ts

@@ -1,44 +1,62 @@
 import * as nls from 'vscode-nls'
+import { Uri, workspace, window } from 'vscode'
 import { existsSync, readFileSync } from 'fs'
 import { parse } from 'jsonc-parser'
-import { join, resolve } from 'path'
-import { Uri, workspace } from 'vscode'
+import { join, resolve, dirname } from 'path'
+import type { ExtensionContext } from 'vscode'
 import type { Config, Line } from './types'
 
 export let conf!: Config
-export const eufemiaConfigFileName = '.vscode-eufemia.json'
+export const configFileName = '.vscode-eufemia.json'
 
 export const localize = nls.config({
   messageFormat: nls.MessageFormat.both,
 })()
 
-function loadConfigViaFile() {
-  if (
-    !workspace.workspaceFolders ||
-    workspace.workspaceFolders?.length <= 0
-  ) {
-    return
-  }
+let CACHE_CONFIG_DIR_PATH: Record<string, string | null> = {}
 
-  const eufemiaConfigPath = join(
-    workspace.workspaceFolders[0].uri.fsPath,
-    eufemiaConfigFileName
+export function loadConfigFromFile() {
+  const activeFilePath = dirname(
+    window.activeTextEditor?.document.fileName || ''
   )
 
-  if (!existsSync(eufemiaConfigPath)) {
-    console.warn(`File not found: ${eufemiaConfigPath}`)
-    return
+  let configDirPath = (CACHE_CONFIG_DIR_PATH?.[activeFilePath] ||
+    null) as string
+
+  if (!configDirPath && activeFilePath) {
+    const paths = activeFilePath.split(/\/+|\\+/g)
+
+    for (let i = 0, l = paths.length; i < l; i++) {
+      const path = resolve(...paths)
+
+      if (
+        existsSync(join(path, configFileName)) ||
+        // Skip on package.json too, so we not always run this on every file over again (when in same directory)
+        existsSync(join(path, 'package.json'))
+      ) {
+        configDirPath = CACHE_CONFIG_DIR_PATH[activeFilePath] = path
+        break
+      }
+
+      paths.pop()
+    }
+  }
+
+  const configFilePath = join(configDirPath, configFileName)
+
+  if (!existsSync(configFilePath)) {
+    return // stop here
   }
 
   try {
-    const res = parse(readFileSync(eufemiaConfigPath).toString('utf-8'))
+    const res = parse(readFileSync(configFilePath, 'utf-8'))
     conf = {
       ...conf,
       ...res,
     }
-    console.warn(`Use override config via ${eufemiaConfigPath} file`)
-  } catch (ex) {
-    console.warn(`Parse error in ${eufemiaConfigPath}`, ex)
+    console.info(`Using config from file: ${configFilePath}`)
+  } catch (e) {
+    console.warn(`Parse error in ${configFilePath}`, e)
   }
 }
 
@@ -77,9 +95,25 @@ function setConfig() {
   conf = tmp as unknown as Config
 }
 
+export function initConfig(context: ExtensionContext) {
+  loadConfig()
+
+  workspace.onDidChangeConfiguration(loadConfig)
+  workspace.onDidOpenTextDocument(loadConfigFromFile)
+
+  const configWatcher = workspace.createFileSystemWatcher(
+    `**/${configFileName}`
+  )
+
+  configWatcher.onDidChange(loadConfig)
+  configWatcher.onDidCreate(loadConfig)
+  configWatcher.onDidDelete(loadConfig)
+
+  context.subscriptions.push(configWatcher)
+}
+
 export function loadConfig() {
   setConfig()
-  loadConfigViaFile()
   initIngores()
   initLanguages()
 }