my challange is that I want to make export from json to the scss mixins that will have css variables in it.
I’m getting json from figma(token studio) in the structure of tokens/designSystem/semantic.json,core.json, and token/designSystem/components/[anyComponent]
I have exported that is creating scss styles from this json, but I need to make mixins with css variables
This is my buildStyleDictionary.mjs:
import StyleDictionary from "style-dictionary";
import { readFile, readdir, rm } from "fs/promises";
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const configPath = path.join(__dirname, "config.json");
const config = JSON.parse(await readFile(configPath, "utf-8"));
const buildDir = path.join(__dirname, "style-dictionary");
// Remove the existing build directory to prevent duplicates
await rm(buildDir, { recursive: true, force: true });
// Register filters for each foundation type based on $type or prefix in semantic.json and core.json
const foundationTypes = [
"color",
"elevation",
"size",
"border",
"font",
"line",
"spacing",
];
foundationTypes.forEach((type) => {
StyleDictionary.registerFilter({
name: `is${type.charAt(0).toUpperCase() + type.slice(1)}Token`,
filter: (token) =>
token.$type === type ||
((token.filePath.includes("semantic.json") ||
token.filePath.includes("core.json")) &&
token.name.startsWith(`${type}-`)),
});
});
// Function to dynamically generate component-specific SCSS files
async function getComponentFiles() {
const componentDir = path.join(__dirname, "tokens/designSystem/Component");
const componentFiles = await readdir(componentDir);
return componentFiles.map((file) => ({
destination: `Component/${file.replace(".json", ".scss")}`,
format: "scss/variables",
filter: {
filePath: `tokens/designSystem/Component/${file}`,
},
}));
}
const componentFiles = await getComponentFiles();
const sd = new StyleDictionary({
...config,
platforms: {
...config.platforms,
scss: {
...config.platforms.scss,
files: [
// Generate semantic and core as whole files without filtering by type
{
destination: "semantic.scss",
format: "scss/variables",
filter: {
filePath: "tokens/designSystem/semantic.json",
},
},
{
destination: "core.scss",
format: "scss/variables",
filter: {
filePath: "tokens/designSystem/core.json",
},
},
// Generate foundation files in the Foundations folder
...foundationTypes.map((type) => ({
destination: `Foundations/${type}.scss`,
format: "scss/variables",
filter: `is${type.charAt(0).toUpperCase() + type.slice(1)}Token`,
})),
// Component-specific files
...componentFiles,
],
},
},
});
sd.buildAllPlatforms();
console.log(
"Style Dictionary build completed with semantic, core, Foundations, and Component SCSS files.",
);
Config.json:
"source": [
"./tokens/SignFace/semantic.json",
"./tokens/SignFace/core.json",
"./tokens/SignFace/Component/*.json"
],
"platforms": {
"scss": {
"transformGroup": "scss",
"buildPath": "style-dictionary/"
},
"css": {
"transformGroup": "css",
"buildPath": "style-dictionary/css/",
"files": [
{
"destination": "variables.css",
"format": "css/variables"
}
]
}
}
}
Structure after export
Result
$label-font-family: Hind;
$label-font-weigth: 500;
$label-line-height: 100%;
$label-font-size: 14;
$label-text-base: #333e4a;
$label-gap: 4px;
$label-icon-size: 16px;
$label-icon-border-width: 1px;
Expected Result
@mixin reset-list {
--label-font-family: Hind;
--label-font-weigth: 500;
--label-line-height: 100%;
--label-font-size: 14;
--label-text-base: #333e4a;
--label-gap: 4px;
--label-icon-size: 16px;
--label-icon-border-width: 1px;
}
