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