From d1f77cbfd7a0b59f1c7a6b2bf4e5be89349a7d17 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Tue, 3 Dec 2024 14:26:47 -0600 Subject: [PATCH 1/4] transform sass asset file extensions --- packages/toolkit/utils/blocks.js | 33 +++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/toolkit/utils/blocks.js b/packages/toolkit/utils/blocks.js index 55395a7d..6bfe3ba1 100644 --- a/packages/toolkit/utils/blocks.js +++ b/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} 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} asset - The asset path to transform + * @returns {string|Array} + */ +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); }; From c4bdf3cecbf48d7b314b79155cde032acdd60111 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Tue, 3 Dec 2024 14:50:39 -0600 Subject: [PATCH 2/4] fix syntax error --- packages/toolkit/utils/blocks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolkit/utils/blocks.js b/packages/toolkit/utils/blocks.js index 6bfe3ba1..884cd59e 100644 --- a/packages/toolkit/utils/blocks.js +++ b/packages/toolkit/utils/blocks.js @@ -99,7 +99,7 @@ const transformBlockJson = (content, absoluteFilename) => { if (metadata[key]) { newMetadata[key] = transformSassAsset(metadata[key]); } - } + }); return JSON.stringify(newMetadata, null, 2); }; From 53dfcd00adf1ad9f77eb67b1f0a78ab01b251952 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Tue, 3 Dec 2024 14:54:31 -0600 Subject: [PATCH 3/4] add tests for sass asset extension transforms --- packages/toolkit/utils/__tests__/blocks.js | 47 ++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/toolkit/utils/__tests__/blocks.js b/packages/toolkit/utils/__tests__/blocks.js index 94c2fffa..19d888a9 100644 --- a/packages/toolkit/utils/__tests__/blocks.js +++ b/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, + ), + ); + }); }); From 6573d421303b7baa2c707df53d28f8266841a4a2 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Tue, 3 Dec 2024 15:10:22 -0600 Subject: [PATCH 4/4] changeset --- .changeset/hot-worms-compete.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/hot-worms-compete.md diff --git a/.changeset/hot-worms-compete.md b/.changeset/hot-worms-compete.md new file mode 100644 index 00000000..ceecccd0 --- /dev/null +++ b/.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