@wordpress/block-editor 14.1.0 → 14.2.1-next.1f6eadc42.0

package/src/utils/test/transform-styles.js

@@ -62,14 +62,16 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected =
+				':root :where(body) .my-namespace { color: pink; } :root :where(body) .my-namespace { color: orange; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 	} );
 
-	describe( 'selector wrap', () => {
-		it( 'should wrap regular selectors', () => {
-			const input = `h1 { color: red; }`;
+	describe( 'root selectors', () => {
+		it( 'should append prefix after `:root :where(body)` selectors', () => {
+			const input = ':root :where(body) { color: red; }';
 			const output = transformStyles(
 				[
 					{
@@ -78,12 +80,13 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = ':root :where(body) .my-namespace { color: red; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
-		it( 'should wrap multiple selectors', () => {
-			const input = `h1, h2 { color: red; }`;
+		it( 'should append prefix after `:where(body)` selectors', () => {
+			const input = ':where(body) { color: red; }';
 			const output = transformStyles(
 				[
 					{
@@ -92,27 +95,142 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = ':where(body) .my-namespace { color: red; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
-		it( 'should ignore selectors', () => {
-			const input = `h1, body { color: red; }`;
+		it( 'should append prefix after body selectors', () => {
+			const input = `body { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = 'body .my-namespace { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after html selectors', () => {
+			const input = `html { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = 'html .my-namespace { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after html selectors, but before selectors that contain the word html', () => {
+			const input = `html [data-type="core/html"] .test { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected =
+				'html .my-namespace [data-type="core/html"] .test { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after :root selectors', () => {
+			const input = ':root { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = ':root .my-namespace { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after root selector when the selector contains a combinator without spaces around it', () => {
+			const input = `
+				body> .some-style { color: red; }
+				body>.some-style { color: blue; }
+				body >.some-style { color: yellow; }
+				html body > .some-style { color: purple; }
+				html body.with-class+.some-style { color: silver; }
+				html body.with-class~.some-style { color: goldenrod; }
+			`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = `
+				body .my-namespace>.some-style { color: red; }
+				body .my-namespace>.some-style { color: blue; }
+				body .my-namespace>.some-style { color: yellow; }
+				html body .my-namespace>.some-style { color: purple; }
+				html body.with-class .my-namespace+.some-style { color: silver; }
+				html body.with-class .my-namespace~.some-style { color: goldenrod; }
+			`;
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'appends after multiple root selectors', () => {
+			const input = `
+			    :root html[lang="th"] body { color: red; }
+			    :root html[lang="th"] { color: orange; }
+			    :root html[lang="th"] body .some-class { color: green; }
+			`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = `
+			    :root html[lang="th"] body .my-namespace { color: red; }
+			    :root html[lang="th"] .my-namespace { color: orange; }
+			    :root html[lang="th"] body .my-namespace .some-class { color: green; }
+			`;
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should not double prefix a root selector', () => {
+			const input = 'body .my-namespace h1  { color: goldenrod; }';
 			const output = transformStyles(
 				[
 					{
 						css: input,
-						ignoredSelectors: [ 'body' ],
 					},
 				],
 				'.my-namespace'
 			);
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
+	} );
 
-		it( 'should replace root tags', () => {
-			const input = `body, h1 { color: red; }`;
+	describe( 'selector wrap', () => {
+		it( 'should wrap regular selectors', () => {
+			const input = `h1 { color: red; }`;
 			const output = transformStyles(
 				[
 					{
@@ -121,23 +239,56 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = '.my-namespace h1 { color: red; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should wrap multiple selectors', () => {
+			const input = `h1, h2 { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected =
+				'.my-namespace h1, .my-namespace h2 { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should ignore ignored selectors', () => {
+			const input = `h1, body { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+						ignoredSelectors: [ 'body' ],
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = '.my-namespace h1, body { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		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 input = '.has-body-text { color: red; }';
 			const output = transformStyles(
 				[
 					{
 						css: input,
 					},
 				],
-				prefix
+				'.my-namespace'
 			);
+			const expected = '.my-namespace .has-body-text { color: red; }';
 
-			expect( output ).toEqual( [ `${ prefix } ${ input }` ] );
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should ignore keyframes', () => {
@@ -156,7 +307,7 @@ describe( 'transformStyles', () => {
 				'.my-namespace'
 			);
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
 
 		it( 'should wrap selectors inside container queries', () => {
@@ -172,8 +323,12 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = `
+			@container (width > 400px) {
+				  .my-namespace h1 { color: red; }
+			}`;
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should ignore font-face selectors', () => {
@@ -191,14 +346,11 @@ describe( 'transformStyles', () => {
 				'.my-namespace'
 			);
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
 
-		it( 'should replace :root selectors', () => {
-			const input = `
-			:root {
-				--my-color: #ff0000;
-			}`;
+		it( 'should not double wrap selectors', () => {
+			const input = ' .my-namespace h1, .red { color: red; }';
 			const output = transformStyles(
 				[
 					{
@@ -207,57 +359,111 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = ` .my-namespace h1, .my-namespace .red { color: red; }`;
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
-		it( 'should not double wrap selectors', () => {
-			const input = ` .my-namespace h1, .red { color: red; }`;
+		it( 'should not double wrap selectors when the prefix can be misinterpreted as a regular expression', () => {
+			const input =
+				' :where(.editor-styles-wrapper) h1, .red { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				':where(.editor-styles-wrapper)'
+			);
+			const expected = ` :where(.editor-styles-wrapper) h1, :where(.editor-styles-wrapper) .red { color: red; }`;
+
+			expect( output ).toEqual( [ expected ] );
+		} );
 
+		it( 'should allow specification of ignoredSelectors per css input', () => {
+			const input = '.ignored { color: red; }';
 			const output = transformStyles(
 				[
+					{
+						css: input,
+						ignoredSelectors: [ '.ignored' ],
+					},
+					{
+						css: input,
+						ignoredSelectors: [ /^\.ignored/ ],
+					},
 					{
 						css: input,
 					},
 				],
-				'.my-namespace'
+				'.not'
 			);
+			const expected1 = input;
+			const expected2 = input;
+			const expected3 = '.not .ignored { color: red; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected1, expected2, expected3 ] );
 		} );
 
-		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 }` ];
+		it( 'allows specification of ignoredSelectors globally via the transformOptions param', () => {
+			const input1 = '.ignored { color: red; }';
+			const input2 = '.modified { color: red; }';
+			const input3 = '.regexed { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input1,
+					},
+					{
+						css: input2,
+					},
+					{
+						css: input3,
+					},
+				],
+				'.prefix',
+				{ ignoredSelectors: [ '.ignored', /\.regexed/ ] }
+			);
 
+			expect( output ).toEqual( [
+				input1,
+				'.prefix .modified { color: red; }',
+				input3,
+			] );
+		} );
+
+		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 output = transformStyles(
 				[
 					{
 						css: input,
 					},
 				],
-				prefix
+				'.my-namespace'
 			);
+			const expected =
+				'.my-namespace :where(.wp-element-button:active, .wp-block-button__link:active) { color: blue; }';
 
-			expect( output ).toEqual( expected );
+			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 input =
+				':where(.wp-element-button, .wp-block-button__link)::before { color: blue; }';
 			const output = transformStyles(
 				[
 					{
 						css: input,
 					},
 				],
-				prefix
+				'.my-namespace'
 			);
+			const expected =
+				'.my-namespace :where(.wp-element-button, .wp-block-button__link)::before { color: blue; }';
 
-			expect( output ).toEqual( expected );
+			expect( output ).toEqual( [ expected ] );
 		} );
 	} );
 
@@ -274,7 +480,7 @@ describe( 'transformStyles', () => {
 			},
 		] );
 
-		expect( output ).toMatchSnapshot();
+		expect( output ).toEqual( [ input ] );
 	} );
 
 	describe( 'URL rewrite', () => {
@@ -286,8 +492,10 @@ describe( 'transformStyles', () => {
 					baseURL: 'http://wp-site.local/themes/gut/css/',
 				},
 			] );
+			const expected =
+				'h1 { background: url(http://wp-site.local/themes/gut/css/images/test.png); }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should replace complex relative paths', () => {
@@ -298,8 +506,10 @@ describe( 'transformStyles', () => {
 					baseURL: 'http://wp-site.local/themes/gut/css/',
 				},
 			] );
+			const expected =
+				'h1 { background: url(http://wp-site.local/themes/gut/images/test.png); }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should not replace absolute paths', () => {
@@ -310,8 +520,7 @@ describe( 'transformStyles', () => {
 					baseURL: 'http://wp-site.local/themes/gut/css/',
 				},
 			] );
-
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
 
 		it( 'should not replace remote paths', () => {
@@ -323,7 +532,7 @@ describe( 'transformStyles', () => {
 				},
 			] );
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
 	} );
 } );

package/src/utils/transform-styles/index.js

@@ -1,39 +1,142 @@
 /**
  * External dependencies
  */
+import * as parsel from 'parsel-js';
 import postcss, { CssSyntaxError } from 'postcss';
-import wrap from 'postcss-prefixwrap';
+import prefixSelector from 'postcss-prefix-selector';
 import rebaseUrl from 'postcss-urlrebase';
 
 const cacheByWrapperSelector = new Map();
 
+const ROOT_SELECTOR_TOKENS = [
+	{ type: 'type', content: 'body' },
+	{ type: 'type', content: 'html' },
+	{ type: 'pseudo-class', content: ':root' },
+	{ type: 'pseudo-class', content: ':where(body)' },
+	{ type: 'pseudo-class', content: ':where(:root)' },
+	{ type: 'pseudo-class', content: ':where(html)' },
+];
+
+/**
+ * Prefixes root selectors in a way that ensures consistent specificity.
+ * This requires special handling, since prefixing a classname before
+ * html, body, or :root will generally result in an invalid selector.
+ *
+ * Some libraries will simply replace the root selector with the prefix
+ * instead, but this results in inconsistent specificity.
+ *
+ * This function instead inserts the prefix after the root tags but before
+ * any other part of the selector. This results in consistent specificity:
+ * - If a `:where()` selector is used for the prefix, all selectors output
+ *   by `transformStyles` will have no specificity increase.
+ * - If a classname, id, or something else is used as the prefix, all selectors
+ *   will have the same specificity bump when transformed.
+ *
+ * @param {string} prefix   The prefix.
+ * @param {string} selector The selector.
+ *
+ * @return {string} The prefixed root selector.
+ */
+function prefixRootSelector( prefix, selector ) {
+	// Use a tokenizer, since regular expressions are unreliable.
+	const tokenized = parsel.tokenize( selector );
+
+	// Find the last token that contains a root selector by walking back
+	// through the tokens.
+	const lastRootIndex = tokenized.findLastIndex( ( { content, type } ) => {
+		return ROOT_SELECTOR_TOKENS.some(
+			( rootSelector ) =>
+				content === rootSelector.content && type === rootSelector.type
+		);
+	} );
+
+	// Walk forwards to find the combinator after the last root.
+	// This is where the root ends and the rest of the selector begins,
+	// and the index to insert before.
+	// Doing it this way takes into account that a root selector like
+	// 'body' may have additional id/class/pseudo-class/attribute-selector
+	// parts chained to it, which is difficult to quantify using a regex.
+	let insertionPoint = -1;
+	for ( let i = lastRootIndex + 1; i < tokenized.length; i++ ) {
+		if ( tokenized[ i ].type === 'combinator' ) {
+			insertionPoint = i;
+			break;
+		}
+	}
+
+	// Tokenize and insert the prefix with a ' ' combinator before it.
+	const tokenizedPrefix = parsel.tokenize( prefix );
+	tokenized.splice(
+		// Insert at the insertion point, or the end.
+		insertionPoint === -1 ? tokenized.length : insertionPoint,
+		0,
+		{
+			type: 'combinator',
+			content: ' ',
+		},
+		...tokenizedPrefix
+	);
+
+	return parsel.stringify( tokenized );
+}
+
 function transformStyle(
 	{ css, ignoredSelectors = [], baseURL },
-	wrapperSelector = ''
+	wrapperSelector = '',
+	transformOptions
 ) {
-	// When there is no wrapper selector or base URL, there is no need
+	// When there is no wrapper selector and no base URL, there is no need
 	// to transform the CSS. This is most cases because in the default
 	// iframed editor, no wrapping is needed, and not many styles
 	// provide a base URL.
 	if ( ! wrapperSelector && ! baseURL ) {
 		return css;
 	}
-	const postcssFriendlyCSS = css
-		.replace( /:root :where\(body\)/g, 'body' )
-		.replace( /:where\(body\)/g, 'body' );
+
 	try {
+		const excludedSelectors = [
+			...ignoredSelectors,
+			...( transformOptions?.ignoredSelectors ?? [] ),
+			wrapperSelector,
+		];
+
 		return postcss(
 			[
 				wrapperSelector &&
-					wrap( wrapperSelector, {
-						ignoredSelectors: [
-							...ignoredSelectors,
-							wrapperSelector,
-						],
+					prefixSelector( {
+						prefix: wrapperSelector,
+						transform( prefix, selector, prefixedSelector ) {
+							// For backwards compatibility, don't use the `exclude` option
+							// of postcss-prefix-selector, instead handle it here to match
+							// the behavior of the old library (postcss-prefix-wrap) that
+							// `transformStyle` previously used.
+							if (
+								excludedSelectors.some( ( excludedSelector ) =>
+									excludedSelector instanceof RegExp
+										? selector.match( excludedSelector )
+										: selector.includes( excludedSelector )
+								)
+							) {
+								return selector;
+							}
+
+							const hasRootSelector = ROOT_SELECTOR_TOKENS.some(
+								( rootSelector ) =>
+									selector.startsWith( rootSelector.content )
+							);
+
+							// Reorganize root selectors such that the root part comes before the prefix,
+							// but the prefix still comes before the remaining part of the selector.
+							if ( hasRootSelector ) {
+								return prefixRootSelector( prefix, selector );
+							}
+
+							return prefixedSelector;
+						},
 					} ),
 				baseURL && rebaseUrl( { rootUrl: baseURL } ),
 			].filter( Boolean )
-		).process( postcssFriendlyCSS, {} ).css; // use sync PostCSS API
+		).process( css, {} ).css; // use sync PostCSS API
 	} catch ( error ) {
 		if ( error instanceof CssSyntaxError ) {
 			// eslint-disable-next-line no-console
@@ -54,18 +157,26 @@ function transformStyle(
 }
 
 /**
- * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
- *
  * @typedef {Object} EditorStyle
- * @property {string}        css              the CSS block(s), as a single string.
- * @property {?string}       baseURL          the base URL to be used as the reference when rewritting urls.
- * @property {?string[]}     ignoredSelectors the selectors not to wrap.
+ * @property {string}    css              the CSS block(s), as a single string.
+ * @property {?string}   baseURL          the base URL to be used as the reference when rewritting urls.
+ * @property {?string[]} ignoredSelectors the selectors not to wrap.
+ */
+
+/**
+ * @typedef {Object} TransformOptions
+ * @property {?string[]} ignoredSelectors the selectors not to wrap.
+ */
+
+/**
+ * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
- * @param    {EditorStyle[]} styles           CSS rules.
- * @param    {string}        wrapperSelector  Wrapper selector.
+ * @param {EditorStyle[]}    styles           CSS rules.
+ * @param {string}           wrapperSelector  Wrapper selector.
+ * @param {TransformOptions} transformOptions Additional options for style transformation.
  * @return {Array} converted rules.
  */
-const transformStyles = ( styles, wrapperSelector = '' ) => {
+const transformStyles = ( styles, wrapperSelector = '', transformOptions ) => {
 	let cache = cacheByWrapperSelector.get( wrapperSelector );
 	if ( ! cache ) {
 		cache = new WeakMap();
@@ -74,7 +185,7 @@ const transformStyles = ( styles, wrapperSelector = '' ) => {
 	return styles.map( ( style ) => {
 		let css = cache.get( style );
 		if ( ! css ) {
-			css = transformStyle( style, wrapperSelector );
+			css = transformStyle( style, wrapperSelector, transformOptions );
 			cache.set( style, css );
 		}
 		return css;

package/tsconfig.json

@@ -8,6 +8,7 @@
 	"references": [
 		{ "path": "../a11y" },
 		{ "path": "../api-fetch" },
+		{ "path": "../block-serialization-default-parser" },
 		{ "path": "../blob" },
 		{ "path": "../components" },
 		{ "path": "../compose" },