| 1 | import {MS, MOZ, WEBKIT} from './Enum.js'
|
|---|
| 2 | import {hash, charat, strlen, indexof, replace, substr, match} from './Utility.js'
|
|---|
| 3 |
|
|---|
| 4 | /**
|
|---|
| 5 | * @param {string} value
|
|---|
| 6 | * @param {number} length
|
|---|
| 7 | * @param {object[]} children
|
|---|
| 8 | * @return {string}
|
|---|
| 9 | */
|
|---|
| 10 | export function prefix (value, length, children) {
|
|---|
| 11 | switch (hash(value, length)) {
|
|---|
| 12 | // color-adjust
|
|---|
| 13 | case 5103:
|
|---|
| 14 | return WEBKIT + 'print-' + value + value
|
|---|
| 15 | // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
|
|---|
| 16 | case 5737: case 4201: case 3177: case 3433: case 1641: case 4457: case 2921:
|
|---|
| 17 | // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
|
|---|
| 18 | case 5572: case 6356: case 5844: case 3191: case 6645: case 3005:
|
|---|
| 19 | // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
|
|---|
| 20 | case 6391: case 5879: case 5623: case 6135: case 4599: case 4855:
|
|---|
| 21 | // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
|
|---|
| 22 | case 4215: case 6389: case 5109: case 5365: case 5621: case 3829:
|
|---|
| 23 | return WEBKIT + value + value
|
|---|
| 24 | // tab-size
|
|---|
| 25 | case 4789:
|
|---|
| 26 | return MOZ + value + value
|
|---|
| 27 | // appearance, user-select, transform, hyphens, text-size-adjust
|
|---|
| 28 | case 5349: case 4246: case 4810: case 6968: case 2756:
|
|---|
| 29 | return WEBKIT + value + MOZ + value + MS + value + value
|
|---|
| 30 | // writing-mode
|
|---|
| 31 | case 5936:
|
|---|
| 32 | switch (charat(value, length + 11)) {
|
|---|
| 33 | // vertical-l(r)
|
|---|
| 34 | case 114:
|
|---|
| 35 | return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value
|
|---|
| 36 | // vertical-r(l)
|
|---|
| 37 | case 108:
|
|---|
| 38 | return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value
|
|---|
| 39 | // horizontal(-)tb
|
|---|
| 40 | case 45:
|
|---|
| 41 | return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value
|
|---|
| 42 | // default: fallthrough to below
|
|---|
| 43 | }
|
|---|
| 44 | // flex, flex-direction, scroll-snap-type, writing-mode
|
|---|
| 45 | case 6828: case 4268: case 2903:
|
|---|
| 46 | return WEBKIT + value + MS + value + value
|
|---|
| 47 | // order
|
|---|
| 48 | case 6165:
|
|---|
| 49 | return WEBKIT + value + MS + 'flex-' + value + value
|
|---|
| 50 | // align-items
|
|---|
| 51 | case 5187:
|
|---|
| 52 | return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value
|
|---|
| 53 | // align-self
|
|---|
| 54 | case 5443:
|
|---|
| 55 | return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/g, '') + (!match(value, /flex-|baseline/) ? MS + 'grid-row-' + replace(value, /flex-|-self/g, '') : '') + value
|
|---|
| 56 | // align-content
|
|---|
| 57 | case 4675:
|
|---|
| 58 | return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/g, '') + value
|
|---|
| 59 | // flex-shrink
|
|---|
| 60 | case 5548:
|
|---|
| 61 | return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value
|
|---|
| 62 | // flex-basis
|
|---|
| 63 | case 5292:
|
|---|
| 64 | return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value
|
|---|
| 65 | // flex-grow
|
|---|
| 66 | case 6060:
|
|---|
| 67 | return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value
|
|---|
| 68 | // transition
|
|---|
| 69 | case 4554:
|
|---|
| 70 | return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value
|
|---|
| 71 | // cursor
|
|---|
| 72 | case 6187:
|
|---|
| 73 | return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value
|
|---|
| 74 | // background, background-image
|
|---|
| 75 | case 5495: case 3959:
|
|---|
| 76 | return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
|
|---|
| 77 | // justify-content
|
|---|
| 78 | case 4968:
|
|---|
| 79 | return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value
|
|---|
| 80 | // justify-self
|
|---|
| 81 | case 4200:
|
|---|
| 82 | if (!match(value, /flex-|baseline/)) return MS + 'grid-column-align' + substr(value, length) + value
|
|---|
| 83 | break
|
|---|
| 84 | // grid-template-(columns|rows)
|
|---|
| 85 | case 2592: case 3360:
|
|---|
| 86 | return MS + replace(value, 'template-', '') + value
|
|---|
| 87 | // grid-(row|column)-start
|
|---|
| 88 | case 4384: case 3616:
|
|---|
| 89 | if (children && children.some(function (element, index) { return length = index, match(element.props, /grid-\w+-end/) })) {
|
|---|
| 90 | return ~indexof(value + (children = children[length].value), 'span', 0) ? value : (MS + replace(value, '-start', '') + value + MS + 'grid-row-span:' + (~indexof(children, 'span', 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ';')
|
|---|
| 91 | }
|
|---|
| 92 | return MS + replace(value, '-start', '') + value
|
|---|
| 93 | // grid-(row|column)-end
|
|---|
| 94 | case 4896: case 4128:
|
|---|
| 95 | return (children && children.some(function (element) { return match(element.props, /grid-\w+-start/) })) ? value : MS + replace(replace(value, '-end', '-span'), 'span ', '') + value
|
|---|
| 96 | // (margin|padding)-inline-(start|end)
|
|---|
| 97 | case 4095: case 3583: case 4068: case 2532:
|
|---|
| 98 | return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
|
|---|
| 99 | // (min|max)?(width|height|inline-size|block-size)
|
|---|
| 100 | case 8116: case 7059: case 5753: case 5535:
|
|---|
| 101 | case 5445: case 5701: case 4933: case 4677:
|
|---|
| 102 | case 5533: case 5789: case 5021: case 4765:
|
|---|
| 103 | // stretch, max-content, min-content, fill-available
|
|---|
| 104 | if (strlen(value) - 1 - length > 6)
|
|---|
| 105 | switch (charat(value, length + 1)) {
|
|---|
| 106 | // (m)ax-content, (m)in-content
|
|---|
| 107 | case 109:
|
|---|
| 108 | // -
|
|---|
| 109 | if (charat(value, length + 4) !== 45)
|
|---|
| 110 | break
|
|---|
| 111 | // (f)ill-available, (f)it-content
|
|---|
| 112 | case 102:
|
|---|
| 113 | return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value
|
|---|
| 114 | // (s)tretch
|
|---|
| 115 | case 115:
|
|---|
| 116 | return ~indexof(value, 'stretch', 0) ? prefix(replace(value, 'stretch', 'fill-available'), length, children) + value : value
|
|---|
| 117 | }
|
|---|
| 118 | break
|
|---|
| 119 | // grid-(column|row)
|
|---|
| 120 | case 5152: case 5920:
|
|---|
| 121 | return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function (_, a, b, c, d, e, f) { return (MS + a + ':' + b + f) + (c ? (MS + a + '-span:' + (d ? e : +e - +b)) + f : '') + value })
|
|---|
| 122 | // position: sticky
|
|---|
| 123 | case 4949:
|
|---|
| 124 | // stick(y)?
|
|---|
| 125 | if (charat(value, length + 6) === 121)
|
|---|
| 126 | return replace(value, ':', ':' + WEBKIT) + value
|
|---|
| 127 | break
|
|---|
| 128 | // display: (flex|inline-flex|grid|inline-grid)
|
|---|
| 129 | case 6444:
|
|---|
| 130 | switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
|
|---|
| 131 | // (inline-)?fle(x)
|
|---|
| 132 | case 120:
|
|---|
| 133 | return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value
|
|---|
| 134 | // (inline-)?gri(d)
|
|---|
| 135 | case 100:
|
|---|
| 136 | return replace(value, ':', ':' + MS) + value
|
|---|
| 137 | }
|
|---|
| 138 | break
|
|---|
| 139 | // scroll-margin, scroll-margin-(top|right|bottom|left)
|
|---|
| 140 | case 5719: case 2647: case 2135: case 3927: case 2391:
|
|---|
| 141 | return replace(value, 'scroll-', 'scroll-snap-') + value
|
|---|
| 142 | }
|
|---|
| 143 |
|
|---|
| 144 | return value
|
|---|
| 145 | }
|
|---|
