sdc-build-wp 2.0.2 → 2.5.0

package/index.js

@@ -9,6 +9,7 @@ import glob from 'glob';
 import bustCache from './lib/bustCache.js';
 import buildSass from './lib/style.js';
 import buildJS from './lib/scripts.js';
+import buildBlocks from './lib/blocks.js';
 import buildImages from './lib/images.js';
 import buildFonts from './lib/fonts.js';
 import buildBrowserSync from './lib/browsersync.js';
@@ -20,9 +21,11 @@ let chokidarOpts = {
 let sassGlobPath = project.package?.sdc?.sassGlobPath || project.path + '/_src/style/**/*.scss';
 let sassGlob = glob.sync(sassGlobPath, {
 	ignore: [
-		project.path  + '/_src/style/partials/_colors.scss'
+		project.path  + '/_src/style/partials/_theme.scss'
 	]
 });
+let blockGlobPath = project.package?.sdc?.blockGlobPath || project.path + '/_src/blocks/**/*.{js,jsx}';
+let blockGlob = glob.sync(blockGlobPath);
 
 function bustFunctionsCache() {
 	bustCache(project.path + '/functions.php');
@@ -68,6 +71,15 @@ for (const [name, files] of Object.entries(entries)) {
 	});
 }
 
+buildBlocks(blockGlob);
+bustFunctionsCache();
+if (argv.watch) {
+	chokidar.watch(blockGlob, chokidarOpts).on('all', (event, path) => {
+		buildBlocks(blockGlob);
+		bustFunctionsCache();
+	});
+}
+
 filesSass.forEach((file) => {
 	buildSass(file, sassGlob);
 	bustFunctionsCache();

package/lib/blocks.js

@@ -0,0 +1,47 @@
+import path from 'path';
+import project from '../lib/project.js';
+import log from './logging.js';
+import esbuild from 'esbuild';
+import { ESLint } from 'eslint';
+import { readFile } from 'fs/promises';
+
+const buildBlocks = async (entries) => {
+	let timerStart = Date.now();
+	try {
+		const eslint = new ESLint({
+			baseConfig: JSON.parse(await readFile(new URL('../.eslintrc', import.meta.url))),
+			fix: true
+		});
+		const lintresults = await eslint.lintFiles(entries);
+		await ESLint.outputFixes(lintresults);
+		const formatter = await eslint.loadFormatter('stylish');
+		const formatterOutput = formatter.format(lintresults);
+		if (formatterOutput) { console.log(formatterOutput.replace(project.path + '/_src/blocks/', '')); }
+	} catch (error) {
+		console.log(error);
+		log('error', `Failed linting ${entries.length} blocks - See above error.`);
+		return false;
+	}
+	try {
+		const result = await esbuild.build({
+			platform: 'node',
+			entryPoints: entries,
+			bundle: true,
+			loader: { '.js' : 'jsx' },
+			minify: true,
+			outdir: 'dist/blocks/',
+			entryNames: '[dir]/[name].min',
+			plugins: [],
+			sourcemap: true
+		});
+		if (result.warnings.length > 0) {
+			log('warn', result.warnings);
+		}
+	} catch (error) {
+		log('error', `Failed building ${entries.length} blocks - See above error.`);
+		return false;
+	}
+	log('success', `Built ${entries.length} blocks in ${Date.now() - timerStart}ms`);
+};
+
+export default buildBlocks;

package/lib/style.js

@@ -13,18 +13,27 @@ import { promises } from 'fs';
 const buildColors = async () => {
 	try {
 		let theme = JSON.parse(await promises.readFile(project.path + '/theme.json'));
-		if (theme.settings?.color?.palette?.length > 0) {
-			let palette = theme.settings.color.palette;
-			let colorFileData = `// This file is automatically generated. Do not edit.\n`;
-			for (var color of palette) {
-				colorFileData += `$${color['slug']}: ${color['color']};\n`;
+		let themeFileData = `// This file is automatically generated. Do not edit.\n`;
+		if (theme.settings?.typography?.fontFamilies) {
+			for (var fontFamily of theme.settings.typography.fontFamilies) {
+				themeFileData += `$${fontFamily['slug']}: ${fontFamily['fontFamily']};\n`;
 			}
-			try {
-				await promises.writeFile(project.path + '/_src/style/partials/_colors.scss', colorFileData);
-			} catch {
-				log('error', `Failed to write auto-generated _colors.scss - See above error.`);
+		}
+		if (theme.settings?.color?.palette) {
+			for (var color of theme.settings.color.palette) {
+				themeFileData += `$${color['slug']}: ${color['color']};\n`;
+			}
+		}
+		if (theme.settings?.color?.gradients) {
+			for (var color of theme.settings.color.gradients) {
+				themeFileData += `$gradient-${color['slug']}: ${color['gradient']};\n`;
 			}
 		}
+		try {
+			await promises.writeFile(project.path + '/_src/style/partials/_theme.scss', themeFileData);
+		} catch {
+			log('error', `Failed to write auto-generated _theme.scss - See above error.`);
+		}
 	} catch {
 		log('error', `Failed to read theme.json - See above error.`);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdc-build-wp",
-  "version": "2.0.2",
+  "version": "2.5.0",
   "description": "Custom WordPress build process.",
   "author": {
     "name": "Robert Sefer",
@@ -19,23 +19,23 @@
     "sdc-build-wp": "./index.js"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.0",
-    "browser-sync": "^2.27.7",
-    "chalk": "^5.0.0",
-    "chokidar": "^3.5.2",
-    "esbuild": "^0.14.8",
-    "eslint": "^8.5.0",
-    "fs-extra": "^10.0.0",
-    "glob": "^7.2.0",
+    "autoprefixer": "^10.4.7",
+    "browser-sync": "^2.27.10",
+    "chalk": "^5.0.1",
+    "chokidar": "^3.5.3",
+    "esbuild": "^0.14.46",
+    "eslint": "^8.18.0",
+    "fs-extra": "^10.1.0",
+    "glob": "^8.0.3",
     "imagemin": "^8.0.1",
     "imagemin-jpegtran": "^7.0.0",
     "imagemin-pngquant": "^9.0.2",
     "imagemin-svgo": "^10.0.1",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.6",
     "postcss": "^8.4.5",
-    "postcss-scss": "^4.0.2",
+    "postcss-scss": "^4.0.4",
     "postcss-sort-media-queries": "^4.2.1",
-    "sass": "^1.45.1",
-    "stylelint": "^14.2.0"
+    "sass": "^1.52.3",
+    "stylelint": "^14.9.1"
   }
 }