Sharing Variables Across Multiple Projects Using Style Dictionary

Question

I have a React project using Style Dictionary, which produces a _variables.scss file that I can leverage within the project. This works great but is there a way to programatically share across multiple Projects? For instance, If I update Style Dictionary in the main project, how can other projects have access to the updated _variables.scss without manually copying and pasting?

Initially, I can only think of a remote git that all projects can pull from. But how can they pull just certain files?

Answer 1

Hey sorry I don't check SO that often. For future reference, filing an issue on the Github is your best bet for a timely answer.

The idea for a Style Dictionary package is that it should be consumed like any other package on a given platform. For example if you want to use your style dictionary package in a web environment you can publish it as an NPM package and then consume that _variables.scss file based on your projects build system/bundler. For example, if you use webpack, you would depend on the NPM package and import it like:

@import "clarity-design-tokens/web/dist/variables.scss";

"clarity-design-tokens" is the package name (doesn't actually exist, was used in a workshop), then the rest is the path that the style dictionary package built that scss variables file in.

Taken from this example: https://github.com/dbanksdesign/clarity-2020-design-token-workshop/blob/final/web/demo/src/styles/base.scss#L1

Full example can be seen here: https://github.com/dbanksdesign/clarity-2020-design-token-workshop/blob/final (this package produces NPM artifacts, as well as an Android library and a CocoaPod).

Also you could have a mono-repo setup, and consuming the scss variables file (or any other build artifact from style dictionary) would be the same. Does that help?