picocss/scripts/build-dev.js

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

const themeColors = [
	//? uncomment 1 theme you'd like to build for the dev environment.
	//"amber",
	//"blue",
	//"cyan",
	//"fuchsia",
	//"green",
	//"grey",
	//"indigo",
	"indigo",
	//"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(`[@picocss/pico] ✨ ${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);