@ftdata/tokens/build.js

Fulltime Design Tokens

/* eslint-disable @typescript-eslint/no-var-requires */
const StyleDictionaryPackage = require('style-dictionary');
const _ = require('lodash');
const fs = require('fs');

function getStyleDictionaryConfig() {
    return {
        source: [`token-generators/**/*.json`],
        platforms: {
            'web/js': {
                transformGroup: 'tokens-js',
                buildPath: `dist/web/`,
                prefix: '',
                files: [
                    {
                        destination: 'tokens.js',
                        format: 'javascript/es6',
                    },
                ],
            },
            'web/ts': {
                transformGroup: 'tokens-js',
                buildPath: 'dist/web/',
                files: [
                    {
                        destination: 'tokens.ts',
                        format: 'javascript/es6',
                    },
                ],
            },
            'web/ts.d': {
                transformGroup: 'tokens-js',
                buildPath: 'dist/web/',
                files: [
                    {
                        destination: 'tokens.d.ts',
                        format: 'typings/es6',
                    },
                ],
            },
            'web/json': {
                transformGroup: 'tokens-json',
                buildPath: `dist/web/`,
                prefix: '',
                files: [
                    {
                        destination: 'tokens.json',
                        format: 'json/flat',
                    },
                ],
            },
            'web/css': {
                transformGroup: 'tokens-scss',
                buildPath: `dist/web/`,
                prefix: '',
                files: [
                    {
                        destination: 'tokens.css',
                        format: 'css/variables',
                    },
                ],
            },
            'web/scss': {
                transformGroup: 'tokens-scss',
                buildPath: `dist/web/`,
                prefix: '',
                files: [
                    {
                        destination: 'tokens.scss',
                        format: 'scss/variables',
                    },
                ],
            },
            ios: {
                transformGroup: 'tokens-ios',
                buildPath: `dist/ios/`,
                prefix: '',
                files: [
                    {
                        destination: 'tokens-all.plist',
                        format: 'ios/plist',
                    },
                ],
            },
            android: {
                transformGroup: 'tokens-android',
                buildPath: `dist/android/`,
                prefix: '',
                files: [
                    {
                        destination: 'tokens-all.xml',
                        format: 'android/xml',
                    },
                ],
            },
        },
    };
}

StyleDictionaryPackage.registerFormat({
    name: 'json/flat',
    formatter: function (dictionary) {
        return JSON.stringify(dictionary.allProperties, null, 2);
    },
});

const typingsES6Template = _.template(fs.readFileSync(`${__dirname}/templates/typings/es6.template`));
const CSSTemplate = _.template(fs.readFileSync(`${__dirname}/templates/typings/css.template`));

const iosTemplate = _.template(fs.readFileSync(__dirname + '/templates/ios-plist.template'));
const androidTemplate = _.template(fs.readFileSync(__dirname + '/templates/android-xml.template'));

StyleDictionaryPackage.registerFormat({
    name: 'css/variables',
    formatter: CSSTemplate,
});

StyleDictionaryPackage.registerFormat({
    name: 'typings/es6',
    formatter: typingsES6Template,
});

StyleDictionaryPackage.registerFormat({
    name: 'ios/plist',
    formatter: iosTemplate,
});

StyleDictionaryPackage.registerFormat({
    name: 'android/xml',
    formatter: androidTemplate,
});

StyleDictionaryPackage.registerFormat({
    name: 'android/colors',
    formatter: androidTemplate,
});

StyleDictionaryPackage.registerTransform({
    name: 'size/pxToPt',
    type: 'value',
    matcher: function (prop) {
        return prop.value.match(/^[\d.]+px$/);
    },
    transformer: function (prop) {
        return prop.value.replace(/px$/, 'pt');
    },
});

StyleDictionaryPackage.registerTransform({
    name: 'size/pxToDp',
    type: 'value',
    matcher: function (prop) {
        return prop.value.match(/^[\d.]+px$/);
    },
    transformer: function (prop) {
        return prop.value.replace(/px$/, 'dp');
    },
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-js',
    transforms: ['name/cti/constant', 'size/px', 'color/hex'],
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-json',
    transforms: ['attribute/cti', 'name/cti/kebab', 'size/px', 'color/css'],
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-scss',
    transforms: ['name/cti/kebab', 'time/seconds', 'size/px', 'color/css'],
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-ios',
    transforms: ['attribute/cti', 'name/cti/camel', 'size/pxToPt'],
});

StyleDictionaryPackage.registerTransformGroup({
    name: 'tokens-android',
    transforms: ['attribute/cti', 'name/cti/camel', 'size/pxToDp'],
});

StyleDictionaryPackage.transformGroup['android'];

console.log('Build started...');

['web', 'ios', 'android'].map(function (platform) {
    console.log('\n==============================================');
    console.log(`\nProcessing: [${platform}]`);

    const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(platform));

    if (platform === 'web') {
        StyleDictionary.buildPlatform('web/js');
        StyleDictionary.buildPlatform('web/json');
        StyleDictionary.buildPlatform('web/css');
        StyleDictionary.buildPlatform('web/scss');
        StyleDictionary.buildPlatform('web/ts');
        StyleDictionary.buildPlatform('web/ts.d');
    } else if (platform === 'ios') {
        StyleDictionary.buildPlatform('ios');
    } else if (platform === 'android') {
        StyleDictionary.buildPlatform('android');
    }

    console.log('\nEnd processing');
});

console.log('\n==============================================');
console.log('\nBuild completed!');