Add StyleOptions type and update function signature to include option…

…s object instead of selector string

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

@@ -107,7 +107,7 @@ export function getInlineStyles( styles = {} ) {
 
 	// 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' );
+	const extraRules = getCSSRules( styles, { selector: 'self' } );
 	extraRules.forEach( ( rule ) => {
 		if ( rule.selector !== 'self' ) {
 			throw "This style can't be added as inline style";

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

@@ -192,7 +192,7 @@ 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' );
+	const extraRules = getCSSRules( blockStyles, { selector: 'self' } );
 	extraRules.forEach( ( rule ) => {
 		if ( rule.selector !== 'self' ) {
 			throw "This style can't be added as inline style";

packages/style-engine/README.md

@@ -38,7 +38,7 @@ Generates a stylesheet for a given style object and selector.
 _Parameters_
 
 -   _style_ `Style`: Style object.
--   _selector_ `string`: CSS selector.
+-   _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
 
 _Returns_
 
@@ -51,7 +51,7 @@ Returns a JSON representation of the generated CSS rules.
 _Parameters_
 
 -   _style_ `Style`: Style object.
--   _selector_ `string`: CSS selector.
+-   _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
 
 _Returns_
 

packages/style-engine/src/index.ts

@@ -6,19 +6,24 @@ import { groupBy, kebabCase } from 'lodash';
 /**
  * Internal dependencies
  */
-import type { Style, GeneratedCSSRule, StyleDefinition } from './types';
+import type {
+	Style,
+	StyleOptions,
+	GeneratedCSSRule,
+	StyleDefinition,
+} from './types';
 import { styleDefinitions } from './styles';
 
 /**
  * Generates a stylesheet for a given style object and selector.
  *
- * @param  style    Style object.
- * @param  selector CSS selector.
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
  *
  * @return generated stylesheet.
  */
-export function generate( style: Style, selector: string ): string {
-	const rules = getCSSRules( style, selector );
+export function generate( style: Style, options: StyleOptions ): string {
+	const rules = getCSSRules( style, options );
 	const groupedRules = groupBy( rules, 'selector' );
 	const selectorRules = Object.keys( groupedRules ).reduce(
 		( acc: string[], subSelector: string ) => {
@@ -41,18 +46,18 @@ export function generate( style: Style, selector: string ): string {
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
- * @param  style    Style object.
- * @param  selector CSS selector.
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
  *
  * @return generated styles.
  */
 export function getCSSRules(
 	style: Style,
-	selector: string
+	options: StyleOptions
 ): GeneratedCSSRule[] {
 	let rules: GeneratedCSSRule[] = [];
 	styleDefinitions.forEach( ( definition: StyleDefinition ) => {
-		rules = [ ...rules, ...definition.generate( style, selector ) ];
+		rules = [ ...rules, ...definition.generate( style, options ) ];
 	} );
 
 	return rules;

packages/style-engine/src/styles/padding.ts

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import type { Style } from '../types';
+import type { Style, StyleOptions } from '../types';
 import { generateBoxRules } from './utils';
 
 const padding = {
 	name: 'padding',
-	generate: ( style: Style, selector: string ) => {
+	generate: ( style: Style, options: StyleOptions ) => {
 		return generateBoxRules(
 			style,
-			selector,
+			options,
 			[ 'spacing', 'padding' ],
 			'padding'
 		);

packages/style-engine/src/styles/utils.ts

@@ -6,11 +6,11 @@ import { get, upperFirst } from 'lodash';
 /**
  * Internal dependencies
  */
-import type { GeneratedCSSRule, Style, Box } from '../types';
+import type { GeneratedCSSRule, Style, Box, StyleOptions } from '../types';
 
 export function generateBoxRules(
 	style: Style,
-	selector: string,
+	options: StyleOptions,
 	path: string[],
 	ruleKey: string
 ): GeneratedCSSRule[] {
@@ -21,14 +21,18 @@ export function generateBoxRules(
 
 	const rules: GeneratedCSSRule[] = [];
 	if ( typeof boxStyle === 'string' ) {
-		rules.push( { selector, key: ruleKey, value: boxStyle } );
+		rules.push( {
+			selector: options.selector,
+			key: ruleKey,
+			value: boxStyle,
+		} );
 	} else {
 		const sideRules = [ 'top', 'right', 'bottom', 'left' ].reduce(
 			( acc: GeneratedCSSRule[], side: string ) => {
 				const value: string | undefined = get( boxStyle, [ side ] );
 				if ( value ) {
 					acc.push( {
-						selector,
+						selector: options.selector,
 						key: `${ ruleKey }${ upperFirst( side ) }`,
 						value,
 					} );

packages/style-engine/src/test/index.js

@@ -14,7 +14,9 @@ describe( 'generate', () => {
 				{
 					spacing: { padding: '10px' },
 				},
-				'.some-selector'
+				{
+					selector: '.some-selector',
+				}
 			)
 		).toEqual( '.some-selector { padding: 10px; }' );
 
@@ -23,7 +25,9 @@ describe( 'generate', () => {
 				{
 					spacing: { padding: { top: '10px', bottom: '5px' } },
 				},
-				'.some-selector'
+				{
+					selector: '.some-selector',
+				}
 			)
 		).toEqual(
 			'.some-selector { padding-top: 10px; padding-bottom: 5px; }'
@@ -42,7 +46,9 @@ describe( 'getCSSRules', () => {
 				{
 					spacing: { padding: '10px' },
 				},
-				'.some-selector'
+				{
+					selector: '.some-selector',
+				}
 			)
 		).toEqual( [
 			{
@@ -57,7 +63,9 @@ describe( 'getCSSRules', () => {
 				{
 					spacing: { padding: { top: '10px', bottom: '5px' } },
 				},
-				'.some-selector'
+				{
+					selector: '.some-selector',
+				}
 			)
 		).toEqual( [
 			{

packages/style-engine/src/types.ts

@@ -22,6 +22,13 @@ export interface Style {
 	};
 }
 
+export type StyleOptions = {
+	/**
+	 * CSS selector for the generated style.
+	 */
+	selector: string;
+};
+
 export type GeneratedCSSRule = {
 	selector: string;
 	value: string;
@@ -34,5 +41,5 @@ export type GeneratedCSSRule = {
 
 export interface StyleDefinition {
 	name: string;
-	generate: ( style: Style, selector: string ) => GeneratedCSSRule[];
+	generate: ( style: Style, options: StyleOptions ) => GeneratedCSSRule[];
 }