Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:…

…where` selectors (#64458)

* Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors

* Add extra test for :where with a pseudo selector

----
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org>

packages/block-editor/package.json

@@ -73,7 +73,7 @@
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
-		"postcss-prefixwrap": "^1.41.0",
+		"postcss-prefixwrap": "^1.51.0",
 		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",

packages/block-editor/src/utils/test/transform-styles.js

@@ -125,6 +125,21 @@ describe( 'transformStyles', () => {
 			expect( output ).toMatchSnapshot();
 		} );
 
+		it( `should not try to replace 'body' in the middle of a classname`, () => {
+			const prefix = '.my-namespace';
+			const input = `.has-body-text { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				prefix
+			);
+
+			expect( output ).toEqual( [ `${ prefix } ${ input }` ] );
+		} );
+
 		it( 'should ignore keyframes', () => {
 			const input = `
 			@keyframes edit-post__fade-in-animation {
@@ -210,6 +225,40 @@ describe( 'transformStyles', () => {
 
 			expect( output ).toMatchSnapshot();
 		} );
+
+		it( 'should not try to wrap items within `:where` selectors', () => {
+			const input = `:where(.wp-element-button:active, .wp-block-button__link:active) { color: blue; }`;
+			const prefix = '.my-namespace';
+			const expected = [ `${ prefix } ${ input }` ];
+
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				prefix
+			);
+
+			expect( output ).toEqual( expected );
+		} );
+
+		it( 'should not try to prefix pseudo elements on `:where` selectors', () => {
+			const input = `:where(.wp-element-button, .wp-block-button__link)::before { color: blue; }`;
+			const prefix = '.my-namespace';
+			const expected = [ `${ prefix } ${ input }` ];
+
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				prefix
+			);
+
+			expect( output ).toEqual( expected );
+		} );
 	} );
 
 	it( 'should not break with data urls', () => {