https://github.com/stevenpetryk/style-dictionary-web

Making Style Dictionary run in the browser
https://github.com/stevenpetryk/style-dictionary-web

Last synced: 29 days ago
JSON representation

Making Style Dictionary run in the browser

• Host: GitHub
• URL: https://github.com/stevenpetryk/style-dictionary-web
• Owner: stevenpetryk
• Created: 2022-06-09T18:36:06.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-23T19:56:11.000Z (over 2 years ago)
• Last Synced: 2023-03-05T08:23:55.671Z (over 1 year ago)
• Language: TypeScript
• Size: 101 KB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Style Dictionary Web

A really simple example of running Style Dictionary live, in the browser, using Parcel.

The main strategy for getting it to run is the following:

- Alias all Node-specific packages to browser-friendly polyfills

  - Notably, `memfs` is used to replace `fs` so that we can give Style Dictionary a fake filesystem to work with, and allowing us to extract what was written.

- Patch Style Dictionary to avoid JSON5 (using `patch-package`)

This felt a lot easier than the [approach](https://backlight.dev/blog/nodejs-in-browser) recommended by the creators of Style-Dictionary-Play, mostly because it doesn't require a fork of Style Dictionary.

The Style Dictionary itself is really simple—just a single token.

## Scripts

- `yarn start-node` builds the Style Dictionary from Node (the normal way).

- `yarn start-web` starts a live-reloading webapp that runs Style Dictionary on the frontend.