legacyLogicalProperties.js 5.6 KB

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