finding a way to run in client-side by browser using style-dictionary or browser-style-dictionary

[robsonn]

style-dictionary

Versions:
"style-dictionary": "^3.8.0",
"vue": "3.2.47",
"vite": "4.1.0",

partial code:

import StyleDictionary from 'style-dictionary' // no error in console

// error on instance
const styleDictionary = StyleDictionary.extend(config);
or 
const styleDictionary = StyleDictionary 

error:

ReferenceError: __dirname is not defined at node_modules/style-dictionary/lib/common/formats.js (formats.js:1066:21)

---

browser-style-dictionary

Versions:
"browser-style-dictionary": "3.1.1-browser.1",
"vue": "3.2.47",
"vite": "4.1.0",

partial code:

import StyleDictionary from "browser-style-dictionary/browser.js";

// error on instance
const styleDictionary = StyleDictionary.extend(config);

error:

[TypeError: process.cwd is not a function](common.js:89  
Uncaught (in promise) TypeError: process.cwd is not a function)

[dbanksdesign]

Hey @robsonn thank you for the question! Currently there is no way to run Style Dictionary in the browser because it relies on Node things like the file system. There is a fork of Style Dictionary that does work in the browser: https://github.com/divriots/browser-style-dictionary you can install the npm package browser-style-dictionary

This is something we are planning for the next major release of Style Dictionary: allowing it to be run in browser or any JS-based environment.

[chazzmoney]

For clarity, you'll have to follow the directions they provide in their README, which I believe includes running the whole thing through browserify.

[lukethacoder]

@dbanksdesign I hate to be that guy, but is there an ETA on when this next major release will be coming?

Keen to see this natively running in the browser without the "hacks" that these other packages & repos currently have in place.

[lukethacoder]

Looks like someone from the tokens.studio team is putting in hard work to get this in v4:

#1014

[jorenbroekema]

This is working out of the box now in the browser without any build-tools required (assuming you use a modern evergreen browser of course).

Feel free to test out 4.0.0-prerelease.0 (or later prerelease version, we will be doing prerelease patches frequently, working towards the v4 new major version).

Also, hop into the style-dictionary-v4 channel on our slack, we'd love to hear feedback when testing the v4 prereleases, and will be communicating further changes there.

[lukethacoder]

Big thanks to @jorenbroekema and the rest of the team for this feature 🚀