@wordpress/style-engine 0.13.0 → 0.15.0

package/phpunit/class-wp-style-engine-test.php

@@ -6,44 +6,55 @@
  * @subpackage style-engine
  */
 
+require __DIR__ . '/../class-wp-style-engine-processor.php';
 require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+require __DIR__ . '/../class-wp-style-engine-css-rule.php';
+require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
 require __DIR__ . '/../class-wp-style-engine.php';
 
 /**
  * Tests for registering, storing and generating styles.
  */
 class WP_Style_Engine_Test extends WP_UnitTestCase {
+	/**
+	 * Tear down after each test.
+	 */
+	public function tear_down() {
+		parent::tear_down();
+		WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
+	}
+
 	/**
 	 * Tests generating block styles and classnames based on various manifestations of the $block_styles argument.
 	 *
-	 * @dataProvider data_generate_block_supports_styles_fixtures
+	 * @dataProvider data_get_styles_fixtures
 	 *
-	 * @param array  $block_styles    The incoming block styles object.
-	 * @param array  $options         Style engine options.
+	 * @param array  $block_styles The incoming block styles object.
+	 * @param array  $options Style engine options.
 	 * @param string $expected_output The expected output.
 	 */
-	public function test_generate_block_supports_styles( $block_styles, $options, $expected_output ) {
-		$generated_styles = wp_style_engine_get_block_supports_styles( $block_styles, $options );
+	public function test_generate_get_styles( $block_styles, $options, $expected_output ) {
+		$generated_styles = wp_style_engine_get_styles( $block_styles, $options );
 		$this->assertSame( $expected_output, $generated_styles );
 	}
 
 	/**
-	 * Data provider.
+	 * Data provider for test_generate_get_styles().
 	 *
 	 * @return array
 	 */
-	public function data_generate_block_supports_styles_fixtures() {
+	public function data_get_styles_fixtures() {
 		return array(
 			'default_return_value'                         => array(
 				'block_styles'    => array(),
 				'options'         => null,
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 
 			'inline_invalid_block_styles_empty'            => array(
 				'block_styles'    => 'hello world!',
 				'options'         => null,
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 
 			'inline_invalid_block_styles_unknown_style'    => array(
@@ -72,7 +83,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				'expected_output' => array(),
 			),
 
-			'valid_inline_css_and_classnames'              => array(
+			'valid_inline_css_and_classnames_as_default_context' => array(
 				'block_styles'    => array(
 					'color'   => array(
 						'text' => 'var:preset|color|texas-flood',
@@ -89,7 +100,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
-					'css'          => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
+					'css'          => 'border-style:dotted;border-width:2rem;padding:0;margin:111px;',
 					'declarations' => array(
 						'border-style' => 'dotted',
 						'border-width' => '2rem',
@@ -100,6 +111,28 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 			),
 
+			'valid_inline_css_and_classnames_with_context' => array(
+				'block_styles'    => array(
+					'color'   => array(
+						'text' => 'var:preset|color|little-lamb',
+					),
+					'spacing' => array(
+						'margin' => '20px',
+					),
+				),
+				'options'         => array(
+					'convert_vars_to_classnames' => true,
+					'context'                    => 'block-supports',
+				),
+				'expected_output' => array(
+					'css'          => 'margin:20px;',
+					'declarations' => array(
+						'margin' => '20px',
+					),
+					'classnames'   => 'has-text-color has-little-lamb-color',
+				),
+			),
+
 			'inline_valid_box_model_style'                 => array(
 				'block_styles'    => array(
 					'spacing' => array(
@@ -127,7 +160,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;',
+					'css'          => 'border-top-left-radius:99px;border-top-right-radius:98px;border-bottom-left-radius:97px;border-bottom-right-radius:96px;padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;margin-top:12rem;margin-left:2vh;margin-bottom:2px;margin-right:10em;',
 					'declarations' => array(
 						'border-top-left-radius'     => '99px',
 						'border-top-right-radius'    => '98px',
@@ -160,7 +193,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
+					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
 					'declarations' => array(
 						'font-size'       => 'clamp(2em, 2vw, 4em)',
 						'font-family'     => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
@@ -187,7 +220,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array( 'selector' => '.wp-selector > p' ),
 				'expected_output' => array(
-					'css'          => '.wp-selector > p { padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; }',
+					'css'          => '.wp-selector > p{padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;}',
 					'declarations' => array(
 						'padding-top'    => '42px',
 						'padding-left'   => '2%',
@@ -207,7 +240,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 					'selector' => '.wp-selector',
 				),
 				'expected_output' => array(
-					'css'          => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }',
+					'css'          => '.wp-selector{color:var(--wp--preset--color--my-little-pony);}',
 					'declarations' => array(
 						'color' => 'var(--wp--preset--color--my-little-pony)',
 					),
@@ -253,7 +286,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'color: var(--wp--preset--color--teal-independents);',
+					'css'          => 'color:var(--wp--preset--color--teal-independents);',
 					'declarations' => array(
 						'color' => 'var(--wp--preset--color--teal-independents)',
 					),
@@ -270,7 +303,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'color: #fff;',
+					'css'          => 'color:#fff;',
 					'declarations' => array(
 						'color' => '#fff',
 					),
@@ -304,7 +337,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--10);',
+					'css'          => 'padding:var(--wp--preset--spacing--20);margin:var(--wp--preset--spacing--10);',
 					'declarations' => array(
 						'padding' => 'var(--wp--preset--spacing--20)',
 						'margin'  => 'var(--wp--preset--spacing--10)',
@@ -331,7 +364,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--40); padding-top: 14px; padding-bottom: 14px; margin-left: var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--20); margin-top: 1rem; margin-bottom: 1rem;',
+					'css'          => 'padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-top:14px;padding-bottom:14px;margin-left:var(--wp--preset--spacing--10);margin-right:var(--wp--preset--spacing--20);margin-top:1rem;margin-bottom:1rem;',
 					'declarations' => array(
 						'padding-left'   => 'var(--wp--preset--spacing--30)',
 						'padding-right'  => 'var(--wp--preset--spacing--40)',
@@ -358,7 +391,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'margin-top: 1rem; margin-bottom: 0;',
+					'css'          => 'margin-top:1rem;margin-bottom:0;',
 					'declarations' => array(
 						'margin-top'    => '1rem',
 						'margin-bottom' => '0',
@@ -407,7 +440,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
+					'css'          => 'border-top-color:#fe1;border-top-width:1.5rem;border-top-style:dashed;border-right-color:#fe2;border-right-width:1.4rem;border-right-style:solid;border-bottom-color:#fe3;border-bottom-width:1.3rem;border-left-color:var(--wp--preset--color--swampy-yellow);border-left-width:0.5rem;border-left-style:dotted;',
 					'declarations' => array(
 						'border-top-color'    => '#fe1',
 						'border-top-width'    => '1.5rem',
@@ -450,7 +483,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
+					'css'          => 'border-bottom-color:var(--wp--preset--color--terrible-lizard);',
 					'declarations' => array(
 						'border-bottom-color' => 'var(--wp--preset--color--terrible-lizard)',
 					),
@@ -458,4 +491,172 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 			),
 		);
 	}
+
+	/**
+	 * Tests adding rules to a store and retrieving a generated stylesheet.
+	 */
+	public function test_store_block_styles_using_context() {
+		$block_styles = array(
+			'spacing' => array(
+				'padding' => array(
+					'top'    => '42px',
+					'left'   => '2%',
+					'bottom' => '44px',
+					'right'  => '5rem',
+				),
+			),
+		);
+
+		$generated_styles = wp_style_engine_get_styles(
+			$block_styles,
+			array(
+				'context'  => 'block-supports',
+				'selector' => 'article',
+			)
+		);
+		$store            = WP_Style_Engine::get_store( 'block-supports' );
+		$rule             = $store->get_all_rules()['article'];
+		$this->assertSame( $generated_styles['css'], $rule->get_css() );
+	}
+
+	/**
+	 * Tests adding rules to a store and retrieving a generated stylesheet.
+	 */
+	public function test_does_not_store_block_styles_without_context() {
+		$block_styles = array(
+			'typography' => array(
+				'fontSize' => '999px',
+			),
+		);
+
+		wp_style_engine_get_styles(
+			$block_styles,
+			array(
+				'selector' => '#font-size-rulez',
+			)
+		);
+
+		$all_stores = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_stores();
+
+		$this->assertEmpty( $all_stores );
+	}
+
+	/**
+	 * Tests adding rules to a store and retrieving a generated stylesheet.
+	 */
+	public function test_add_to_store() {
+		$css_rules           = array(
+			array(
+				'selector'     => '.frodo',
+				'declarations' => array(
+					'color'        => 'brown',
+					'height'       => '10px',
+					'width'        => '30px',
+					'border-style' => 'dotted',
+				),
+			),
+			array(
+				'selector'     => '.samwise',
+				'declarations' => array(
+					'color'        => 'brown',
+					'height'       => '20px',
+					'width'        => '50px',
+					'border-style' => 'solid',
+				),
+			),
+		);
+		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
+			$css_rules,
+			array(
+				'context' => 'test-store',
+			)
+		);
+
+		// Check that the style engine knows about the store.
+		$stored_store = WP_Style_Engine::get_store( 'test-store' );
+		$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $stored_store );
+		$this->assertSame( $compiled_stylesheet, WP_Style_Engine::compile_stylesheet_from_css_rules( $stored_store->get_all_rules() ) );
+	}
+
+	/**
+	 * Tests retrieving a generated stylesheet from any rules.
+	 */
+	public function test_get_stylesheet_from_css_rules() {
+		$css_rules = array(
+			array(
+				'selector'     => '.saruman',
+				'declarations' => array(
+					'color'        => 'white',
+					'height'       => '100px',
+					'border-style' => 'solid',
+					'align-self'   => 'unset',
+				),
+			),
+			array(
+				'selector'     => '.gandalf',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+					'align-self'   => 'safe center',
+				),
+			),
+			array(
+				'selector'     => '.radagast',
+				'declarations' => array(
+					'color'        => 'brown',
+					'height'       => '60px',
+					'border-style' => 'dashed',
+					'align-self'   => 'stretch',
+				),
+			),
+		);
+
+		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
+		$this->assertSame( '.saruman{color:white;height:100px;border-style:solid;align-self:unset;}.gandalf{color:grey;height:90px;border-style:dotted;align-self:safe center;}.radagast{color:brown;height:60px;border-style:dashed;align-self:stretch;}', $compiled_stylesheet );
+	}
+
+	/**
+	 * Tests that incoming styles are deduped and merged.
+	 */
+	public function test_get_deduped_and_merged_stylesheet() {
+		$css_rules = array(
+			array(
+				'selector'     => '.gandalf',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+				),
+			),
+			array(
+				'selector'     => '.gandalf',
+				'declarations' => array(
+					'color'         => 'white',
+					'height'        => '190px',
+					'padding'       => '10px',
+					'margin-bottom' => '100px',
+				),
+			),
+			array(
+				'selector'     => '.dumbledore',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+				),
+			),
+			array(
+				'selector'     => '.rincewind',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+				),
+			),
+		);
+
+		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
+		$this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore,.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet );
+	}
 }

package/src/index.ts

@@ -17,12 +17,12 @@ import { styleDefinitions } from './styles';
 /**
  * Generates a stylesheet for a given style object and selector.
  *
- * @param  style   Style object.
+ * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
  * @return generated stylesheet.
  */
-export function generate( style: Style, options: StyleOptions ): string {
+export function compileCSS( style: Style, options: StyleOptions = {} ): string {
 	const rules = getCSSRules( style, options );
 
 	// If no selector is provided, treat generated rules as inline styles to be returned as a single string.
@@ -56,14 +56,14 @@ export function generate( style: Style, options: StyleOptions ): string {
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
- * @param  style   Style object.
+ * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
  * @return generated styles.
  */
 export function getCSSRules(
 	style: Style,
-	options: StyleOptions
+	options: StyleOptions = {}
 ): GeneratedCSSRule[] {
 	const rules: GeneratedCSSRule[] = [];
 	styleDefinitions.forEach( ( definition: StyleDefinition ) => {

package/src/styles/typography/index.ts

@@ -40,6 +40,18 @@ const fontWeight = {
 	},
 };
 
+const fontFamily = {
+	name: 'fontFamily',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontFamily' ],
+			'fontFamily'
+		);
+	},
+};
+
 const letterSpacing = {
 	name: 'letterSpacing',
 	generate: ( style: Style, options: StyleOptions ) => {
@@ -89,6 +101,7 @@ const textTransform = {
 };
 
 export default [
+	fontFamily,
 	fontSize,
 	fontStyle,
 	fontWeight,

package/src/styles/utils.ts

@@ -51,11 +51,11 @@ export function generateRule(
 /**
  * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
  *
- * @param style                Style object.
- * @param options              Options object with settings to adjust how the styles are generated.
- * @param path                 An array of strings representing the path to the style value in the style object.
- * @param ruleKeys             An array of CSS property keys and patterns.
- * @param individualProperties The "sides" or individual properties for which to generate rules.
+ * @param  style                Style object.
+ * @param  options              Options object with settings to adjust how the styles are generated.
+ * @param  path                 An array of strings representing the path to the style value in the style object.
+ * @param  ruleKeys             An array of CSS property keys and patterns.
+ * @param  individualProperties The "sides" or individual properties for which to generate rules.
  *
  * @return GeneratedCSSRule[]  CSS rules.
  */

package/src/test/index.js

@@ -1,16 +1,16 @@
 /**
  * Internal dependencies
  */
-import { getCSSRules, generate } from '../index';
+import { getCSSRules, compileCSS } from '../index';
 
 describe( 'generate', () => {
 	it( 'should generate empty style', () => {
-		expect( generate( {}, '.some-selector' ) ).toEqual( '' );
+		expect( compileCSS( {}, '.some-selector' ) ).toEqual( '' );
 	} );
 
 	it( 'should generate empty style with empty keys', () => {
 		expect(
-			generate( {
+			compileCSS( {
 				spacing: undefined,
 				color: undefined,
 			} )
@@ -19,7 +19,7 @@ describe( 'generate', () => {
 
 	it( 'should generate inline styles where there is no selector', () => {
 		expect(
-			generate( {
+			compileCSS( {
 				spacing: { padding: '10px', margin: '12px' },
 				color: {
 					text: '#f1f1f1',
@@ -35,7 +35,7 @@ describe( 'generate', () => {
 
 	it( 'should generate styles with an optional selector', () => {
 		expect(
-			generate(
+			compileCSS(
 				{
 					spacing: { padding: '10px', margin: '12px' },
 				},
@@ -46,11 +46,13 @@ describe( 'generate', () => {
 		).toEqual( '.some-selector { margin: 12px; padding: 10px; }' );
 
 		expect(
-			generate(
+			compileCSS(
 				{
 					color: {
 						text: '#cccccc',
 						background: '#111111',
+						gradient:
+							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
 					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
@@ -77,13 +79,13 @@ describe( 'generate', () => {
 				}
 			)
 		).toEqual(
-			'.some-selector { color: #cccccc; background-color: #111111; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }'
+			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
 		);
 	} );
 
 	it( 'should parse preset values', () => {
 		expect(
-			generate( {
+			compileCSS( {
 				color: {
 					text: 'var:preset|color|ham-sandwich',
 				},
@@ -96,7 +98,7 @@ describe( 'generate', () => {
 
 	it( 'should parse border rules', () => {
 		expect(
-			generate( {
+			compileCSS( {
 				border: {
 					color: 'var:preset|color|perky-peppermint',
 					width: '0.5em',
@@ -111,7 +113,7 @@ describe( 'generate', () => {
 
 	it( 'should parse individual border rules', () => {
 		expect(
-			generate( {
+			compileCSS( {
 				border: {
 					top: {
 						color: 'var:preset|color|sandy-beach',
@@ -202,6 +204,8 @@ describe( 'getCSSRules', () => {
 					color: {
 						text: '#dddddd',
 						background: '#555555',
+						gradient:
+							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
 					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
@@ -228,6 +232,11 @@ describe( 'getCSSRules', () => {
 				key: 'color',
 				value: '#dddddd',
 			},
+			{
+				selector: '.some-selector',
+				key: 'background',
+				value: 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
+			},
 			{
 				selector: '.some-selector',
 				key: 'backgroundColor',
@@ -253,6 +262,11 @@ describe( 'getCSSRules', () => {
 				key: 'paddingBottom',
 				value: '5px',
 			},
+			{
+				key: 'fontFamily',
+				selector: '.some-selector',
+				value: "'Helvetica Neue',sans-serif",
+			},
 			{
 				key: 'fontSize',
 				selector: '.some-selector',

package/src/types.ts

@@ -71,11 +71,11 @@ export type StyleOptions = {
 	/**
 	 * CSS selector for the generated style.
 	 */
-	selector: string;
+	selector?: string;
 };
 
 export type GeneratedCSSRule = {
-	selector: string;
+	selector?: string;
 	value: string;
 	/**
 	 * The CSS key in JS style attribute format, compatible with React.
@@ -88,9 +88,8 @@ export interface StyleDefinition {
 	name: string;
 	generate?: (
 		style: Style,
-		options: StyleOptions,
+		options: StyleOptions | {},
 		path?: string[],
 		ruleKey?: string
 	) => GeneratedCSSRule[];
-	getClassNames?: ( style: Style ) => string[];
 }