Add initial version of the style engine

docs/manifest.json

@@ -1739,6 +1739,12 @@
 		"markdown_source": "../packages/shortcode/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/style-engine",
+		"slug": "packages-style-engine",
+		"markdown_source": "../packages/style-engine/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/stylelint-config",
 		"slug": "packages-stylelint-config",

package.json

@@ -76,6 +76,7 @@
 		"@wordpress/rich-text": "file:packages/rich-text",
 		"@wordpress/server-side-render": "file:packages/server-side-render",
 		"@wordpress/shortcode": "file:packages/shortcode",
+		"@wordpress/style-engine": "file:packages/style-engine",
 		"@wordpress/token-list": "file:packages/token-list",
 		"@wordpress/url": "file:packages/url",
 		"@wordpress/viewport": "file:packages/viewport",

packages/block-editor/package.json

@@ -54,6 +54,7 @@
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/shortcode": "file:../shortcode",
+		"@wordpress/style-engine": "file:../style-engine",
 		"@wordpress/token-list": "file:../token-list",
 		"@wordpress/url": "file:../url",
 		"@wordpress/warning": "file:../warning",

packages/block-editor/src/hooks/style.js

@@ -27,6 +27,7 @@ import {
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -85,21 +86,35 @@ export function getInlineStyles( styles = {} ) {
 			// option and backwards compatibility for border radius support.
 			const styleValue = get( styles, path );
 
-			if ( !! subPaths && ! isString( styleValue ) ) {
-				Object.entries( subPaths ).forEach( ( entry ) => {
-					const [ name, subPath ] = entry;
-					const value = get( styleValue, [ subPath ] );
-
-					if ( value ) {
-						output[ name ] = compileStyleValue( value );
-					}
-				} );
-			} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
-				output[ propKey ] = compileStyleValue( get( styles, path ) );
+			if ( ! styleValue.useEngine ) {
+				if ( !! subPaths && ! isString( styleValue ) ) {
+					Object.entries( subPaths ).forEach( ( entry ) => {
+						const [ name, subPath ] = entry;
+						const value = get( styleValue, [ subPath ] );
+
+						if ( value ) {
+							output[ name ] = compileStyleValue( value );
+						}
+					} );
+				} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
+					output[ propKey ] = compileStyleValue(
+						get( styles, path )
+					);
+				}
 			}
 		}
 	} );
 
+	// The goal is to move everything to server side generated engine styles
+	// This is temporary as we absorb more and more styles into the engine.
+	const extraRules = getCSSRules( styles, 'self' );
+	extraRules.forEach( ( rule ) => {
+		if ( rule.selector !== 'self' ) {
+			throw "This style can't be added as inline style";
+		}
+		return ( output[ rule.key ] = rule.value );
+	} );
+
 	return output;
 }
 

packages/blocks/src/api/constants.js

@@ -99,6 +99,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 			paddingBottom: 'bottom',
 			paddingLeft: 'left',
 		},
+		useEngine: true,
 	},
 	textDecoration: {
 		value: [ 'typography', 'textDecoration' ],

packages/dependency-extraction-webpack-plugin/lib/util.js

@@ -1,5 +1,9 @@
 const WORDPRESS_NAMESPACE = '@wordpress/';
-const BUNDLED_PACKAGES = [ '@wordpress/icons', '@wordpress/interface' ];
+const BUNDLED_PACKAGES = [
+	'@wordpress/icons',
+	'@wordpress/interface',
+	'@wordpress/style-engine',
+];
 
 /**
  * Default request to global transformation

packages/edit-site/package.json

@@ -51,6 +51,7 @@
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
+		"@wordpress/style-engine": "file:../style-engine",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.3.1",

packages/edit-site/src/components/global-styles/use-global-styles-output.js

@@ -23,6 +23,7 @@ import {
 	getBlockTypes,
 } from '@wordpress/blocks';
 import { useEffect, useState, useContext } from '@wordpress/element';
+import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -146,7 +147,7 @@ function flattenTree( input = {}, prefix, token ) {
  * @return {Array} An array of style declarations.
  */
 function getStylesDeclarations( blockStyles = {} ) {
-	return reduce(
+	const output = reduce(
 		STYLE_PROPERTY,
 		( declarations, { value, properties }, key ) => {
 			const pathToValue = value;
@@ -188,6 +189,18 @@ function getStylesDeclarations( blockStyles = {} ) {
 		},
 		[]
 	);
+
+	// The goal is to move everything to server side generated engine styles
+	// This is temporary as we absorb more and more styles into the engine.
+	const extraRules = getCSSRules( blockStyles, 'self' );
+	extraRules.forEach( ( rule ) => {
+		if ( rule.selector !== 'self' ) {
+			throw "This style can't be added as inline style";
+		}
+		return ( output[ rule.key ] = compileStyleValue( rule.value ) );
+	} );
+
+	return output;
 }
 
 export const getNodesWithStyles = ( tree, blockSelectors ) => {

packages/style-engine/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/style-engine/CHANGELOG.md

@@ -0,0 +1,121 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 3.3.0 (2021-11-07)
+
+### New Feature
+
+-   Added new `normalizePath` function ([#35992](https://github.com/WordPress/gutenberg/pull/35992)).
+
+## 3.2.3 (2021-10-12)
+
+### Bug Fix
+
+-   Removed unused `react-native-url-polyfill` dependency ([#34687](https://github.com/WordPress/gutenberg/pull/34687)).
+
+## 3.2.0 (2021-07-21)
+
+## 3.1.0 (2021-05-20)
+
+## 3.0.0 (2021-05-14)
+
+### Breaking Changes
+
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+
+## 2.22.0 (2021-03-17)
+
+## 2.21.0 (2021-01-05)
+
+### New Feature
+
+-   Add optional argument `maxLength` for truncating URL in `filterURLForDisplay`
+
+## 2.16.0 (2020-06-15)
+
+### New Feature
+
+-   Added `getPathAndQueryString`.
+
+## 2.14.0 (2020-04-30)
+
+### Bug fix
+
+-   `addQueryArgs` arguments are optional ([#21926](https://github.com/WordPress/gutenberg/pull/21926))
+
+## 2.13.0 (2020-04-15)
+
+### New feature
+
+-   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
+
+# 2.12.0 (2020-04-01)
+
+### Bug Fixes
+
+-   `getQueryString` now correctly considers hash fragments when considering whether to return a query string. Previously, `getQueryString( 'https://example.com/#?foo' )` would wrongly return `'foo'` as its result. A hash fragment is always the last segment of a URL, and the querystring must always precede it ([see reference specification](https://url.spec.whatwg.org/#absolute-url-with-fragment-string)).
+
+## 2.11.0 (2020-02-10)
+
+### Bug Fixes
+
+-   `isURL` now correctly returns `true` for many other forms of a valid URL, as it now conforms to the [URL Living Standard](https://url.spec.whatwg.org/) definition of a [valid URL string](https://url.spec.whatwg.org/#valid-url-string).
+
+## 2.3.3 (2019-01-03)
+
+### Bug Fixes
+
+-   `addQueryArgs` will return only the querystring fragment if the passed `url` is undefined. Previously, an uncaught error would be thrown.
+-   `addQueryArgs` will not append (or remove) a `?` if there are no query arguments to be added. Previously, `?` would be wrongly appended even if there was no querystring generated.
+
+## 2.3.2 (2018-12-12)
+
+## 2.3.1 (2018-11-20)
+
+### Bug fixes
+
+-   The `isValidProtocol` function now correctly considers the protocol of the URL as only incoporating characters up to and including the colon (':').
+-   `getFragment` is now greedier and matches fragments from the first occurence of the '#' symbol instead of the last.
+
+## 2.3.0 (2018-11-12)
+
+### New Features
+
+-   Added `getProtocol`.
+-   Added `isValidProtocol`.
+-   Added `getAuthority`
+-   Added `isValidAuthority`.
+-   Added `getPath`.
+-   Added `isValidPath`.
+-   Added `getQueryString`.
+-   Added `isValidQueryString`.
+-   Added `getFragment`.
+-   Added `isValidFragment`.
+
+## 2.2.0 (2018-10-29)
+
+### New Features
+
+-   Added `getQueryArg`.
+-   Added `hasQueryArg`.
+-   Added `removeQueryArgs`.
+
+## 2.1.0 (2018-10-16)
+
+### New Feature
+
+-   Added `safeDecodeURI`.
+
+## 2.0.1 (2018-09-30)
+
+### Bug Fix
+
+-   Fix typo in the `qs` dependency definition in the `package.json`
+
+## 2.0.0 (2018-09-05)
+
+### Breaking Change
+
+-   Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.

packages/style-engine/README.md

@@ -0,0 +1,62 @@
+# Style Engine
+
+The Style Engine powering global styles and block customizations.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/style-engine --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
+
+## Important
+
+This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a style object that is consistent between: backend, frontend, block style object and theme.json.
+
+Currently it's not a package that generates a wp.styleEngine global because it's not ready yet, it's still a bundled package but ultimately, we want it to be so, once the roadmap is finished:
+
+**TODO List:**
+
+-   Add style definitions for all the currently supported styles in blocks and theme.json.
+-   the CSS variable shortcuts for values (for presets...)
+-   Support generating styles in the frontend.
+-   Support generating styles in the backend (block supports and theme.json stylesheet).
+-   Refactor all block styles to use the style engine server side.
+-   Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes).
+
+## Usage
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### generate
+
+Generates a stylesheet for a given style object and selector.
+
+_Parameters_
+
+-   _style_ `Style`: Style object.
+-   _selector_ `string`: CSS selector.
+
+_Returns_
+
+-   `string`: generated stylesheet.
+
+### getCSSRules
+
+Returns a JSON representation of the generated CSS rules.
+
+_Parameters_
+
+-   _style_ `Style`: Style object.
+-   _selector_ `string`: CSS selector.
+
+_Returns_
+
+-   `GeneratedCSSRule[]`: generated styles.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>