From 394b2dbc3d030cdcebed85b878dad0e544b2da90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20K=C3=A4gy?= <mail@fabian-kaegy.de>
Date: Thu, 27 Feb 2025 00:17:32 +0100
Subject: [PATCH] Fix: allow block specific styles to be scss/sass files (#440)

---
 .changeset/lovely-grapes-call.md              |  5 +++++
 .../assets/css/blocks/core/group.scss         |  6 ++++++
 .../build-project-block-specific-css/test.js  | 20 +++++++++++++++----
 packages/toolkit/config/webpack/entry.js      |  2 +-
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/lovely-grapes-call.md
 create mode 100644 packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/group.scss

diff --git a/.changeset/lovely-grapes-call.md b/.changeset/lovely-grapes-call.md
new file mode 100644
index 00000000..ef8c3a9a
--- /dev/null
+++ b/.changeset/lovely-grapes-call.md
@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix: Allow Block Specific stylesheets to be scss/sass files
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/group.scss b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/group.scss
new file mode 100644
index 00000000..4ca74764
--- /dev/null
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/group.scss
@@ -0,0 +1,6 @@
+.wp-block-group {
+
+	@media (--bp-small) {
+		padding: 40px;
+	}
+}
diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/test.js b/packages/toolkit/__tests__/build-project-block-specific-css/test.js
index 88c30da9..63317ddc 100644
--- a/packages/toolkit/__tests__/build-project-block-specific-css/test.js
+++ b/packages/toolkit/__tests__/build-project-block-specific-css/test.js
@@ -9,7 +9,7 @@ describe('build a project', () => {
 			cwd: __dirname,
 		});
 
-		const frontendCss = path.join(
+		const headingBlockCSS = path.join(
 			__dirname,
 			'dist',
 			'blocks',
@@ -18,16 +18,28 @@ describe('build a project', () => {
 			'heading.css',
 		);
 
-		expect(fs.existsSync(frontendCss)).toBeTruthy();
+		const groupBlockCSS = path.join(
+			__dirname,
+			'dist',
+			'blocks',
+			'autoenqueue',
+			'core',
+			'group.css',
+		);
+
+		expect(fs.existsSync(headingBlockCSS)).toBeTruthy();
+		expect(fs.existsSync(groupBlockCSS)).toBeTruthy();
 		expect(
 			fs.existsSync(
 				path.join(__dirname, 'dist', 'blocks', 'autoenqueue', 'core', 'heading.asset.php'),
 			),
 		).toBeTruthy();
 
-		const compiledCSS = fs.readFileSync(frontendCss).toString();
+		const compiledHeadingBlockCSS = fs.readFileSync(headingBlockCSS).toString();
+		const compiledGroupBlockCSS = fs.readFileSync(groupBlockCSS).toString();
 
 		// expect the compiled CSS to contain "min-width: 30em"
-		expect(compiledCSS).toMatch('min-width: 30em');
+		expect(compiledHeadingBlockCSS).toMatch('min-width: 30em');
+		expect(compiledGroupBlockCSS).toMatch('min-width: 30em');
 	});
 });
diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js
index d9368586..b75cb996 100644
--- a/packages/toolkit/config/webpack/entry.js
+++ b/packages/toolkit/config/webpack/entry.js
@@ -117,7 +117,7 @@ module.exports = ({
 		);
 
 		// get all stylesheets in the blocks directory
-		const stylesheets = glob(`${blockStylesheetDirectory}/**/*.css`, {
+		const stylesheets = glob(`${blockStylesheetDirectory}/**/*.{css,scss,sass}`, {
 			absolute: true,
 		});