generate.js

/* eslint-disable no-console */
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable global-require */
/* eslint-disable guard-for-in */
const { paramCase, camelCase } = require('change-case');
const { join, dirname } = require('path');
const { writeFile, mkdir } = require('fs');
const { promisify } = require('util');

const writeFileAsync = promisify(writeFile);
const mkdirpAsync = promisify(mkdir);
const writeToShadowDir = (file, content) =>
    mkdirpAsync(dirname(file), { recursive: true }).then(() => writeFileAsync(file, content, 'utf-8'));
const themesFolder = join(process.cwd(), 'generated');
const themes = require('./palette');

const jsToken = (token, value, { noVar } = {}) =>
    `export const ${camelCase(token)} = '${noVar ? value : `var(--${paramCase(token)})`}';`;
const cssToken = (token, value, tabs = 8) => `${' '.repeat(tabs)}--${paramCase(token)}: ${value};\n`;

const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1);

const getThemeConstName = (theme) => `${capitalizeFirstLetter(theme)}Theme`;

const jsTokensFile = (theme, file, { noVar } = {}) => {
    const fileContent = ['// AUTOGENERATED CONTENT\n'];

    for (const token in theme) {
        fileContent.push(jsToken(token, theme[token], { noVar }));
        fileContent.push('\n');
    }

    return writeToShadowDir(file, fileContent.join(''));
};

const SCTokensFile = (theme, file, tabs = 4) => {
    const fileContent = [
        '// AUTOGENERATED CONTENT\n',
        "import { createGlobalStyle } from 'styled-components';\n\n",
        'export const theme = createGlobalStyle`\n',
        `${' '.repeat(tabs)}:root {\n`,
    ];

    for (const token in theme) {
        if (!theme[token].value) fileContent.push(cssToken(token, theme[token]));
    }

    fileContent.push(`${' '.repeat(tabs)}}\n`);
    fileContent.push('`;\n');
    fileContent.push('export default theme;\r\n');

    return writeToShadowDir(file, fileContent.join(''));
};

const CssTokensFile = (theme, file) => {
    const fileContent = ['/* AUTOGENERATED CONTENT */\n', ':root {\n'];

    for (const token in theme) {
        if (!theme[token].value) fileContent.push(cssToken(token, theme[token], 4));
    }

    fileContent.push('}\r\n');

    return writeToShadowDir(file, fileContent.join(''));
};

const indexFile = (themes, file) => {
    const fileContent = ['// AUTOGENERATED CONTENT\n', "export * from './colors';\n"];

    themes.forEach((theme) => {
        fileContent.push(`export { theme as ${getThemeConstName(theme)} } from './${theme}'\n`);
    });

    return writeToShadowDir(file, fileContent.join(''));
};

(async (t) => {
    const writers = [];

    // eslint-disable-next-line no-shadow
    const themes = Object.keys(t);
    for (const theme in t) {
        for (const token in t[theme]) {
            themes.forEach((themeName) => {
                if (!t[themeName][token]) {
                    console.log('\n');
                    console.warn(`😞 Token: "${token}" doesn't exist in theme "${themeName}"!`);
                }
            });
        }
    }

    for (const theme in t) {
        writers.push(SCTokensFile(t[theme], join(themesFolder, `${theme}.ts`)));
        writers.push(CssTokensFile(t[theme], join(themesFolder, `${theme}.css`)));
    }

    const tokensSchema = t[themes[0]];
    writers.push(jsTokensFile(tokensSchema, join(themesFolder, 'colors.ts')));

    writers.push(indexFile(themes, join(themesFolder, 'index.ts')));

    await Promise.all(writers);
})(themes);