@wordpress/style-engine 0.2.0

package/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.
+-   _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
+
+_Returns_
+
+-   `string`: generated stylesheet.
+
+### getCSSRules
+
+Returns a JSON representation of the generated CSS rules.
+
+_Parameters_
+
+-   _style_ `Style`: Style object.
+-   _options_ `StyleOptions`: Options object with settings to adjust how the styles are generated.
+
+_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>

package/build/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generate = generate;
+exports.getCSSRules = getCSSRules;
+
+var _lodash = require("lodash");
+
+var _styles = require("./styles");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Generates a stylesheet for a given style object and selector.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ *
+ * @return generated stylesheet.
+ */
+function generate(style, options) {
+  const rules = getCSSRules(style, options);
+  const groupedRules = (0, _lodash.groupBy)(rules, 'selector');
+  const selectorRules = Object.keys(groupedRules).reduce((acc, subSelector) => {
+    acc.push(`${subSelector} { ${groupedRules[subSelector].map(rule => `${(0, _lodash.kebabCase)(rule.key)}: ${rule.value};`).join(' ')} }`);
+    return acc;
+  }, []);
+  return selectorRules.join('\n');
+}
+/**
+ * Returns a JSON representation of the generated CSS rules.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ *
+ * @return generated styles.
+ */
+
+
+function getCSSRules(style, options) {
+  const rules = [];
+
+  _styles.styleDefinitions.forEach(definition => {
+    rules.push(...definition.generate(style, options));
+  });
+
+  return rules;
+}
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["generate","style","options","rules","getCSSRules","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","push","map","rule","key","value","join","styleDefinitions","forEach","definition"],"mappings":";;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,QAAT,CAAmBC,KAAnB,EAAiCC,OAAjC,EAAiE;AACvE,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB;AACA,QAAMG,YAAY,GAAG,qBAASF,KAAT,EAAgB,UAAhB,CAArB;AACA,QAAMG,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACE,IAAJ,CACE,GAAGD,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBE,GADqB,CAEnBC,IAAF,IACE,GAAG,uBAAWA,IAAI,CAACC,GAAhB,CAAuB,KAAKD,IAAI,CAACE,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOP,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACW,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASb,WAAT,CACNH,KADM,EAENC,OAFM,EAGe;AACrB,QAAMC,KAAyB,GAAG,EAAlC;;AACAe,2BAAiBC,OAAjB,CAA4BC,UAAF,IAAmC;AAC5DjB,IAAAA,KAAK,CAACS,IAAN,CAAY,GAAGQ,UAAU,CAACpB,QAAX,CAAqBC,KAArB,EAA4BC,OAA5B,CAAf;AACA,GAFD;;AAIA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function generate( style: Style, options: StyleOptions ): string {\n\tconst rules = getCSSRules( style, options );\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\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 *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\trules.push( ...definition.generate( style, options ) );\n\t} );\n\n\treturn rules;\n}\n"]}

package/build/styles/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleDefinitions = void 0;
+
+var _padding = _interopRequireDefault(require("./padding"));
+
+/**
+ * Internal dependencies
+ */
+const styleDefinitions = [_padding.default];
+exports.styleDefinitions = styleDefinitions;
+//# sourceMappingURL=index.js.map

package/build/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["styleDefinitions","padding"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,gBAAgB,GAAG,CAAEC,gBAAF,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport padding from './padding';\n\nexport const styleDefinitions = [ padding ];\n"]}

package/build/styles/padding.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("./utils");
+
+/**
+ * Internal dependencies
+ */
+const padding = {
+  name: 'padding',
+  generate: (style, options) => {
+    return (0, _utils.generateBoxRules)(style, options, ['spacing', 'padding'], 'padding');
+  }
+};
+var _default = padding;
+exports.default = _default;
+//# sourceMappingURL=padding.js.map

package/build/styles/padding.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/padding.ts"],"names":["padding","name","generate","style","options"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;AAIA,MAAMA,OAAO,GAAG;AACfC,EAAAA,IAAI,EAAE,SADS;AAEfC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAO,6BACND,KADM,EAENC,OAFM,EAGN,CAAE,SAAF,EAAa,SAAb,CAHM,EAIN,SAJM,CAAP;AAMA;AATc,CAAhB;eAYeJ,O","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../types';\nimport { generateBoxRules } from './utils';\n\nconst padding = {\n\tname: 'padding',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'spacing', 'padding' ],\n\t\t\t'padding'\n\t\t);\n\t},\n};\n\nexport default padding;\n"]}

package/build/styles/utils.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateBoxRules = generateBoxRules;
+
+var _lodash = require("lodash");
+
+/**
+ * External dependencies
+ */
+function generateBoxRules(style, options, path, ruleKey) {
+  const boxStyle = (0, _lodash.get)(style, path);
+
+  if (!boxStyle) {
+    return [];
+  }
+
+  const rules = [];
+
+  if (typeof boxStyle === 'string') {
+    rules.push({
+      selector: options.selector,
+      key: ruleKey,
+      value: boxStyle
+    });
+  } else {
+    const sideRules = ['top', 'right', 'bottom', 'left'].reduce((acc, side) => {
+      const value = (0, _lodash.get)(boxStyle, [side]);
+
+      if (value) {
+        acc.push({
+          selector: options.selector,
+          key: `${ruleKey}${(0, _lodash.upperFirst)(side)}`,
+          value
+        });
+      }
+
+      return acc;
+    }, []);
+    rules.push(...sideRules);
+  }
+
+  return rules;
+}
+//# sourceMappingURL=utils.js.map

package/build/styles/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateBoxRules","style","options","path","ruleKey","boxStyle","rules","push","selector","key","value","sideRules","reduce","acc","side"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAQO,SAASA,gBAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKe;AACrB,QAAMC,QAAkC,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEE,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXC,MAAAA,QAAQ,EAAEN,OAAO,CAACM,QADP;AAEXC,MAAAA,GAAG,EAAEL,OAFM;AAGXM,MAAAA,KAAK,EAAEL;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMM,SAAS,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,EAAqCC,MAArC,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMJ,KAAyB,GAAG,iBAAKL,QAAL,EAAe,CAAES,IAAF,CAAf,CAAlC;;AACA,UAAKJ,KAAL,EAAa;AACZG,QAAAA,GAAG,CAACN,IAAJ,CAAU;AACTC,UAAAA,QAAQ,EAAEN,OAAO,CAACM,QADT;AAETC,UAAAA,GAAG,EAAG,GAAGL,OAAS,GAAG,wBAAYU,IAAZ,CAAoB,EAFhC;AAGTJ,UAAAA;AAHS,SAAV;AAKA;;AACD,aAAOG,GAAP;AACA,KAXgB,EAYjB,EAZiB,CAAlB;AAcAP,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGI,SAAf;AACA;;AAED,SAAOL,KAAP;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';\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"]}

package/build/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-module/index.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { groupBy, kebabCase } from 'lodash';
+/**
+ * Internal dependencies
+ */
+
+import { styleDefinitions } from './styles';
+/**
+ * Generates a stylesheet for a given style object and 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, options) {
+  const rules = getCSSRules(style, options);
+  const groupedRules = groupBy(rules, 'selector');
+  const selectorRules = Object.keys(groupedRules).reduce((acc, subSelector) => {
+    acc.push(`${subSelector} { ${groupedRules[subSelector].map(rule => `${kebabCase(rule.key)}: ${rule.value};`).join(' ')} }`);
+    return acc;
+  }, []);
+  return selectorRules.join('\n');
+}
+/**
+ * Returns a JSON representation of the generated CSS rules.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ *
+ * @return generated styles.
+ */
+
+export function getCSSRules(style, options) {
+  const rules = [];
+  styleDefinitions.forEach(definition => {
+    rules.push(...definition.generate(style, options));
+  });
+  return rules;
+}
+//# sourceMappingURL=index.js.map

package/build-module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/index.ts"],"names":["groupBy","kebabCase","styleDefinitions","generate","style","options","rules","getCSSRules","groupedRules","selectorRules","Object","keys","reduce","acc","subSelector","push","map","rule","key","value","join","forEach","definition"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,SAAlB,QAAmC,QAAnC;AAEA;AACA;AACA;;AAOA,SAASC,gBAAT,QAAiC,UAAjC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,QAAT,CAAmBC,KAAnB,EAAiCC,OAAjC,EAAiE;AACvE,QAAMC,KAAK,GAAGC,WAAW,CAAEH,KAAF,EAASC,OAAT,CAAzB;AACA,QAAMG,YAAY,GAAGR,OAAO,CAAEM,KAAF,EAAS,UAAT,CAA5B;AACA,QAAMG,aAAa,GAAGC,MAAM,CAACC,IAAP,CAAaH,YAAb,EAA4BI,MAA5B,CACrB,CAAEC,GAAF,EAAiBC,WAAjB,KAA0C;AACzCD,IAAAA,GAAG,CAACE,IAAJ,CACE,GAAGD,WAAa,MAAMN,YAAY,CAAEM,WAAF,CAAZ,CACrBE,GADqB,CAEnBC,IAAF,IACE,GAAGhB,SAAS,CAAEgB,IAAI,CAACC,GAAP,CAAc,KAAKD,IAAI,CAACE,KAAO,GAHxB,EAKrBC,IALqB,CAKf,GALe,CAKR,IANhB;AAQA,WAAOP,GAAP;AACA,GAXoB,EAYrB,EAZqB,CAAtB;AAeA,SAAOJ,aAAa,CAACW,IAAd,CAAoB,IAApB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASb,WAAT,CACNH,KADM,EAENC,OAFM,EAGe;AACrB,QAAMC,KAAyB,GAAG,EAAlC;AACAJ,EAAAA,gBAAgB,CAACmB,OAAjB,CAA4BC,UAAF,IAAmC;AAC5DhB,IAAAA,KAAK,CAACS,IAAN,CAAY,GAAGO,UAAU,CAACnB,QAAX,CAAqBC,KAArB,EAA4BC,OAA5B,CAAf;AACA,GAFD;AAIA,SAAOC,KAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { groupBy, kebabCase } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tStyle,\n\tStyleOptions,\n\tGeneratedCSSRule,\n\tStyleDefinition,\n} from './types';\nimport { styleDefinitions } from './styles';\n\n/**\n * Generates a stylesheet for a given style object and selector.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n *\n * @return generated stylesheet.\n */\nexport function generate( style: Style, options: StyleOptions ): string {\n\tconst rules = getCSSRules( style, options );\n\tconst groupedRules = groupBy( rules, 'selector' );\n\tconst selectorRules = Object.keys( groupedRules ).reduce(\n\t\t( acc: string[], subSelector: string ) => {\n\t\t\tacc.push(\n\t\t\t\t`${ subSelector } { ${ groupedRules[ subSelector ]\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( rule: GeneratedCSSRule ) =>\n\t\t\t\t\t\t\t`${ kebabCase( rule.key ) }: ${ rule.value };`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ' ' ) } }`\n\t\t\t);\n\t\t\treturn acc;\n\t\t},\n\t\t[]\n\t);\n\n\treturn selectorRules.join( '\\n' );\n}\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 *\n * @return generated styles.\n */\nexport function getCSSRules(\n\tstyle: Style,\n\toptions: StyleOptions\n): GeneratedCSSRule[] {\n\tconst rules: GeneratedCSSRule[] = [];\n\tstyleDefinitions.forEach( ( definition: StyleDefinition ) => {\n\t\trules.push( ...definition.generate( style, options ) );\n\t} );\n\n\treturn rules;\n}\n"]}

package/build-module/styles/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import padding from './padding';
+export const styleDefinitions = [padding];
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/index.ts"],"names":["padding","styleDefinitions"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,WAApB;AAEA,OAAO,MAAMC,gBAAgB,GAAG,CAAED,OAAF,CAAzB","sourcesContent":["/**\n * Internal dependencies\n */\nimport padding from './padding';\n\nexport const styleDefinitions = [ padding ];\n"]}

package/build-module/styles/padding.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { generateBoxRules } from './utils';
+const padding = {
+  name: 'padding',
+  generate: (style, options) => {
+    return generateBoxRules(style, options, ['spacing', 'padding'], 'padding');
+  }
+};
+export default padding;
+//# sourceMappingURL=padding.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/padding.ts"],"names":["generateBoxRules","padding","name","generate","style","options"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,gBAAT,QAAiC,SAAjC;AAEA,MAAMC,OAAO,GAAG;AACfC,EAAAA,IAAI,EAAE,SADS;AAEfC,EAAAA,QAAQ,EAAE,CAAEC,KAAF,EAAgBC,OAAhB,KAA2C;AACpD,WAAOL,gBAAgB,CACtBI,KADsB,EAEtBC,OAFsB,EAGtB,CAAE,SAAF,EAAa,SAAb,CAHsB,EAItB,SAJsB,CAAvB;AAMA;AATc,CAAhB;AAYA,eAAeJ,OAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../types';\nimport { generateBoxRules } from './utils';\n\nconst padding = {\n\tname: 'padding',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'spacing', 'padding' ],\n\t\t\t'padding'\n\t\t);\n\t},\n};\n\nexport default padding;\n"]}

package/build-module/styles/utils.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { get, upperFirst } from 'lodash';
+/**
+ * Internal dependencies
+ */
+
+export function generateBoxRules(style, options, path, ruleKey) {
+  const boxStyle = get(style, path);
+
+  if (!boxStyle) {
+    return [];
+  }
+
+  const rules = [];
+
+  if (typeof boxStyle === 'string') {
+    rules.push({
+      selector: options.selector,
+      key: ruleKey,
+      value: boxStyle
+    });
+  } else {
+    const sideRules = ['top', 'right', 'bottom', 'left'].reduce((acc, side) => {
+      const value = get(boxStyle, [side]);
+
+      if (value) {
+        acc.push({
+          selector: options.selector,
+          key: `${ruleKey}${upperFirst(side)}`,
+          value
+        });
+      }
+
+      return acc;
+    }, []);
+    rules.push(...sideRules);
+  }
+
+  return rules;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","upperFirst","generateBoxRules","style","options","path","ruleKey","boxStyle","rules","push","selector","key","value","sideRules","reduce","acc","side"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,EAAcC,UAAd,QAAgC,QAAhC;AAEA;AACA;AACA;;AAGA,OAAO,SAASC,gBAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKe;AACrB,QAAMC,QAAkC,GAAGP,GAAG,CAAEG,KAAF,EAASE,IAAT,CAA9C;;AACA,MAAK,CAAEE,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXC,MAAAA,QAAQ,EAAEN,OAAO,CAACM,QADP;AAEXC,MAAAA,GAAG,EAAEL,OAFM;AAGXM,MAAAA,KAAK,EAAEL;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMM,SAAS,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,EAAqCC,MAArC,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMJ,KAAyB,GAAGZ,GAAG,CAAEO,QAAF,EAAY,CAAES,IAAF,CAAZ,CAArC;;AACA,UAAKJ,KAAL,EAAa;AACZG,QAAAA,GAAG,CAACN,IAAJ,CAAU;AACTC,UAAAA,QAAQ,EAAEN,OAAO,CAACM,QADT;AAETC,UAAAA,GAAG,EAAG,GAAGL,OAAS,GAAGL,UAAU,CAAEe,IAAF,CAAU,EAFhC;AAGTJ,UAAAA;AAHS,SAAV;AAKA;;AACD,aAAOG,GAAP;AACA,KAXgB,EAYjB,EAZiB,CAAlB;AAcAP,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGI,SAAf;AACA;;AAED,SAAOL,KAAP;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';\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"]}

package/build-module/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-types/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions, GeneratedCSSRule } from './types';
+/**
+ * Generates a stylesheet for a given style object and selector.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ *
+ * @return generated stylesheet.
+ */
+export declare function generate(style: Style, options: StyleOptions): string;
+/**
+ * Returns a JSON representation of the generated CSS rules.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ *
+ * @return generated styles.
+ */
+export declare function getCSSRules(style: Style, options: StyleOptions): GeneratedCSSRule[];
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,KAAK,EACL,YAAY,EACZ,gBAAgB,EAEhB,MAAM,SAAS,CAAC;AAGjB;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,GAAI,MAAM,CAmBtE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAC1B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,GACnB,gBAAgB,EAAE,CAOpB"}

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

@@ -0,0 +1,5 @@
+export declare const styleDefinitions: {
+    name: 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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import type { GeneratedCSSRule, Style, StyleOptions } from '../types';
+export declare function generateBoxRules(style: Style, options: StyleOptions, path: string[], ruleKey: string): GeneratedCSSRule[];
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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;AAE3E,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM,GACb,gBAAgB,EAAE,CAgCpB"}

package/build-types/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+declare type BoxVariants = 'margin' | 'padding' | undefined;
+export declare type Box<T extends BoxVariants = undefined> = {
+    top?: CSSProperties[T extends undefined ? 'top' : `${T}Top`];
+    right?: CSSProperties[T extends undefined ? 'right' : `${T}Right`];
+    bottom?: CSSProperties[T extends undefined ? 'bottom' : `${T}Bottom`];
+    left?: CSSProperties[T extends undefined ? 'left' : `${T}Left`];
+};
+export interface Style {
+    spacing?: {
+        margin?: CSSProperties['margin'] | Box<'margin'>;
+        padding?: CSSProperties['padding'] | Box<'padding'>;
+    };
+    typography?: {
+        fontSize?: CSSProperties['fontSize'];
+        fontFamily?: CSSProperties['fontFamily'];
+        fontWeight?: CSSProperties['fontWeight'];
+        fontStyle?: CSSProperties['fontStyle'];
+        letterSpacing?: CSSProperties['letterSpacing'];
+        lineHeight?: CSSProperties['lineHeight'];
+        textDecoration?: CSSProperties['textDecoration'];
+        textTransform?: CSSProperties['textTransform'];
+    };
+}
+export declare type StyleOptions = {
+    /**
+     * CSS selector for the generated style.
+     */
+    selector: string;
+};
+export declare type GeneratedCSSRule = {
+    selector: string;
+    value: string;
+    /**
+     * The CSS key in JS style attribute format, compatible with React.
+     * E.g. `paddingTop` instead of `padding-top`.
+     */
+    key: string;
+};
+export interface StyleDefinition {
+    name: string;
+    generate: (style: Style, options: StyleOptions) => GeneratedCSSRule[];
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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;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,EAAE,CAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,KAAM,gBAAgB,EAAE,CAAC;CACxE"}

package/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@wordpress/style-engine",
+	"version": "0.2.0",
+	"description": "WordPress Style engine.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"styles",
+		"global styles"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/style-engine/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/style-engine"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=12"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "^7.16.0",
+		"lodash": "^4.17.21"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "4566ac290359553d04de4eb574545309343f790b"
+}

package/src/index.ts

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { groupBy, kebabCase } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+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  options Options object with settings to adjust how the styles are generated.
+ *
+ * @return generated stylesheet.
+ */
+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 ) => {
+			acc.push(
+				`${ subSelector } { ${ groupedRules[ subSelector ]
+					.map(
+						( rule: GeneratedCSSRule ) =>
+							`${ kebabCase( rule.key ) }: ${ rule.value };`
+					)
+					.join( ' ' ) } }`
+			);
+			return acc;
+		},
+		[]
+	);
+
+	return selectorRules.join( '\n' );
+}
+
+/**
+ * Returns a JSON representation of the generated CSS rules.
+ *
+ * @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,
+	options: StyleOptions
+): GeneratedCSSRule[] {
+	const rules: GeneratedCSSRule[] = [];
+	styleDefinitions.forEach( ( definition: StyleDefinition ) => {
+		rules.push( ...definition.generate( style, options ) );
+	} );
+
+	return rules;
+}

package/src/styles/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import padding from './padding';
+
+export const styleDefinitions = [ padding ];

package/src/styles/padding.ts

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