Source tokens and config in sub-directory/folder

[fredboyle]

We have our Style Dictionary setup in a sub-directory of the root of the project. What's the best way to setup the config.json to ensure all paths are relative to the base Style Dictionary folder and not the root of the project?

I've tried various StyleDictionary.extend(...) variations in a custom build script but have only had luck with:

let StyleDictionaryExtended = StyleDictionary.extend(
  __dirname + "/../config.json"
);
StyleDictionaryExtended = StyleDictionary.extend({
  ...StyleDictionaryExtended,
  source: [__dirname + "/../tokens/**/*.json"],
});

Changing the above to the following didn't help either:

let StyleDictionaryExtended = StyleDictionary.extend(
  __dirname + "/../config.json"
);
StyleDictionaryExtended = StyleDictionary.extend({
  ...StyleDictionaryExtended,
  source: [__dirname + "/../tokens/**/*.json"],
  platforms: {
    css: { buildPath: __dirname + "/../build/css/" },
    scss: { buildPath: __dirname + "/../build/scss/" },
    json: { buildPath: __dirname + "/../build/json/" },
  },
});

Also changing the directories to more absolute values means the plain style-dictionary build command only functions from the root of our project.

Thanks for your help.

[404tonynotfound]

Hey, I don't quite understand your use-case/what the goal is with this, would you mind elaborating on the use case further? Additionally, where were you running style-dictionary build from when not using absolute paths?

[fredboyle]

@spirkolos Attached is a screenshot of the directory structure in our project. You'll notice that Style Dictionary is self contained within a subdirectory.

When we run our custom Style Dictionary build script, in src/style-dictionary/scripts/build-custom.js, from the root of our project the paths are not relative to the Style Dictionary config.json file's location but to the root of the project where we ran the script from.

So when we run our custom command of npm run build:tokens in the root of our project the paths end up being relative to the root location instead of the self contained Style Dictionary subdirectory.

Does that help?

[chazzmoney]

Can you provide your config.json?

[fredboyle]

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "custom/scss",
      "prefix": "pds",
      "buildPath": "src/styles/global/",
      "files": [
        {
          "destination": "_variables.scss",
          "format": "scss/variables"
        }
      ]
    },
    "css": {
      "transformGroup": "custom/css",
      "prefix": "pds",
      "buildPath": "src/style-dictionary/_build/css/",
      "files": [
        {
          "destination": "design-tokens.css",
          "format": "css/variables"
        }
      ]
    },
    "json": {
      "transformGroup": "custom/css",
      "buildPath": "src/style-dictionary/_build/json/",
      "files": [
        {
          "destination": "design-tokens.json",
          "format": "json/nested"
        }
      ]
    }
  }
}

[fredboyle]

Checking in for any help on this. Thanks.

[stephan-noel]

This doesn't work me either, I had to change my cwd to the location of the project.

Environment

Windows Node 18.12.1

Error given:

Directory structure:

Relative paths in config.json:

Package.json scripts to build:

Script that worked:

Conclusion

The problem is that all relative paths in config.json are resolved relative to the current working directory, rather than relative to the config.json itself. Not sure if that's intended behavior when working with the --config option to the build command.

Remaining problems

Now because I changed my cwd, if I want to include other base files, I need to use relative paths to get back up to node_modules:

config.json: