style-dictionary-tailwindcss-transformer
style-dictionary-tailwindcss-transformer copied to clipboard
feat: upgrade to style dictionary v4
Hello, I was upgrading to v4 style dictionary in my project and this dependency broke during that.
I'm not entirely sure how this should be released as it is a breaking change.
I thought about making it backward compatible but then I had issues with the types not matching V4.
For now I just changed it in my project which does work but is not ideal going forward so this will need to be merged at some point.
// Make it StyleDictionary v4 compatible
const StyleDictionaryTailwind = new StyleDictionary({
...TailwindConfig,
hooks: {
formats: TailwindConfig.format,
},
});```
Thanks @BJJLangedijk I got response with
import StyleDictionary from "style-dictionary";
import { makeSdTailwindConfig } from "sd-tailwindcss-transformer";
const types = ["colors"];
for (const type of types) {
const tailwindConfig = makeSdTailwindConfig({ type });
tailwindConfig.platforms = {
"tailwind/colors": {
...tailwindConfig.platforms["tailwind/colors"],
// Overriding 'name/cti/kebab' to "name/kebab"
transforms: ["attribute/cti", "name/kebab"],
},
};
const styleDictionaryTailwind = new StyleDictionary({
...tailwindConfig,
hooks: {
formats: {
tailwindFormat: ({ dictionary }) => {
const formated = tailwindConfig.format.tailwindFormat({
dictionary: {
...dictionary,
allTokens: dictionary.allTokens.map((token) => ({
...token,
value: token["$value"],
})),
},
});
return formated;
},
},
},
});
await styleDictionaryTailwind.hasInitialized;
await styleDictionaryTailwind.buildAllPlatforms();
}
Thank you for contribution!
I'm sorry, but this time we're going to merge this pull request.
We have released v2.0.0, please check it out!