legacyLogicalProperties.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. function splitValues(value) {
  7. if (typeof value === 'number') {
  8. return [value];
  9. }
  10. const splitStyle = String(value).split(/\s+/);
  11. // Combine styles split in brackets, like `calc(1px + 2px)`
  12. let temp = '';
  13. let brackets = 0;
  14. return splitStyle.reduce((list, item) => {
  15. if (item.includes('(')) {
  16. temp += item;
  17. brackets += item.split('(').length - 1;
  18. } else if (item.includes(')')) {
  19. temp += ` ${item}`;
  20. brackets -= item.split(')').length - 1;
  21. if (brackets === 0) {
  22. list.push(temp);
  23. temp = '';
  24. }
  25. } else if (brackets > 0) {
  26. temp += ` ${item}`;
  27. } else {
  28. list.push(item);
  29. }
  30. return list;
  31. }, []);
  32. }
  33. function noSplit(list) {
  34. list.notSplit = true;
  35. return list;
  36. }
  37. const keyMap = {
  38. // Inset
  39. inset: ['top', 'right', 'bottom', 'left'],
  40. insetBlock: ['top', 'bottom'],
  41. insetBlockStart: ['top'],
  42. insetBlockEnd: ['bottom'],
  43. insetInline: ['left', 'right'],
  44. insetInlineStart: ['left'],
  45. insetInlineEnd: ['right'],
  46. // Margin
  47. marginBlock: ['marginTop', 'marginBottom'],
  48. marginBlockStart: ['marginTop'],
  49. marginBlockEnd: ['marginBottom'],
  50. marginInline: ['marginLeft', 'marginRight'],
  51. marginInlineStart: ['marginLeft'],
  52. marginInlineEnd: ['marginRight'],
  53. // Padding
  54. paddingBlock: ['paddingTop', 'paddingBottom'],
  55. paddingBlockStart: ['paddingTop'],
  56. paddingBlockEnd: ['paddingBottom'],
  57. paddingInline: ['paddingLeft', 'paddingRight'],
  58. paddingInlineStart: ['paddingLeft'],
  59. paddingInlineEnd: ['paddingRight'],
  60. // Border
  61. borderBlock: noSplit(['borderTop', 'borderBottom']),
  62. borderBlockStart: noSplit(['borderTop']),
  63. borderBlockEnd: noSplit(['borderBottom']),
  64. borderInline: noSplit(['borderLeft', 'borderRight']),
  65. borderInlineStart: noSplit(['borderLeft']),
  66. borderInlineEnd: noSplit(['borderRight']),
  67. // Border width
  68. borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'],
  69. borderBlockStartWidth: ['borderTopWidth'],
  70. borderBlockEndWidth: ['borderBottomWidth'],
  71. borderInlineWidth: ['borderLeftWidth', 'borderRightWidth'],
  72. borderInlineStartWidth: ['borderLeftWidth'],
  73. borderInlineEndWidth: ['borderRightWidth'],
  74. // Border style
  75. borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'],
  76. borderBlockStartStyle: ['borderTopStyle'],
  77. borderBlockEndStyle: ['borderBottomStyle'],
  78. borderInlineStyle: ['borderLeftStyle', 'borderRightStyle'],
  79. borderInlineStartStyle: ['borderLeftStyle'],
  80. borderInlineEndStyle: ['borderRightStyle'],
  81. // Border color
  82. borderBlockColor: ['borderTopColor', 'borderBottomColor'],
  83. borderBlockStartColor: ['borderTopColor'],
  84. borderBlockEndColor: ['borderBottomColor'],
  85. borderInlineColor: ['borderLeftColor', 'borderRightColor'],
  86. borderInlineStartColor: ['borderLeftColor'],
  87. borderInlineEndColor: ['borderRightColor'],
  88. // Border radius
  89. borderStartStartRadius: ['borderTopLeftRadius'],
  90. borderStartEndRadius: ['borderTopRightRadius'],
  91. borderEndStartRadius: ['borderBottomLeftRadius'],
  92. borderEndEndRadius: ['borderBottomRightRadius']
  93. };
  94. function skipCheck(value) {
  95. return {
  96. _skip_check_: true,
  97. value
  98. };
  99. }
  100. /**
  101. * Convert css logical properties to legacy properties.
  102. * Such as: `margin-block-start` to `margin-top`.
  103. * Transform list:
  104. * - inset
  105. * - margin
  106. * - padding
  107. * - border
  108. */
  109. const transform = {
  110. visit: cssObj => {
  111. const clone = {};
  112. Object.keys(cssObj).forEach(key => {
  113. const value = cssObj[key];
  114. const matchValue = keyMap[key];
  115. if (matchValue && (typeof value === 'number' || typeof value === 'string')) {
  116. const values = splitValues(value);
  117. if (matchValue.length && matchValue.notSplit) {
  118. // not split means always give same value like border
  119. matchValue.forEach(matchKey => {
  120. clone[matchKey] = skipCheck(value);
  121. });
  122. } else if (matchValue.length === 1) {
  123. // Handle like `marginBlockStart` => `marginTop`
  124. clone[matchValue[0]] = skipCheck(value);
  125. } else if (matchValue.length === 2) {
  126. // Handle like `marginBlock` => `marginTop` & `marginBottom`
  127. matchValue.forEach((matchKey, index) => {
  128. var _a;
  129. clone[matchKey] = skipCheck((_a = values[index]) !== null && _a !== void 0 ? _a : values[0]);
  130. });
  131. } else if (matchValue.length === 4) {
  132. // Handle like `inset` => `top` & `right` & `bottom` & `left`
  133. matchValue.forEach((matchKey, index) => {
  134. var _a, _b;
  135. clone[matchKey] = skipCheck((_b = (_a = values[index]) !== null && _a !== void 0 ? _a : values[index - 2]) !== null && _b !== void 0 ? _b : values[0]);
  136. });
  137. } else {
  138. clone[key] = value;
  139. }
  140. } else {
  141. clone[key] = value;
  142. }
  143. });
  144. return clone;
  145. }
  146. };
  147. var _default = exports.default = transform;