[6a3a178] | 1 | import postcss from 'postcss';
|
---|
| 2 |
|
---|
| 3 | var cloneRule = ((decl, dir) => {
|
---|
| 4 | const rule = Object(decl.parent).type === 'rule' ? decl.parent.clone({
|
---|
| 5 | raws: {}
|
---|
| 6 | }).removeAll() : postcss.rule({
|
---|
| 7 | selector: '&'
|
---|
| 8 | });
|
---|
| 9 | rule.selectors = rule.selectors.map(selector => `${selector}:dir(${dir})`);
|
---|
| 10 | return rule;
|
---|
| 11 | });
|
---|
| 12 |
|
---|
| 13 | const matchLogical = /^\s*logical\s+/i;
|
---|
| 14 | const matchLogicalBorder = /^border(-width|-style|-color)?$/i;
|
---|
| 15 | const matchLogicalBorderSide = /^border-(block|block-start|block-end|inline|inline-start|inline-end|start|end)(-(width|style|color))?$/i;
|
---|
| 16 | var transformBorder = {
|
---|
| 17 | // border
|
---|
| 18 | 'border': (decl, values, dir) => {
|
---|
| 19 | const isLogical = matchLogical.test(values[0]);
|
---|
| 20 |
|
---|
| 21 | if (isLogical) {
|
---|
| 22 | values[0] = values[0].replace(matchLogical, '');
|
---|
| 23 | }
|
---|
| 24 |
|
---|
| 25 | const ltrDecls = [decl.clone({
|
---|
| 26 | prop: `border-top${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 27 | value: values[0]
|
---|
| 28 | }), decl.clone({
|
---|
| 29 | prop: `border-left${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 30 | value: values[1] || values[0]
|
---|
| 31 | }), decl.clone({
|
---|
| 32 | prop: `border-bottom${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 33 | value: values[2] || values[0]
|
---|
| 34 | }), decl.clone({
|
---|
| 35 | prop: `border-right${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 36 | value: values[3] || values[1] || values[0]
|
---|
| 37 | })];
|
---|
| 38 | const rtlDecls = [decl.clone({
|
---|
| 39 | prop: `border-top${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 40 | value: values[0]
|
---|
| 41 | }), decl.clone({
|
---|
| 42 | prop: `border-right${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 43 | value: values[1] || values[0]
|
---|
| 44 | }), decl.clone({
|
---|
| 45 | prop: `border-bottom${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 46 | value: values[2] || values[0]
|
---|
| 47 | }), decl.clone({
|
---|
| 48 | prop: `border-left${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 49 | value: values[3] || values[1] || values[0]
|
---|
| 50 | })];
|
---|
| 51 | return isLogical ? 1 === values.length ? decl.clone({
|
---|
| 52 | value: decl.value.replace(matchLogical, '')
|
---|
| 53 | }) : !values[3] || values[3] === values[1] ? [decl.clone({
|
---|
| 54 | prop: `border-top${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 55 | value: values[0]
|
---|
| 56 | }), decl.clone({
|
---|
| 57 | prop: `border-right${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 58 | value: values[3] || values[1] || values[0]
|
---|
| 59 | }), decl.clone({
|
---|
| 60 | prop: `border-bottom${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 61 | value: values[2] || values[0]
|
---|
| 62 | }), decl.clone({
|
---|
| 63 | prop: `border-left${decl.prop.replace(matchLogicalBorder, '$1')}`,
|
---|
| 64 | value: values[1] || values[0]
|
---|
| 65 | })] : 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)] : null;
|
---|
| 66 | },
|
---|
| 67 | // border-block
|
---|
| 68 | 'border-block': (decl, values) => [decl.clone({
|
---|
| 69 | prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 70 | value: values[0]
|
---|
| 71 | }), decl.clone({
|
---|
| 72 | prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 73 | value: values[0]
|
---|
| 74 | })],
|
---|
| 75 | // border-block-start
|
---|
| 76 | 'border-block-start': decl => {
|
---|
| 77 | decl.prop = 'border-top';
|
---|
| 78 | },
|
---|
| 79 | // border-block-end
|
---|
| 80 | 'border-block-end': decl => {
|
---|
| 81 | decl.prop = 'border-bottom';
|
---|
| 82 | },
|
---|
| 83 | // border-inline
|
---|
| 84 | 'border-inline': (decl, values, dir) => {
|
---|
| 85 | const ltrDecls = [decl.clone({
|
---|
| 86 | prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 87 | value: values[0]
|
---|
| 88 | }), decl.clone({
|
---|
| 89 | prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 90 | value: values[1] || values[0]
|
---|
| 91 | })];
|
---|
| 92 | const rtlDecls = [decl.clone({
|
---|
| 93 | prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 94 | value: values[0]
|
---|
| 95 | }), decl.clone({
|
---|
| 96 | prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 97 | value: values[1] || values[0]
|
---|
| 98 | })];
|
---|
| 99 | const isLTR = 1 === values.length || 2 === values.length && values[0] === values[1];
|
---|
| 100 | return isLTR ? ltrDecls : 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)];
|
---|
| 101 | },
|
---|
| 102 | // border-inline-start
|
---|
| 103 | 'border-inline-start': (decl, values, dir) => {
|
---|
| 104 | const ltrDecl = decl.clone({
|
---|
| 105 | prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`
|
---|
| 106 | });
|
---|
| 107 | const rtlDecl = decl.clone({
|
---|
| 108 | prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`
|
---|
| 109 | });
|
---|
| 110 | return 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)];
|
---|
| 111 | },
|
---|
| 112 | // border-inline-end
|
---|
| 113 | 'border-inline-end': (decl, values, dir) => {
|
---|
| 114 | const ltrDecl = decl.clone({
|
---|
| 115 | prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`
|
---|
| 116 | });
|
---|
| 117 | const rtlDecl = decl.clone({
|
---|
| 118 | prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`
|
---|
| 119 | });
|
---|
| 120 | return 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)];
|
---|
| 121 | },
|
---|
| 122 | // border-start
|
---|
| 123 | 'border-start': (decl, values, dir) => {
|
---|
| 124 | const ltrDecls = [decl.clone({
|
---|
| 125 | prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 126 | value: values[0]
|
---|
| 127 | }), decl.clone({
|
---|
| 128 | prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 129 | value: values[1] || values[0]
|
---|
| 130 | })];
|
---|
| 131 | const rtlDecls = [decl.clone({
|
---|
| 132 | prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 133 | value: values[0]
|
---|
| 134 | }), decl.clone({
|
---|
| 135 | prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 136 | value: values[1] || values[0]
|
---|
| 137 | })];
|
---|
| 138 | return 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)];
|
---|
| 139 | },
|
---|
| 140 | // border-end
|
---|
| 141 | 'border-end': (decl, values, dir) => {
|
---|
| 142 | const ltrDecls = [decl.clone({
|
---|
| 143 | prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 144 | value: values[0]
|
---|
| 145 | }), decl.clone({
|
---|
| 146 | prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 147 | value: values[1] || values[0]
|
---|
| 148 | })];
|
---|
| 149 | const rtlDecls = [decl.clone({
|
---|
| 150 | prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 151 | value: values[0]
|
---|
| 152 | }), decl.clone({
|
---|
| 153 | prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
|
---|
| 154 | value: values[1] || values[0]
|
---|
| 155 | })];
|
---|
| 156 | return 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)];
|
---|
| 157 | }
|
---|
| 158 | };
|
---|
| 159 |
|
---|
| 160 | var transformFloat = ((decl, values, dir) => {
|
---|
| 161 | const lDecl = decl.clone({
|
---|
| 162 | value: 'left'
|
---|
| 163 | });
|
---|
| 164 | const rDecl = decl.clone({
|
---|
| 165 | value: 'right'
|
---|
| 166 | });
|
---|
| 167 | return /^inline-start$/i.test(decl.value) ? 'ltr' === dir ? lDecl : 'rtl' === dir ? rDecl : [cloneRule(decl, 'ltr').append(lDecl), cloneRule(decl, 'rtl').append(rDecl)] : /^inline-end$/i.test(decl.value) ? 'ltr' === dir ? rDecl : 'rtl' === dir ? lDecl : [cloneRule(decl, 'ltr').append(rDecl), cloneRule(decl, 'rtl').append(lDecl)] : null;
|
---|
| 168 | });
|
---|
| 169 |
|
---|
| 170 | var transformInset = ((decl, values, dir) => {
|
---|
| 171 | if ('logical' !== values[0]) {
|
---|
| 172 | return [decl.clone({
|
---|
| 173 | prop: 'top',
|
---|
| 174 | value: values[0]
|
---|
| 175 | }), decl.clone({
|
---|
| 176 | prop: 'right',
|
---|
| 177 | value: values[1] || values[0]
|
---|
| 178 | }), decl.clone({
|
---|
| 179 | prop: 'bottom',
|
---|
| 180 | value: values[2] || values[0]
|
---|
| 181 | }), decl.clone({
|
---|
| 182 | prop: 'left',
|
---|
| 183 | value: values[3] || values[1] || values[0]
|
---|
| 184 | })];
|
---|
| 185 | }
|
---|
| 186 |
|
---|
| 187 | const isLTR = !values[4] || values[4] === values[2];
|
---|
| 188 | const ltrDecls = [decl.clone({
|
---|
| 189 | prop: 'top',
|
---|
| 190 | value: values[1]
|
---|
| 191 | }), decl.clone({
|
---|
| 192 | prop: 'left',
|
---|
| 193 | value: values[2] || values[1]
|
---|
| 194 | }), decl.clone({
|
---|
| 195 | prop: 'bottom',
|
---|
| 196 | value: values[3] || values[1]
|
---|
| 197 | }), decl.clone({
|
---|
| 198 | prop: 'right',
|
---|
| 199 | value: values[4] || values[2] || values[1]
|
---|
| 200 | })];
|
---|
| 201 | const rtlDecls = [decl.clone({
|
---|
| 202 | prop: 'top',
|
---|
| 203 | value: values[1]
|
---|
| 204 | }), decl.clone({
|
---|
| 205 | prop: 'right',
|
---|
| 206 | value: values[2] || values[1]
|
---|
| 207 | }), decl.clone({
|
---|
| 208 | prop: 'bottom',
|
---|
| 209 | value: values[3] || values[1]
|
---|
| 210 | }), decl.clone({
|
---|
| 211 | prop: 'left',
|
---|
| 212 | value: values[4] || values[2] || values[1]
|
---|
| 213 | })];
|
---|
| 214 | return isLTR || 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)];
|
---|
| 215 | });
|
---|
| 216 |
|
---|
| 217 | var transformResize = (decl => /^block$/i.test(decl.value) ? decl.clone({
|
---|
| 218 | value: 'vertical'
|
---|
| 219 | }) : /^inline$/i.test(decl.value) ? decl.clone({
|
---|
| 220 | value: 'horizontal'
|
---|
| 221 | }) : null);
|
---|
| 222 |
|
---|
| 223 | var matchSide = /^(inset|margin|padding)(?:-(block|block-start|block-end|inline|inline-start|inline-end|start|end))$/i;
|
---|
| 224 |
|
---|
| 225 | var matchInsetPrefix = /^inset-/i;
|
---|
| 226 |
|
---|
| 227 | var cloneDecl = ((decl, suffix, value) => decl.clone({
|
---|
| 228 | prop: `${decl.prop.replace(matchSide, '$1')}${suffix}`.replace(matchInsetPrefix, ''),
|
---|
| 229 | value
|
---|
| 230 | }));
|
---|
| 231 |
|
---|
| 232 | var transformSide = {
|
---|
| 233 | // inset-block, margin-block, padding-block
|
---|
| 234 | 'block': (decl, values) => [cloneDecl(decl, '-top', values[0]), cloneDecl(decl, '-bottom', values[1] || values[0])],
|
---|
| 235 | // inset-block-start, margin-block-start, padding-block-start
|
---|
| 236 | 'block-start': decl => {
|
---|
| 237 | decl.prop = decl.prop.replace(matchSide, '$1-top').replace(matchInsetPrefix, '');
|
---|
| 238 | },
|
---|
| 239 | // inset-block-end, margin-block-end, padding-block-end
|
---|
| 240 | 'block-end': decl => {
|
---|
| 241 | decl.prop = decl.prop.replace(matchSide, '$1-bottom').replace(matchInsetPrefix, '');
|
---|
| 242 | },
|
---|
| 243 | // inset-inline, margin-inline, padding-inline
|
---|
| 244 | 'inline': (decl, values, dir) => {
|
---|
| 245 | const ltrDecls = [cloneDecl(decl, '-left', values[0]), cloneDecl(decl, '-right', values[1] || values[0])];
|
---|
| 246 | const rtlDecls = [cloneDecl(decl, '-right', values[0]), cloneDecl(decl, '-left', values[1] || values[0])];
|
---|
| 247 | const isLTR = 1 === values.length || 2 === values.length && values[0] === values[1];
|
---|
| 248 | return isLTR ? ltrDecls : 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)];
|
---|
| 249 | },
|
---|
| 250 | // inset-inline-start, margin-inline-start, padding-inline-start
|
---|
| 251 | 'inline-start': (decl, values, dir) => {
|
---|
| 252 | const ltrDecl = cloneDecl(decl, '-left', decl.value);
|
---|
| 253 | const rtlDecl = cloneDecl(decl, '-right', decl.value);
|
---|
| 254 | return 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)];
|
---|
| 255 | },
|
---|
| 256 | // inset-inline-end, margin-inline-end, padding-inline-end
|
---|
| 257 | 'inline-end': (decl, values, dir) => {
|
---|
| 258 | const ltrDecl = cloneDecl(decl, '-right', decl.value);
|
---|
| 259 | const rtlDecl = cloneDecl(decl, '-left', decl.value);
|
---|
| 260 | return 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)];
|
---|
| 261 | },
|
---|
| 262 | // inset-start, margin-start, padding-start
|
---|
| 263 | 'start': (decl, values, dir) => {
|
---|
| 264 | const ltrDecls = [cloneDecl(decl, '-top', values[0]), cloneDecl(decl, '-left', values[1] || values[0])];
|
---|
| 265 | const rtlDecls = [cloneDecl(decl, '-top', values[0]), cloneDecl(decl, '-right', values[1] || values[0])];
|
---|
| 266 | return 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)];
|
---|
| 267 | },
|
---|
| 268 | // inset-end, margin-end, padding-end
|
---|
| 269 | 'end': (decl, values, dir) => {
|
---|
| 270 | const ltrDecls = [cloneDecl(decl, '-bottom', values[0]), cloneDecl(decl, '-right', values[1] || values[0])];
|
---|
| 271 | const rtlDecls = [cloneDecl(decl, '-bottom', values[0]), cloneDecl(decl, '-left', values[1] || values[0])];
|
---|
| 272 | return 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)];
|
---|
| 273 | }
|
---|
| 274 | };
|
---|
| 275 |
|
---|
| 276 | var matchSize = /^(min-|max-)?(block|inline)-(size)$/i;
|
---|
| 277 |
|
---|
| 278 | var transformSize = (decl => {
|
---|
| 279 | decl.prop = decl.prop.replace(matchSize, ($0, minmax, flow) => `${minmax || ''}${'block' === flow ? 'height' : 'width'}`);
|
---|
| 280 | });
|
---|
| 281 |
|
---|
| 282 | var transformSpacing = ((decl, values, dir) => {
|
---|
| 283 | if ('logical' !== values[0]) {
|
---|
| 284 | return null;
|
---|
| 285 | }
|
---|
| 286 |
|
---|
| 287 | const isLTR = !values[4] || values[4] === values[2];
|
---|
| 288 | const ltrDecl = decl.clone({
|
---|
| 289 | value: [values[1], values[4] || values[2] || values[1], values[3] || values[1], values[2] || values[1]].join(' ')
|
---|
| 290 | });
|
---|
| 291 | const rtlDecl = decl.clone({
|
---|
| 292 | value: [values[1], values[2] || values[1], values[3] || values[1], values[4] || values[2] || values[1]].join(' ')
|
---|
| 293 | });
|
---|
| 294 | return isLTR ? decl.clone({
|
---|
| 295 | value: decl.value.replace(/^\s*logical\s+/i, '')
|
---|
| 296 | }) : 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)];
|
---|
| 297 | });
|
---|
| 298 |
|
---|
| 299 | var transformTextAlign = ((decl, values, dir) => {
|
---|
| 300 | const lDecl = decl.clone({
|
---|
| 301 | value: 'left'
|
---|
| 302 | });
|
---|
| 303 | const rDecl = decl.clone({
|
---|
| 304 | value: 'right'
|
---|
| 305 | });
|
---|
| 306 | return /^start$/i.test(decl.value) ? 'ltr' === dir ? lDecl : 'rtl' === dir ? rDecl : [cloneRule(decl, 'ltr').append(lDecl), cloneRule(decl, 'rtl').append(rDecl)] : /^end$/i.test(decl.value) ? 'ltr' === dir ? rDecl : 'rtl' === dir ? lDecl : [cloneRule(decl, 'ltr').append(rDecl), cloneRule(decl, 'rtl').append(lDecl)] : null;
|
---|
| 307 | });
|
---|
| 308 |
|
---|
| 309 | function splitByComma(string, isTrimmed) {
|
---|
| 310 | return splitByRegExp(string, /^,$/, isTrimmed);
|
---|
| 311 | }
|
---|
| 312 | function splitBySpace(string, isTrimmed) {
|
---|
| 313 | return splitByRegExp(string, /^\s$/, isTrimmed);
|
---|
| 314 | }
|
---|
| 315 | function splitBySlash(string, isTrimmed) {
|
---|
| 316 | return splitByRegExp(string, /^\/$/, isTrimmed);
|
---|
| 317 | }
|
---|
| 318 |
|
---|
| 319 | function splitByRegExp(string, re, isTrimmed) {
|
---|
| 320 | const array = [];
|
---|
| 321 | let buffer = '';
|
---|
| 322 | let split = false;
|
---|
| 323 | let func = 0;
|
---|
| 324 | let i = -1;
|
---|
| 325 |
|
---|
| 326 | while (++i < string.length) {
|
---|
| 327 | const char = string[i];
|
---|
| 328 |
|
---|
| 329 | if (char === '(') {
|
---|
| 330 | func += 1;
|
---|
| 331 | } else if (char === ')') {
|
---|
| 332 | if (func > 0) {
|
---|
| 333 | func -= 1;
|
---|
| 334 | }
|
---|
| 335 | } else if (func === 0) {
|
---|
| 336 | if (re.test(char)) {
|
---|
| 337 | split = true;
|
---|
| 338 | }
|
---|
| 339 | }
|
---|
| 340 |
|
---|
| 341 | if (split) {
|
---|
| 342 | if (!isTrimmed || buffer.trim()) {
|
---|
| 343 | array.push(isTrimmed ? buffer.trim() : buffer);
|
---|
| 344 | }
|
---|
| 345 |
|
---|
| 346 | if (!isTrimmed) {
|
---|
| 347 | array.push(char);
|
---|
| 348 | }
|
---|
| 349 |
|
---|
| 350 | buffer = '';
|
---|
| 351 | split = false;
|
---|
| 352 | } else {
|
---|
| 353 | buffer += char;
|
---|
| 354 | }
|
---|
| 355 | }
|
---|
| 356 |
|
---|
| 357 | if (buffer !== '') {
|
---|
| 358 | array.push(isTrimmed ? buffer.trim() : buffer);
|
---|
| 359 | }
|
---|
| 360 |
|
---|
| 361 | return array;
|
---|
| 362 | }
|
---|
| 363 |
|
---|
| 364 | var transformTransition = ((decl, notValues, dir) => {
|
---|
| 365 | const ltrValues = [];
|
---|
| 366 | const rtlValues = [];
|
---|
| 367 | splitByComma(decl.value).forEach(value => {
|
---|
| 368 | let hasBeenSplit = false;
|
---|
| 369 | splitBySpace(value).forEach((word, index, words) => {
|
---|
| 370 | if (word in valueMap) {
|
---|
| 371 | hasBeenSplit = true;
|
---|
| 372 | valueMap[word].ltr.forEach(replacement => {
|
---|
| 373 | const clone = words.slice();
|
---|
| 374 | clone.splice(index, 1, replacement);
|
---|
| 375 |
|
---|
| 376 | if (ltrValues.length && !/^,$/.test(ltrValues[ltrValues.length - 1])) {
|
---|
| 377 | ltrValues.push(',');
|
---|
| 378 | }
|
---|
| 379 |
|
---|
| 380 | ltrValues.push(clone.join(''));
|
---|
| 381 | });
|
---|
| 382 | valueMap[word].rtl.forEach(replacement => {
|
---|
| 383 | const clone = words.slice();
|
---|
| 384 | clone.splice(index, 1, replacement);
|
---|
| 385 |
|
---|
| 386 | if (rtlValues.length && !/^,$/.test(rtlValues[rtlValues.length - 1])) {
|
---|
| 387 | rtlValues.push(',');
|
---|
| 388 | }
|
---|
| 389 |
|
---|
| 390 | rtlValues.push(clone.join(''));
|
---|
| 391 | });
|
---|
| 392 | }
|
---|
| 393 | });
|
---|
| 394 |
|
---|
| 395 | if (!hasBeenSplit) {
|
---|
| 396 | ltrValues.push(value);
|
---|
| 397 | rtlValues.push(value);
|
---|
| 398 | }
|
---|
| 399 | });
|
---|
| 400 | const ltrDecl = decl.clone({
|
---|
| 401 | value: ltrValues.join('')
|
---|
| 402 | });
|
---|
| 403 | const rtlDecl = decl.clone({
|
---|
| 404 | value: rtlValues.join('')
|
---|
| 405 | });
|
---|
| 406 | return ltrValues.length && 'ltr' === dir ? ltrDecl : rtlValues.length && 'rtl' === dir ? rtlDecl : ltrDecl.value !== rtlDecl.value ? [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)] : null;
|
---|
| 407 | });
|
---|
| 408 | const valueMap = {
|
---|
| 409 | 'border-block': {
|
---|
| 410 | ltr: ['border-top', 'border-bottom'],
|
---|
| 411 | rtl: ['border-top', 'border-bottom']
|
---|
| 412 | },
|
---|
| 413 | 'border-block-color': {
|
---|
| 414 | ltr: ['border-top-color', 'border-bottom-color'],
|
---|
| 415 | rtl: ['border-top-color', 'border-bottom-color']
|
---|
| 416 | },
|
---|
| 417 | 'border-block-end': {
|
---|
| 418 | ltr: ['border-bottom'],
|
---|
| 419 | rtl: ['border-bottom']
|
---|
| 420 | },
|
---|
| 421 | 'border-block-end-color': {
|
---|
| 422 | ltr: ['border-bottom-color'],
|
---|
| 423 | rtl: ['border-bottom-color']
|
---|
| 424 | },
|
---|
| 425 | 'border-block-end-style': {
|
---|
| 426 | ltr: ['border-bottom-style'],
|
---|
| 427 | rtl: ['border-bottom-style']
|
---|
| 428 | },
|
---|
| 429 | 'border-block-end-width': {
|
---|
| 430 | ltr: ['border-bottom-width'],
|
---|
| 431 | rtl: ['border-bottom-width']
|
---|
| 432 | },
|
---|
| 433 | 'border-block-start': {
|
---|
| 434 | ltr: ['border-top'],
|
---|
| 435 | rtl: ['border-top']
|
---|
| 436 | },
|
---|
| 437 | 'border-block-start-color': {
|
---|
| 438 | ltr: ['border-top-color'],
|
---|
| 439 | rtl: ['border-top-color']
|
---|
| 440 | },
|
---|
| 441 | 'border-block-start-style': {
|
---|
| 442 | ltr: ['border-top-style'],
|
---|
| 443 | rtl: ['border-top-style']
|
---|
| 444 | },
|
---|
| 445 | 'border-block-start-width': {
|
---|
| 446 | ltr: ['border-top-width'],
|
---|
| 447 | rtl: ['border-top-width']
|
---|
| 448 | },
|
---|
| 449 | 'border-block-style': {
|
---|
| 450 | ltr: ['border-top-style', 'border-bottom-style'],
|
---|
| 451 | rtl: ['border-top-style', 'border-bottom-style']
|
---|
| 452 | },
|
---|
| 453 | 'border-block-width': {
|
---|
| 454 | ltr: ['border-top-width', 'border-bottom-width'],
|
---|
| 455 | rtl: ['border-top-width', 'border-bottom-width']
|
---|
| 456 | },
|
---|
| 457 | 'border-end': {
|
---|
| 458 | ltr: ['border-bottom', 'border-right'],
|
---|
| 459 | rtl: ['border-bottom', 'border-left']
|
---|
| 460 | },
|
---|
| 461 | 'border-end-color': {
|
---|
| 462 | ltr: ['border-bottom-color', 'border-right-color'],
|
---|
| 463 | rtl: ['border-bottom-color', 'border-left-color']
|
---|
| 464 | },
|
---|
| 465 | 'border-end-style': {
|
---|
| 466 | ltr: ['border-bottom-style', 'border-right-style'],
|
---|
| 467 | rtl: ['border-bottom-style', 'border-left-style']
|
---|
| 468 | },
|
---|
| 469 | 'border-end-width': {
|
---|
| 470 | ltr: ['border-bottom-width', 'border-right-width'],
|
---|
| 471 | rtl: ['border-bottom-width', 'border-left-width']
|
---|
| 472 | },
|
---|
| 473 | 'border-inline': {
|
---|
| 474 | ltr: ['border-left', 'border-right'],
|
---|
| 475 | rtl: ['border-left', 'border-right']
|
---|
| 476 | },
|
---|
| 477 | 'border-inline-color': {
|
---|
| 478 | ltr: ['border-left-color', 'border-right-color'],
|
---|
| 479 | rtl: ['border-left-color', 'border-right-color']
|
---|
| 480 | },
|
---|
| 481 | 'border-inline-end': {
|
---|
| 482 | ltr: ['border-right'],
|
---|
| 483 | rtl: ['border-left']
|
---|
| 484 | },
|
---|
| 485 | 'border-inline-end-color': {
|
---|
| 486 | ltr: ['border-right-color'],
|
---|
| 487 | rtl: ['border-left-color']
|
---|
| 488 | },
|
---|
| 489 | 'border-inline-end-style': {
|
---|
| 490 | ltr: ['border-right-style'],
|
---|
| 491 | rtl: ['border-left-style']
|
---|
| 492 | },
|
---|
| 493 | 'border-inline-end-width': {
|
---|
| 494 | ltr: ['border-right-width'],
|
---|
| 495 | rtl: ['border-left-width']
|
---|
| 496 | },
|
---|
| 497 | 'border-inline-start': {
|
---|
| 498 | ltr: ['border-left'],
|
---|
| 499 | rtl: ['border-right']
|
---|
| 500 | },
|
---|
| 501 | 'border-inline-start-color': {
|
---|
| 502 | ltr: ['border-left-color'],
|
---|
| 503 | rtl: ['border-right-color']
|
---|
| 504 | },
|
---|
| 505 | 'border-inline-start-style': {
|
---|
| 506 | ltr: ['border-left-style'],
|
---|
| 507 | rtl: ['border-right-style']
|
---|
| 508 | },
|
---|
| 509 | 'border-inline-start-width': {
|
---|
| 510 | ltr: ['border-left-width'],
|
---|
| 511 | rtl: ['border-right-width']
|
---|
| 512 | },
|
---|
| 513 | 'border-inline-style': {
|
---|
| 514 | ltr: ['border-left-style', 'border-right-style'],
|
---|
| 515 | rtl: ['border-left-style', 'border-right-style']
|
---|
| 516 | },
|
---|
| 517 | 'border-inline-width': {
|
---|
| 518 | ltr: ['border-left-width', 'border-right-width'],
|
---|
| 519 | rtl: ['border-left-width', 'border-right-width']
|
---|
| 520 | },
|
---|
| 521 | 'border-start': {
|
---|
| 522 | ltr: ['border-top', 'border-left'],
|
---|
| 523 | rtl: ['border-top', 'border-right']
|
---|
| 524 | },
|
---|
| 525 | 'border-start-color': {
|
---|
| 526 | ltr: ['border-top-color', 'border-left-color'],
|
---|
| 527 | rtl: ['border-top-color', 'border-right-color']
|
---|
| 528 | },
|
---|
| 529 | 'border-start-style': {
|
---|
| 530 | ltr: ['border-top-style', 'border-left-style'],
|
---|
| 531 | rtl: ['border-top-style', 'border-right-style']
|
---|
| 532 | },
|
---|
| 533 | 'border-start-width': {
|
---|
| 534 | ltr: ['border-top-width', 'border-left-width'],
|
---|
| 535 | rtl: ['border-top-width', 'border-right-width']
|
---|
| 536 | },
|
---|
| 537 | 'block-size': {
|
---|
| 538 | ltr: ['height'],
|
---|
| 539 | rtl: ['height']
|
---|
| 540 | },
|
---|
| 541 | 'inline-size': {
|
---|
| 542 | ltr: ['width'],
|
---|
| 543 | rtl: ['width']
|
---|
| 544 | },
|
---|
| 545 | 'inset': {
|
---|
| 546 | ltr: ['top', 'right', 'bottom', 'left'],
|
---|
| 547 | rtl: ['top', 'right', 'bottom', 'left']
|
---|
| 548 | },
|
---|
| 549 | 'inset-block': {
|
---|
| 550 | ltr: ['top', 'bottom'],
|
---|
| 551 | rtl: ['top', 'bottom']
|
---|
| 552 | },
|
---|
| 553 | 'inset-block-start': {
|
---|
| 554 | ltr: ['top'],
|
---|
| 555 | rtl: ['top']
|
---|
| 556 | },
|
---|
| 557 | 'inset-block-end': {
|
---|
| 558 | ltr: ['bottom'],
|
---|
| 559 | rtl: ['bottom']
|
---|
| 560 | },
|
---|
| 561 | 'inset-end': {
|
---|
| 562 | ltr: ['bottom', 'right'],
|
---|
| 563 | rtl: ['bottom', 'left']
|
---|
| 564 | },
|
---|
| 565 | 'inset-inline': {
|
---|
| 566 | ltr: ['left', 'right'],
|
---|
| 567 | rtl: ['left', 'right']
|
---|
| 568 | },
|
---|
| 569 | 'inset-inline-start': {
|
---|
| 570 | ltr: ['left'],
|
---|
| 571 | rtl: ['right']
|
---|
| 572 | },
|
---|
| 573 | 'inset-inline-end': {
|
---|
| 574 | ltr: ['right'],
|
---|
| 575 | rtl: ['left']
|
---|
| 576 | },
|
---|
| 577 | 'inset-start': {
|
---|
| 578 | ltr: ['top', 'left'],
|
---|
| 579 | rtl: ['top', 'right']
|
---|
| 580 | },
|
---|
| 581 | 'margin-block': {
|
---|
| 582 | ltr: ['margin-top', 'margin-bottom'],
|
---|
| 583 | rtl: ['margin-top', 'margin-bottom']
|
---|
| 584 | },
|
---|
| 585 | 'margin-block-start': {
|
---|
| 586 | ltr: ['margin-top'],
|
---|
| 587 | rtl: ['margin-top']
|
---|
| 588 | },
|
---|
| 589 | 'margin-block-end': {
|
---|
| 590 | ltr: ['margin-bottom'],
|
---|
| 591 | rtl: ['margin-bottom']
|
---|
| 592 | },
|
---|
| 593 | 'margin-end': {
|
---|
| 594 | ltr: ['margin-bottom', 'margin-right'],
|
---|
| 595 | rtl: ['margin-bottom', 'margin-left']
|
---|
| 596 | },
|
---|
| 597 | 'margin-inline': {
|
---|
| 598 | ltr: ['margin-left', 'margin-right'],
|
---|
| 599 | rtl: ['margin-left', 'margin-right']
|
---|
| 600 | },
|
---|
| 601 | 'margin-inline-start': {
|
---|
| 602 | ltr: ['margin-left'],
|
---|
| 603 | rtl: ['margin-right']
|
---|
| 604 | },
|
---|
| 605 | 'margin-inline-end': {
|
---|
| 606 | ltr: ['margin-right'],
|
---|
| 607 | rtl: ['margin-left']
|
---|
| 608 | },
|
---|
| 609 | 'margin-start': {
|
---|
| 610 | ltr: ['margin-top', 'margin-left'],
|
---|
| 611 | rtl: ['margin-top', 'margin-right']
|
---|
| 612 | },
|
---|
| 613 | 'padding-block': {
|
---|
| 614 | ltr: ['padding-top', 'padding-bottom'],
|
---|
| 615 | rtl: ['padding-top', 'padding-bottom']
|
---|
| 616 | },
|
---|
| 617 | 'padding-block-start': {
|
---|
| 618 | ltr: ['padding-top'],
|
---|
| 619 | rtl: ['padding-top']
|
---|
| 620 | },
|
---|
| 621 | 'padding-block-end': {
|
---|
| 622 | ltr: ['padding-bottom'],
|
---|
| 623 | rtl: ['padding-bottom']
|
---|
| 624 | },
|
---|
| 625 | 'padding-end': {
|
---|
| 626 | ltr: ['padding-bottom', 'padding-right'],
|
---|
| 627 | rtl: ['padding-bottom', 'padding-left']
|
---|
| 628 | },
|
---|
| 629 | 'padding-inline': {
|
---|
| 630 | ltr: ['padding-left', 'padding-right'],
|
---|
| 631 | rtl: ['padding-left', 'padding-right']
|
---|
| 632 | },
|
---|
| 633 | 'padding-inline-start': {
|
---|
| 634 | ltr: ['padding-left'],
|
---|
| 635 | rtl: ['padding-right']
|
---|
| 636 | },
|
---|
| 637 | 'padding-inline-end': {
|
---|
| 638 | ltr: ['padding-right'],
|
---|
| 639 | rtl: ['padding-left']
|
---|
| 640 | },
|
---|
| 641 | 'padding-start': {
|
---|
| 642 | ltr: ['padding-top', 'padding-left'],
|
---|
| 643 | rtl: ['padding-top', 'padding-right']
|
---|
| 644 | }
|
---|
| 645 | };
|
---|
| 646 |
|
---|
| 647 | var matchSupportedProperties = /^(?:(inset|margin|padding)(?:-(block|block-start|block-end|inline|inline-start|inline-end|start|end))|(min-|max-)?(block|inline)-(size))$/i;
|
---|
| 648 |
|
---|
| 649 | // tooling
|
---|
| 650 |
|
---|
| 651 | const transforms = {
|
---|
| 652 | 'border': transformBorder['border'],
|
---|
| 653 | 'border-width': transformBorder['border'],
|
---|
| 654 | 'border-style': transformBorder['border'],
|
---|
| 655 | 'border-color': transformBorder['border'],
|
---|
| 656 | 'border-block': transformBorder['border-block'],
|
---|
| 657 | 'border-block-width': transformBorder['border-block'],
|
---|
| 658 | 'border-block-style': transformBorder['border-block'],
|
---|
| 659 | 'border-block-color': transformBorder['border-block'],
|
---|
| 660 | 'border-block-start': transformBorder['border-block-start'],
|
---|
| 661 | 'border-block-start-width': transformBorder['border-block-start'],
|
---|
| 662 | 'border-block-start-style': transformBorder['border-block-start'],
|
---|
| 663 | 'border-block-start-color': transformBorder['border-block-start'],
|
---|
| 664 | 'border-block-end': transformBorder['border-block-end'],
|
---|
| 665 | 'border-block-end-width': transformBorder['border-block-end'],
|
---|
| 666 | 'border-block-end-style': transformBorder['border-block-end'],
|
---|
| 667 | 'border-block-end-color': transformBorder['border-block-end'],
|
---|
| 668 | 'border-inline': transformBorder['border-inline'],
|
---|
| 669 | 'border-inline-width': transformBorder['border-inline'],
|
---|
| 670 | 'border-inline-style': transformBorder['border-inline'],
|
---|
| 671 | 'border-inline-color': transformBorder['border-inline'],
|
---|
| 672 | 'border-inline-start': transformBorder['border-inline-start'],
|
---|
| 673 | 'border-inline-start-width': transformBorder['border-inline-start'],
|
---|
| 674 | 'border-inline-start-style': transformBorder['border-inline-start'],
|
---|
| 675 | 'border-inline-start-color': transformBorder['border-inline-start'],
|
---|
| 676 | 'border-inline-end': transformBorder['border-inline-end'],
|
---|
| 677 | 'border-inline-end-width': transformBorder['border-inline-end'],
|
---|
| 678 | 'border-inline-end-style': transformBorder['border-inline-end'],
|
---|
| 679 | 'border-inline-end-color': transformBorder['border-inline-end'],
|
---|
| 680 | 'border-start': transformBorder['border-start'],
|
---|
| 681 | 'border-start-width': transformBorder['border-start'],
|
---|
| 682 | 'border-start-style': transformBorder['border-start'],
|
---|
| 683 | 'border-start-color': transformBorder['border-start'],
|
---|
| 684 | 'border-end': transformBorder['border-end'],
|
---|
| 685 | 'border-end-width': transformBorder['border-end'],
|
---|
| 686 | 'border-end-style': transformBorder['border-end'],
|
---|
| 687 | 'border-end-color': transformBorder['border-end'],
|
---|
| 688 | 'clear': transformFloat,
|
---|
| 689 | 'inset': transformInset,
|
---|
| 690 | 'margin': transformSpacing,
|
---|
| 691 | 'padding': transformSpacing,
|
---|
| 692 | 'block': transformSide['block'],
|
---|
| 693 | 'block-start': transformSide['block-start'],
|
---|
| 694 | 'block-end': transformSide['block-end'],
|
---|
| 695 | 'inline': transformSide['inline'],
|
---|
| 696 | 'inline-start': transformSide['inline-start'],
|
---|
| 697 | 'inline-end': transformSide['inline-end'],
|
---|
| 698 | 'start': transformSide['start'],
|
---|
| 699 | 'end': transformSide['end'],
|
---|
| 700 | 'float': transformFloat,
|
---|
| 701 | 'resize': transformResize,
|
---|
| 702 | 'size': transformSize,
|
---|
| 703 | 'text-align': transformTextAlign,
|
---|
| 704 | 'transition': transformTransition,
|
---|
| 705 | 'transition-property': transformTransition
|
---|
| 706 | }; // properties that will be split by slash
|
---|
| 707 |
|
---|
| 708 | const splitBySlashPropRegExp = /^border(-block|-inline|-start|-end)?(-width|-style|-color)?$/i; // plugin
|
---|
| 709 |
|
---|
| 710 | var index = postcss.plugin('postcss-logical-properties', opts => {
|
---|
| 711 | const preserve = Boolean(Object(opts).preserve);
|
---|
| 712 | const dir = !preserve && typeof Object(opts).dir === 'string' ? /^rtl$/i.test(opts.dir) ? 'rtl' : 'ltr' : false;
|
---|
| 713 | return root => {
|
---|
| 714 | root.walkDecls(decl => {
|
---|
| 715 | const parent = decl.parent;
|
---|
| 716 | const values = splitBySlashPropRegExp.test(decl.prop) ? splitBySlash(decl.value, true) : splitBySpace(decl.value, true);
|
---|
| 717 | const prop = decl.prop.replace(matchSupportedProperties, '$2$5').toLowerCase();
|
---|
| 718 |
|
---|
| 719 | if (prop in transforms) {
|
---|
| 720 | const replacer = transforms[prop](decl, values, dir);
|
---|
| 721 |
|
---|
| 722 | if (replacer) {
|
---|
| 723 | [].concat(replacer).forEach(replacement => {
|
---|
| 724 | if (replacement.type === 'rule') {
|
---|
| 725 | parent.before(replacement);
|
---|
| 726 | } else {
|
---|
| 727 | decl.before(replacement);
|
---|
| 728 | }
|
---|
| 729 | });
|
---|
| 730 |
|
---|
| 731 | if (!preserve) {
|
---|
| 732 | decl.remove();
|
---|
| 733 |
|
---|
| 734 | if (!parent.nodes.length) {
|
---|
| 735 | parent.remove();
|
---|
| 736 | }
|
---|
| 737 | }
|
---|
| 738 | }
|
---|
| 739 | }
|
---|
| 740 | });
|
---|
| 741 | };
|
---|
| 742 | });
|
---|
| 743 |
|
---|
| 744 | export default index;
|
---|
| 745 | //# sourceMappingURL=index.es.mjs.map
|
---|