From ab2197e02112110c206def17971a9c46405235ed Mon Sep 17 00:00:00 2001 From: Dmitry Mayorov Date: Mon, 22 Apr 2024 15:19:05 -0400 Subject: [PATCH 1/9] Add logic for block style entry points --- packages/toolkit/config/paths.config.js | 7 +++--- packages/toolkit/config/webpack/entry.js | 30 ++++++++++++++++++++++-- packages/toolkit/utils/config.js | 1 + 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/packages/toolkit/config/paths.config.js b/packages/toolkit/config/paths.config.js index a22f3eef..21879748 100644 --- a/packages/toolkit/config/paths.config.js +++ b/packages/toolkit/config/paths.config.js @@ -1,6 +1,7 @@ module.exports = { - srcDir: './assets/', - cssLoaderPaths: ['./assets/css', './includes/blocks'], - copyAssetsDir: './assets/', blocksDir: './includes/blocks/', + blocksStyles: './assets/css/blocks/', + copyAssetsDir: './assets/', + cssLoaderPaths: ['./assets/css', './includes/blocks'], + srcDir: './assets/', }; diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js index 5f66b3af..dd2ffbca 100644 --- a/packages/toolkit/config/webpack/entry.js +++ b/packages/toolkit/config/webpack/entry.js @@ -9,11 +9,12 @@ const removeDistFolder = (file) => { module.exports = ({ buildType = 'script', isPackage, - projectConfig: { devServer, paths, useBlockAssets, filenames }, + projectConfig: { devServer, paths, useBlockAssets, filenames, loadBlockSpecificStyles }, packageConfig: { packageType, source, main, umd, libraryName }, buildFiles, }) => { let additionalEntrypoints = {}; + if (useBlockAssets) { // override default block filenames filenames.block = 'blocks/[name].js'; @@ -104,12 +105,37 @@ module.exports = ({ }, {}); } + const blockStyleEntryPoints = {}; + + // Logic for loading CSS files per block. + if (loadBlockSpecificStyles) { + // get all stylesheets located in the assets/css/blocks directory and subdirectories + const blockStylesheetDirectory = resolve(process.cwd(), paths.blocksStyles); + + // get all stylesheets in the blocks directory + const stylesheets = glob( + // glob only accepts forward-slashes this is required to make things work on Windows + `${blockStylesheetDirectory.replace(/\\/g, '/')}/**/*.css`, + { + absolute: true, + }, + ); + + stylesheets.forEach((filePath) => { + const blockName = filePath + .replace(`${blockStylesheetDirectory}/`, '') + .replace(extname(filePath), ''); + + blockStyleEntryPoints[`autoenqueue/${blockName}`] = resolve(filePath); + }); + } + if (buildType === 'module') { return additionalEntrypoints; } // merge the new entrypoints with the existing ones - Object.assign(buildFiles, additionalEntrypoints); + Object.assign(buildFiles, additionalEntrypoints, blockStyleEntryPoints); if (isPackage) { const config = {}; diff --git a/packages/toolkit/utils/config.js b/packages/toolkit/utils/config.js index ca8554ad..c9cebb46 100644 --- a/packages/toolkit/utils/config.js +++ b/packages/toolkit/utils/config.js @@ -139,6 +139,7 @@ const getDefaultConfig = () => { !process.env.TENUP_NO_EXTERNALS, publicPath: process.env.ASSET_PATH || undefined, useBlockAssets: true, + loadBlockSpecificStyles: false, useBlockModules, include, }; From 3a5b540f84cb3aa5ab00e22b0d1051cf202065e6 Mon Sep 17 00:00:00 2001 From: Dmitry Mayorov Date: Fri, 2 Aug 2024 15:20:56 +0200 Subject: [PATCH 2/9] Add changeset --- .changeset/lemon-owls-invent.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lemon-owls-invent.md diff --git a/.changeset/lemon-owls-invent.md b/.changeset/lemon-owls-invent.md new file mode 100644 index 00000000..45794b01 --- /dev/null +++ b/.changeset/lemon-owls-invent.md @@ -0,0 +1,5 @@ +--- +"10up-toolkit": patch +--- + +Allow block-specific CSS entry points From 5aef3a22f8ebbe4a5c5e911c9599b88db0c16fc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 23 Sep 2024 20:31:30 +0200 Subject: [PATCH 3/9] add new test case --- .../.gitignore | 1 + .../assets/css/blocks/core/heading.css | 9 +++++ .../assets/css/frontend/styles.css | 10 ++++++ .../assets/css/globals/media-queries.css | 13 ++++++++ .../assets/css/mixins/margin-trim.css | 15 +++++++++ .../package.json | 13 ++++++++ .../build-project-block-specific-css/test.js | 33 +++++++++++++++++++ .../assets/css/blocks/core/paragraph.css | 3 ++ .../assets/css/blocks/example-block.css | 3 -- .../10up-theme/assets/css/blocks/index.css | 7 ---- .../assets/css/blocks/tenup/accordion.css | 3 ++ .../10up-theme/assets/css/frontend/style.css | 6 +--- projects/10up-theme/package.json | 1 + 13 files changed, 102 insertions(+), 15 deletions(-) create mode 100644 packages/toolkit/__tests__/build-project-block-specific-css/.gitignore create mode 100644 packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css create mode 100644 packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/frontend/styles.css create mode 100644 packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/globals/media-queries.css create mode 100644 packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/mixins/margin-trim.css create mode 100644 packages/toolkit/__tests__/build-project-block-specific-css/package.json create mode 100644 packages/toolkit/__tests__/build-project-block-specific-css/test.js create mode 100644 projects/10up-theme/assets/css/blocks/core/paragraph.css delete mode 100644 projects/10up-theme/assets/css/blocks/example-block.css delete mode 100644 projects/10up-theme/assets/css/blocks/index.css create mode 100644 projects/10up-theme/assets/css/blocks/tenup/accordion.css diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/.gitignore b/packages/toolkit/__tests__/build-project-block-specific-css/.gitignore new file mode 100644 index 00000000..0fa2fd4f --- /dev/null +++ b/packages/toolkit/__tests__/build-project-block-specific-css/.gitignore @@ -0,0 +1 @@ +./dist diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css new file mode 100644 index 00000000..c774cbfa --- /dev/null +++ b/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; + } +} diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/frontend/styles.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/frontend/styles.css new file mode 100644 index 00000000..0ee24254 --- /dev/null +++ b/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; + } +} diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/globals/media-queries.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/globals/media-queries.css new file mode 100644 index 00000000..27f4c715 --- /dev/null +++ b/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); diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/mixins/margin-trim.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/mixins/margin-trim.css new file mode 100644 index 00000000..f0ad06d5 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/package.json b/packages/toolkit/__tests__/build-project-block-specific-css/package.json new file mode 100644 index 00000000..f74c2a4c --- /dev/null +++ b/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/" + } + } +} diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/test.js b/packages/toolkit/__tests__/build-project-block-specific-css/test.js new file mode 100644 index 00000000..88c30da9 --- /dev/null +++ b/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'); + }); +}); diff --git a/projects/10up-theme/assets/css/blocks/core/paragraph.css b/projects/10up-theme/assets/css/blocks/core/paragraph.css new file mode 100644 index 00000000..24dad778 --- /dev/null +++ b/projects/10up-theme/assets/css/blocks/core/paragraph.css @@ -0,0 +1,3 @@ +.wp-block-paragraph { + background-color: blue; +} diff --git a/projects/10up-theme/assets/css/blocks/example-block.css b/projects/10up-theme/assets/css/blocks/example-block.css deleted file mode 100644 index e120b5fd..00000000 --- a/projects/10up-theme/assets/css/blocks/example-block.css +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Example block styles - */ diff --git a/projects/10up-theme/assets/css/blocks/index.css b/projects/10up-theme/assets/css/blocks/index.css deleted file mode 100644 index 8e3689b6..00000000 --- a/projects/10up-theme/assets/css/blocks/index.css +++ /dev/null @@ -1,7 +0,0 @@ -/** - * TenUpTheme: Block styles - * https://project-website.tld - * - */ - -/* @import url("example-block.css"); */ diff --git a/projects/10up-theme/assets/css/blocks/tenup/accordion.css b/projects/10up-theme/assets/css/blocks/tenup/accordion.css new file mode 100644 index 00000000..af97f4af --- /dev/null +++ b/projects/10up-theme/assets/css/blocks/tenup/accordion.css @@ -0,0 +1,3 @@ +.wp-block-tenup-accordion { + border: 1px solid green; +} diff --git a/projects/10up-theme/assets/css/frontend/style.css b/projects/10up-theme/assets/css/frontend/style.css index e20898cb..a1660986 100755 --- a/projects/10up-theme/assets/css/frontend/style.css +++ b/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"); */ diff --git a/projects/10up-theme/package.json b/projects/10up-theme/package.json index ab77a64d..d498871f 100644 --- a/projects/10up-theme/package.json +++ b/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", From 877b46d0d84a8e6a50534d0f664b4d78a88d2571 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 23 Sep 2024 20:34:45 +0200 Subject: [PATCH 4/9] update colors --- .../__fixtures__/assets/css/blocks/core/heading.css | 1 - projects/10up-theme/assets/css/blocks/core/paragraph.css | 2 +- projects/10up-theme/assets/css/blocks/tenup/accordion.css | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css index c774cbfa..03216cf0 100644 --- a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css +++ b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css @@ -1,5 +1,4 @@ .wp-block-heading { - background-color: red; @mixins margin-trim; diff --git a/projects/10up-theme/assets/css/blocks/core/paragraph.css b/projects/10up-theme/assets/css/blocks/core/paragraph.css index 24dad778..81ce119f 100644 --- a/projects/10up-theme/assets/css/blocks/core/paragraph.css +++ b/projects/10up-theme/assets/css/blocks/core/paragraph.css @@ -1,3 +1,3 @@ .wp-block-paragraph { - background-color: blue; + background-color: currentColor; } diff --git a/projects/10up-theme/assets/css/blocks/tenup/accordion.css b/projects/10up-theme/assets/css/blocks/tenup/accordion.css index af97f4af..4fcdbc9d 100644 --- a/projects/10up-theme/assets/css/blocks/tenup/accordion.css +++ b/projects/10up-theme/assets/css/blocks/tenup/accordion.css @@ -1,3 +1,3 @@ .wp-block-tenup-accordion { - border: 1px solid green; + border: 1px solid currentColor; } From 0d1e50ccd90aef44d44a80fcfdaa4622202c3d91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 23 Sep 2024 20:38:10 +0200 Subject: [PATCH 5/9] update color fix lint --- projects/10up-theme/assets/css/blocks/core/paragraph.css | 2 +- projects/10up-theme/assets/css/blocks/tenup/accordion.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/10up-theme/assets/css/blocks/core/paragraph.css b/projects/10up-theme/assets/css/blocks/core/paragraph.css index 81ce119f..52b91150 100644 --- a/projects/10up-theme/assets/css/blocks/core/paragraph.css +++ b/projects/10up-theme/assets/css/blocks/core/paragraph.css @@ -1,3 +1,3 @@ .wp-block-paragraph { - background-color: currentColor; + background-color: var(--c-black); } diff --git a/projects/10up-theme/assets/css/blocks/tenup/accordion.css b/projects/10up-theme/assets/css/blocks/tenup/accordion.css index 4fcdbc9d..b8c3b4e8 100644 --- a/projects/10up-theme/assets/css/blocks/tenup/accordion.css +++ b/projects/10up-theme/assets/css/blocks/tenup/accordion.css @@ -1,3 +1,3 @@ .wp-block-tenup-accordion { - border: 1px solid currentColor; + border: 1px solid var(--c-black); } From bf916b16362be63f4ebf6f71dad22c49b4690b2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 23 Sep 2024 20:46:46 +0200 Subject: [PATCH 6/9] fix remove @nest from specks --- .../__tests__/__fixtures__/accordion.css | 71 ++++++++++--------- projects/library-ts/src/style.css | 2 +- projects/library/src/style.css | 2 +- 3 files changed, 38 insertions(+), 37 deletions(-) diff --git a/packages/toolkit/config/__tests__/__fixtures__/accordion.css b/packages/toolkit/config/__tests__/__fixtures__/accordion.css index b875520e..5904b16d 100644 --- a/packages/toolkit/config/__tests__/__fixtures__/accordion.css +++ b/packages/toolkit/config/__tests__/__fixtures__/accordion.css @@ -5,51 +5,52 @@ :root { - --primary-font: 'Mr George', Arial, Helvetica, sans-serif; + --primary-font: "Mr George", arial, helvetica, sans-serif; } @font-face { - font-family: 'Mr George'; - src: url('./assets/fonts/MrGeorgeHeavy.ttf') format('truetype'); - font-weight: 900 + font-family: "Mr George"; + font-weight: 900; + src: url("./assets/fonts/MrGeorgeHeavy.ttf") format("truetype"); } @font-face { - font-family: 'Mr George'; - src: url('./assets/fonts/MrGeorge.ttf') format('truetype'); - font-weight: 400 + font-family: "Mr George"; + font-weight: 400; + src: url("./assets/fonts/MrGeorge.ttf") format("truetype"); } .accordion-header { - border-bottom: 1px solid #303030; - cursor: pointer; - font-size: 1em; - padding: 10px 0 10px 20px; - position: relative; - text-align: left; - width: 100%; - - &:before { - content: "+"; - left: 5px; - position: absolute; - top: 8px; - } - - &.is-active:before { - content: "-"; - } + border-bottom: 1px solid #303030; + cursor: pointer; + font-size: 1em; + padding: 10px 0 10px 20px; + position: relative; + text-align: left; + width: 100%; + + &::before { + content: "+"; + left: 5px; + position: absolute; + top: 8px; + } + + &.is-active::before { + content: "-"; + } } .accordion-content { - @nest .js & { - display: none; - visibility: hidden; - - &.is-active { - border-bottom: 1px solid #303030; - display: block; - visibility: visible; - } - } + + .js & { + display: none; + visibility: hidden; + + &.is-active { + border-bottom: 1px solid #303030; + display: block; + visibility: visible; + } + } } diff --git a/projects/library-ts/src/style.css b/projects/library-ts/src/style.css index c9a155b4..ed397cfa 100644 --- a/projects/library-ts/src/style.css +++ b/projects/library-ts/src/style.css @@ -22,7 +22,7 @@ } .accordion-content { - @nest .js & { + .js & { display: none; visibility: hidden; diff --git a/projects/library/src/style.css b/projects/library/src/style.css index 2e193c42..857e5dbe 100644 --- a/projects/library/src/style.css +++ b/projects/library/src/style.css @@ -38,7 +38,7 @@ } .accordion-content { - @nest .js & { + .js & { display: none; visibility: hidden; From efbe49c91e17290c573de9c36ae3f1b89f5ceae3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 23 Sep 2024 20:53:01 +0200 Subject: [PATCH 7/9] fix whitespace in snapshot --- .../__snapshots__/postscss.config.js.snap | 62 +++++++++---------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap b/packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap index 86295d84..7dd6b2fa 100644 --- a/packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap +++ b/packages/toolkit/config/__tests__/__snapshots__/postscss.config.js.snap @@ -183,45 +183,45 @@ exports[`postcss properly transforms css 1`] = ` exports[`postcss transforms accordion.css properly 1`] = ` ":root { - --primary-font: 'Mr George', Arial, Helvetica, sans-serif; + --primary-font: "Mr George", arial, helvetica, sans-serif; } @font-face { - font-family: 'Mr George'; - src: url('./assets/fonts/MrGeorgeHeavy.ttf') format('truetype'); - font-weight: 900 + font-family: "Mr George"; + font-weight: 900; + src: url("./assets/fonts/MrGeorgeHeavy.ttf") format("truetype"); } @font-face { - font-family: 'Mr George'; - src: url('./assets/fonts/MrGeorge.ttf') format('truetype'); - font-weight: 400 + font-family: "Mr George"; + font-weight: 400; + src: url("./assets/fonts/MrGeorge.ttf") format("truetype"); } .accordion-header { - border-bottom: 1px solid #303030; - cursor: pointer; - font-size: 1em; - padding: 10px 0 10px 20px; - position: relative; - text-align: left; - width: 100%; -} -.accordion-header:before { - content: "+"; - left: 5px; - position: absolute; - top: 8px; - } -.accordion-header.is-active:before { - content: "-"; - } -.js .accordion-content { - display: none; - visibility: hidden; + border-bottom: 1px solid #303030; + cursor: pointer; + font-size: 1em; + padding: 10px 0 10px 20px; + position: relative; + text-align: left; + width: 100%; } +.accordion-header::before { + content: "+"; + left: 5px; + position: absolute; + top: 8px; + } +.accordion-header.is-active::before { + content: "-"; + } +.js .accordion-content { + display: none; + visibility: hidden; + } .js .accordion-content.is-active { - border-bottom: 1px solid #303030; - display: block; - visibility: visible; - } + border-bottom: 1px solid #303030; + display: block; + visibility: visible; + } " `; From 11c8108ccf4d0fcd73016c8f3306758ac0936973 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 23 Sep 2024 20:58:06 +0200 Subject: [PATCH 8/9] fix mixin spelling --- .../__fixtures__/assets/css/blocks/core/heading.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css index 03216cf0..940c17dd 100644 --- a/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css +++ b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css @@ -1,6 +1,6 @@ .wp-block-heading { - @mixins margin-trim; + @mixin margin-trim; @media (--bp-small) { padding: 40px; From 2c116e6f949674f5a451ad7be668341a148017b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=ADcholas=20Oliveira?= Date: Mon, 23 Sep 2024 18:25:29 -0300 Subject: [PATCH 9/9] fix: tests on windows --- packages/toolkit/config/webpack/entry.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js index efc0a347..d9368586 100644 --- a/packages/toolkit/config/webpack/entry.js +++ b/packages/toolkit/config/webpack/entry.js @@ -111,16 +111,15 @@ module.exports = ({ // Logic for loading CSS files per block. if (loadBlockSpecificStyles) { // get all stylesheets located in the assets/css/blocks directory and subdirectories - const blockStylesheetDirectory = resolve(process.cwd(), paths.blocksStyles); + const blockStylesheetDirectory = resolve(process.cwd(), paths.blocksStyles).replace( + /\\/g, + '/', + ); // get all stylesheets in the blocks directory - const stylesheets = glob( - // glob only accepts forward-slashes this is required to make things work on Windows - `${blockStylesheetDirectory.replace(/\\/g, '/')}/**/*.css`, - { - absolute: true, - }, - ); + const stylesheets = glob(`${blockStylesheetDirectory}/**/*.css`, { + absolute: true, + }); stylesheets.forEach((filePath) => { const blockName = filePath