jorenbroekema
commented
9 months ago Admittedly this is quite difficult to do without a lot of knowledge about style-dictionary, and using its internal functions. I will provide an example code snippet below to show you how you might be able to achieve it, with some caveats.
Before I show how you might achieve this, I would challenge you a bit. In my opinion, combining all different theme options in a single stylesheet is not ideal from the perspective of performance. You'll have your end user load the entire stylesheet for all your themes even though they are only using/showing one theme, so that's a lot of unnecessary kb's over the wire.
My recommendation is that you output a separate CSS file for each theme possibility, and dynamically load the correct stylesheet based on the end user's theme preference. This makes initial load much faster, with only a small delay upon a live theme switch by the user. Example of this approach, with multi-dimensional theming (so many options)) https://github.com/tokens-studio/lion-example -> live demo
Furthermore, the way Tokens Studio approaches theming right now is that you do a completely separate run of style-dictionary for each theme, so then combining that with putting everything into a single file is a bit hard to accomplish, because you have to manually do those style-dictionary runs, only partially, and extract the tokens and format them into a single document yourself, this requires a fair bit of style-dictionary knowledge and javascript chops to accomplish, but here it goes (assuming one dimensional themes btw, but possible to extend to multi-dimensional theming as well).
Really important to note is that it probably does not work well with outputReferences yet, hence why it's set to
falsein the snippet below. Expected to work better in style-dictionary v4 though..sd-transforms gives a few reference warnings for references in the typography tokens in theme.json for fontWeights, but they seem to be false positives and can be ignored? Probably a bug somewhere :\
const { registerTransforms } = require('@tokens-studio/sd-transforms'); const StyleDictionary = require('style-dictionary'); // private API, not recommended atm, probably will change in style-dictionary v4 const createDictionary = require('style-dictionary/lib/utils/createDictionary.js'); const { promises } = require('fs');
registerTransforms(StyleDictionary, { / options here if needed / });
const { formatHelpers } = StyleDictionary; const { fileHeader, formattedVariables } = formatHelpers;
async function run() {
const $themes = JSON.parse(await promises.readFile('$themes.json', 'utf-8'));
const configs = $themes.map(theme => [theme, ({
source: Object.entries(theme.selectedTokenSets)
.filter(([, val]) => val !== 'disabled')
.map(([tokenset]) => ${tokenset}.json),
platforms: {
css: {
transformGroup: 'tokens-studio',
},
},
})]);
// Now we need to start gathering all the tokens, source tokens and theme specific tokens // so that at the end, we can write everything to a single CSS file under seperate selectors. let fileContent = fileHeader({}); const sourceTokens = []; const themeSpecificTokens = {};
configs.forEach(([theme, cfg]) => { themeSpecificTokens[theme.name] = []; const sd = StyleDictionary.extend(cfg); sd.cleanAllPlatforms(); // optionally, cleanup files first.. const exportedTokens = sd.exportPlatform('css'); const dictionary = createDictionary({ properties: exportedTokens });
dictionary.allTokens.forEach(token => {
const filePath = token.filePath.replace(/\.json$/g, '');
if (theme.selectedTokenSets[filePath] === 'source') {
// source tokens should go into :root selector
sourceTokens.push(token);
} else if (theme.selectedTokenSets[filePath] === 'enabled') {
// theme specific tokens should go into .theme-foo selector
themeSpecificTokens[theme.name].push(token);
}
});});
// Create the CSS variables, reuse stuff from StyleDictionary, but this is a bit difficult right now due to
// usesReference and getReferences utilities being hard-coupled/bound to dictionary object rather
// than pure reusable functions. This should be made easier in style-dictionary, to reuse them.. maybe in v4!
// Should still work if you don't use outputReferences (so, set to false) though.
fileContent += :root {\n;
fileContent += formattedVariables({ format: 'css', dictionary: { allTokens: sourceTokens }, outputReferences: false });
fileContent += \n}\n\n;
Object.entries(themeSpecificTokens).forEach(([themeName, tokens]) => {
fileContent += .theme-${themeName} {\n;
fileContent += formattedVariables({ format: 'css', dictionary: { allTokens: tokens }, outputReferences: false });
fileContent += \n}\n\n;
});
await promises.writeFile('output.css' , fileContent, 'utf-8'); }
run();
Can be ran with the following tokenset, for me this gives the correct output.css file:
[tokens-themed.zip](https://github.com/tokens-studio/sd-transforms/files/13413547/tokens-themed.zip)
Tested with:
- @tokens-studio/sd-transforms v0.12.0
- style-dictionary v3.9.0
nareshbhatia
What feature would you like?
I would like to generate CSS Variables so that they are grouped under 3 selectors:
However a configuration like the one below, puts everything under
:root:I know that
filehas a option calledselector, but is it possible to apply it selectively to source files?Would you be available to contribute this feature?