style-engine.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  1. /******/ (function() { // webpackBootstrap
  2. /******/ "use strict";
  3. /******/ // The require scope
  4. /******/ var __webpack_require__ = {};
  5. /******/
  6. /************************************************************************/
  7. /******/ /* webpack/runtime/define property getters */
  8. /******/ !function() {
  9. /******/ // define getter functions for harmony exports
  10. /******/ __webpack_require__.d = function(exports, definition) {
  11. /******/ for(var key in definition) {
  12. /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  13. /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
  14. /******/ }
  15. /******/ }
  16. /******/ };
  17. /******/ }();
  18. /******/
  19. /******/ /* webpack/runtime/hasOwnProperty shorthand */
  20. /******/ !function() {
  21. /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
  22. /******/ }();
  23. /******/
  24. /******/ /* webpack/runtime/make namespace object */
  25. /******/ !function() {
  26. /******/ // define __esModule on exports
  27. /******/ __webpack_require__.r = function(exports) {
  28. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  29. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  30. /******/ }
  31. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  32. /******/ };
  33. /******/ }();
  34. /******/
  35. /************************************************************************/
  36. var __webpack_exports__ = {};
  37. // ESM COMPAT FLAG
  38. __webpack_require__.r(__webpack_exports__);
  39. // EXPORTS
  40. __webpack_require__.d(__webpack_exports__, {
  41. "compileCSS": function() { return /* binding */ compileCSS; },
  42. "getCSSRules": function() { return /* binding */ getCSSRules; }
  43. });
  44. ;// CONCATENATED MODULE: external "lodash"
  45. var external_lodash_namespaceObject = window["lodash"];
  46. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/constants.js
  47. const VARIABLE_REFERENCE_PREFIX = 'var:';
  48. const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
  49. const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
  50. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/utils.js
  51. /**
  52. * External dependencies
  53. */
  54. /**
  55. * Internal dependencies
  56. */
  57. /**
  58. * Returns a JSON representation of the generated CSS rules.
  59. *
  60. * @param style Style object.
  61. * @param options Options object with settings to adjust how the styles are generated.
  62. * @param path An array of strings representing the path to the style value in the style object.
  63. * @param ruleKey A CSS property key.
  64. *
  65. * @return GeneratedCSSRule[] CSS rules.
  66. */
  67. function generateRule(style, options, path, ruleKey) {
  68. const styleValue = (0,external_lodash_namespaceObject.get)(style, path);
  69. return styleValue ? [{
  70. selector: options === null || options === void 0 ? void 0 : options.selector,
  71. key: ruleKey,
  72. value: getCSSVarFromStyleValue(styleValue)
  73. }] : [];
  74. }
  75. /**
  76. * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
  77. *
  78. * @param style Style object.
  79. * @param options Options object with settings to adjust how the styles are generated.
  80. * @param path An array of strings representing the path to the style value in the style object.
  81. * @param ruleKeys An array of CSS property keys and patterns.
  82. * @param individualProperties The "sides" or individual properties for which to generate rules.
  83. *
  84. * @return GeneratedCSSRule[] CSS rules.
  85. */
  86. function generateBoxRules(style, options, path, ruleKeys) {
  87. let individualProperties = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ['top', 'right', 'bottom', 'left'];
  88. const boxStyle = (0,external_lodash_namespaceObject.get)(style, path);
  89. if (!boxStyle) {
  90. return [];
  91. }
  92. const rules = [];
  93. if (typeof boxStyle === 'string') {
  94. rules.push({
  95. selector: options === null || options === void 0 ? void 0 : options.selector,
  96. key: ruleKeys.default,
  97. value: boxStyle
  98. });
  99. } else {
  100. const sideRules = individualProperties.reduce((acc, side) => {
  101. const value = getCSSVarFromStyleValue((0,external_lodash_namespaceObject.get)(boxStyle, [side]));
  102. if (value) {
  103. acc.push({
  104. selector: options === null || options === void 0 ? void 0 : options.selector,
  105. key: ruleKeys === null || ruleKeys === void 0 ? void 0 : ruleKeys.individual.replace('%s', upperFirst(side)),
  106. value
  107. });
  108. }
  109. return acc;
  110. }, []);
  111. rules.push(...sideRules);
  112. }
  113. return rules;
  114. }
  115. /**
  116. * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
  117. *
  118. * @param styleValue A raw style value.
  119. *
  120. * @return string A CSS var value.
  121. */
  122. function getCSSVarFromStyleValue(styleValue) {
  123. if (typeof styleValue === 'string' && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
  124. const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(presetVariable => (0,external_lodash_namespaceObject.kebabCase)(presetVariable)).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
  125. return `var(--wp--${variable})`;
  126. }
  127. return styleValue;
  128. }
  129. /**
  130. * Capitalizes the first letter in a string.
  131. *
  132. * @param {string} str The string whose first letter the function will capitalize.
  133. *
  134. * @return string A CSS var value.
  135. */
  136. function upperFirst(_ref) {
  137. let [firstLetter, ...rest] = _ref;
  138. return firstLetter.toUpperCase() + rest.join('');
  139. }
  140. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/border/index.js
  141. /**
  142. * Internal dependencies
  143. */
  144. const color = {
  145. name: 'color',
  146. generate: function (style, options) {
  147. let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'color'];
  148. let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderColor';
  149. return generateRule(style, options, path, ruleKey);
  150. }
  151. };
  152. const radius = {
  153. name: 'radius',
  154. generate: (style, options) => {
  155. return generateBoxRules(style, options, ['border', 'radius'], {
  156. default: 'borderRadius',
  157. individual: 'border%sRadius'
  158. }, ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']);
  159. }
  160. };
  161. const borderStyle = {
  162. name: 'style',
  163. generate: function (style, options) {
  164. let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'style'];
  165. let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderStyle';
  166. return generateRule(style, options, path, ruleKey);
  167. }
  168. };
  169. const width = {
  170. name: 'width',
  171. generate: function (style, options) {
  172. let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'width'];
  173. let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderWidth';
  174. return generateRule(style, options, path, ruleKey);
  175. }
  176. };
  177. const borderDefinitionsWithIndividualStyles = [color, borderStyle, width];
  178. /**
  179. * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
  180. *
  181. * @param individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').
  182. *
  183. * @return StyleDefinition[ 'generate' ]
  184. */
  185. const createBorderGenerateFunction = individualProperty => (style, options) => {
  186. var _style$border;
  187. const styleValue = style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border[individualProperty];
  188. if (!styleValue) {
  189. return [];
  190. }
  191. return borderDefinitionsWithIndividualStyles.reduce((acc, borderDefinition) => {
  192. const key = borderDefinition.name;
  193. if (styleValue.hasOwnProperty(key) && typeof borderDefinition.generate === 'function') {
  194. const ruleKey = `border${upperFirst(individualProperty)}${upperFirst(key)}`;
  195. acc.push(...borderDefinition.generate(style, options, ['border', individualProperty, key], ruleKey));
  196. }
  197. return acc;
  198. }, []);
  199. };
  200. const borderTop = {
  201. name: 'borderTop',
  202. generate: createBorderGenerateFunction('top')
  203. };
  204. const borderRight = {
  205. name: 'borderRight',
  206. generate: createBorderGenerateFunction('right')
  207. };
  208. const borderBottom = {
  209. name: 'borderBottom',
  210. generate: createBorderGenerateFunction('bottom')
  211. };
  212. const borderLeft = {
  213. name: 'borderLeft',
  214. generate: createBorderGenerateFunction('left')
  215. };
  216. /* harmony default export */ var border = ([...borderDefinitionsWithIndividualStyles, radius, borderTop, borderRight, borderBottom, borderLeft]);
  217. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/color/background.js
  218. /**
  219. * Internal dependencies
  220. */
  221. const background = {
  222. name: 'background',
  223. generate: (style, options) => {
  224. return generateRule(style, options, ['color', 'background'], 'backgroundColor');
  225. }
  226. };
  227. /* harmony default export */ var color_background = (background);
  228. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/color/gradient.js
  229. /**
  230. * Internal dependencies
  231. */
  232. const gradient = {
  233. name: 'gradient',
  234. generate: (style, options) => {
  235. return generateRule(style, options, ['color', 'gradient'], 'background');
  236. }
  237. };
  238. /* harmony default export */ var color_gradient = (gradient);
  239. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/color/text.js
  240. /**
  241. * Internal dependencies
  242. */
  243. const text_text = {
  244. name: 'text',
  245. generate: (style, options) => {
  246. return generateRule(style, options, ['color', 'text'], 'color');
  247. }
  248. };
  249. /* harmony default export */ var color_text = (text_text);
  250. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/color/index.js
  251. /**
  252. * Internal dependencies
  253. */
  254. /* harmony default export */ var styles_color = ([color_text, color_gradient, color_background]);
  255. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/shadow/index.js
  256. /**
  257. * Internal dependencies
  258. */
  259. const shadow = {
  260. name: 'shadow',
  261. generate: (style, options) => {
  262. return generateRule(style, options, ['shadow'], 'boxShadow');
  263. }
  264. };
  265. /* harmony default export */ var styles_shadow = ([shadow]);
  266. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/outline/index.js
  267. /**
  268. * Internal dependencies
  269. */
  270. const outline_color = {
  271. name: 'color',
  272. generate: function (style, options) {
  273. let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'color'];
  274. let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineColor';
  275. return generateRule(style, options, path, ruleKey);
  276. }
  277. };
  278. const offset = {
  279. name: 'offset',
  280. generate: function (style, options) {
  281. let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'offset'];
  282. let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineOffset';
  283. return generateRule(style, options, path, ruleKey);
  284. }
  285. };
  286. const outlineStyle = {
  287. name: 'style',
  288. generate: function (style, options) {
  289. let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'style'];
  290. let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineStyle';
  291. return generateRule(style, options, path, ruleKey);
  292. }
  293. };
  294. const outline_width = {
  295. name: 'width',
  296. generate: function (style, options) {
  297. let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['outline', 'width'];
  298. let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'outlineWidth';
  299. return generateRule(style, options, path, ruleKey);
  300. }
  301. };
  302. /* harmony default export */ var outline = ([outline_color, outlineStyle, offset, outline_width]);
  303. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/spacing/padding.js
  304. /**
  305. * Internal dependencies
  306. */
  307. const padding = {
  308. name: 'padding',
  309. generate: (style, options) => {
  310. return generateBoxRules(style, options, ['spacing', 'padding'], {
  311. default: 'padding',
  312. individual: 'padding%s'
  313. });
  314. }
  315. };
  316. /* harmony default export */ var spacing_padding = (padding);
  317. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/spacing/margin.js
  318. /**
  319. * Internal dependencies
  320. */
  321. const margin = {
  322. name: 'margin',
  323. generate: (style, options) => {
  324. return generateBoxRules(style, options, ['spacing', 'margin'], {
  325. default: 'margin',
  326. individual: 'margin%s'
  327. });
  328. }
  329. };
  330. /* harmony default export */ var spacing_margin = (margin);
  331. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/spacing/index.js
  332. /**
  333. * Internal dependencies
  334. */
  335. /* harmony default export */ var spacing = ([spacing_margin, spacing_padding]);
  336. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/typography/index.js
  337. /**
  338. * Internal dependencies
  339. */
  340. const fontSize = {
  341. name: 'fontSize',
  342. generate: (style, options) => {
  343. return generateRule(style, options, ['typography', 'fontSize'], 'fontSize');
  344. }
  345. };
  346. const fontStyle = {
  347. name: 'fontStyle',
  348. generate: (style, options) => {
  349. return generateRule(style, options, ['typography', 'fontStyle'], 'fontStyle');
  350. }
  351. };
  352. const fontWeight = {
  353. name: 'fontWeight',
  354. generate: (style, options) => {
  355. return generateRule(style, options, ['typography', 'fontWeight'], 'fontWeight');
  356. }
  357. };
  358. const fontFamily = {
  359. name: 'fontFamily',
  360. generate: (style, options) => {
  361. return generateRule(style, options, ['typography', 'fontFamily'], 'fontFamily');
  362. }
  363. };
  364. const letterSpacing = {
  365. name: 'letterSpacing',
  366. generate: (style, options) => {
  367. return generateRule(style, options, ['typography', 'letterSpacing'], 'letterSpacing');
  368. }
  369. };
  370. const lineHeight = {
  371. name: 'letterSpacing',
  372. generate: (style, options) => {
  373. return generateRule(style, options, ['typography', 'lineHeight'], 'lineHeight');
  374. }
  375. };
  376. const textDecoration = {
  377. name: 'textDecoration',
  378. generate: (style, options) => {
  379. return generateRule(style, options, ['typography', 'textDecoration'], 'textDecoration');
  380. }
  381. };
  382. const textTransform = {
  383. name: 'textTransform',
  384. generate: (style, options) => {
  385. return generateRule(style, options, ['typography', 'textTransform'], 'textTransform');
  386. }
  387. };
  388. /* harmony default export */ var typography = ([fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textDecoration, textTransform]);
  389. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/styles/index.js
  390. /**
  391. * Internal dependencies
  392. */
  393. const styleDefinitions = [...border, ...styles_color, ...outline, ...spacing, ...typography, ...styles_shadow];
  394. ;// CONCATENATED MODULE: ./node_modules/@wordpress/style-engine/build-module/index.js
  395. /**
  396. * External dependencies
  397. */
  398. /**
  399. * Internal dependencies
  400. */
  401. /**
  402. * Generates a stylesheet for a given style object and selector.
  403. *
  404. * @since 6.1.0 Introduced in WordPress core.
  405. *
  406. * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  407. * @param options Options object with settings to adjust how the styles are generated.
  408. *
  409. * @return A generated stylesheet or inline style declarations.
  410. */
  411. function compileCSS(style) {
  412. let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  413. const rules = getCSSRules(style, options); // If no selector is provided, treat generated rules as inline styles to be returned as a single string.
  414. if (!(options !== null && options !== void 0 && options.selector)) {
  415. const inlineRules = [];
  416. rules.forEach(rule => {
  417. inlineRules.push(`${(0,external_lodash_namespaceObject.kebabCase)(rule.key)}: ${rule.value};`);
  418. });
  419. return inlineRules.join(' ');
  420. }
  421. const groupedRules = (0,external_lodash_namespaceObject.groupBy)(rules, 'selector');
  422. const selectorRules = Object.keys(groupedRules).reduce((acc, subSelector) => {
  423. acc.push(`${subSelector} { ${groupedRules[subSelector].map(rule => `${(0,external_lodash_namespaceObject.kebabCase)(rule.key)}: ${rule.value};`).join(' ')} }`);
  424. return acc;
  425. }, []);
  426. return selectorRules.join('\n');
  427. }
  428. /**
  429. * Returns a JSON representation of the generated CSS rules.
  430. *
  431. * @since 6.1.0 Introduced in WordPress core.
  432. *
  433. * @param style Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  434. * @param options Options object with settings to adjust how the styles are generated.
  435. *
  436. * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
  437. */
  438. function getCSSRules(style) {
  439. let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  440. const rules = [];
  441. styleDefinitions.forEach(definition => {
  442. if (typeof definition.generate === 'function') {
  443. rules.push(...definition.generate(style, options));
  444. }
  445. });
  446. return rules;
  447. }
  448. (window.wp = window.wp || {}).styleEngine = __webpack_exports__;
  449. /******/ })()
  450. ;