| 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 |
})(); |
| 683 |
//# sourceMappingURL=index.js.map |
| 684 |
|
