[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.mjs
  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.mjs
  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.mjs
  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 {
 182        return uri;
 183      }
 184    }
 185  
 186    // packages/style-engine/build-module/styles/border/index.mjs
 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.mjs
 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.mjs
 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.mjs
 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.mjs
 290    var color_default = [text_default, gradient_default, background_default];
 291  
 292    // packages/style-engine/build-module/styles/dimensions/index.mjs
 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 minWidth = {
 316      name: "minWidth",
 317      generate: (style, options) => {
 318        return generateRule(
 319          style,
 320          options,
 321          ["dimensions", "minWidth"],
 322          "minWidth"
 323        );
 324      }
 325    };
 326    var aspectRatio = {
 327      name: "aspectRatio",
 328      generate: (style, options) => {
 329        return generateRule(
 330          style,
 331          options,
 332          ["dimensions", "aspectRatio"],
 333          "aspectRatio"
 334        );
 335      }
 336    };
 337    var width2 = {
 338      name: "width",
 339      generate: (style, options) => {
 340        return generateRule(
 341          style,
 342          options,
 343          ["dimensions", "width"],
 344          "width"
 345        );
 346      }
 347    };
 348    var dimensions_default = [height, minHeight, minWidth, aspectRatio, width2];
 349  
 350    // packages/style-engine/build-module/styles/background/index.mjs
 351    var backgroundImage = {
 352      name: "backgroundImage",
 353      generate: (style, options) => {
 354        const _backgroundImage = style?.background?.backgroundImage;
 355        const gradient2 = getCSSValueFromRawStyle(style?.background?.gradient) || "";
 356        if (!_backgroundImage && !gradient2) {
 357          return [];
 358        }
 359        const backgroundImageValue = typeof _backgroundImage === "object" && _backgroundImage?.url ? `url( '$encodeURI(
 360          safeDecodeURI(_backgroundImage.url)
 361        )}' )` : getCSSValueFromRawStyle(_backgroundImage);
 362        const cssValue = [gradient2, backgroundImageValue].filter(Boolean).join(", ");
 363        return !!cssValue ? [
 364          {
 365            selector: options.selector,
 366            key: "backgroundImage",
 367            value: cssValue
 368          }
 369        ] : [];
 370      }
 371    };
 372    var backgroundPosition = {
 373      name: "backgroundPosition",
 374      generate: (style, options) => {
 375        return generateRule(
 376          style,
 377          options,
 378          ["background", "backgroundPosition"],
 379          "backgroundPosition"
 380        );
 381      }
 382    };
 383    var backgroundRepeat = {
 384      name: "backgroundRepeat",
 385      generate: (style, options) => {
 386        return generateRule(
 387          style,
 388          options,
 389          ["background", "backgroundRepeat"],
 390          "backgroundRepeat"
 391        );
 392      }
 393    };
 394    var backgroundSize = {
 395      name: "backgroundSize",
 396      generate: (style, options) => {
 397        return generateRule(
 398          style,
 399          options,
 400          ["background", "backgroundSize"],
 401          "backgroundSize"
 402        );
 403      }
 404    };
 405    var backgroundAttachment = {
 406      name: "backgroundAttachment",
 407      generate: (style, options) => {
 408        return generateRule(
 409          style,
 410          options,
 411          ["background", "backgroundAttachment"],
 412          "backgroundAttachment"
 413        );
 414      }
 415    };
 416    var background_default2 = [
 417      backgroundImage,
 418      backgroundPosition,
 419      backgroundRepeat,
 420      backgroundSize,
 421      backgroundAttachment
 422    ];
 423  
 424    // packages/style-engine/build-module/styles/shadow/index.mjs
 425    var shadow = {
 426      name: "shadow",
 427      generate: (style, options) => {
 428        return generateRule(style, options, ["shadow"], "boxShadow");
 429      }
 430    };
 431    var shadow_default = [shadow];
 432  
 433    // packages/style-engine/build-module/styles/outline/index.mjs
 434    var color2 = {
 435      name: "color",
 436      generate: (style, options, path = ["outline", "color"], ruleKey = "outlineColor") => {
 437        return generateRule(style, options, path, ruleKey);
 438      }
 439    };
 440    var offset = {
 441      name: "offset",
 442      generate: (style, options, path = ["outline", "offset"], ruleKey = "outlineOffset") => {
 443        return generateRule(style, options, path, ruleKey);
 444      }
 445    };
 446    var outlineStyle = {
 447      name: "style",
 448      generate: (style, options, path = ["outline", "style"], ruleKey = "outlineStyle") => {
 449        return generateRule(style, options, path, ruleKey);
 450      }
 451    };
 452    var width3 = {
 453      name: "width",
 454      generate: (style, options, path = ["outline", "width"], ruleKey = "outlineWidth") => {
 455        return generateRule(style, options, path, ruleKey);
 456      }
 457    };
 458    var outline_default = [color2, outlineStyle, offset, width3];
 459  
 460    // packages/style-engine/build-module/styles/spacing/padding.mjs
 461    var padding = {
 462      name: "padding",
 463      generate: (style, options) => {
 464        return generateBoxRules(style, options, ["spacing", "padding"], {
 465          default: "padding",
 466          individual: "padding%s"
 467        });
 468      }
 469    };
 470    var padding_default = padding;
 471  
 472    // packages/style-engine/build-module/styles/spacing/margin.mjs
 473    var margin = {
 474      name: "margin",
 475      generate: (style, options) => {
 476        return generateBoxRules(style, options, ["spacing", "margin"], {
 477          default: "margin",
 478          individual: "margin%s"
 479        });
 480      }
 481    };
 482    var margin_default = margin;
 483  
 484    // packages/style-engine/build-module/styles/spacing/index.mjs
 485    var spacing_default = [margin_default, padding_default];
 486  
 487    // packages/style-engine/build-module/styles/typography/index.mjs
 488    var fontSize = {
 489      name: "fontSize",
 490      generate: (style, options) => {
 491        return generateRule(
 492          style,
 493          options,
 494          ["typography", "fontSize"],
 495          "fontSize"
 496        );
 497      }
 498    };
 499    var fontStyle = {
 500      name: "fontStyle",
 501      generate: (style, options) => {
 502        return generateRule(
 503          style,
 504          options,
 505          ["typography", "fontStyle"],
 506          "fontStyle"
 507        );
 508      }
 509    };
 510    var fontWeight = {
 511      name: "fontWeight",
 512      generate: (style, options) => {
 513        return generateRule(
 514          style,
 515          options,
 516          ["typography", "fontWeight"],
 517          "fontWeight"
 518        );
 519      }
 520    };
 521    var fontFamily = {
 522      name: "fontFamily",
 523      generate: (style, options) => {
 524        return generateRule(
 525          style,
 526          options,
 527          ["typography", "fontFamily"],
 528          "fontFamily"
 529        );
 530      }
 531    };
 532    var letterSpacing = {
 533      name: "letterSpacing",
 534      generate: (style, options) => {
 535        return generateRule(
 536          style,
 537          options,
 538          ["typography", "letterSpacing"],
 539          "letterSpacing"
 540        );
 541      }
 542    };
 543    var lineHeight = {
 544      name: "lineHeight",
 545      generate: (style, options) => {
 546        return generateRule(
 547          style,
 548          options,
 549          ["typography", "lineHeight"],
 550          "lineHeight"
 551        );
 552      }
 553    };
 554    var textColumns = {
 555      name: "textColumns",
 556      generate: (style, options) => {
 557        return generateRule(
 558          style,
 559          options,
 560          ["typography", "textColumns"],
 561          "columnCount"
 562        );
 563      }
 564    };
 565    var textDecoration = {
 566      name: "textDecoration",
 567      generate: (style, options) => {
 568        return generateRule(
 569          style,
 570          options,
 571          ["typography", "textDecoration"],
 572          "textDecoration"
 573        );
 574      }
 575    };
 576    var textIndent = {
 577      name: "textIndent",
 578      generate: (style, options) => {
 579        return generateRule(
 580          style,
 581          options,
 582          ["typography", "textIndent"],
 583          "textIndent"
 584        );
 585      }
 586    };
 587    var textTransform = {
 588      name: "textTransform",
 589      generate: (style, options) => {
 590        return generateRule(
 591          style,
 592          options,
 593          ["typography", "textTransform"],
 594          "textTransform"
 595        );
 596      }
 597    };
 598    var writingMode = {
 599      name: "writingMode",
 600      generate: (style, options) => {
 601        return generateRule(
 602          style,
 603          options,
 604          ["typography", "writingMode"],
 605          "writingMode"
 606        );
 607      }
 608    };
 609    var typography_default = [
 610      fontFamily,
 611      fontSize,
 612      fontStyle,
 613      fontWeight,
 614      letterSpacing,
 615      lineHeight,
 616      textColumns,
 617      textDecoration,
 618      textIndent,
 619      textTransform,
 620      writingMode
 621    ];
 622  
 623    // packages/style-engine/build-module/styles/index.mjs
 624    var styleDefinitions = [
 625      ...border_default,
 626      ...color_default,
 627      ...dimensions_default,
 628      ...outline_default,
 629      ...spacing_default,
 630      ...typography_default,
 631      ...shadow_default,
 632      ...background_default2
 633    ];
 634  
 635    // packages/style-engine/build-module/index.mjs
 636    function compileCSS(style, options = {}) {
 637      const rules = getCSSRules(style, options);
 638      if (!options?.selector) {
 639        const inlineRules = [];
 640        rules.forEach((rule) => {
 641          inlineRules.push(`$paramCase(rule.key)}: $rule.value};`);
 642        });
 643        return inlineRules.join(" ");
 644      }
 645      const groupedRules = rules.reduce(
 646        (acc, rule) => {
 647          const { selector } = rule;
 648          if (!selector) {
 649            return acc;
 650          }
 651          if (!acc[selector]) {
 652            acc[selector] = [];
 653          }
 654          acc[selector].push(rule);
 655          return acc;
 656        },
 657        {}
 658      );
 659      const selectorRules = Object.keys(groupedRules).reduce(
 660        (acc, subSelector) => {
 661          acc.push(
 662            `$subSelector} { $groupedRules[subSelector].map(
 663              (rule) => `$paramCase(rule.key)}: $rule.value};`
 664            ).join(" ")} }`
 665          );
 666          return acc;
 667        },
 668        []
 669      );
 670      return selectorRules.join("\n");
 671    }
 672    function getCSSRules(style, options = {}) {
 673      const rules = [];
 674      styleDefinitions.forEach((definition) => {
 675        if (typeof definition.generate === "function") {
 676          rules.push(...definition.generate(style, options));
 677        }
 678      });
 679      return rules;
 680    }
 681    return __toCommonJS(index_exports);
 682  })();