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 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..940c17dd --- /dev/null +++ b/packages/toolkit/__tests__/build-project-block-specific-css/__fixtures__/assets/css/blocks/core/heading.css @@ -0,0 +1,8 @@ +.wp-block-heading { + + @mixin 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/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/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; + } " `; diff --git a/packages/toolkit/config/paths.config.js b/packages/toolkit/config/paths.config.js index 28937939..8613dc79 100644 --- a/packages/toolkit/config/paths.config.js +++ b/packages/toolkit/config/paths.config.js @@ -1,8 +1,9 @@ module.exports = { - srcDir: './assets/', - cssLoaderPaths: ['./assets/css', './includes/blocks'], - copyAssetsDir: './assets/', blocksDir: './includes/blocks/', - globalStylesDir: './assets/css/globals/', + blocksStyles: './assets/css/blocks/', + copyAssetsDir: './assets/', + cssLoaderPaths: ['./assets/css', './includes/blocks'], globalMixinsDir: './assets/css/mixins/', + globalStylesDir: './assets/css/globals/', + srcDir: './assets/', }; diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js index f08458f6..d9368586 100644 --- a/packages/toolkit/config/webpack/entry.js +++ b/packages/toolkit/config/webpack/entry.js @@ -9,12 +9,13 @@ 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, moduleBuildFiles, }) => { let additionalEntrypoints = {}; + if (useBlockAssets) { // override default block filenames filenames.block = 'blocks/[name].js'; @@ -105,13 +106,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).replace( + /\\/g, + '/', + ); + + // get all stylesheets in the blocks directory + const stylesheets = glob(`${blockStylesheetDirectory}/**/*.css`, { + absolute: true, + }); + + stylesheets.forEach((filePath) => { + const blockName = filePath + .replace(`${blockStylesheetDirectory}/`, '') + .replace(extname(filePath), ''); + + blockStyleEntryPoints[`autoenqueue/${blockName}`] = resolve(filePath); + }); + } + if (buildType === 'module') { Object.assign(moduleBuildFiles, additionalEntrypoints); return moduleBuildFiles; } // 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 7d44b0fa..08275b57 100644 --- a/packages/toolkit/utils/config.js +++ b/packages/toolkit/utils/config.js @@ -139,6 +139,7 @@ const getDefaultConfig = () => { typeof process.env.TENUP_NO_EXTERNALS === 'undefined' || !process.env.TENUP_NO_EXTERNALS, publicPath: process.env.ASSET_PATH || undefined, + loadBlockSpecificStyles: false, useBlockAssets: true, useScriptModules, include, 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..52b91150 --- /dev/null +++ b/projects/10up-theme/assets/css/blocks/core/paragraph.css @@ -0,0 +1,3 @@ +.wp-block-paragraph { + background-color: var(--c-black); +} 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..b8c3b4e8 --- /dev/null +++ b/projects/10up-theme/assets/css/blocks/tenup/accordion.css @@ -0,0 +1,3 @@ +.wp-block-tenup-accordion { + border: 1px solid var(--c-black); +} 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", 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;