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