Skip to content

feat: add postcss-prefixwrap #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yannicvanveen merged 4 commits into from
Nov 26, 2025
Merged

feat: add postcss-prefixwrap #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
372365b
feat: add postcss-prefixwrap
Nov 12, 2025
528fcca
feat: move plugin call to utility
Nov 21, 2025
ac2a7b0
feat: update version number
Nov 26, 2025
d56a759
Merge branch 'main' into feat/postcss-prefixwrap
Yannicvanveen Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/vite-config/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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": {
Expand Down
15 changes: 13 additions & 2 deletions packages/vite-config/src/configs/brave.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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).
Expand All @@ -117,6 +123,11 @@ export const braveConfig = ( { theme = 'sage', entryPoints, mode } ) => {
],
css: {
devSourcemap: true,
postcss: {
plugins: [
Copy link
Contributor

@YvetteNikolov YvetteNikolov Nov 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zou je hier een helper functie van kunnen maken?

plugins: generatePostcssPlugins( { editorStylesPrefixWrap } ),

Je kunt hem in de /utils/ folder zetten.

export const generatePostcssPlugins = ( { editorStylesPrefixWrap } : {} ) => {
	const plugins = [];

	/**
	 * En dan hier nog een comment met wat we hier doen, aangezien het over 3 jaar vergeten gaat worden. 
	 */
	if (Array.isArray(editorStylesPrefixWrap?.entryPoints)) {
		plugins.push(...)' 
	}

	return plugins;
};

Copy link
Contributor

@YvetteNikolov YvetteNikolov Nov 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aangezien in de toekomst dit best wel nog eens uitgebreid kan gaan worden.

Copy link
Author

@Yannicvanveen Yannicvanveen Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@YvetteNikolov Gaat dit geen nadelige gevolgen hebben voor het kunnen mergen van de configuratie? Op zich logisch om dit in een util te zetten, maar misschien alleen een losse functie voor elke plugin?

...getPostCssPrefixWrapPlugin( editorStylesPrefixWrap ),
],
},
},
} );
};
24 changes: 24 additions & 0 deletions packages/vite-config/src/utils/get-postcss-prefixwrap-plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
} ),
];
}