[Summary view] [Print] [Text view]

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