Transform Sass asset file extensions in block.json

.changeset/hot-worms-compete.md

@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix: transform file extension for .sass and .scss assets inside block.json files

packages/toolkit/utils/__tests__/blocks.js

@@ -162,4 +162,51 @@ describe('transformBlockJson', () => {
 			),
 		);
 	});
+
+	it('transforms sass and scss to css', () => {
+		expect(
+			transformBlockJson(
+				JSON.stringify({
+					style: 'file:./style.sass',
+					editorStyle: 'file:./editor.scss',
+					viewStyle: 'file:./view.sass',
+					version: '12345678',
+				}),
+				absoluteteFileName,
+			),
+		).toEqual(
+			JSON.stringify(
+				{
+					style: 'file:./style.css',
+					editorStyle: 'file:./editor.css',
+					viewStyle: 'file:./view.css',
+					version: '12345678',
+				},
+				null,
+				2,
+			),
+		);
+		expect(
+			transformBlockJson(
+				JSON.stringify({
+					style: ['file:./style.sass', 'file:./style.scss'],
+					editorStyle: ['file:./editor.sass', 'file:./editor.scss'],
+					viewStyle: ['file:./view.sass', 'file:./view.scss'],
+					version: '12345678',
+				}),
+				absoluteteFileName,
+			),
+		).toEqual(
+			JSON.stringify(
+				{
+					style: ['file:./style.css', 'file:./style.css'],
+					editorStyle: ['file:./editor.css', 'file:./editor.css'],
+					viewStyle: ['file:./view.css', 'file:./view.css'],
+					version: '12345678',
+				},
+				null,
+				2,
+			),
+		);
+	});
 });

packages/toolkit/utils/blocks.js

@@ -2,11 +2,12 @@ const path = require('path');
 const { getFileContentHash } = require('./file');
 
 const JS_ASSET_KEYS = ['script', 'editorScript', 'viewScript', 'viewScriptModule', 'scriptModule'];
+const CSS_ASSET_KEYS = ['style', 'editorStyle', 'viewStyle'];
 
 /**
  * Transform the asset path from `.ts or .tsx` to `.js`
  *
- * When a block.json file has a script or style property that points to a `.ts or .tsx` file,
+ * When a block.json file has a script property that points to a `.ts or .tsx` file,
  * this function will transform the path to point to the `.js` file instead.
  *
  * @param {string|Array<string>} asset - The asset path to transform
@@ -27,6 +28,30 @@ function transformTSAsset(asset) {
 	return Array.isArray(asset) ? asset.map(replaceExtension) : replaceExtension(asset);
 }
 
+/**
+ * Transform the asset path from `.sass or .scss` to `.css`
+ *
+ * When a block.json file has a style property that points to a `.sass or .scss` file,
+ * this function will transform the path to point to the `.css` file instead.
+ *
+ * @param {string|Array<string>} asset - The asset path to transform
+ * @returns {string|Array<string>}
+ */
+function transformSassAsset(asset) {
+	function replaceExtension(filePath) {
+		const isFilePath = filePath.startsWith('file:');
+		if (!isFilePath) {
+			return filePath;
+		}
+
+		// replace the `.sass or .scss` extension with `.css`
+		const cssPath = filePath.replace(/\.s[ac]ss$/, '.css');
+		return cssPath;
+	}
+
+	return Array.isArray(asset) ? asset.map(replaceExtension) : replaceExtension(asset);
+}
+
 const transformBlockJson = (content, absoluteFilename) => {
 	const rawMetadata = content.toString();
 	if (rawMetadata === '') {
@@ -70,6 +95,12 @@ const transformBlockJson = (content, absoluteFilename) => {
 		}
 	});
 
+	CSS_ASSET_KEYS.forEach((key) => {
+		if (metadata[key]) {
+			newMetadata[key] = transformSassAsset(metadata[key]);
+		}
+	});
+
 	return JSON.stringify(newMetadata, null, 2);
 };