Add logic for block style entry points

packages/toolkit/config/paths.config.js

@@ -1,6 +1,7 @@
 module.exports = {
-	srcDir: './assets/',
-	cssLoaderPaths: ['./assets/css', './includes/blocks'],
-	copyAssetsDir: './assets/',
 	blocksDir: './includes/blocks/',
+	blocksStyles: './assets/css/blocks/',
+	copyAssetsDir: './assets/',
+	cssLoaderPaths: ['./assets/css', './includes/blocks'],
+	srcDir: './assets/',
 };

packages/toolkit/config/webpack/entry.js

@@ -9,11 +9,12 @@ const removeDistFolder = (file) => {
 module.exports = ({
 	buildType = 'script',
 	isPackage,
-	projectConfig: { devServer, paths, useBlockAssets, filenames },
+	projectConfig: { devServer, paths, useBlockAssets, filenames, loadBlockSpecificStyles },
 	packageConfig: { packageType, source, main, umd, libraryName },
 	buildFiles,
 }) => {
 	let additionalEntrypoints = {};
+
 	if (useBlockAssets) {
 		// override default block filenames
 		filenames.block = 'blocks/[name].js';
@@ -104,12 +105,37 @@ module.exports = ({
 		}, {});
 	}
 
+	const blockStyleEntryPoints = {};
+
+	// Logic for loading CSS files per block.
+	if (loadBlockSpecificStyles) {
+		// get all stylesheets located in the assets/css/blocks directory and subdirectories
+		const blockStylesheetDirectory = resolve(process.cwd(), paths.blocksStyles);
+
+		// get all stylesheets in the blocks directory
+		const stylesheets = glob(
+			// glob only accepts forward-slashes this is required to make things work on Windows
+			`${blockStylesheetDirectory.replace(/\\/g, '/')}/**/*.css`,
+			{
+				absolute: true,
+			},
+		);
+
+		stylesheets.forEach((filePath) => {
+			const blockName = filePath
+				.replace(`${blockStylesheetDirectory}/`, '')
+				.replace(extname(filePath), '');
+
+			blockStyleEntryPoints[`autoenqueue/${blockName}`] = resolve(filePath);
+		});
+	}
+
 	if (buildType === 'module') {
 		return additionalEntrypoints;
 	}
 
 	// merge the new entrypoints with the existing ones
-	Object.assign(buildFiles, additionalEntrypoints);
+	Object.assign(buildFiles, additionalEntrypoints, blockStyleEntryPoints);
 
 	if (isPackage) {
 		const config = {};

packages/toolkit/utils/config.js

@@ -139,6 +139,7 @@ const getDefaultConfig = () => {
 			!process.env.TENUP_NO_EXTERNALS,
 		publicPath: process.env.ASSET_PATH || undefined,
 		useBlockAssets: true,
+		loadBlockSpecificStyles: false,
 		useBlockModules,
 		include,
 	};