sdc-build-wp 3.0.8 → 3.2.0

package/.stylelintrc.json

@@ -0,0 +1,26 @@
+{
+	"plugins": [
+		"@stylistic/stylelint-plugin"
+	],
+	"rules": {
+		"@stylistic/indentation": "tab",
+		"@stylistic/max-empty-lines": 1,
+		"rule-empty-line-before": [
+			"always",
+			{
+				"ignore": [ "after-comment" ]
+			}
+		],
+		"@stylistic/block-opening-brace-space-before": "always-multi-line",
+		"@stylistic/block-opening-brace-newline-after": "always-multi-line",
+		"@stylistic/no-empty-first-line": true,
+		"@stylistic/selector-max-empty-lines": 0,
+		"color-function-notation": "modern",
+		"color-hex-length": "long",
+		"color-no-invalid-hex": true,
+		"color-named": "never",
+		"shorthand-property-no-redundant-values": true,
+		"@stylistic/number-leading-zero": "always",
+		"@stylistic/no-eol-whitespace": true
+	}
+}

package/index.js

@@ -4,10 +4,10 @@ import project from './lib/project.js';
 import parseArgs from 'minimist';
 const argv = parseArgs(process.argv.slice(2));
 import chokidar from 'chokidar';
-import glob from 'glob';
+import { glob } from 'glob';
 
 import bustCache from './lib/bustCache.js';
-import buildSass from './lib/style.js';
+import { buildSass, buildSassTheme } from './lib/style.js';
 import buildJS from './lib/scripts.js';
 import buildBlock from './lib/blocks.js';
 import buildImages from './lib/images.js';
@@ -97,6 +97,7 @@ if (argv.watch) {
 }
 
 function runSass() {
+	buildSassTheme();
 	for (var block of filesSass) {
 		buildSass(block.file, block.name, sassGlob);
 		bustFunctionsCache();

package/lib/browsersync.js

@@ -13,6 +13,7 @@ const buildBrowserSync = () => {
 			project.path + '/**/*.html',
 			project.path + '/**/*.json',
 		],
+		watchEvents: project.package.sdc?.browsersync?.watchEvents || ['add', 'change', 'unlink', 'addDir', 'unlinkDir'],
 		open: project.package.sdc?.open || false,
 		https: (process.env.SSL_KEY_PATH && process.env.SSL_CRT_PATH ? {
 			key: process.env.SSL_KEY_PATH,

package/lib/scripts.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import project from '../lib/project.js';
 import log from './logging.js';
-import esbuild from 'esbuild';
+import * as esbuild from 'esbuild';
 import { ESLint } from 'eslint';
 import { readFile } from 'fs/promises';
 

package/lib/style.js

@@ -10,10 +10,42 @@ import sortMQ from 'postcss-sort-media-queries';
 import stylelint from 'stylelint';
 import { promises } from 'fs';
 
-const buildColors = async () => {
+function camelToDash(camel) {
+	return camel.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+}
+
+const buildSassTheme = async () => {
 	try {
 		let theme = JSON.parse(await promises.readFile(project.path + '/theme.json'));
-		let themeFileData = `// This file is automatically generated. Do not edit.\n`;
+		let themeFileData = `// This file is automatically generated from theme.json. Do not edit.\n`;
+		if (theme.settings?.custom) {
+			for (var customAttribute in theme.settings.custom) {
+				if (customAttribute == 'dirDist') {
+					themeFileData += `$themeDirDist: "${theme.settings.custom[customAttribute]}"; // --wp--custom--${camelToDash(customAttribute)}\n`;
+				} else if (['breakpoints-rem', 'breakpoint-mobile'].includes(customAttribute)) {
+					// handled later in file - see 'fontSizeBase'
+				} else {
+					themeFileData += `$${customAttribute}: "${theme.settings.custom[customAttribute]}"; // --wp--custom--${camelToDash(customAttribute)}\n`;
+					//
+				}
+			}
+		}
+		if (theme.styles?.typography) {
+			if (theme.styles.typography.fontSize) {
+				let fontSizeBase = theme.styles.typography.fontSize;
+				themeFileData += `$font-size-base: ${theme.styles.typography.fontSize}; // --wp--preset--font-size\n`;
+				if (theme.settings.custom && theme.settings.custom['breakpoints-rem']) {
+					for (var breakpoint in theme.settings.custom['breakpoints-rem']) {
+						themeFileData += `$screen-${breakpoint}: ${theme.settings.custom['breakpoints-rem'][breakpoint]}rem;\n`;
+						themeFileData += `$screen-${breakpoint}-px: ${theme.settings.custom['breakpoints-rem'][breakpoint] * fontSizeBase.replace('px', '')}px;\n`;
+					}
+					if (theme.settings.custom['breakpoint-mobile']) {
+						themeFileData += `$mobile-breakpoint: $screen-${theme.settings.custom['breakpoint-mobile']};\n`;
+						themeFileData += `$mobile-breakpoint-px: $screen-${theme.settings.custom['breakpoint-mobile']}-px;\n`;
+					}
+				}
+			}
+		}
 		if (theme.settings?.typography?.fontFamilies) {
 			for (var fontFamily of theme.settings.typography.fontFamilies) {
 				themeFileData += `$${fontFamily['slug']}: ${fontFamily['fontFamily']}; // --wp--preset--font-family--${fontFamily['slug']}\n`;
@@ -31,16 +63,17 @@ const buildColors = async () => {
 		}
 		try {
 			await promises.writeFile(project.path + '/_src/style/partials/_theme.scss', themeFileData);
-		} catch {
+		} catch(error) {
+			console.error(error);
 			log('error', `Failed to write auto-generated _theme.scss - See above error.`);
 		}
-	} catch {
+	} catch(error) {
+		console.error(error);
 		log('error', `Failed to read theme.json - See above error.`);
 	}
 };
 
 const buildSass = async (entry, name, entriesToLint) => {
-	await buildColors();
 	let timerStart = Date.now();
 	let outFile = project.path + '/dist/' + name + '.min.css';
 	if (name.startsWith('blocks/')) {
@@ -48,7 +81,7 @@ const buildSass = async (entry, name, entriesToLint) => {
 	}
 	let entryLabel = outFile.replace(project.path, '');
 	stylelint.lint({
-		configFile: path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../.stylelintrc'),
+		configFile: path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../.stylelintrc.json'),
 		formatter: 'string',
 		files: entriesToLint || [entry],
 		customSyntax: 'postcss-scss',
@@ -99,4 +132,4 @@ const buildSass = async (entry, name, entriesToLint) => {
 	});
 };
 
-export default buildSass;
+export { buildSass, buildSassTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdc-build-wp",
-  "version": "3.0.8",
+  "version": "3.2.0",
   "description": "Custom WordPress build process.",
   "author": {
     "name": "Robert Sefer",
@@ -19,24 +19,25 @@
     "sdc-build-wp": "./index.js"
   },
   "dependencies": {
-    "@wordpress/scripts": "^26.6.0",
-    "autoprefixer": "^10.4.13",
-    "browser-sync": "^2.27.11",
-    "chalk": "^5.2.0",
-    "chokidar": "^3.5.3",
-    "esbuild": "^0.16.10",
-    "eslint": "^8.30.0",
-    "fs-extra": "^11.1.0",
-    "glob": "^8.0.3",
+    "@stylistic/stylelint-plugin": "^2.1.1",
+    "@wordpress/scripts": "^27.5.0",
+    "autoprefixer": "^10.4.19",
+    "browser-sync": "^3.0.2",
+    "chalk": "^5.3.0",
+    "chokidar": "^3.6.0",
+    "esbuild": "^0.20.2",
+    "eslint": "^8.57.0",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.12",
     "imagemin": "^8.0.1",
     "imagemin-jpegtran": "^7.0.0",
     "imagemin-pngquant": "^9.0.2",
     "imagemin-svgo": "^10.0.1",
-    "minimist": "^1.2.7",
-    "postcss": "^8.4.20",
-    "postcss-scss": "^4.0.6",
-    "postcss-sort-media-queries": "^4.3.0",
-    "sass": "^1.63.4",
-    "stylelint": "^14.16.0"
+    "minimist": "^1.2.8",
+    "postcss": "^8.4.38",
+    "postcss-scss": "^4.0.9",
+    "postcss-sort-media-queries": "^5.2.0",
+    "sass": "^1.72.0",
+    "stylelint": "^16.3.1"
   }
 }

package/.stylelintrc

@@ -1,23 +0,0 @@
-{
-	"rules": {
-		"indentation": "tab",
-		"max-empty-lines": 1,
-		"rule-empty-line-before": [
-			"always",
-			{
-				"ignore": [ "after-comment" ]
-			}
-		],
-		"block-opening-brace-space-before": "always-multi-line",
-		"block-opening-brace-newline-after": "always-multi-line",
-		"no-empty-first-line": true,
-		"selector-max-empty-lines": 0,
-		"color-function-notation": "modern",
-		"color-hex-length": "long",
-		"color-no-invalid-hex": true,
-		"color-named": "never",
-		"shorthand-property-no-redundant-values": true,
-		"number-leading-zero": "always",
-		"no-eol-whitespace": true
-	}
-}