picocss/scripts/build-themes.js

const sass = require("sass");
const path = require("path");
const fs = require("fs");

const themeColors = [
	"amber",
	"blue",
	"cyan",
	"fuchsia",
	"green",
	"grey",
	"indigo",
	"jade",
	"lime",
	"orange",
	"pink",
	"pumpkin",
	"purple",
	"red",
	"sand",
	"slate",
	"violet",
	"yellow",
	"zinc",
];

const tempScssFoldername = path.join(__dirname, "../.pico");
const cssFoldername = path.join(__dirname, "../css");

// Create a folder if it doesn't exist
const createFolderIfNotExists = (foldername) => {
	if (!fs.existsSync(foldername)) {
		fs.mkdirSync(foldername);
	}
};

// Empty a folder
const emptyFolder = (foldername) => {
	// Delete all files in the temp folder
	fs.readdirSync(foldername).forEach((file) => {
		fs.unlinkSync(path.join(foldername, file));
	});
};

// Create the temp folder if it doesn't exist
createFolderIfNotExists(tempScssFoldername);

// Empty the temp folder
emptyFolder(tempScssFoldername);

// Loop through the theme colors
themeColors.forEach((themeColor, colorIndex) => {
	// All the versions to generate
	const versions = [
		{
			name: "pico",
			content: `@use "../scss" with (
				$theme-color: "${themeColor}"
			);`,
		},
		{
			name: "pico.classless",
			content: `@use "../scss" with (
				$theme-color: "${themeColor}",
				$enable-semantic-container: true,
				$enable-classes: false
			);`,
		},
		{
			name: "pico.fluid.classless",
			content: `@use "../scss" with (
				$theme-color: "${themeColor}",
				$enable-semantic-container: true,
				$enable-viewport: false,
				$enable-classes: false
			);`,
		},
		{
			name: "pico.conditional",
			content: `@use "../scss" with (
				$theme-color: "${themeColor}",
				$parent-selector: ".pico"
			);`,
		},
		{
			name: "pico.classless.conditional",
			content: `@use "../scss" with (
				$theme-color: "${themeColor}",
				$enable-semantic-container: true,
				$enable-classes: false,
				$parent-selector: ".pico"
			);`,
		},
		{
			name: "pico.fluid.classless.conditional",
			content: `@use "../scss" with (
				$theme-color: "${themeColor}",
				$enable-semantic-container: true,
				$enable-viewport: false,
				$enable-classes: false,
				$parent-selector: ".pico"
			);`,
		},
	];

	const displayAsciiProgress = ({length, index, color}) => {
		const progress = Math.round((index / length) * 100);
		const bar = "■".repeat(progress / 10);
		const empty = "□".repeat(10 - progress / 10);
		process.stdout.write(`[@Yohn/PicoCSS] ✨ ${bar}${empty} ${color}\r`);
	};

	// Loop through the versions
	versions.forEach((version) => {
		displayAsciiProgress({
			length: themeColors.length,
			index: colorIndex,
			color: themeColor.charAt(0).toUpperCase() + themeColor.slice(1),
		});

		// Create the file
		fs.writeFileSync(
			path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
			version.content,
		);

		// Compile the file
		const result = sass.compile(
			path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
			{ outputStyle: "compressed" },
		);

		// Write the file
		fs.writeFileSync(path.join(cssFoldername, `${version.name}.${themeColor}.css`), result.css);

		// Clear the console - only if running in a TTY
		if (process.stdout.isTTY) {
			process.stdout.clearLine();
			process.stdout.cursorTo(0);
		}
	});
});

// Empty the temp folder
emptyFolder(tempScssFoldername);