diff --git a/package-lock.json b/package-lock.json index 80168f3..da96a5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17870,6 +17870,15 @@ "postcss": "^8.4.32" } }, + "node_modules/postcss-prefixwrap": { + "version": "1.57.0", + "resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.57.0.tgz", + "integrity": "sha512-G1QMBJ30CbWCzfiwAv4HEkRG3Q6b4TEEglw/YsGH/wCc6rMklRkRH5DVDCqL8kqIX/q9/bwHnbeMfzLt5kL0Bw==", + "license": "MIT", + "peerDependencies": { + "postcss": "*" + } + }, "node_modules/postcss-reduce-initial": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.5.tgz", @@ -22753,6 +22762,7 @@ "@vitejs/plugin-react": "^5.0.4", "@yardinternet/vite-plugin-gutenberg-blocks": "^2.5.0", "laravel-vite-plugin": "^2.0.1", + "postcss-prefixwrap": "^1.57.0", "vite-plugin-externals": "^0.6.2" }, "optionalDependencies": { diff --git a/packages/vite-config/package.json b/packages/vite-config/package.json index f04d981..4be4719 100644 --- a/packages/vite-config/package.json +++ b/packages/vite-config/package.json @@ -1,6 +1,6 @@ { "name": "@yardinternet/vite-config", - "version": "1.0.9", + "version": "1.0.10", "main": "src/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" @@ -23,6 +23,7 @@ "@vitejs/plugin-react": "^5.0.4", "@yardinternet/vite-plugin-gutenberg-blocks": "^2.5.0", "laravel-vite-plugin": "^2.0.1", + "postcss-prefixwrap": "^1.57.0", "vite-plugin-externals": "^0.6.2" }, "peerDependencies": { diff --git a/packages/vite-config/src/configs/brave.js b/packages/vite-config/src/configs/brave.js index 8b75ce1..523b4be 100644 --- a/packages/vite-config/src/configs/brave.js +++ b/packages/vite-config/src/configs/brave.js @@ -29,8 +29,14 @@ import { viteExternalsPlugin } from 'vite-plugin-externals'; import { generateAliases } from '../utils/generate-aliases.js'; import { generateEntryPoints } from '../utils/generate-entry-points.js'; import { getAllThemeNames } from '../utils/get-all-theme-names.js'; +import { getPostCssPrefixWrapPlugin } from '../utils/get-postcss-prefixwrap-plugin.js'; -export const braveConfig = ( { theme = 'sage', entryPoints, mode } ) => { +export const braveConfig = ( { + theme = 'sage', + entryPoints, + mode, + editorStylesPrefixWrap, +} ) => { const env = loadEnv( mode, process.cwd(), '' ); const isDev = ! process.argv.includes( 'build' ); const allThemes = getAllThemeNames(); @@ -104,7 +110,7 @@ export const braveConfig = ( { theme = 'sage', entryPoints, mode } ) => { /** * Files to watch for changes and trigger a refresh */ - refresh: [ `web/app/themes/**/resources/views/**/*.blade.php` ], + refresh: [ 'web/app/themes/**/resources/views/**/*.blade.php' ], } ), /** * Externalizes React and ReactDOM so they reference the global versions provided by WordPress' wp-element (window.React, window.ReactDOM). @@ -117,6 +123,11 @@ export const braveConfig = ( { theme = 'sage', entryPoints, mode } ) => { ], css: { devSourcemap: true, + postcss: { + plugins: [ + ...getPostCssPrefixWrapPlugin( editorStylesPrefixWrap ), + ], + }, }, } ); }; diff --git a/packages/vite-config/src/utils/get-postcss-prefixwrap-plugin.js b/packages/vite-config/src/utils/get-postcss-prefixwrap-plugin.js new file mode 100644 index 0000000..be60d27 --- /dev/null +++ b/packages/vite-config/src/utils/get-postcss-prefixwrap-plugin.js @@ -0,0 +1,24 @@ +import postcssPrefixWrap from 'postcss-prefixwrap'; + +/** + * Conditionally returns the PostCSS Prefix Wrap plugin. This plugin is used to wrap editor styles + * inside a .editor-styles-wrapper class based on the provided entrypooints. Some selectors are ignored + * because they need to remain global. + */ +export function getPostCssPrefixWrapPlugin( config = {} ) { + if ( ! Array.isArray( config?.entryPoints ) ) { + return []; + } + + return [ + postcssPrefixWrap( '.editor-styles-wrapper', { + ignoredSelectors: [ + ':root', + /^(body)(.+)$/, + /^(.editor-styles-wrapper)(.+)$/, + ], + prefixRootTags: false, + whitelist: config.entryPoints, + } ), + ]; +}