Use PostCSS + PostCSS plugins for style transformation (#49521)

* Use PostCSS + PostCSS plugins for style transformation.

* Remove the now replaced CSS parsing code.

* Use synchronous PostCSS API.

* Update package-lock.json

* Add basic wrapping test

* Use correct postcss-prefixwrap package

* Update test snapshots

* Add more tests and fix type signature

* Ensure that data URLs do not break the CSS transformer

* Do not optional chain something that is not optional

* Filter out non-CSS styles before passing the array to transformStyles

---------

Co-authored-by: Luis Felipe Zaguini <luisfelipezaguini@gmail.com>

packages/block-editor/README.md

@@ -789,13 +789,23 @@ Applies a series of CSS rule transforms to wrap selectors inside a given class a
 
 _Parameters_
 
--   _styles_ `Object|Array`: CSS rules.
--   _wrapperClassName_ `string`: Wrapper Class Name.
+-   _styles_ `EditorStyle[]`: CSS rules.
+-   _wrapperSelector_ `string`: Wrapper selector.
 
 _Returns_
 
 -   `Array`: converted rules.
 
+_Type Definition_
+
+-   _EditorStyle_ `Object`
+
+_Properties_
+
+-   _css_ `string`: the CSS block(s), as a single string.
+-   _baseURL_ `?string`: the base URL to be used as the reference when rewritting urls.
+-   _ignoredSelectors_ `?string[]`: the selectors not to wrap.
+
 ### Typewriter
 
 Ensures that the text selection keeps the same vertical distance from the viewport during keyboard events within this component. The vertical distance can vary. It is the last clicked or scrolled to position.

packages/block-editor/package.json

@@ -71,13 +71,14 @@
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
-		"inherits": "^2.0.3",
 		"memize": "^2.1.0",
+		"postcss": "^8.4.21",
+		"postcss-prefixwrap": "^1.41.0",
+		"postcss-urlrebase": "^1.0.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^4.5.1",
 		"rememo": "^4.0.2",
-		"remove-accents": "^0.5.0",
-		"traverse": "^0.6.6"
+		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

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

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`transformStyles URL rewrite should not replace absolute paths 1`] = `
+[
+  "h1 { background: url(/images/test.png); }",
+]
+`;
+
+exports[`transformStyles URL rewrite should not replace remote paths 1`] = `
+[
+  "h1 { background: url(http://wp.org/images/test.png); }",
+]
+`;
+
+exports[`transformStyles URL rewrite should replace complex relative paths 1`] = `
+[
+  "h1 { background: url(http://wp-site.local/themes/gut/images/test.png); }",
+]
+`;
+
+exports[`transformStyles URL rewrite should rewrite relative paths 1`] = `
+[
+  "h1 { background: url(http://wp-site.local/themes/gut/css/images/test.png); }",
+]
+`;
+
+exports[`transformStyles selector wrap should ignore font-face selectors 1`] = `
+[
+  "
+			@font-face {
+				font-family: myFirstFont;
+				src: url(sansation_light.woff);
+			}",
+]
+`;
+
+exports[`transformStyles selector wrap should ignore keyframes 1`] = `
+[
+  "
+			@keyframes edit-post__fade-in-animation {
+				from {
+					opacity: 0;
+				}
+			}",
+]
+`;
+
+exports[`transformStyles selector wrap should ignore selectors 1`] = `
+[
+  ".my-namespace h1, body { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should not double wrap selectors 1`] = `
+[
+  " .my-namespace h1, .my-namespace .red { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should replace :root selectors 1`] = `
+[
+  "
+			.my-namespace {
+				--my-color: #ff0000;
+			}",
+]
+`;
+
+exports[`transformStyles selector wrap should replace root tags 1`] = `
+[
+  ".my-namespace, .my-namespace h1 { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should wrap multiple selectors 1`] = `
+[
+  ".my-namespace h1, .my-namespace h2 { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should wrap regular selectors 1`] = `
+[
+  ".my-namespace h1 { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should wrap selectors inside container queries 1`] = `
+[
+  "
+			@container (width > 400px) {
+				  .my-namespace h1 { color: red; }
+			}",
+]
+`;
+
+exports[`transformStyles should not break with data urls 1`] = `
+[
+  ".wp-block-group {
+			background-image: url("data:image/svg+xml,%3Csvg%3E.b%7Bclip-path:url(test);%7D%3C/svg%3E");
+			color: red !important;
+		  }",
+]
+`;