From 372365b9c65adf45c6669cd5bd8e4c6181e03adc Mon Sep 17 00:00:00 2001 From: Yannic van Veen Date: Wed, 12 Nov 2025 20:13:27 +0100 Subject: [PATCH 1/3] feat: add postcss-prefixwrap --- package-lock.json | 10 ++++++++ packages/vite-config/package.json | 1 + packages/vite-config/src/configs/brave.js | 28 +++++++++++++++++++++-- 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index e94c524..ec02593 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17805,6 +17805,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", @@ -22683,6 +22692,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 caa2b09..f553b45 100644 --- a/packages/vite-config/package.json +++ b/packages/vite-config/package.json @@ -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 7ea80c8..596ee6e 100644 --- a/packages/vite-config/src/configs/brave.js +++ b/packages/vite-config/src/configs/brave.js @@ -22,6 +22,7 @@ import { wordpressPlugin } from '@roots/vite-plugin'; import laravel from 'laravel-vite-plugin'; import tailwindcss from '@tailwindcss/vite'; import { viteExternalsPlugin } from 'vite-plugin-externals'; +import postcssPrefixWrap from 'postcss-prefixwrap'; /** * Internal dependencies @@ -30,7 +31,12 @@ import { generateAliases } from '../utils/generate-aliases.js'; import { generateEntryPoints } from '../utils/generate-entry-points.js'; import { getAllThemeNames } from '../utils/get-all-theme-names.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,24 @@ export const braveConfig = ( { theme = 'sage', entryPoints, mode } ) => { ], css: { devSourcemap: true, + postcss: { + plugins: [ + ...( Array.isArray( editorStylesPrefixWrap?.entryPoints ) + ? [ + postcssPrefixWrap( '.editor-styles-wrapper', { + ignoredSelectors: [ + ':root', + /^(body)(.+)$/, + /^(.editor-styles-wrapper)(.+)$/, + ], + prefixRootTags: false, + whitelist: + editorStylesPrefixWrap.entryPoints, + } ), + ] + : [] ), + ], + }, }, } ); }; From 528fcca59410aba4331220018196c007a3ac1969 Mon Sep 17 00:00:00 2001 From: Yannic van Veen Date: Fri, 21 Nov 2025 10:45:32 +0100 Subject: [PATCH 2/3] feat: move plugin call to utility --- packages/vite-config/package.json | 2 +- packages/vite-config/src/configs/brave.js | 17 ++----------- .../utils/get-postcss-prefixwrap-plugin.js | 24 +++++++++++++++++++ 3 files changed, 27 insertions(+), 16 deletions(-) create mode 100644 packages/vite-config/src/utils/get-postcss-prefixwrap-plugin.js diff --git a/packages/vite-config/package.json b/packages/vite-config/package.json index f553b45..6aff810 100644 --- a/packages/vite-config/package.json +++ b/packages/vite-config/package.json @@ -1,6 +1,6 @@ { "name": "@yardinternet/vite-config", - "version": "1.0.8", + "version": "1.0.9", "main": "src/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" diff --git a/packages/vite-config/src/configs/brave.js b/packages/vite-config/src/configs/brave.js index 596ee6e..6660d92 100644 --- a/packages/vite-config/src/configs/brave.js +++ b/packages/vite-config/src/configs/brave.js @@ -22,7 +22,6 @@ import { wordpressPlugin } from '@roots/vite-plugin'; import laravel from 'laravel-vite-plugin'; import tailwindcss from '@tailwindcss/vite'; import { viteExternalsPlugin } from 'vite-plugin-externals'; -import postcssPrefixWrap from 'postcss-prefixwrap'; /** * Internal dependencies @@ -30,6 +29,7 @@ import postcssPrefixWrap from 'postcss-prefixwrap'; 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', @@ -125,20 +125,7 @@ export const braveConfig = ( { devSourcemap: true, postcss: { plugins: [ - ...( Array.isArray( editorStylesPrefixWrap?.entryPoints ) - ? [ - postcssPrefixWrap( '.editor-styles-wrapper', { - ignoredSelectors: [ - ':root', - /^(body)(.+)$/, - /^(.editor-styles-wrapper)(.+)$/, - ], - prefixRootTags: false, - whitelist: - editorStylesPrefixWrap.entryPoints, - } ), - ] - : [] ), + ...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, + } ), + ]; +} From ac2a7b01b2489a427544a1576a6cf641f73237b2 Mon Sep 17 00:00:00 2001 From: Yannic van Veen Date: Wed, 26 Nov 2025 13:41:00 +0100 Subject: [PATCH 3/3] feat: update version number --- packages/vite-config/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite-config/package.json b/packages/vite-config/package.json index 6aff810..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"