@wordpress/style-engine 0.10.0 → 0.13.0

package/build-module/styles/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","upperFirst","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","boxStyle","rules","push","sideRules","reduce","acc","side","startsWith","variable","slice","length","split","join"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,EAAcC,UAAd,QAAgC,QAAhC;AAEA;AACA;AACA;;AAEA,SACCC,yBADD,EAECC,uCAFD,EAGCC,mCAHD,QAIO,aAJP;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKL;AACD,QAAMC,UAA8B,GAAGV,GAAG,CAAEM,KAAF,EAASE,IAAT,CAA1C;AAEA,SAAOE,UAAU,GACd,CACA;AACCC,IAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADpB;AAECC,IAAAA,GAAG,EAAEH,OAFN;AAGCI,IAAAA,KAAK,EAAEC,uBAAuB,CAAEJ,UAAF;AAH/B,GADA,CADc,GAQd,EARH;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASK,gBAAT,CACNT,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKe;AACrB,QAAMO,QAAkC,GAAGhB,GAAG,CAAEM,KAAF,EAASE,IAAT,CAA9C;;AACA,MAAK,CAAEQ,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXP,MAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADR;AAEXC,MAAAA,GAAG,EAAEH,OAFM;AAGXI,MAAAA,KAAK,EAAEG;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMG,SAAS,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,EAAqCC,MAArC,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMT,KAAyB,GAAGb,GAAG,CAAEgB,QAAF,EAAY,CAAEM,IAAF,CAAZ,CAArC;;AACA,UAAKT,KAAL,EAAa;AACZQ,QAAAA,GAAG,CAACH,IAAJ,CAAU;AACTP,UAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADV;AAETC,UAAAA,GAAG,EAAG,GAAGH,OAAS,GAAGR,UAAU,CAAEqB,IAAF,CAAU,EAFhC;AAGTT,UAAAA;AAHS,SAAV;AAKA;;AACD,aAAOQ,GAAP;AACA,KAXgB,EAYjB,EAZiB,CAAlB;AAcAJ,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGC,SAAf;AACA;;AAED,SAAOF,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASH,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACa,UAAX,CAAuBrB,yBAAvB,CAFD,EAGE;AACD,UAAMsB,QAAQ,GAAGd,UAAU,CACzBe,KADe,CACRvB,yBAAyB,CAACwB,MADlB,EAEfC,KAFe,CAERxB,uCAFQ,EAGfyB,IAHe,CAGTxB,mCAHS,CAAjB;AAIA,WAAQ,aAAaoB,QAAU,GAA/B;AACA;;AACD,SAAOd,UAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get, upperFirst } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type { GeneratedCSSRule, Style, Box, StyleOptions } from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKey,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = [ 'top', 'right', 'bottom', 'left' ].reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = get( boxStyle, [ side ] );\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: `${ ruleKey }${ upperFirst( side ) }`,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","variable","slice","length","split","join","firstLetter","rest","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param style                Style object.\n * @param options              Options object with settings to adjust how the styles are generated.\n * @param path                 An array of strings representing the path to the style value in the style object.\n * @param ruleKeys             An array of CSS property keys and patterns.\n * @param individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[]  CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return string A CSS var value.\n */\nexport function upperFirst( [ firstLetter, ...rest ]: string ) {\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n"]}

package/build-types/styles/border/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import type { GeneratedCSSRule, Style, StyleDefinition, StyleOptions } from '../../types';
+declare const _default: (StyleDefinition | {
+    name: string;
+    generate: (style: Style, options: StyleOptions) => GeneratedCSSRule[];
+})[];
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build-types/styles/border/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/border/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAGX,gBAAgB,EAChB,KAAK,EACL,eAAe,EACf,YAAY,EACZ,MAAM,aAAa,CAAC;;;;;AA+HrB,wBAOE"}

package/build-types/styles/index.d.ts

@@ -1,9 +1,5 @@
-export declare const styleDefinitions: {
+export declare const styleDefinitions: (import("../types").StyleDefinition | {
     name: string;
-    generate: (style: import("../types").Style, options: import("../types").StyleOptions) => {
-        selector: string;
-        key: string;
-        value: string;
-    }[];
-}[];
+    generate: (style: import("../types").Style, options: import("../types").StyleOptions) => import("../types").GeneratedCSSRule[];
+})[];
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB;;;;;;;GAA0C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB;;;IAK5B,CAAC"}

package/build-types/styles/spacing/margin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"margin.d.ts","sourceRoot":"","sources":["../../../src/styles/spacing/margin.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,MAAM;;sBAEQ,KAAK,WAAW,YAAY;CAQ/C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"margin.d.ts","sourceRoot":"","sources":["../../../src/styles/spacing/margin.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,MAAM;;sBAEQ,KAAK,WAAW,YAAY;CAM/C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build-types/styles/spacing/padding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"padding.d.ts","sourceRoot":"","sources":["../../../src/styles/spacing/padding.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,OAAO;;sBAEO,KAAK,WAAW,YAAY;CAQ/C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"padding.d.ts","sourceRoot":"","sources":["../../../src/styles/spacing/padding.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,OAAO;;sBAEO,KAAK,WAAW,YAAY;CAM/C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build-types/styles/utils.d.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { GeneratedCSSRule, Style, StyleOptions } from '../types';
+import type { CssRulesKeys, GeneratedCSSRule, Style, StyleOptions } from '../types';
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
@@ -20,14 +20,15 @@ export declare function generateRule(style: Style, options: StyleOptions, path:
 /**
  * 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  ruleKey A CSS property key.
+ * @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.
+ * @return GeneratedCSSRule[]  CSS rules.
  */
-export declare function generateBoxRules(style: Style, options: StyleOptions, path: string[], ruleKey: string): GeneratedCSSRule[];
+export declare function generateBoxRules(style: Style, options: StyleOptions, path: string[], ruleKeys: CssRulesKeys, individualProperties?: string[]): GeneratedCSSRule[];
 /**
  * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
  *
@@ -36,4 +37,12 @@ export declare function generateBoxRules(style: Style, options: StyleOptions, pa
  * @return string A CSS var value.
  */
 export declare function getCSSVarFromStyleValue(styleValue: string): string;
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return string A CSS var value.
+ */
+export declare function upperFirst([firstLetter, ...rest]: string): string;
 //# sourceMappingURL=utils.d.ts.map

package/build-types/styles/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAO,YAAY,EAAE,MAAM,UAAU,CAAC;AAO3E;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM;;;;IAaf;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM,GACb,gBAAgB,EAAE,CAgCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAChB,KAAK,EAEL,YAAY,EACZ,MAAM,UAAU,CAAC;AAOlB;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM;;;;IAaf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,YAAY,EACtB,oBAAoB,GAAE,MAAM,EAAyC,GACnE,gBAAgB,EAAE,CAqCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,CAAE,WAAW,EAAE,GAAG,IAAI,CAAE,EAAE,MAAM,UAE3D"}

package/build-types/types.d.ts

@@ -9,7 +9,28 @@ export declare type Box<T extends BoxVariants = undefined> = {
     bottom?: CSSProperties[T extends undefined ? 'bottom' : `${T}Bottom`];
     left?: CSSProperties[T extends undefined ? 'left' : `${T}Left`];
 };
+export declare type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
+export declare type BorderIndividualStyles<T extends BorderIndividualProperty> = {
+    color?: CSSProperties[`border${Capitalize<string & T>}Color`];
+    style?: CSSProperties[`border${Capitalize<string & T>}Style`];
+    width?: CSSProperties[`border${Capitalize<string & T>}Width`];
+};
 export interface Style {
+    border?: {
+        color?: CSSProperties['borderColor'];
+        radius?: CSSProperties['borderRadius'] | {
+            topLeft?: CSSProperties['borderTopLeftRadius'];
+            topRight?: CSSProperties['borderTopRightRadius'];
+            bottomLeft?: CSSProperties['borderBottomLeftRadius'];
+            bottomRight?: CSSProperties['borderBottomLeftRadius'];
+        };
+        style?: CSSProperties['borderStyle'];
+        width?: CSSProperties['borderWidth'];
+        top?: BorderIndividualStyles<'top'>;
+        right?: BorderIndividualStyles<'right'>;
+        bottom?: BorderIndividualStyles<'bottom'>;
+        left?: BorderIndividualStyles<'left'>;
+    };
     spacing?: {
         margin?: CSSProperties['margin'] | Box<'margin'>;
         padding?: CSSProperties['padding'] | Box<'padding'>;
@@ -37,6 +58,10 @@ export interface Style {
         };
     };
 }
+export declare type CssRulesKeys = {
+    default: string;
+    individual: string;
+};
 export declare type StyleOptions = {
     /**
      * CSS selector for the generated style.
@@ -54,7 +79,7 @@ export declare type GeneratedCSSRule = {
 };
 export interface StyleDefinition {
     name: string;
-    generate?: (style: Style, options: StyleOptions) => GeneratedCSSRule[];
+    generate?: (style: Style, options: StyleOptions, path?: string[], ruleKey?: string) => GeneratedCSSRule[];
     getClassNames?: (style: Style) => string[];
 }
 export {};

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,aAAK,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACpD,oBAAY,GAAG,CAAE,CAAC,SAAS,WAAW,GAAG,SAAS,IAAK;IACtD,GAAG,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,GAAI,CAAE,KAAK,CAAE,CAAC;IACjE,KAAK,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,OAAO,GAAG,GAAI,CAAE,OAAO,CAAE,CAAC;IACvE,MAAM,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,QAAQ,GAAG,GAAI,CAAE,QAAQ,CAAE,CAAC;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,MAAM,GAAG,GAAI,CAAE,MAAM,CAAE,CAAC;CACpE,CAAC;AAEF,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE;QACT,MAAM,CAAC,EAAE,aAAa,CAAE,QAAQ,CAAE,GAAG,GAAG,CAAE,QAAQ,CAAE,CAAC;QACrD,OAAO,CAAC,EAAE,aAAa,CAAE,SAAS,CAAE,GAAG,GAAG,CAAE,SAAS,CAAE,CAAC;KACxD,CAAC;IACF,UAAU,CAAC,EAAE;QACZ,QAAQ,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,CAAC;QACvC,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,SAAS,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;QACzC,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;QACjD,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,cAAc,CAAC,EAAE,aAAa,CAAE,gBAAgB,CAAE,CAAC;QACnD,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;KACjD,CAAC;IACF,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;QAChC,UAAU,CAAC,EAAE,aAAa,CAAE,iBAAiB,CAAE,CAAC;QAChD,QAAQ,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;KACzC,CAAC;IACF,QAAQ,CAAC,EAAE;QACV,IAAI,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACP,IAAI,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;aAChC,CAAC;SACF,CAAC;KACF,CAAC;CACF;AAED,oBAAY,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,eAAe;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,KAAM,gBAAgB,EAAE,CAAC;IACzE,aAAa,CAAC,EAAE,CAAE,KAAK,EAAE,KAAK,KAAM,MAAM,EAAE,CAAC;CAC7C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,143 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Declarations
+ *
+ * Holds, sanitizes and prints CSS rules declarations
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Declarations {
+
+	/**
+	 * An array of CSS declarations (property => value pairs).
+	 *
+	 * @var array
+	 */
+	protected $declarations = array();
+
+	/**
+	 * Constructor for this object.
+	 *
+	 * If a `$declarations` array is passed, it will be used to populate
+	 * the initial $declarations prop of the object by calling add_declarations().
+	 *
+	 * @param array $declarations An array of declarations (property => value pairs).
+	 */
+	public function __construct( $declarations = array() ) {
+		if ( empty( $declarations ) ) {
+			return;
+		}
+		$this->add_declarations( $declarations );
+	}
+
+	/**
+	 * Add a single declaration.
+	 *
+	 * @param string $property The CSS property.
+	 * @param string $value    The CSS value.
+	 *
+	 * @return void
+	 */
+	public function add_declaration( $property, $value ) {
+
+		// Sanitize the property.
+		$property = $this->sanitize_property( $property );
+		// Bail early if the property is empty.
+		if ( empty( $property ) ) {
+			return;
+		}
+
+		// Trim the value. If empty, bail early.
+		$value = trim( $value );
+		if ( '' === $value ) {
+			return;
+		}
+
+		// Add the declaration property/value pair.
+		$this->declarations[ $property ] = $value;
+	}
+
+	/**
+	 * Remove a single declaration.
+	 *
+	 * @param string $property The CSS property.
+	 *
+	 * @return void
+	 */
+	public function remove_declaration( $property ) {
+		unset( $this->declarations[ $property ] );
+	}
+
+	/**
+	 * Add multiple declarations.
+	 *
+	 * @param array $declarations An array of declarations.
+	 *
+	 * @return void
+	 */
+	public function add_declarations( $declarations ) {
+		foreach ( $declarations as $property => $value ) {
+			$this->add_declaration( $property, $value );
+		}
+	}
+
+	/**
+	 * Remove multiple declarations.
+	 *
+	 * @param array $declarations An array of properties.
+	 *
+	 * @return void
+	 */
+	public function remove_declarations( $declarations = array() ) {
+		foreach ( $declarations as $property ) {
+			$this->remove_declaration( $property );
+		}
+	}
+
+	/**
+	 * Get the declarations array.
+	 *
+	 * @return array
+	 */
+	public function get_declarations() {
+		return $this->declarations;
+	}
+
+	/**
+	 * Filters and compiles the CSS declarations.
+	 *
+	 * @return string The CSS declarations.
+	 */
+	public function get_declarations_string() {
+		$declarations_array  = $this->get_declarations();
+		$declarations_output = '';
+		foreach ( $declarations_array as $property => $value ) {
+			$filtered_declaration = esc_html( safecss_filter_attr( "{$property}: {$value}" ) );
+			if ( $filtered_declaration ) {
+				$declarations_output .= $filtered_declaration . '; ';
+			}
+		}
+		return rtrim( $declarations_output );
+	}
+
+	/**
+	 * Sanitize property names.
+	 *
+	 * @param string $property The CSS property.
+	 *
+	 * @return string The sanitized property name.
+	 */
+	protected function sanitize_property( $property ) {
+		return sanitize_key( $property );
+	}
+}

package/class-wp-style-engine-css-rule.php

@@ -0,0 +1,115 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Rule
+ *
+ * An object for CSS rules.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Rule {
+
+	/**
+	 * The selector.
+	 *
+	 * @var string
+	 */
+	protected $selector;
+
+	/**
+	 * The selector declarations.
+	 *
+	 * Contains a WP_Style_Engine_CSS_Declarations object.
+	 *
+	 * @var WP_Style_Engine_CSS_Declarations
+	 */
+	protected $declarations;
+
+	/**
+	 * Constructor
+	 *
+	 * @param string                                 $selector     The CSS selector.
+	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
+	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
+	 */
+	public function __construct( $selector = '', $declarations = array() ) {
+		$this->set_selector( $selector );
+		$this->add_declarations( $declarations );
+	}
+
+	/**
+	 * Set the selector.
+	 *
+	 * @param string $selector The CSS selector.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
+	 */
+	public function set_selector( $selector ) {
+		if ( empty( $selector ) ) {
+			return;
+		}
+		$this->selector = $selector;
+
+		return $this;
+	}
+
+	/**
+	 * Set the declarations.
+	 *
+	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
+	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
+	 */
+	public function add_declarations( $declarations ) {
+		$is_declarations_object = ! is_array( $declarations );
+		$declarations_array     = $is_declarations_object ? $declarations->get_declarations() : $declarations;
+
+		if ( null === $this->declarations && $is_declarations_object ) {
+			$this->declarations = $declarations;
+			return $this;
+		}
+		if ( null === $this->declarations ) {
+			$this->declarations = new WP_Style_Engine_CSS_Declarations( $declarations_array );
+		}
+		$this->declarations->add_declarations( $declarations_array );
+
+		return $this;
+	}
+
+	/**
+	 * Get the declarations object.
+	 *
+	 * @return WP_Style_Engine_CSS_Declarations
+	 */
+	public function get_declarations() {
+		return $this->declarations;
+	}
+
+	/**
+	 * Get the full selector.
+	 *
+	 * @return string
+	 */
+	public function get_selector() {
+		return $this->selector;
+	}
+
+	/**
+	 * Get the CSS.
+	 *
+	 * @return string
+	 */
+	public function get_css() {
+		return $this->get_selector() . ' {' . $this->declarations->get_declarations_string() . '}';
+	}
+}

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

@@ -0,0 +1,94 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Rules_Store
+ *
+ * A store for WP_Style_Engine_CSS_Rule objects.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Rules_Store {
+
+	/**
+	 * An array of named WP_Style_Engine_CSS_Rules_Store objects.
+	 *
+	 * @static
+	 *
+	 * @var WP_Style_Engine_CSS_Rules_Store[]
+	 */
+	protected static $stores = array();
+
+	/**
+	 * An array of CSS Rules objects assigned to the store.
+	 *
+	 * @var WP_Style_Engine_CSS_Rule[]
+	 */
+	protected $rules = array();
+
+	/**
+	 * Get an instance of the store.
+	 *
+	 * @param string $store_name The name of the store.
+	 *
+	 * @return WP_Style_Engine_CSS_Rules_Store
+	 */
+	public static function get_store( $store_name = 'default' ) {
+		if ( ! isset( static::$stores[ $store_name ] ) ) {
+			static::$stores[ $store_name ] = new static();
+		}
+		return static::$stores[ $store_name ];
+	}
+	/**
+	 * Get an array of all rules.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule[]
+	 */
+	public function get_all_rules() {
+		return $this->rules;
+	}
+
+	/**
+	 * Get a WP_Style_Engine_CSS_Rule object by its selector.
+	 * If the rule does not exist, it will be created.
+	 *
+	 * @param string $selector The CSS selector.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule|null Returns a WP_Style_Engine_CSS_Rule object, or null if the selector is empty.
+	 */
+	public function add_rule( $selector ) {
+
+		$selector = trim( $selector );
+
+		// Bail early if there is no selector.
+		if ( empty( $selector ) ) {
+			return;
+		}
+
+		// Create the rule if it doesn't exist.
+		if ( empty( $this->rules[ $selector ] ) ) {
+			$this->rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
+		}
+
+		return $this->rules[ $selector ];
+	}
+
+	/**
+	 * Remove a selector from the store.
+	 *
+	 * @param string $selector The CSS selector.
+	 *
+	 * @return void
+	 */
+	public function remove_rule( $selector ) {
+		unset( $this->rules[ $selector ] );
+	}
+}

package/class-wp-style-engine-processor.php

@@ -0,0 +1,93 @@
+<?php
+/**
+ * WP_Style_Engine_Processor
+ *
+ * Compiles styles from a store of CSS rules.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_Processor' ) ) {
+	return;
+}
+
+/**
+ * Compiles styles from a store of CSS rules.
+ *
+ * @access private
+ */
+class WP_Style_Engine_Processor {
+
+	/**
+	 * The Style-Engine Store object.
+	 *
+	 * @var WP_Style_Engine_CSS_Rules_Store
+	 */
+	protected $store;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param WP_Style_Engine_CSS_Rules_Store $store The store to render.
+	 */
+	public function __construct( WP_Style_Engine_CSS_Rules_Store $store ) {
+		$this->store = $store;
+	}
+
+	/**
+	 * Get the CSS rules as a string.
+	 *
+	 * @return string The computed CSS.
+	 */
+	public function get_css() {
+		// Combine CSS selectors that have identical declarations.
+		$this->combine_rules_selectors();
+
+		// Build the CSS.
+		$css   = '';
+		$rules = $this->store->get_all_rules();
+		foreach ( $rules as $rule ) {
+			$css .= $rule->get_css();
+		}
+		return $css;
+	}
+
+	/**
+	 * Combines selectors from the rules store when they have the same styles.
+	 *
+	 * @return void
+	 */
+	private function combine_rules_selectors() {
+		$rules = $this->store->get_all_rules();
+
+		// Build an array of selectors along with the JSON-ified styles to make comparisons easier.
+		$selectors_json = array();
+		foreach ( $rules as $selector => $rule ) {
+			$declarations = $rule->get_declarations()->get_declarations();
+			ksort( $declarations );
+			$selectors_json[ $selector ] = json_encode( $declarations );
+		}
+
+		// Combine selectors that have the same styles.
+		foreach ( $selectors_json as $selector => $json ) {
+			// Get selectors that use the same styles.
+			$duplicates = array_keys( $selectors_json, $json, true );
+			// Skip if there are no duplicates.
+			if ( 1 >= count( $duplicates ) ) {
+				continue;
+			}
+			foreach ( $duplicates as $key ) {
+				// Unset the duplicates from the $selectors_json array to avoid looping through them as well.
+				unset( $selectors_json[ $key ] );
+				// Remove the rules from the store.
+				$this->store->remove_rule( $key );
+			}
+			// Create a new rule with the combined selectors.
+			$new_rule = $this->store->add_rule( implode( ',', $duplicates ) );
+			// Set the declarations. The extra check is in place because `add_rule` in the store can return `null`.
+			if ( $new_rule ) {
+				$new_rule->add_declarations( $rules[ $selector ]->get_declarations() );
+			}
+		}
+	}
+}