fix: dir in config are relative to config location

.changeset/two-experts-punch.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+fix resolving of `outDir` in config not being relative to config file location

packages/cli/bin/config.ts

@@ -1,4 +1,3 @@
-import path from 'node:path';
 import type { Command, OptionValues } from '@commander-js/extra-typings';
 import pc from 'picocolors';
 import * as R from 'ramda';
@@ -10,37 +9,36 @@ import {
   parseConfig,
   validateConfig,
 } from '../src/config.js';
-import { readFile } from '../src/utils.js';
+import fs from '../src/utils/filesystem.js';
 import { getCliOption, getDefaultCliOption, getSuppliedCliOption, type OptionGetter } from './options.js';
 
-export async function readConfigFile(configPath: string, allowFileNotFound = true): Promise<string> {
-  const resolvedPath = path.resolve(process.cwd(), configPath);
+export async function readConfigFile(configFilePath: string, allowFileNotFound = true): Promise<string> {
   let configFile: string;
 
   try {
-    configFile = await readFile(resolvedPath, false, allowFileNotFound);
+    configFile = await fs.readFile(configFilePath, allowFileNotFound);
   } catch (err) {
     if (allowFileNotFound) {
       return '';
     }
-    console.error(pc.redBright(`Could not read config file at ${pc.blue(resolvedPath)}`));
+    console.error(pc.redBright(`Could not read config file at ${pc.blue(configFilePath)}`));
     throw err;
   }
 
   if (configFile) {
-    console.log(`Found config file: ${pc.green(resolvedPath)}`);
+    console.log(`Found config file: ${pc.green(configFilePath)}`);
   }
 
   return configFile;
 }
 
 export async function parseCreateConfig(
   configFile: string,
-  options: { theme: string; cmd: Command<unknown[], OptionValues>; configPath: string },
+  options: { theme: string; cmd: Command<unknown[], OptionValues>; configFilePath: string },
 ): Promise<CreateConfigSchema> {
-  const { cmd, theme = 'theme', configPath } = options;
+  const { cmd, theme = 'theme', configFilePath } = options;
 
-  const configParsed: CreateConfigSchema = parseConfig<CreateConfigSchema>(configFile, configPath);
+  const configParsed: CreateConfigSchema = parseConfig<CreateConfigSchema>(configFile, configFilePath);
 
   /*
    * Check that we're not creating multiple themes with different color names.
@@ -101,14 +99,14 @@ export async function parseCreateConfig(
         },
   });
 
-  return validateConfig<CreateConfigSchema>(configFileCreateSchema, unvalidatedConfig, configPath);
+  return validateConfig<CreateConfigSchema>(configFileCreateSchema, unvalidatedConfig, configFilePath);
 }
 
 export async function parseBuildConfig(
   configFile: string,
-  { configPath }: { configPath: string },
+  { configFilePath }: { configFilePath: string },
 ): Promise<BuildConfigSchema> {
-  const configParsed: BuildConfigSchema = parseConfig<BuildConfigSchema>(configFile, configPath);
+  const configParsed: BuildConfigSchema = parseConfig<BuildConfigSchema>(configFile, configFilePath);
 
-  return validateConfig<BuildConfigSchema>(commonConfig, configParsed, configPath);
+  return validateConfig<BuildConfigSchema>(commonConfig, configParsed, configFilePath);
 }

packages/cli/bin/designsystemet.ts

@@ -1,16 +1,17 @@
 #!/usr/bin/env node
+import path from 'node:path';
 import { Argument, createCommand, program } from '@commander-js/extra-typings';
 import pc from 'picocolors';
 import * as R from 'ramda';
 import { convertToHex } from '../src/colors/index.js';
 import type { CssColor } from '../src/colors/types.js';
 import migrations from '../src/migrations/index.js';
 import { buildTokens } from '../src/tokens/build.js';
-import { writeTokens } from '../src/tokens/create/write.js';
+import { createTokenFiles } from '../src/tokens/create/files.js';
 import { cliOptions, createTokens } from '../src/tokens/create.js';
 import { generateConfigFromTokens } from '../src/tokens/generate-config.js';
-import type { Theme } from '../src/tokens/types.js';
-import { cleanDir } from '../src/utils.js';
+import type { OutputFile, Theme } from '../src/tokens/types.js';
+import fs from '../src/utils/filesystem.js';
 import { parseBuildConfig, parseCreateConfig, readConfigFile } from './config.js';
 
 export const figletAscii = `
@@ -51,22 +52,31 @@ function makeTokenCommands() {
     .option('--experimental-tailwind', 'Generate Tailwind CSS classes for tokens', false)
     .action(async (opts) => {
       console.log(figletAscii);
-      const { verbose, clean, dry, experimentalTailwind } = opts;
-      const tokensDir = typeof opts.tokens === 'string' ? opts.tokens : DEFAULT_TOKENS_CREATE_DIR;
-      const outDir = typeof opts.outDir === 'string' ? opts.outDir : './dist/tokens';
+      const { verbose, clean, dry, experimentalTailwind, tokens } = opts;
 
-      const { configFile, configPath } = await getConfigFile(opts.config);
-      const config = await parseBuildConfig(configFile, { configPath });
+      const { configFile, configFilePath } = await getConfigFile(opts.config);
+      const config = await parseBuildConfig(configFile, { configFilePath });
 
-      if (dry) {
-        console.log(`Performing dry run, no files will be written`);
-      }
+      fs.init({ dry, configFilePath, outdir: opts.outDir });
+
+      const outDir = fs.outDir;
 
       if (clean) {
-        await cleanDir(outDir, dry);
+        await fs.cleanDir(outDir);
       }
 
-      await buildTokens({ tokensDir, outDir, verbose, dry, tailwind: experimentalTailwind, ...config });
+      const files = await buildTokens({
+        tokensDir: tokens,
+        verbose,
+        tailwind: experimentalTailwind,
+        ...config,
+      });
+
+      console.log(`\n💾 Writing build to ${pc.green(outDir)}`);
+
+      await fs.writeFiles(files, outDir, true);
+
+      console.log(`\n✅ Finished building tokens in ${pc.green(outDir)}`);
 
       return Promise.resolve();
     });
@@ -98,29 +108,45 @@ function makeTokenCommands() {
       if (opts.dry) {
         console.log(`Performing dry run, no files will be written`);
       }
+      const themeName = opts.theme;
 
-      const { configFile, configPath } = await getConfigFile(opts.config);
+      const { configFile, configFilePath } = await getConfigFile(opts.config);
       const config = await parseCreateConfig(configFile, {
-        theme: opts.theme,
+        theme: themeName,
         cmd,
-        configPath,
+        configFilePath,
       });
 
+      fs.init({
+        dry: opts.dry,
+        configFilePath,
+        outdir: opts.outDir !== DEFAULT_TOKENS_CREATE_DIR ? opts.outDir : config.outDir,
+      });
+
+      console.log('initialized file system with config:', { workingDir: fs.workingDir, outDir: fs.outDir });
+
+      const outDir = fs.outDir;
+
       if (config.clean) {
-        await cleanDir(config.outDir, opts.dry);
+        await fs.cleanDir(outDir);
       }
-      /*
-       * Create and write tokens for each theme
-       */
+
+      let files: OutputFile[] = [];
       if (config.themes) {
         for (const [name, themeWithoutName] of Object.entries(config.themes)) {
           // Casting as missing properties should be validated by `getDefaultOrExplicitOption` to default values
           const theme = { name, ...themeWithoutName } as Theme;
 
           const { tokenSets } = await createTokens(theme);
-          await writeTokens({ outDir: config.outDir, theme, dry: opts.dry, tokenSets });
+          files = files.concat(await createTokenFiles({ outDir, theme, tokenSets }));
         }
       }
+
+      await fs.writeFiles(files, outDir);
+
+      console.log(`\n✅ Finished creating tokens in ${pc.green(outDir)} for theme: ${pc.blue(themeName)}`);
+
+      return Promise.resolve();
     });
 
   return tokenCmd;
@@ -137,21 +163,29 @@ program
   .action(async (opts) => {
     console.log(figletAscii);
     const { dry } = opts;
-    const tokensDir = typeof opts.dir === 'string' ? opts.dir : DEFAULT_TOKENS_CREATE_DIR;
-    const outFile = typeof opts.out === 'string' ? opts.out : DEFAULT_CONFIG_FILE;
+    const tokensDir = path.resolve(opts.dir);
+    const configFilePath = path.resolve(opts.out);
+
+    fs.init({ dry, configFilePath, outdir: path.dirname(configFilePath) });
 
     try {
       const config = await generateConfigFromTokens({
         tokensDir,
-        outFile: dry ? undefined : outFile,
-        dry,
+        outFile: configFilePath,
       });
 
       if (dry) {
         console.log();
         console.log('Generated config (dry run):');
         console.log(JSON.stringify(config, null, 2));
       }
+
+      if (configFilePath) {
+        const configJson = JSON.stringify(config, null, 2);
+        await fs.writeFile(configFilePath, configJson);
+        console.log();
+        console.log(`\n✅ Config file written to ${pc.blue(configFilePath)}`);
+      }
     } catch (error) {
       console.error(pc.redBright('Error generating config:'));
       console.error(error instanceof Error ? error.message : String(error));
@@ -201,9 +235,10 @@ function parseBoolean(value: string | boolean): boolean {
   return value === 'true' || value === true;
 }
 
-async function getConfigFile(config: string | undefined) {
-  const allowFileNotFound = R.isNil(config) || config === DEFAULT_CONFIG_FILE;
-  const configPath = config ?? DEFAULT_CONFIG_FILE;
-  const configFile = await readConfigFile(configPath, allowFileNotFound);
-  return { configFile, configPath };
+async function getConfigFile(userConfigFilePath: string | undefined) {
+  const allowFileNotFound = R.isNil(userConfigFilePath) || userConfigFilePath === DEFAULT_CONFIG_FILE;
+  const configFilePath = userConfigFilePath ?? DEFAULT_CONFIG_FILE;
+  const configFile = await readConfigFile(configFilePath, allowFileNotFound);
+
+  return { configFile, configFilePath };
 }

packages/cli/configs/test-tokens.config.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../dist/config.schema.json",
-  "outDir": "./temp/config/design-tokens",
+  "outDir": "../temp/config/design-tokens",
   "clean": true,
   "themes": {
     "some-org": {

packages/cli/package.json

@@ -4,7 +4,7 @@
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "engines": {
-    "node": ">=20 <25"
+    "node": ">=20"
   },
   "repository": {
     "type": "git",

packages/cli/src/config.ts

@@ -51,28 +51,28 @@ function makeFriendlyError(err: unknown) {
 export function validateConfig<T>(
   schema: z.ZodType<T>,
   unvalidatedConfig: Record<string, unknown>,
-  configPath: string,
+  configFilePath: string,
 ): T {
   try {
     return schema.parse(unvalidatedConfig) as T;
   } catch (err) {
-    console.error(pc.redBright(`Invalid config file at ${pc.red(configPath)}`));
+    console.error(pc.redBright(`Invalid config file at ${pc.red(configFilePath)}`));
 
     const validationError = makeFriendlyError(err);
     console.error(validationError?.toString());
     process.exit(1);
   }
 }
 
-export function parseConfig<T>(configFile: string, configPath: string): T {
+export function parseConfig<T>(configFile: string, configFilePath: string): T {
   if (!configFile) {
     return {} as T;
   }
 
   try {
     return JSON.parse(configFile) as T;
   } catch (err) {
-    console.error(pc.redBright(`Failed parsing config file at ${pc.red(configPath)}`));
+    console.error(pc.redBright(`Failed parsing config file at ${pc.red(configFilePath)}`));
 
     const validationError = makeFriendlyError(err);
     console.error(validationError?.toString());

packages/cli/src/migrations/codemods/css/run.ts

@@ -1,9 +1,7 @@
-import fs from 'node:fs';
-
 import glob from 'fast-glob';
 import type { AcceptedPlugin } from 'postcss';
 import postcss from 'postcss';
-import { readFile } from '../../../utils.js';
+import fs from '../../../../src/utils/filesystem.js';
 
 type CssCodemodProps = {
   plugins: AcceptedPlugin[];
@@ -25,10 +23,10 @@ export const runCssCodemod = async ({ plugins = [], globPattern = './**/*.css' }
         // console.log(`Skipping ${file}`);
         return;
       }
-      const contents = readFile(file).toString();
-      const result = await processor.process(contents, { from: file });
+      const contents = await fs.readFile(file);
+      const result = await processor.process(contents.toString(), { from: file });
 
-      fs.writeFileSync(file, result.css);
+      await fs.writeFile(file, result.css);
     });
 
     await Promise.all(filePromises);

packages/cli/src/scripts/update-preview-tokens.ts

@@ -1,30 +1,15 @@
-import path from 'node:path';
 import pc from 'picocolors';
 import type { TransformedToken } from 'style-dictionary/types';
 import config from './../../../../designsystemet.config.json' with { type: 'json' };
 import { generate$Themes } from '../tokens/create/generators/$themes.js';
 import { createTokens } from '../tokens/create.js';
 import { buildOptions, processPlatform } from '../tokens/process/platform.js';
 import { processThemeObject } from '../tokens/process/utils/getMultidimensionalThemes.js';
-import type { OutputFile, SizeModes, Theme } from '../tokens/types.js';
-import { cleanDir, mkdir, writeFile } from '../utils.js';
+import type { SizeModes, Theme } from '../tokens/types.js';
+import fs from '../utils/filesystem.js';
 
 const OUTDIR = '../../internal/components/src/tokens/design-tokens';
 
-async function write(files: OutputFile[], outDir: string, dry?: boolean) {
-  for (const { destination, output } of files) {
-    if (destination) {
-      const filePath = path.join(outDir, destination);
-      const fileDir = path.dirname(filePath);
-
-      console.log(`Writing file: ${pc.green(filePath)}`);
-
-      await mkdir(fileDir, dry);
-      await writeFile(filePath, output, dry);
-    }
-  }
-}
-
 const toPreviewToken = (tokens: { token: TransformedToken; formatted: string }[]): PreviewToken[] =>
   tokens.map(({ token, formatted }) => {
     const [variable, value] = formatted.split(':');
@@ -55,7 +40,7 @@ export const formatTheme = async (themeConfig: Theme) => {
     buildTokenFormats: {},
   });
 
-  await cleanDir(OUTDIR, false);
+  await fs.cleanDir(OUTDIR);
 
   console.log(
     buildOptions?.buildTokenFormats
@@ -95,15 +80,14 @@ export const formatTheme = async (themeConfig: Theme) => {
     console.log(`\n💾 Writing preview tokens`);
 
     for (const [type, tokens] of Object.entries(tokensGroupedByType)) {
-      write(
+      fs.writeFiles(
         [
           {
             destination: `${type}.json`,
             output: JSON.stringify(tokens, null, 2),
           },
         ],
         OUTDIR,
-        false,
       );
     }
     console.log(`\n✅ Finished building preview tokens for ${pc.blue('Designsystemet')}`);