[Summary view] [Print] [Text view]

   1  "use strict";
   2  var wp;
   3  (wp ||= {}).styleEngine = (() => {
   4    var __defProp = Object.defineProperty;
   5    var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   6    var __getOwnPropNames = Object.getOwnPropertyNames;
   7    var __hasOwnProp = Object.prototype.hasOwnProperty;
   8    var __export = (target, all) => {
   9      for (var name in all)
  10        __defProp(target, name, { get: all[name], enumerable: true });
  11    };
  12    var __copyProps = (to, from, except, desc) => {
  13      if (from && typeof from === "object" || typeof from === "function") {
  14        for (let key of __getOwnPropNames(from))
  15          if (!__hasOwnProp.call(to, key) && key !== except)
  16            __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  17      }
  18      return to;
  19    };
  20    var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  21  
  22    // packages/style-engine/build-module/index.js
  23    var index_exports = {};
  24    __export(index_exports, {
  25      compileCSS: () => compileCSS,
  26      getCSSRules: () => getCSSRules,
  27      getCSSValueFromRawStyle: () => getCSSValueFromRawStyle
  28    });
  29  
  30    // node_modules/tslib/tslib.es6.mjs
  31    var __assign = function() {
  32      __assign = Object.assign || function __assign2(t) {
  33        for (var s, i = 1, n = arguments.length; i < n; i++) {
  34          s = arguments[i];
  35          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  36        }
  37        return t;
  38      };
  39      return __assign.apply(this, arguments);
  40    };
  41  
  42    // node_modules/lower-case/dist.es2015/index.js
  43    function lowerCase(str) {
  44      return str.toLowerCase();
  45    }
  46  
  47    // node_modules/no-case/dist.es2015/index.js
  48    var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
  49    var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
  50    function noCase(input, options) {
  51      if (options === void 0) {
  52        options = {};
  53      }
  54      var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
  55      var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
  56      var start = 0;
  57      var end = result.length;
  58      while (result.charAt(start) === "\0")
  59        start++;
  60      while (result.charAt(end - 1) === "\0")
  61        end--;
  62      return result.slice(start, end).split("\0").map(transform).join(delimiter);
  63    }
  64    function replace(input, re, value) {
  65      if (re instanceof RegExp)
  66        return input.replace(re, value);
  67      return re.reduce(function(input2, re2) {
  68        return input2.replace(re2, value);
  69      }, input);
  70    }
  71  
  72    // node_modules/dot-case/dist.es2015/index.js
  73    function dotCase(input, options) {
  74      if (options === void 0) {
  75        options = {};
  76      }
  77      return noCase(input, __assign({ delimiter: "." }, options));
  78    }
  79  
  80    // node_modules/param-case/dist.es2015/index.js
  81    function paramCase(input, options) {
  82      if (options === void 0) {
  83        options = {};
  84      }
  85      return dotCase(input, __assign({ delimiter: "-" }, options));
  86    }
  87  
  88    // packages/style-engine/build-module/styles/constants.js
  89    var VARIABLE_REFERENCE_PREFIX = "var:";
  90    var VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = "|";
  91    var VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = "--";
  92  
  93    // packages/style-engine/build-module/styles/utils.js
  94    var getStyleValueByPath = (object, path) => {
  95      let value = object;
  96      path.forEach((fieldName) => {
  97        value = value?.[fieldName];
  98      });
  99      return value;
 100    };
 101    function generateRule(style, options, path, ruleKey) {
 102      const styleValue = getStyleValueByPath(style, path);
 103      return styleValue ? [
 104        {
 105          selector: options?.selector,
 106          key: ruleKey,
 107          value: getCSSValueFromRawStyle(styleValue)
 108        }
 109      ] : [];
 110    }
 111    function generateBoxRules(style, options, path, ruleKeys, individualProperties = ["top", "right", "bottom", "left"]) {
 112      const boxStyle = getStyleValueByPath(
 113        style,
 114        path
 115      );
 116      if (!boxStyle) {
 117        return [];
 118      }
 119      const rules = [];
 120      if (typeof boxStyle === "string") {
 121        rules.push({
 122          selector: options?.selector,
 123          key: ruleKeys.default,
 124          value: getCSSValueFromRawStyle(boxStyle)
 125        });
 126      } else {
 127        const sideRules = individualProperties.reduce(
 128          (acc, side) => {
 129            const value = getCSSValueFromRawStyle(
 130              getStyleValueByPath(boxStyle, [side])
 131            );
 132            if (value) {
 133              acc.push({
 134                selector: options?.selector,
 135                key: ruleKeys?.individual.replace(
 136                  "%s",
 137                  upperFirst(side)
 138                ),
 139                value
 140              });
 141            }
 142            return acc;
 143          },
 144          []
 145        );
 146        rules.push(...sideRules);
 147      }
 148      return rules;
 149    }
 150    function getCSSValueFromRawStyle(styleValue) {
 151      if (typeof styleValue === "string" && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
 152        const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(
 153          (presetVariable) => paramCase(presetVariable, {
 154            splitRegexp: [
 155              /([a-z0-9])([A-Z])/g,
 156              // fooBar => foo-bar, 3Bar => 3-bar
 157              /([0-9])([a-z])/g,
 158              // 3bar => 3-bar
 159              /([A-Za-z])([0-9])/g,
 160              // Foo3 => foo-3, foo3 => foo-3
 161              /([A-Z])([A-Z][a-z])/g
 162              // FOOBar => foo-bar
 163            ]
 164          })
 165        ).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
 166        return `var(--wp--$variable})`;
 167      }
 168      return styleValue;
 169    }
 170    function upperFirst(string) {
 171      const [firstLetter, ...rest] = string;
 172      return firstLetter.toUpperCase() + rest.join("");
 173    }
 174    function camelCaseJoin(strings) {
 175      const [firstItem, ...rest] = strings;
 176      return firstItem.toLowerCase() + rest.map(upperFirst).join("");
 177    }
 178    function safeDecodeURI(uri) {
 179      try {
 180        return decodeURI(uri);
 181      } catch (uriError) {
 182        return uri;
 183      }
 184    }
 185  
 186    // packages/style-engine/build-module/styles/border/index.js
 187    function createBorderGenerateFunction(path) {
 188      return (style, options) => generateRule(style, options, path, camelCaseJoin(path));
 189    }
 190    function createBorderEdgeGenerateFunction(edge) {
 191      return (style, options) => {
 192        return ["color", "style", "width"].flatMap((key) => {
 193          const path = ["border", edge, key];
 194          return createBorderGenerateFunction(path)(style, options);
 195        });
 196      };
 197    }
 198    var color = {
 199      name: "color",
 200      generate: createBorderGenerateFunction(["border", "color"])
 201    };
 202    var radius = {
 203      name: "radius",
 204      generate: (style, options) => {
 205        return generateBoxRules(
 206          style,
 207          options,
 208          ["border", "radius"],
 209          {
 210            default: "borderRadius",
 211            individual: "border%sRadius"
 212          },
 213          ["topLeft", "topRight", "bottomLeft", "bottomRight"]
 214        );
 215      }
 216    };
 217    var borderStyle = {
 218      name: "style",
 219      generate: createBorderGenerateFunction(["border", "style"])
 220    };
 221    var width = {
 222      name: "width",
 223      generate: createBorderGenerateFunction(["border", "width"])
 224    };
 225    var borderTop = {
 226      name: "borderTop",
 227      generate: createBorderEdgeGenerateFunction("top")
 228    };
 229    var borderRight = {
 230      name: "borderRight",
 231      generate: createBorderEdgeGenerateFunction("right")
 232    };
 233    var borderBottom = {
 234      name: "borderBottom",
 235      generate: createBorderEdgeGenerateFunction("bottom")
 236    };
 237    var borderLeft = {
 238      name: "borderLeft",
 239      generate: createBorderEdgeGenerateFunction("left")
 240    };
 241    var border_default = [
 242      color,
 243      borderStyle,
 244      width,
 245      radius,
 246      borderTop,
 247      borderRight,
 248      borderBottom,
 249      borderLeft
 250    ];
 251  
 252    // packages/style-engine/build-module/styles/color/background.js
 253    var background = {
 254      name: "background",
 255      generate: (style, options) => {
 256        return generateRule(
 257          style,
 258          options,
 259          ["color", "background"],
 260          "backgroundColor"
 261        );
 262      }
 263    };
 264    var background_default = background;
 265  
 266    // packages/style-engine/build-module/styles/color/gradient.js
 267    var gradient = {
 268      name: "gradient",
 269      generate: (style, options) => {
 270        return generateRule(
 271          style,
 272          options,
 273          ["color", "gradient"],
 274          "background"
 275        );
 276      }
 277    };
 278    var gradient_default = gradient;
 279  
 280    // packages/style-engine/build-module/styles/color/text.js
 281    var text = {
 282      name: "text",
 283      generate: (style, options) => {
 284        return generateRule(style, options, ["color", "text"], "color");
 285      }
 286    };
 287    var text_default = text;
 288  
 289    // packages/style-engine/build-module/styles/color/index.js
 290    var color_default = [text_default, gradient_default, background_default];
 291  
 292    // packages/style-engine/build-module/styles/dimensions/index.js
 293    var height = {
 294      name: "height",
 295      generate: (style, options) => {
 296        return generateRule(
 297          style,
 298          options,
 299          ["dimensions", "height"],
 300          "height"
 301        );
 302      }
 303    };
 304    var minHeight = {
 305      name: "minHeight",
 306      generate: (style, options) => {
 307        return generateRule(
 308          style,
 309          options,
 310          ["dimensions", "minHeight"],
 311          "minHeight"
 312        );
 313      }
 314    };
 315    var aspectRatio = {
 316      name: "aspectRatio",
 317      generate: (style, options) => {
 318        return generateRule(
 319          style,
 320          options,
 321          ["dimensions", "aspectRatio"],
 322          "aspectRatio"
 323        );
 324      }
 325    };
 326    var width2 = {
 327      name: "width",
 328      generate: (style, options) => {
 329        return generateRule(
 330          style,
 331          options,
 332          ["dimensions", "width"],
 333          "width"
 334        );
 335      }
 336    };
 337    var dimensions_default = [height, minHeight, aspectRatio, width2];
 338  
 339    // packages/style-engine/build-module/styles/background/index.js
 340    var backgroundImage = {
 341      name: "backgroundImage",
 342      generate: (style, options) => {
 343        const _backgroundImage = style?.background?.backgroundImage;
 344        if (typeof _backgroundImage === "object" && _backgroundImage?.url) {
 345          return [
 346            {
 347              selector: options.selector,
 348              key: "backgroundImage",
 349              // Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
 350              value: `url( '$encodeURI(
 351                safeDecodeURI(_backgroundImage.url)
 352              )}' )`
 353            }
 354          ];
 355        }
 356        return generateRule(
 357          style,
 358          options,
 359          ["background", "backgroundImage"],
 360          "backgroundImage"
 361        );
 362      }
 363    };
 364    var backgroundPosition = {
 365      name: "backgroundPosition",
 366      generate: (style, options) => {
 367        return generateRule(
 368          style,
 369          options,
 370          ["background", "backgroundPosition"],
 371          "backgroundPosition"
 372        );
 373      }
 374    };
 375    var backgroundRepeat = {
 376      name: "backgroundRepeat",
 377      generate: (style, options) => {
 378        return generateRule(
 379          style,
 380          options,
 381          ["background", "backgroundRepeat"],
 382          "backgroundRepeat"
 383        );
 384      }
 385    };
 386    var backgroundSize = {
 387      name: "backgroundSize",
 388      generate: (style, options) => {
 389        return generateRule(
 390          style,
 391          options,
 392          ["background", "backgroundSize"],
 393          "backgroundSize"
 394        );
 395      }
 396    };
 397    var backgroundAttachment = {
 398      name: "backgroundAttachment",
 399      generate: (style, options) => {
 400        return generateRule(
 401          style,
 402          options,
 403          ["background", "backgroundAttachment"],
 404          "backgroundAttachment"
 405        );
 406      }
 407    };
 408    var background_default2 = [
 409      backgroundImage,
 410      backgroundPosition,
 411      backgroundRepeat,
 412      backgroundSize,
 413      backgroundAttachment
 414    ];
 415  
 416    // packages/style-engine/build-module/styles/shadow/index.js
 417    var shadow = {
 418      name: "shadow",
 419      generate: (style, options) => {
 420        return generateRule(style, options, ["shadow"], "boxShadow");
 421      }
 422    };
 423    var shadow_default = [shadow];
 424  
 425    // packages/style-engine/build-module/styles/outline/index.js
 426    var color2 = {
 427      name: "color",
 428      generate: (style, options, path = ["outline", "color"], ruleKey = "outlineColor") => {
 429        return generateRule(style, options, path, ruleKey);
 430      }
 431    };
 432    var offset = {
 433      name: "offset",
 434      generate: (style, options, path = ["outline", "offset"], ruleKey = "outlineOffset") => {
 435        return generateRule(style, options, path, ruleKey);
 436      }
 437    };
 438    var outlineStyle = {
 439      name: "style",
 440      generate: (style, options, path = ["outline", "style"], ruleKey = "outlineStyle") => {
 441        return generateRule(style, options, path, ruleKey);
 442      }
 443    };
 444    var width3 = {
 445      name: "width",
 446      generate: (style, options, path = ["outline", "width"], ruleKey = "outlineWidth") => {
 447        return generateRule(style, options, path, ruleKey);
 448      }
 449    };
 450    var outline_default = [color2, outlineStyle, offset, width3];
 451  
 452    // packages/style-engine/build-module/styles/spacing/padding.js
 453    var padding = {
 454      name: "padding",
 455      generate: (style, options) => {
 456        return generateBoxRules(style, options, ["spacing", "padding"], {
 457          default: "padding",
 458          individual: "padding%s"
 459        });
 460      }
 461    };
 462    var padding_default = padding;
 463  
 464    // packages/style-engine/build-module/styles/spacing/margin.js
 465    var margin = {
 466      name: "margin",
 467      generate: (style, options) => {
 468        return generateBoxRules(style, options, ["spacing", "margin"], {
 469          default: "margin",
 470          individual: "margin%s"
 471        });
 472      }
 473    };
 474    var margin_default = margin;
 475  
 476    // packages/style-engine/build-module/styles/spacing/index.js
 477    var spacing_default = [margin_default, padding_default];
 478  
 479    // packages/style-engine/build-module/styles/typography/index.js
 480    var fontSize = {
 481      name: "fontSize",
 482      generate: (style, options) => {
 483        return generateRule(
 484          style,
 485          options,
 486          ["typography", "fontSize"],
 487          "fontSize"
 488        );
 489      }
 490    };
 491    var fontStyle = {
 492      name: "fontStyle",
 493      generate: (style, options) => {
 494        return generateRule(
 495          style,
 496          options,
 497          ["typography", "fontStyle"],
 498          "fontStyle"
 499        );
 500      }
 501    };
 502    var fontWeight = {
 503      name: "fontWeight",
 504      generate: (style, options) => {
 505        return generateRule(
 506          style,
 507          options,
 508          ["typography", "fontWeight"],
 509          "fontWeight"
 510        );
 511      }
 512    };
 513    var fontFamily = {
 514      name: "fontFamily",
 515      generate: (style, options) => {
 516        return generateRule(
 517          style,
 518          options,
 519          ["typography", "fontFamily"],
 520          "fontFamily"
 521        );
 522      }
 523    };
 524    var letterSpacing = {
 525      name: "letterSpacing",
 526      generate: (style, options) => {
 527        return generateRule(
 528          style,
 529          options,
 530          ["typography", "letterSpacing"],
 531          "letterSpacing"
 532        );
 533      }
 534    };
 535    var lineHeight = {
 536      name: "lineHeight",
 537      generate: (style, options) => {
 538        return generateRule(
 539          style,
 540          options,
 541          ["typography", "lineHeight"],
 542          "lineHeight"
 543        );
 544      }
 545    };
 546    var textColumns = {
 547      name: "textColumns",
 548      generate: (style, options) => {
 549        return generateRule(
 550          style,
 551          options,
 552          ["typography", "textColumns"],
 553          "columnCount"
 554        );
 555      }
 556    };
 557    var textDecoration = {
 558      name: "textDecoration",
 559      generate: (style, options) => {
 560        return generateRule(
 561          style,
 562          options,
 563          ["typography", "textDecoration"],
 564          "textDecoration"
 565        );
 566      }
 567    };
 568    var textTransform = {
 569      name: "textTransform",
 570      generate: (style, options) => {
 571        return generateRule(
 572          style,
 573          options,
 574          ["typography", "textTransform"],
 575          "textTransform"
 576        );
 577      }
 578    };
 579    var writingMode = {
 580      name: "writingMode",
 581      generate: (style, options) => {
 582        return generateRule(
 583          style,
 584          options,
 585          ["typography", "writingMode"],
 586          "writingMode"
 587        );
 588      }
 589    };
 590    var typography_default = [
 591      fontFamily,
 592      fontSize,
 593      fontStyle,
 594      fontWeight,
 595      letterSpacing,
 596      lineHeight,
 597      textColumns,
 598      textDecoration,
 599      textTransform,
 600      writingMode
 601    ];
 602  
 603    // packages/style-engine/build-module/styles/index.js
 604    var styleDefinitions = [
 605      ...border_default,
 606      ...color_default,
 607      ...dimensions_default,
 608      ...outline_default,
 609      ...spacing_default,
 610      ...typography_default,
 611      ...shadow_default,
 612      ...background_default2
 613    ];
 614  
 615    // packages/style-engine/build-module/index.js
 616    function compileCSS(style, options = {}) {
 617      const rules = getCSSRules(style, options);
 618      if (!options?.selector) {
 619        const inlineRules = [];
 620        rules.forEach((rule) => {
 621          inlineRules.push(`$paramCase(rule.key)}: $rule.value};`);
 622        });
 623        return inlineRules.join(" ");
 624      }
 625      const groupedRules = rules.reduce(
 626        (acc, rule) => {
 627          const { selector } = rule;
 628          if (!selector) {
 629            return acc;
 630          }
 631          if (!acc[selector]) {
 632            acc[selector] = [];
 633          }
 634          acc[selector].push(rule);
 635          return acc;
 636        },
 637        {}
 638      );
 639      const selectorRules = Object.keys(groupedRules).reduce(
 640        (acc, subSelector) => {
 641          acc.push(
 642            `$subSelector} { $groupedRules[subSelector].map(
 643              (rule) => `$paramCase(rule.key)}: $rule.value};`
 644            ).join(" ")} }`
 645          );
 646          return acc;
 647        },
 648        []
 649      );
 650      return selectorRules.join("\n");
 651    }
 652    function getCSSRules(style, options = {}) {
 653      const rules = [];
 654      styleDefinitions.forEach((definition) => {
 655        if (typeof definition.generate === "function") {
 656          rules.push(...definition.generate(style, options));
 657        }
 658      });
 659      return rules;
 660    }
 661    return __toCommonJS(index_exports);
 662  })();