outsystems-design-tokens/scripts/generate-tokens.js

Store the Design Tokens used on the Ionic Framework and Widgets Library

const {
    generateDeafultValue,
    generateShadowValue,
    generateFontSizeValue,
    generateFontFamilyValue,
    removeConsecutiveRepeatedWords,
    setSourceAndTargetPaths,
    setVariableTypePrefix
} = require('./utils.js');

let sourcePath = process.env.src;
const configPath = process.env.config;
let targetPath = process.env.dest;
const generateScss = process.env.scss === 'true';

console.log('Build started...');
console.log('\n==============================================');

async function generateTokens() {

    let sd;
    
    const StyleDictionary = (await import('style-dictionary')).default;

    if (configPath !== "undefined" && configPath !== undefined) {
        // APPLY THE CONFIGURATION
        sd = new StyleDictionary(configPath);
        // Set common defaults
        sd.log.warnings = 'disabled';
        sd.preprocessors = ["tokens-studio"],
        sd.usesDtcg = true;
    } else {
        // Set the source and target paths, according to env variables
        const finalPaths = setSourceAndTargetPaths(sourcePath, targetPath);
        sourcePath = finalPaths.sourcePath;        
        targetPath = finalPaths.targetPath;

        // CSS vanilla :root format
        StyleDictionary.registerFormat({
        name: 'rootFormat',
        format: async function({dictionary}){

            console.log('Generating CSS Custom Properties...');
    
            // We don't want to generate CSS Custom Properties for typography and composition tokens
            const excludedTypes = ['typography', 'composition'];

            setVariableTypePrefix('--');

            let currentCategory = '';

            /*
            * This will loop through all tokens and based on the type it will
            * call a utility function that will return the expected format for the CSS Variable
            */
            const prefixedVariables = dictionary.allTokens.filter((prop) => !excludedTypes.includes(prop['$type']))
            .map((prop) => {
                // Remove consecutive repeated words from the token name, like border-border-color
                const propName = removeConsecutiveRepeatedWords(prop.name);

                let _cssCustomProperty;

                // Create comment for token category
                if (prop.attributes.category !== currentCategory && prop.attributes.category !== undefined) {
                    currentCategory = prop.attributes.category;
                    _cssCustomProperty = `\n// ${currentCategory.charAt(0).toUpperCase() + currentCategory.slice(1)} \n`;
                } else {
                    _cssCustomProperty = '';
                }

                switch (prop.$type) {
                    case 'boxShadow':
                        // Generate expected format for elevation tokens
                        _cssCustomProperty += generateShadowValue(prop, propName);
                        break;
                    case 'fontFamilies':
                        // Generate expected format for font-family token
                        _cssCustomProperty += generateFontFamilyValue(prop, propName);
                        break;
                    case 'fontSizes':
                        // Generate expected format for font-size token
                        _cssCustomProperty += generateFontSizeValue(prop, propName);
                        break;
                    default:
                        // Generate expected format for any other token or color
                        _cssCustomProperty += generateDeafultValue(prop, propName);
                        break;         
                }

                return _cssCustomProperty;
            });

            return `:root {${prefixedVariables.join('\n')}\n}`;
        },
        });

        if(generateScss) {
            // SCSS Format
            StyleDictionary.registerFormat({
                name: 'scssFormat',
                format: async function({dictionary}){
        
                    console.log('Generating SCSS Variables...');
            
                    // We don't want to generate CSS Custom Properties for typography and composition tokens
                    const excludedTypes = ['typography', 'composition'];

                    setVariableTypePrefix('$');

                    let currentCategory = '';
        
                    /*
                    * This will loop through all tokens and based on the type it will
                    * call a utility function that will return the expected format for the CSS Variable
                    */
                    const prefixedVariables = dictionary.allTokens.filter((prop) => !excludedTypes.includes(prop['$type']))
                    .map((prop) => {
                        // Remove consecutive repeated words from the token name, like border-border-color
                        const propName = removeConsecutiveRepeatedWords(prop.name);
        
                        let _cssCustomProperty;

                        // Create comment for token category
                        if (prop.attributes.category !== currentCategory && prop.attributes.category !== undefined) {
                            currentCategory = prop.attributes.category;
                            _cssCustomProperty = `\n// ${currentCategory.charAt(0).toUpperCase() + currentCategory.slice(1)} \n`;
                        } else {
                            _cssCustomProperty = '';
                        }
        
                        switch (prop.$type) {
                            case 'boxShadow':
 
                                // Generate expected format for elevation tokens
                                _cssCustomProperty += generateShadowValue(prop, propName);
                                break;
                            case 'fontFamilies':
                                // Generate expected format for font-family token
                                _cssCustomProperty += generateFontFamilyValue(prop, propName);
                                break;
                            case 'fontSizes':
                                // Generate expected format for font-size token
                                _cssCustomProperty += generateFontSizeValue(prop, propName);
                                break;
                            default:
                                // Generate expected format for any other token or color
                                _cssCustomProperty += generateDeafultValue(prop, propName);
                                break;         
                        }
        
                        return _cssCustomProperty;
                    });

                    return prefixedVariables.join('\n');
                },
            });
        }

        // APPLY THE CONFIGURATION
        sd = new StyleDictionary({
            source: sourcePath,
            preprocessors: ["tokens-studio"],
            usesDtcg: true,
            log: {
                warnings: 'disabled',
            },
            platforms: {
            css: {
                prefix: process.env.prefix,
                transformGroup: "css",
                buildPath: targetPath,
                files: [
                {
                    destination: "_root.scss",
                    format: "rootFormat",
                },
                ...(generateScss ? [{
                    destination: "_variables.scss",
                    format: "scssFormat",
                }] : [])
                ]
            }
            }
        });
    }
    
    // FINALLY, BUILD ALL THE PLATFORMS
    await sd.buildAllPlatforms();

};

// Call the async function
(async () => {
    await generateTokens();
    console.log('\n==============================================');
    console.log('\nBuild completed!');
})();