@wordpress/style-engine 0.14.0 → 0.14.1-next.d6164808d3.0

package/class-wp-style-engine.php

@@ -18,7 +18,7 @@ if ( class_exists( 'WP_Style_Engine' ) ) {
  * CSS styles generation.
  *
  * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please, use gutenberg_style_engine_get_styles instead.
+ * This is a low-level API that may need to do breaking changes. Please, use wp_style_engine_get_styles instead.
  *
  * @access private
  */
@@ -220,14 +220,14 @@ class WP_Style_Engine {
 	 * @param string? $style_value  A single css preset value.
 	 * @param string  $property_key The CSS property that is the second element of the preset string. Used for matching.
 	 *
-	 * @return string|null The slug, or null if not found.
+	 * @return string The slug, or empty string if not found.
 	 */
 	protected static function get_slug_from_preset_value( $style_value, $property_key ) {
-		if ( is_string( $style_value ) && strpos( $style_value, "var:preset|{$property_key}|" ) !== false ) {
+		if ( is_string( $style_value ) && str_contains( $style_value, "var:preset|{$property_key}|" ) ) {
 			$index_to_splice = strrpos( $style_value, '|' ) + 1;
 			return _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
 		}
-		return null;
+		return '';
 	}
 
 	/**
@@ -236,12 +236,12 @@ class WP_Style_Engine {
 	 * @param string $style_value  A single css preset value.
 	 * @param array  $css_vars The css var patterns used to generate the var string.
 	 *
-	 * @return string|null The css var, or null if no match for slug found.
+	 * @return string The css var, or an empty string if no match for slug found.
 	 */
 	protected static function get_css_var_value( $style_value, $css_vars ) {
 		foreach ( $css_vars as  $property_key => $css_var_pattern ) {
 			$slug = static::get_slug_from_preset_value( $style_value, $property_key );
-			if ( $slug ) {
+			if ( static::is_valid_style_value( $slug ) ) {
 				$var = strtr(
 					$css_var_pattern,
 					array( '$slug' => $slug )
@@ -249,7 +249,7 @@ class WP_Style_Engine {
 				return "var($var)";
 			}
 		}
-		return null;
+		return '';
 	}
 
 	/**
@@ -260,42 +260,34 @@ class WP_Style_Engine {
 	 * @return boolean
 	 */
 	protected static function is_valid_style_value( $style_value ) {
-		if ( '0' === $style_value ) {
-			return true;
-		}
-
-		if ( empty( $style_value ) ) {
-			return false;
-		}
-
-		return true;
+		return '0' === $style_value || ! empty( $style_value );
 	}
 
 	/**
-	 * Stores a CSS rule using the provide CSS selector and CSS declarations.
+	 * Stores a CSS rule using the provided CSS selector and CSS declarations.
 	 *
-	 * @param string $store_key        A valid store key.
+	 * @param string $store_name       A valid store key.
 	 * @param string $css_selector     When a selector is passed, the function will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
 	 * @param array  $css_declarations An array of parsed CSS property => CSS value pairs.
 	 *
 	 * @return void.
 	 */
-	public static function store_css_rule( $store_key, $css_selector, $css_declarations ) {
-		if ( empty( $store_key ) || empty( $css_selector ) || empty( $css_declarations ) ) {
+	public static function store_css_rule( $store_name, $css_selector, $css_declarations ) {
+		if ( empty( $store_name ) || empty( $css_selector ) || empty( $css_declarations ) ) {
 			return;
 		}
-		static::get_store( $store_key )->add_rule( $css_selector )->add_declarations( $css_declarations );
+		static::get_store( $store_name )->add_rule( $css_selector )->add_declarations( $css_declarations );
 	}
 
 	/**
 	 * Returns a store by store key.
 	 *
-	 * @param string $store_key A store key.
+	 * @param string $store_name A store key.
 	 *
 	 * @return WP_Style_Engine_CSS_Rules_Store
 	 */
-	public static function get_store( $store_key ) {
-		return WP_Style_Engine_CSS_Rules_Store::get_store( $store_key );
+	public static function get_store( $store_name ) {
+		return WP_Style_Engine_CSS_Rules_Store::get_store( $store_name );
 	}
 
 	/**
@@ -314,14 +306,14 @@ class WP_Style_Engine {
 	 * );
 	 */
 	public static function parse_block_styles( $block_styles, $options ) {
+		$parsed_styles = array(
+			'classnames'   => array(),
+			'declarations' => array(),
+		);
 		if ( empty( $block_styles ) || ! is_array( $block_styles ) ) {
-			return array();
+			return $parsed_styles;
 		}
 
-		$css_declarations     = array();
-		$classnames           = array();
-		$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
-
 		// Collect CSS and classnames.
 		foreach ( static::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
 			if ( empty( $block_styles[ $definition_group_key ] ) ) {
@@ -334,15 +326,12 @@ class WP_Style_Engine {
 					continue;
 				}
 
-				$classnames       = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) );
-				$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_skip_css_vars ) );
+				$parsed_styles['classnames']   = array_merge( $parsed_styles['classnames'], static::get_classnames( $style_value, $style_definition ) );
+				$parsed_styles['declarations'] = array_merge( $parsed_styles['declarations'], static::get_css_declarations( $style_value, $style_definition, $options ) );
 			}
 		}
 
-		return array(
-			'classnames'   => $classnames,
-			'declarations' => $css_declarations,
-		);
+		return $parsed_styles;
 	}
 
 	/**
@@ -354,12 +343,11 @@ class WP_Style_Engine {
 	 * @return array        An array of CSS classnames.
 	 */
 	protected static function get_classnames( $style_value, $style_definition ) {
-		$classnames = array();
-
 		if ( empty( $style_value ) ) {
-			return $classnames;
+			return array();
 		}
 
+		$classnames = array();
 		if ( ! empty( $style_definition['classnames'] ) ) {
 			foreach ( $style_definition['classnames'] as $classname => $property_key ) {
 				if ( true === $property_key ) {
@@ -386,24 +374,27 @@ class WP_Style_Engine {
 	 *
 	 * @param array         $style_value          A single raw style value from the generate() $block_styles array.
 	 * @param array<string> $style_definition     A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
-	 * @param boolean       $should_skip_css_vars Whether to skip compiling CSS var values.
+	 * @param array         $options              array(
+	 *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
+	 * );.
 	 *
 	 * @return array        An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
-	protected static function get_css_declarations( $style_value, $style_definition, $should_skip_css_vars = false ) {
+	protected static function get_css_declarations( $style_value, $style_definition, $options ) {
 		if ( isset( $style_definition['value_func'] ) && is_callable( $style_definition['value_func'] ) ) {
-			return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $should_skip_css_vars );
+			return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $options );
 		}
 
-		$css_declarations    = array();
-		$style_property_keys = $style_definition['property_keys'];
+		$css_declarations     = array();
+		$style_property_keys  = $style_definition['property_keys'];
+		$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
 
 		// Build CSS var values from var:? values, e.g, `var(--wp--css--rule-slug )`
 		// Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition.
-		if ( is_string( $style_value ) && strpos( $style_value, 'var:' ) !== false ) {
+		if ( is_string( $style_value ) && str_contains( $style_value, 'var:' ) ) {
 			if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
 				$css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] );
-				if ( $css_var ) {
+				if ( static::is_valid_style_value( $css_var ) ) {
 					$css_declarations[ $style_property_keys['default'] ] = $css_var;
 				}
 			}
@@ -414,8 +405,13 @@ class WP_Style_Engine {
 		// If the input contains an array, assume box model-like properties
 		// for styles such as margins and padding.
 		if ( is_array( $style_value ) ) {
+			// Bail out early if the `'individual'` property is not defined.
+			if ( ! isset( $style_property_keys['individual'] ) ) {
+				return $css_declarations;
+			}
+
 			foreach ( $style_value as $key => $value ) {
-				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
+				if ( is_string( $value ) && str_contains( $value, 'var:' ) && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
 					$value = static::get_css_var_value( $value, $style_definition['css_vars'] );
 				}
 
@@ -425,10 +421,11 @@ class WP_Style_Engine {
 					$css_declarations[ $individual_property ] = $value;
 				}
 			}
-		} else {
-			$css_declarations[ $style_property_keys['default'] ] = $style_value;
+
+			return $css_declarations;
 		}
 
+		$css_declarations[ $style_property_keys['default'] ] = $style_value;
 		return $css_declarations;
 	}
 
@@ -439,17 +436,17 @@ class WP_Style_Engine {
 	 * "border-{top|right|bottom|left}-{color|width|style}: {value};" or,
 	 * "border-image-{outset|source|width|repeat|slice}: {value};"
 	 *
-	 * @param array   $style_value                    A single raw Gutenberg style attributes value for a CSS property.
-	 * @param array   $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
-	 * @param boolean $should_skip_css_vars           Whether to skip compiling CSS var values.
+	 * @param array $style_value                    A single raw Gutenberg style attributes value for a CSS property.
+	 * @param array $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+	 * @param array $options                        array(
+	 *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
+	 * );.
 	 *
 	 * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
-	protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $should_skip_css_vars ) {
-		$css_declarations = array();
-
+	protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $options ) {
 		if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
-			return $css_declarations;
+			return array();
 		}
 
 		// The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border".
@@ -457,6 +454,8 @@ class WP_Style_Engine {
 		// The second item in $individual_property_definition['path'] array refers to the individual property marker, e.g., "top".
 		$definition_group_key    = $individual_property_definition['path'][0];
 		$individual_property_key = $individual_property_definition['path'][1];
+		$should_skip_css_vars    = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
+		$css_declarations        = array();
 
 		foreach ( $style_value as $css_property => $value ) {
 			if ( empty( $value ) ) {
@@ -469,7 +468,7 @@ class WP_Style_Engine {
 
 			if ( $style_definition && isset( $style_definition['property_keys']['individual'] ) ) {
 				// Set a CSS var if there is a valid preset value.
-				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
+				if ( is_string( $value ) && str_contains( $value, 'var:' ) && ! $should_skip_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
 					$value = static::get_css_var_value( $value, $individual_property_definition['css_vars'] );
 				}
 				$individual_css_property                      = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );
@@ -497,8 +496,8 @@ class WP_Style_Engine {
 			$css_rule = new WP_Style_Engine_CSS_Rule( $css_selector, $css_declarations );
 			return $css_rule->get_css();
 		}
-		$css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );
 
+		$css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );
 		return $css_declarations->get_declarations_string();
 	}
 
@@ -512,7 +511,7 @@ class WP_Style_Engine {
 	public static function compile_stylesheet_from_css_rules( $css_rules ) {
 		$processor = new WP_Style_Engine_Processor();
 		$processor->add_rules( $css_rules );
-		return $processor->get_css( array( 'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) );
+		return $processor->get_css();
 	}
 }
 
@@ -531,13 +530,13 @@ class WP_Style_Engine {
  *
  * @param array                 $block_styles The style object.
  * @param array<string|boolean> $options      array(
- *     'context'                    => (string) An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'.
- *     'enqueue'                    => (boolean) When `true` will attempt to store and enqueue for rendering on the frontend.
+ *     'context' => (string|null) An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'.
+ *                  When set, the style engine will attempt to store the CSS rules, where a selector is also passed.
  *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
  *     'selector'                   => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
  * );.
  *
- * @return array<string|array>|null array(
+ * @return array<string|array> array(
  *     'css'          => (string) A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
  *     'declarations' => (array) An array of property/value pairs representing parsed CSS declarations.
  *     'classnames'   => (string) Classnames separated by a space.
@@ -547,32 +546,25 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
 	if ( ! class_exists( 'WP_Style_Engine' ) ) {
 		return array();
 	}
-	$defaults = array(
-		'selector'                   => null,
-		'context'                    => 'block-supports',
-		'convert_vars_to_classnames' => false,
-		'enqueue'                    => false,
-	);
 
-	$options       = wp_parse_args( $options, $defaults );
-	$parsed_styles = null;
+	$options = wp_parse_args(
+		$options,
+		array(
+			'selector'                   => null,
+			'context'                    => null,
+			'convert_vars_to_classnames' => false,
+		)
+	);
 
-	// Block supports styles.
-	if ( 'block-supports' === $options['context'] ) {
-		$parsed_styles = WP_Style_Engine::parse_block_styles( $block_styles, $options );
-	}
+	$parsed_styles = WP_Style_Engine::parse_block_styles( $block_styles, $options );
 
 	// Output.
 	$styles_output = array();
 
-	if ( ! $parsed_styles ) {
-		return $styles_output;
-	}
-
 	if ( ! empty( $parsed_styles['declarations'] ) ) {
 		$styles_output['css']          = WP_Style_Engine::compile_css( $parsed_styles['declarations'], $options['selector'] );
 		$styles_output['declarations'] = $parsed_styles['declarations'];
-		if ( true === $options['enqueue'] ) {
+		if ( ! empty( $options['context'] ) ) {
 			WP_Style_Engine::store_css_rule( $options['context'], $options['selector'], $parsed_styles['declarations'] );
 		}
 	}
@@ -597,8 +589,8 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
  *      )
  *  );.
  * @param array<string> $options array(
- *     'context' => (string) An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'.
- *     'enqueue' => (boolean) When `true` will attempt to store and enqueue for rendering on the frontend.
+ *     'context' => (string|null) An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'.
+ *                  When set, the style engine will attempt to store the CSS rules.
  * );.
  *
  * @return string A compiled CSS string.
@@ -608,19 +600,20 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a
 		return '';
 	}
 
-	$defaults         = array(
-		'context' => 'block-supports',
-		'enqueue' => false,
+	$options = wp_parse_args(
+		$options,
+		array(
+			'context' => null,
+		)
 	);
-	$options          = wp_parse_args( $options, $defaults );
-	$css_rule_objects = array();
 
+	$css_rule_objects = array();
 	foreach ( $css_rules as $css_rule ) {
 		if ( empty( $css_rule['selector'] ) || empty( $css_rule['declarations'] ) || ! is_array( $css_rule['declarations'] ) ) {
 			continue;
 		}
 
-		if ( true === $options['enqueue'] ) {
+		if ( ! empty( $options['context'] ) ) {
 			WP_Style_Engine::store_css_rule( $options['context'], $css_rule['selector'], $css_rule['declarations'] );
 		}
 
@@ -639,16 +632,14 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a
  *
  * @access public
  *
- * @param string $store_key A valid store key.
+ * @param string $store_name A valid store name.
  *
  * @return string A compiled CSS string.
  */
-function wp_style_engine_get_stylesheet_from_store( $store_key ) {
-	if ( ! class_exists( 'WP_Style_Engine' ) || empty( $store_key ) ) {
+function wp_style_engine_get_stylesheet_from_store( $store_name ) {
+	if ( ! class_exists( 'WP_Style_Engine' ) || empty( $store_name ) ) {
 		return '';
 	}
 
-	$store = WP_Style_Engine::get_store( $store_key );
-
-	return WP_Style_Engine::compile_stylesheet_from_css_rules( $store->get_all_rules() );
+	return WP_Style_Engine::compile_stylesheet_from_css_rules( WP_Style_Engine::get_store( $store_name )->get_all_rules() );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "0.14.0",
+	"version": "0.14.1-next.d6164808d3.0",
 	"description": "WordPress Style engine.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,5 +34,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
+	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
 }

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

@@ -150,7 +150,9 @@ class WP_Style_Engine_CSS_Declarations_Test extends WP_UnitTestCase {
 	public function test_remove_unsafe_properties_and_values() {
 		$input_declarations = array(
 			'color'        => 'url("https://wordpress.org")',
+			'font-size'    => '<red/>',
 			'margin-right' => '10em',
+			'padding'      => '</style>',
 			'potato'       => 'uppercase',
 		);
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );

package/phpunit/class-wp-style-engine-css-rules-store-test.php

@@ -29,6 +29,20 @@ class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
 		$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $new_pancakes_store );
 	}
 
+	/**
+	 * Should not create a new store with invalid $store_name.
+	 */
+	public function test_store_name_required() {
+		$not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( '' );
+		$this->assertEmpty( $not_a_store );
+
+		$also_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( 123 );
+		$this->assertEmpty( $also_not_a_store );
+
+		$definitely_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( null );
+		$this->assertEmpty( $definitely_not_a_store );
+	}
+
 	/**
 	 * Should return previously created store when the same selector key is passed.
 	 */

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

@@ -133,22 +133,6 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 			),
 
-			'invalid_context'                              => array(
-				'block_styles'    => array(
-					'color'   => array(
-						'text' => 'var:preset|color|sugar',
-					),
-					'spacing' => array(
-						'padding' => '20000px',
-					),
-				),
-				'options'         => array(
-					'convert_vars_to_classnames' => true,
-					'context'                    => 'i-love-doughnuts',
-				),
-				'expected_output' => array(),
-			),
-
 			'inline_valid_box_model_style'                 => array(
 				'block_styles'    => array(
 					'spacing' => array(
@@ -511,7 +495,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 	/**
 	 * Tests adding rules to a store and retrieving a generated stylesheet.
 	 */
-	public function test_enqueue_block_styles_store() {
+	public function test_store_block_styles_using_context() {
 		$block_styles = array(
 			'spacing' => array(
 				'padding' => array(
@@ -526,7 +510,6 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 		$generated_styles = wp_style_engine_get_styles(
 			$block_styles,
 			array(
-				'enqueue'  => true,
 				'context'  => 'block-supports',
 				'selector' => 'article',
 			)
@@ -536,6 +519,28 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 		$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.
 	 */
@@ -564,7 +569,6 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 			$css_rules,
 			array(
 				'context' => 'test-store',
-				'enqueue' => true,
 			)
 		);
 

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.
  */