search

amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.94k stars 560 forks source link

【Help】Why can't we generate multiple theme files with the same CSS variables #1373

Closed yanquanfahei closed 3 weeks ago

yanquanfahei commented 1 month ago

How can I change the configuration in the example to generate the following result：

/* global.css */
:root {
  --size-regular: 14rem;
  --size-small: 12rem;
  --colors-black: #000000;
  --colors-white: #ffffff;
}

/* light.css */
html[data-theme="light"] {
  --text-primary: var(--colors-black);
}

/* dark.css */
html[data-theme="dark"]{
  --text-primary: var(--colors-white);
}
jorenbroekema commented 4 weeks ago

There isn't a straight-forward way to accomplish this, at least not in the scope of style-dictionary. Since you're doing multiple SD instances / runs, it will always put them in separate files. You can run a custom script to then chain those files together in a combined output file, but I wouldn't recommend it. What you get there is your light CSS and your dark CSS in the same file, which means the end user is always loading a bunch of redundant CSS because you can't be in light and dark mode simultaneously. It's often better to split them into their own respective light.css / dark.css files and have a client-side JS utility that switches out the stylesheets when the theme is changed by the end user.

jorenbroekema commented 4 weeks ago

The README of this project goes a bit more in-depth on this topic btw https://github.com/tokens-studio/lion-example and what this redundant CSS is and why we try to prevent this.

yanquanfahei commented 3 weeks ago

Thank you very much for your reply. It has been a great help. The implementation of this example has solved my current problem 😄