Fix: allow block specific styles to be scss/sass files (#440)

Author: fabiankaegy

.changeset/lovely-grapes-call.md

@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix: Allow Block Specific stylesheets to be scss/sass files

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;
+	}
+}

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');
 	});
 });

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,
 		});