Add logic for block style entry points

.changeset/lemon-owls-invent.md

@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Allow block-specific CSS entry points

packages/toolkit/__tests__/build-project-block-specific-css/.gitignore

@@ -0,0 +1 @@
+./dist

packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css

@@ -0,0 +1,8 @@
+.wp-block-heading {
+
+	@mixin margin-trim;
+
+	@media (--bp-small) {
+		padding: 40px;
+	}
+}

packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/frontend/styles.css

@@ -0,0 +1,10 @@
+html {
+	background: #f5f5f5;
+	padding: 20px;
+
+	@mixin margin-trim;
+
+	@media (--bp-small) {
+		padding: 40px;
+	}
+}

packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/globals/media-queries.css

@@ -0,0 +1,13 @@
+/*
+ * Media Queries
+ */
+ @custom-media --bp-tiny ( min-width: 25em ); /* 400px */
+ @custom-media --bp-small ( min-width: 30em ); /* 480px */
+ @custom-media --bp-medium ( min-width: 48em ); /* 768px */
+ @custom-media --bp-large ( min-width: 64em ); /* 1024px */
+ @custom-media --bp-xlarge ( min-width: 80em ); /* 1280px */
+ @custom-media --bp-xxlarge ( min-width: 90em ); /* 1440px */
+
+ /* WP Core Breakpoints (used for the admin bar for example) */
+ @custom-media --wp-small ( min-width: 600px );
+ @custom-media --wp-medium-max (max-width: 782px);

packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/mixins/margin-trim.css

@@ -0,0 +1,15 @@
+@define-mixin margin-trim {
+	margin-trim: block;
+
+	/* Fallback for browsers that don't support margin-trim */
+	@supports not (margin-trim: block) {
+
+		& > *:first-child {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

packages/toolkit/__tests__/build-project-block-specific-css/package.json

@@ -0,0 +1,13 @@
+{
+	"name": "test-build-project-global-css",
+	"10up-toolkit": {
+		"loadBlockSpecificStyles": true,
+		"paths": {
+			"srcDir": "./__fixtures__/assets/",
+			"blocksStyles": "./__fixtures__/assets/css/blocks/",
+			"cssLoaderPaths": ["./__fixtures__/assets/css", "./includes/blocks"],
+			"globalStylesDir": "./__fixtures__/assets/css/globals/",
+			"globalMixinsDir": "./__fixtures__/assets/css/mixins/"
+		}
+	}
+}

packages/toolkit/__tests__/build-project-block-specific-css/test.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import spawn from 'cross-spawn';
+import fs from 'fs';
+import path from 'path';
+
+describe('build a project', () => {
+	it('builds and compiles css with global css', async () => {
+		spawn.sync('node', ['../../scripts/build'], {
+			cwd: __dirname,
+		});
+
+		const frontendCss = path.join(
+			__dirname,
+			'dist',
+			'blocks',
+			'autoenqueue',
+			'core',
+			'heading.css',
+		);
+
+		expect(fs.existsSync(frontendCss)).toBeTruthy();
+		expect(
+			fs.existsSync(
+				path.join(__dirname, 'dist', 'blocks', 'autoenqueue', 'core', 'heading.asset.php'),
+			),
+		).toBeTruthy();
+
+		const compiledCSS = fs.readFileSync(frontendCss).toString();
+
+		// expect the compiled CSS to contain "min-width: 30em"
+		expect(compiledCSS).toMatch('min-width: 30em');
+	});
+});

packages/toolkit/config/__tests__/__fixtures__/accordion.css

@@ -5,51 +5,52 @@
 
 
 :root {
-    --primary-font: 'Mr George', Arial, Helvetica, sans-serif;
+	--primary-font: "Mr George", arial, helvetica, sans-serif;
 }
 
 @font-face {
-    font-family: 'Mr George';
-    src: url('./assets/fonts/MrGeorgeHeavy.ttf') format('truetype');
-    font-weight: 900
+	font-family: "Mr George";
+	font-weight: 900;
+	src: url("./assets/fonts/MrGeorgeHeavy.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Mr George';
-    src: url('./assets/fonts/MrGeorge.ttf') format('truetype');
-    font-weight: 400
+	font-family: "Mr George";
+	font-weight: 400;
+	src: url("./assets/fonts/MrGeorge.ttf") format("truetype");
 }
 
 .accordion-header {
-  border-bottom: 1px solid #303030;
-  cursor: pointer;
-  font-size: 1em;
-  padding: 10px 0 10px 20px;
-  position: relative;
-  text-align: left;
-  width: 100%;
-
-  &:before {
-    content: "+";
-    left: 5px;
-    position: absolute;
-    top: 8px;
-  }
-
-  &.is-active:before {
-    content: "-";
-  }
+	border-bottom: 1px solid #303030;
+	cursor: pointer;
+	font-size: 1em;
+	padding: 10px 0 10px 20px;
+	position: relative;
+	text-align: left;
+	width: 100%;
+
+	&::before {
+		content: "+";
+		left: 5px;
+		position: absolute;
+		top: 8px;
+	}
+
+	&.is-active::before {
+		content: "-";
+	}
 }
 
 .accordion-content {
-  @nest .js & {
-    display: none;
-    visibility: hidden;
-
-    &.is-active {
-      border-bottom: 1px solid #303030;
-      display: block;
-      visibility: visible;
-    }
-  }
+
+	.js & {
+		display: none;
+		visibility: hidden;
+
+		&.is-active {
+			border-bottom: 1px solid #303030;
+			display: block;
+			visibility: visible;
+		}
+	}
 }

packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap

@@ -183,45 +183,45 @@ exports[`postcss properly transforms css 1`] = `
 
 exports[`postcss transforms accordion.css properly 1`] = `
 ":root {
-    --primary-font: 'Mr George', Arial, Helvetica, sans-serif;
+	--primary-font: "Mr George", arial, helvetica, sans-serif;
 }
 @font-face {
-    font-family: 'Mr George';
-    src: url('./assets/fonts/MrGeorgeHeavy.ttf') format('truetype');
-    font-weight: 900
+	font-family: "Mr George";
+	font-weight: 900;
+	src: url("./assets/fonts/MrGeorgeHeavy.ttf") format("truetype");
 }
 @font-face {
-    font-family: 'Mr George';
-    src: url('./assets/fonts/MrGeorge.ttf') format('truetype');
-    font-weight: 400
+	font-family: "Mr George";
+	font-weight: 400;
+	src: url("./assets/fonts/MrGeorge.ttf") format("truetype");
 }
 .accordion-header {
-  border-bottom: 1px solid #303030;
-  cursor: pointer;
-  font-size: 1em;
-  padding: 10px 0 10px 20px;
-  position: relative;
-  text-align: left;
-  width: 100%;
-}
-.accordion-header:before {
-    content: "+";
-    left: 5px;
-    position: absolute;
-    top: 8px;
-  }
-.accordion-header.is-active:before {
-    content: "-";
-  }
-.js .accordion-content {
-    display: none;
-    visibility: hidden;
+	border-bottom: 1px solid #303030;
+	cursor: pointer;
+	font-size: 1em;
+	padding: 10px 0 10px 20px;
+	position: relative;
+	text-align: left;
+	width: 100%;
 }
+.accordion-header::before {
+		content: "+";
+		left: 5px;
+		position: absolute;
+		top: 8px;
+	}
+.accordion-header.is-active::before {
+		content: "-";
+	}
+.js .accordion-content {
+		display: none;
+		visibility: hidden;
+	}
 .js .accordion-content.is-active {
-      border-bottom: 1px solid #303030;
-      display: block;
-      visibility: visible;
-    }
+			border-bottom: 1px solid #303030;
+			display: block;
+			visibility: visible;
+		}
 "
 `;
 

packages/toolkit/config/paths.config.js

@@ -1,8 +1,9 @@
 module.exports = {
-	srcDir: './assets/',
-	cssLoaderPaths: ['./assets/css', './includes/blocks'],
-	copyAssetsDir: './assets/',
 	blocksDir: './includes/blocks/',
-	globalStylesDir: './assets/css/globals/',
+	blocksStyles: './assets/css/blocks/',
+	copyAssetsDir: './assets/',
+	cssLoaderPaths: ['./assets/css', './includes/blocks'],
 	globalMixinsDir: './assets/css/mixins/',
+	globalStylesDir: './assets/css/globals/',
+	srcDir: './assets/',
 };

packages/toolkit/config/webpack/entry.js

@@ -9,12 +9,13 @@ 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,
 	moduleBuildFiles,
 }) => {
 	let additionalEntrypoints = {};
+
 	if (useBlockAssets) {
 		// override default block filenames
 		filenames.block = 'blocks/[name].js';
@@ -105,13 +106,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).replace(
+			/\\/g,
+			'/',
+		);
+
+		// get all stylesheets in the blocks directory
+		const stylesheets = glob(`${blockStylesheetDirectory}/**/*.css`, {
+			absolute: true,
+		});
+
+		stylesheets.forEach((filePath) => {
+			const blockName = filePath
+				.replace(`${blockStylesheetDirectory}/`, '')
+				.replace(extname(filePath), '');
+
+			blockStyleEntryPoints[`autoenqueue/${blockName}`] = resolve(filePath);
+		});
+	}
+
 	if (buildType === 'module') {
 		Object.assign(moduleBuildFiles, additionalEntrypoints);
 		return moduleBuildFiles;
 	}
 
 	// 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 = () => {
 			typeof process.env.TENUP_NO_EXTERNALS === 'undefined' ||
 			!process.env.TENUP_NO_EXTERNALS,
 		publicPath: process.env.ASSET_PATH || undefined,
+		loadBlockSpecificStyles: false,
 		useBlockAssets: true,
 		useScriptModules,
 		include,

projects/10up-theme/assets/css/blocks/core/paragraph.css

@@ -0,0 +1,3 @@
+.wp-block-paragraph {
+	background-color: var(--c-black);
+}

projects/10up-theme/assets/css/blocks/tenup/accordion.css

@@ -0,0 +1,3 @@
+.wp-block-tenup-accordion {
+	border: 1px solid var(--c-black);
+}

projects/10up-theme/assets/css/frontend/style.css

@@ -16,7 +16,7 @@
 html {
 	background: #f5f5f5;
 	padding: 20px;
-	
+
 	@mixin margin-trim;
 
 	@media (--bp-small) {
@@ -39,7 +39,3 @@ p {
 /* Components */
 
 /* @import url("components/index.css"); */
-
-/* Gutenberg blocks */
-
-/* @import url("../blocks/index.css"); */

projects/10up-theme/package.json

@@ -35,6 +35,7 @@
   "10up-toolkit": {
     "useBlockAssets": true,
     "useScriptModules": true,
+    "loadBlockSpecificStyles": true,
     "entry": {
       "admin": "./assets/js/admin/admin.js",
       "frontend": "./assets/js/frontend/frontend.js",