@wordpress/block-editor 12.12.0 → 12.13.0

package/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSS selector wrap should ignore font-face selectors 1`] = `
-"@font-face {
-font-family: myFirstFont;
-src: url(sansation_light.woff);
-}"
-`;
-
-exports[`CSS selector wrap should ignore keyframes 1`] = `
-"@keyframes edit-post__fade-in-animation {
-from {
-opacity: 0;
-}
-}"
-`;
-
-exports[`CSS selector wrap should ignore selectors 1`] = `
-".my-namespace h1,
-body {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should not double wrap selectors 1`] = `
-".my-namespace h1,
-.my-namespace .red {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should replace :root selectors 1`] = `
-".my-namespace {
---my-color: #ff0000;
-}"
-`;
-
-exports[`CSS selector wrap should replace root tags 1`] = `
-".my-namespace,
-.my-namespace h1 {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should wrap multiple selectors 1`] = `
-".my-namespace h1,
-.my-namespace h2 {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should wrap regular selectors 1`] = `
-".my-namespace h1 {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should wrap selectors inside container queries 1`] = `
-"@container (width > 400px) {
-.my-namespace h1 {
-color: red;
-}
-}"
-`;

package/src/utils/transform-styles/transforms/test/url-rewrite.js

@@ -1,39 +0,0 @@
-/**
- * Internal dependencies
- */
-import traverse from '../../traverse';
-import rewrite from '../url-rewrite';
-
-describe( 'URL rewrite', () => {
-	it( 'should replace relative paths', () => {
-		const callback = rewrite( 'http://wp-site.local/themes/gut/css/' );
-		const input = `h1 { background: url(images/test.png); }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should replace complex relative paths', () => {
-		const callback = rewrite( 'http://wp-site.local/themes/gut/css/' );
-		const input = `h1 { background: url(../images/test.png); }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should not replace absolute paths', () => {
-		const callback = rewrite( 'http://wp-site.local/themes/gut/css/' );
-		const input = `h1 { background: url(/images/test.png); }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should not replace remote paths', () => {
-		const callback = rewrite( 'http://wp-site.local/themes/gut/css/' );
-		const input = `h1 { background: url(http://wp.org/images/test.png); }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-} );

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

@@ -1,95 +0,0 @@
-/**
- * Internal dependencies
- */
-import traverse from '../../traverse';
-import wrap from '../wrap';
-
-describe( 'CSS selector wrap', () => {
-	it( 'should wrap regular selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `h1 { color: red; }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should wrap multiple selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `h1, h2 { color: red; }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should ignore selectors', () => {
-		const callback = wrap( '.my-namespace', [ 'body' ] );
-		const input = `h1, body { color: red; }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should replace root tags', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `body, h1 { color: red; }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should ignore keyframes', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `
-		@keyframes edit-post__fade-in-animation {
-			from {
-				opacity: 0;
-			}
-		}`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should wrap selectors inside container queries', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `
-		@container (width > 400px) {
-  			h1 { color: red; }
-		}`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should ignore font-face selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `
-		@font-face {
-			font-family: myFirstFont;
-			src: url(sansation_light.woff);
-		}`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should replace :root selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `
-		:root {
-			--my-color: #ff0000;
-		}`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should not double wrap selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = ` .my-namespace h1, .red { color: red; }`;
-
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-} );

package/src/utils/transform-styles/transforms/url-rewrite.js

@@ -1,139 +0,0 @@
-/**
- * Return `true` if the given path is http/https.
- *
- * @param {string} filePath path
- *
- * @return {boolean} is remote path.
- */
-function isRemotePath( filePath ) {
-	return /^(?:https?:)?\/\//.test( filePath );
-}
-
-/**
- * Return `true` if the given filePath is an absolute url.
- *
- * @param {string} filePath path
- *
- * @return {boolean} is absolute path.
- */
-function isAbsolutePath( filePath ) {
-	return /^\/(?!\/)/.test( filePath );
-}
-
-/**
- * Whether or not the url should be inluded.
- *
- * @param {Object} meta url meta info
- *
- * @return {boolean} is valid.
- */
-function isValidURL( meta ) {
-	// Ignore hashes or data uris.
-	if (
-		meta.value.indexOf( 'data:' ) === 0 ||
-		meta.value.indexOf( '#' ) === 0
-	) {
-		return false;
-	}
-
-	if ( isAbsolutePath( meta.value ) ) {
-		return false;
-	}
-
-	// Do not handle the http/https urls if `includeRemote` is false.
-	if ( isRemotePath( meta.value ) ) {
-		return false;
-	}
-
-	return true;
-}
-
-/**
- * Get the absolute path of the url, relative to the basePath
- *
- * @param {string} str     the url
- * @param {string} baseURL base URL
- *
- * @return {string} the full path to the file
- */
-function getResourcePath( str, baseURL ) {
-	return new URL( str, baseURL ).toString();
-}
-
-/**
- * Process the single `url()` pattern
- *
- * @param {string} baseURL the base URL for relative URLs.
- *
- * @return {Promise} the Promise.
- */
-function processURL( baseURL ) {
-	return ( meta ) => ( {
-		...meta,
-		newUrl:
-			'url(' +
-			meta.before +
-			meta.quote +
-			getResourcePath( meta.value, baseURL ) +
-			meta.quote +
-			meta.after +
-			')',
-	} );
-}
-
-/**
- * Get all `url()`s, and return the meta info
- *
- * @param {string} value decl.value.
- *
- * @return {Array} the urls.
- */
-function getURLs( value ) {
-	const reg = /url\((\s*)(['"]?)(.+?)\2(\s*)\)/g;
-	let match;
-	const URLs = [];
-
-	while ( ( match = reg.exec( value ) ) !== null ) {
-		const meta = {
-			source: match[ 0 ],
-			before: match[ 1 ],
-			quote: match[ 2 ],
-			value: match[ 3 ],
-			after: match[ 4 ],
-		};
-		if ( isValidURL( meta ) ) {
-			URLs.push( meta );
-		}
-	}
-	return URLs;
-}
-
-/**
- * Replace the raw value's `url()` segment to the new value
- *
- * @param {string} raw  the raw value.
- * @param {Array}  URLs the URLs to replace.
- *
- * @return {string} the new value.
- */
-function replaceURLs( raw, URLs ) {
-	URLs.forEach( ( item ) => {
-		raw = raw.replace( item.source, item.newUrl );
-	} );
-
-	return raw;
-}
-
-const rewrite = ( rootURL ) => ( node ) => {
-	if ( node.type === 'declaration' ) {
-		const updatedURLs = getURLs( node.value ).map( processURL( rootURL ) );
-		return {
-			...node,
-			value: replaceURLs( node.value, updatedURLs ),
-		};
-	}
-
-	return node;
-};
-
-export default rewrite;

package/src/utils/transform-styles/transforms/wrap.js

@@ -1,56 +0,0 @@
-/**
- * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.
- */
-const IS_ROOT_TAG = /^(body|html|:root).*$/;
-
-/**
- * Creates a callback to modify selectors so they only apply within a certain
- * namespace.
- *
- * @param {string}   namespace Namespace to prefix selectors with.
- * @param {string[]} ignore    Selectors to not prefix.
- *
- * @return {(node: Object) => Object} Callback to wrap selectors.
- */
-const wrap =
-	( namespace, ignore = [] ) =>
-	( node ) => {
-		/**
-		 * Updates selector if necessary.
-		 *
-		 * @param {string} selector Selector to modify.
-		 *
-		 * @return {string} Updated selector.
-		 */
-		const updateSelector = ( selector ) => {
-			if ( ignore.includes( selector.trim() ) ) {
-				return selector;
-			}
-
-			// Skip the update when a selector already has a namespace + space (" ").
-			if ( selector.trim().startsWith( `${ namespace } ` ) ) {
-				return selector;
-			}
-
-			// Anything other than a root tag is always prefixed.
-			{
-				if ( ! selector.match( IS_ROOT_TAG ) ) {
-					return namespace + ' ' + selector;
-				}
-			}
-
-			// HTML and Body elements cannot be contained within our container so lets extract their styles.
-			return selector.replace( /^(body|html|:root)/, namespace );
-		};
-
-		if ( node.type === 'rule' ) {
-			return {
-				...node,
-				selectors: node.selectors.map( updateSelector ),
-			};
-		}
-
-		return node;
-	};
-
-export default wrap;

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

@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import traverse from 'traverse';
-
-/**
- * Internal dependencies
- */
-import { parse, stringify } from './ast';
-
-function traverseCSS( css, callback ) {
-	try {
-		const parsed = parse( css );
-
-		const updated = traverse.map( parsed, function ( node ) {
-			if ( ! node ) {
-				return node;
-			}
-			const updatedNode = callback( node );
-			return this.update( updatedNode );
-		} );
-
-		return stringify( updated );
-	} catch ( err ) {
-		// eslint-disable-next-line no-console
-		console.warn( 'Error while traversing the CSS: ' + err );
-
-		return null;
-	}
-}
-
-export default traverseCSS;