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
|
---|