Skip to content

Instantly share code, notes, and snippets.

@abhoopathy
Created October 28, 2025 23:16
Show Gist options
  • Select an option

  • Save abhoopathy/fdefd25b49e0782ef160682b79863850 to your computer and use it in GitHub Desktop.

Select an option

Save abhoopathy/fdefd25b49e0782ef160682b79863850 to your computer and use it in GitHub Desktop.
import StyleDictionary from 'style-dictionary';
StyleDictionary.registerParser({
name: 'figma-json-fixer',
pattern: /\.json$/,
parser: ({ filePath, contents }) => {
const tokens = JSON.parse(contents);
// Get all top-level keys that don't start with $
const keysToFlatten = Object.keys(tokens).filter(key => !key.startsWith('$'));
// Flatten each non-$ object's children into the main tokens object
keysToFlatten.forEach(key => {
const childTokens = tokens[key];
// Copy all children to the top level
Object.entries(childTokens).forEach(([childKey, value]) => {
tokens[childKey] = value;
});
// Remove the original parent key
delete tokens[key];
});
return tokens;
},
});
export default {
source: ['tokens.json'],
parsers: ["figma-json-fixer"],
platforms: {
scss: {
transformGroup: 'scss',
buildPath: 'dist/',
files: [
{
destination: 'tokens.css',
format: 'css/variables',
options: {
outputReferences: true
},
}
],
transforms: ['typography/css/shorthand']
},
js: {
buildPath: 'dist/',
files: [
{
destination: 'tokens.js',
format: 'javascript/module'
},
],
transforms: ['attribute/cti', 'content/quote', 'name/kebab', 'size/rem', 'color/hex'],
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment