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,25 +9,24 @@ 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);
   let configFile: string;
 
   try {
-    configFile = await readFile(resolvedPath, false, allowFileNotFound);
+    configFile = await fs.readFile(configPath, 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(configPath)}`));
     throw err;
   }
 
   if (configFile) {
-    console.log(`Found config file: ${pc.green(resolvedPath)}`);
+    console.log(`Found config file: ${pc.green(configPath)}`);
   }
 
   return configFile;

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,33 @@ 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 configFilePath = opts.config;
+
+      const { configFile, configPath } = await getConfigFile(configFilePath);
       const config = await parseBuildConfig(configFile, { configPath });
 
-      if (dry) {
-        console.log(`Performing dry run, no files will be written`);
-      }
+      fs.init({ dry, configFilePath });
+
+      const outDir = fs.getOutdir(opts.outDir); // TODO read output directory from config or CLI options
 
       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 +110,40 @@ function makeTokenCommands() {
       if (opts.dry) {
         console.log(`Performing dry run, no files will be written`);
       }
+      const themeName = opts.theme;
+      const configFilePath = opts.config;
 
-      const { configFile, configPath } = await getConfigFile(opts.config);
+      const { configFile, configPath } = await getConfigFile(configFilePath);
       const config = await parseCreateConfig(configFile, {
-        theme: opts.theme,
+        theme: themeName,
         cmd,
         configPath,
       });
 
+      fs.init({ dry: opts.dry, configFilePath });
+
+      const outDir = fs.getOutdir(config.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 +160,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 });
 
     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));
@@ -205,5 +236,6 @@ 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 };
 }

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/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')}`);

packages/cli/src/tokens/build.ts

@@ -1,60 +1,35 @@
-import path from 'node:path';
 import type { ThemeObject } from '@tokens-studio/types';
 import pc from 'picocolors';
 import * as R from 'ramda';
-import { mkdir, readFile, writeFile } from '../utils.js';
+import fs from '../utils/filesystem.js';
 import { createTypeDeclarationFiles } from './process/output/declarations.js';
 import { createTailwindCSSFiles } from './process/output/tailwind.js';
 import { createThemeCSSFiles, defaultFileHeader } from './process/output/theme.js';
 import { type BuildOptions, processPlatform } from './process/platform.js';
 import { processThemeObject } from './process/utils/getMultidimensionalThemes.js';
 import type { DesignsystemetObject, OutputFile } from './types.js';
 
-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(destination);
-
-      await mkdir(fileDir, dry);
-      await writeFile(filePath, output, dry);
-    }
-  }
-}
-
 export const buildTokens = async (options: Omit<BuildOptions, 'type' | 'processed$themes' | 'buildTokenFormats'>) => {
-  const outDir = path.resolve(options.outDir);
-  const tokensDir = path.resolve(options.tokensDir);
-  const $themes = JSON.parse(await readFile(`${tokensDir}/$themes.json`)) as ThemeObject[];
+  const tokensDir = options.tokensDir;
+  const $themes = JSON.parse(await fs.readFile(`${tokensDir}/$themes.json`)) as ThemeObject[];
   const processed$themes = $themes.map(processThemeObject);
   let $designsystemet: DesignsystemetObject | undefined;
 
   try {
-    const $designsystemetContent = await readFile(`${tokensDir}/$designsystemet.jsonc`);
+    const $designsystemetContent = await fs.readFile(`${tokensDir}/$designsystemet.jsonc`);
     $designsystemet = JSON.parse($designsystemetContent) as DesignsystemetObject;
   } catch (_error) {}
 
   console.log(`\n🏗️ Start building tokens in ${pc.green(tokensDir)}`);
 
   const processedBuilds = await processPlatform({
     ...options,
-    outDir: outDir,
     tokensDir: tokensDir,
     type: 'build',
     processed$themes,
     buildTokenFormats: {},
   });
 
-  // https://github.com/digdir/designsystemet/issues/3434
-  // Disabled for now so that we can re-enable it later if needed (under a feature flag)
-  // for (const [_, buildResults] of Object.entries(processedBuilds)) {
-  //   for (const { formatted } of buildResults) {
-  //     await write(formatted, resolvedOutDir, options.dry);
-  //   }
-  // }
-
   const fileHeader = R.join('')([
     defaultFileHeader,
     $designsystemet ? `\ndesign-tokens: v${$designsystemet.version}` : '',
@@ -72,10 +47,5 @@ export const buildTokens = async (options: Omit<BuildOptions, 'type' | 'processe
     files = files.concat(tailwindFiles.filter(Boolean) as OutputFile[]);
   }
 
-  console.log(`\n💾 Writing build to ${pc.green(outDir)}`);
-
-  await write(files, outDir, options.dry);
-
-  console.log(`\n✅ Finished building tokens!`);
-  return processedBuilds;
+  return files;
 };