Simple node rig for using code-split javscript files to generate a theme.json

dot-scripts-theme.js

#!/usr/bin/env node
const { writeFileSync } = require('fs');
const { join } = require('path');
const themeConfig = require('../.source/theme');

console.log('🧱  Building theme.json...');

try {
	writeFileSync(
		join(__dirname, '../theme.json'),
		JSON.stringify(themeConfig, null, 4)
	);
	console.log('✅  theme.json built');
} catch (error) {
	console.log('🛑  failed to create theme.json file.\n\nError:');
	console.dir(error);
}

dot-source-theme-index.js

const customTemplates = require('./custom-templates');
const settings = require('./settings');
const styles = require('./styles');
const templateParts = require('./template-parts');

/**
 * 🎙 Theme Configuration 🎙
 *
 * Generates the theme.json file.
 */
module.exports = {
	$schema: `https://schemas.wp.org/trunk/theme.json`,
	version: 2,
	customTemplates,
	settings,
	styles,
	templateParts,
};

package.json

{
    "devDependencies": {
        "npm-watch": "^0.11.0",
        "rimraf": "^4.1.1",
    },
    "scripts": {
        "theme": "rimraf ./theme.json && node .scripts/theme.js",
        "theme:watch": "npm-watch theme"
    },
    "watch": {
        "theme": {
            "patterns": [
                ".source/theme"
            ],
            "extensions": "js"
        },
    }
}

theme-styles.js

#!/usr/bin/env node

const { writeFileSync, mkdirSync } = require('fs');
const { join, basename } = require('path');

const { sync } = require('require-glob');

const srcDir = join(__dirname, '../.source/theme-styles');
const stylesDir = join(__dirname, '../styles');

const makeStyleJSON = (file) => {
	const filename = basename(file.path, '.js') + '.json';
	console.log('🎨  Making', filename);
	try {
		writeFileSync(
			join(stylesDir, filename),
			JSON.stringify(file.exports, null, 4)
		);
	} catch (err) {
		console.log('⚠️  Issue making', basename(file.path, '.js'));
	}
};

console.log('🌈  Building Style Variations...');
mkdirSync(stylesDir, { recursive: true });
sync(
	'./*js', // relative to cwd arg not this file
	{
		cwd: srcDir,
		reducer: (options, result, fileObject) => {
			makeStyleJSON(fileObject);
		},
	}
);
console.log('✅  Theme Style Variations built');