Словарь стилей — создавайте токены для scss-миксинов как css ⇐ CSS

[Anonymous]

Моя задача заключается в том, что я хочу экспортировать из json в миксины scss, в которых будут переменные css.
Я получаю json из Figma (Token Studio) в структура токенов/designSystem/semantic.json,core.json и token/designSystem/comComponents/[anyComponent]
Я экспортировал то, что создает из этого стили scss json, но мне нужно создавать миксины с переменными CSS
Это мой 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"
}
]
}
}
}

Структура после экспорта


Результат
$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;

Ожидаемый результат
@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;
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... ins-as-css