index.es.mjs 25 KB

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