add new test case

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,9 @@
+.wp-block-heading {
+	background-color: red;
+
+	@mixins 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');
+	});
+});

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

@@ -0,0 +1,3 @@
+.wp-block-paragraph {
+  background-color: blue;
+}

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

@@ -0,0 +1,3 @@
+.wp-block-tenup-accordion {
+	border: 1px solid green;
+}

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",