index.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _has = require('has');
  6. var _has2 = _interopRequireDefault(_has);
  7. var _postcss = require('postcss');
  8. var _postcss2 = _interopRequireDefault(_postcss);
  9. var _postcssValueParser = require('postcss-value-parser');
  10. var _postcssValueParser2 = _interopRequireDefault(_postcssValueParser);
  11. var _cssnanoUtilGetMatch = require('cssnano-util-get-match');
  12. var _cssnanoUtilGetMatch2 = _interopRequireDefault(_cssnanoUtilGetMatch);
  13. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  14. function getValues(list, { value }, index) {
  15. if (index % 2 === 0) {
  16. return [...list, parseFloat(value)];
  17. }
  18. return list;
  19. }
  20. function matrix3d(node, values) {
  21. // matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) => matrix(a, b, c, d, tx, ty)
  22. if (values[15] && values[2] === 0 && values[3] === 0 && values[6] === 0 && values[7] === 0 && values[8] === 0 && values[9] === 0 && values[10] === 1 && values[11] === 0 && values[14] === 0 && values[15] === 1) {
  23. const { nodes } = node;
  24. node.value = 'matrix';
  25. node.nodes = [nodes[0], // a
  26. nodes[1], // ,
  27. nodes[2], // b
  28. nodes[3], // ,
  29. nodes[8], // c
  30. nodes[9], // ,
  31. nodes[10], // d
  32. nodes[11], // ,
  33. nodes[24], // tx
  34. nodes[25], // ,
  35. nodes[26]];
  36. }
  37. }
  38. const rotate3dMappings = [['rotateX', [1, 0, 0]], // rotate3d(1, 0, 0, a) => rotateX(a)
  39. ['rotateY', [0, 1, 0]], // rotate3d(0, 1, 0, a) => rotateY(a)
  40. ['rotate', [0, 0, 1]]];
  41. const rotate3dMatch = (0, _cssnanoUtilGetMatch2.default)(rotate3dMappings);
  42. function rotate3d(node, values) {
  43. const { nodes } = node;
  44. const match = rotate3dMatch(values.slice(0, 3));
  45. if (match.length) {
  46. node.value = match;
  47. node.nodes = [nodes[6]];
  48. }
  49. }
  50. function rotateZ(node) {
  51. // rotateZ(rz) => rotate(rz)
  52. node.value = 'rotate';
  53. }
  54. function scale(node, values) {
  55. const { nodes } = node;
  56. if (!nodes[2]) {
  57. return;
  58. }
  59. const [first, second] = values;
  60. // scale(sx, sy) => scale(sx)
  61. if (first === second) {
  62. node.nodes = [nodes[0]];
  63. return;
  64. }
  65. // scale(sx, 1) => scaleX(sx)
  66. if (second === 1) {
  67. node.value = 'scaleX';
  68. node.nodes = [nodes[0]];
  69. return;
  70. }
  71. // scale(1, sy) => scaleY(sy)
  72. if (first === 1) {
  73. node.value = 'scaleY';
  74. node.nodes = [nodes[2]];
  75. return;
  76. }
  77. }
  78. function scale3d(node, values) {
  79. const { nodes } = node;
  80. const [first, second, third] = values;
  81. // scale3d(sx, 1, 1) => scaleX(sx)
  82. if (second === 1 && third === 1) {
  83. node.value = 'scaleX';
  84. node.nodes = [nodes[0]];
  85. return;
  86. }
  87. // scale3d(1, sy, 1) => scaleY(sy)
  88. if (first === 1 && third === 1) {
  89. node.value = 'scaleY';
  90. node.nodes = [nodes[2]];
  91. return;
  92. }
  93. // scale3d(1, 1, sz) => scaleZ(sz)
  94. if (first === 1 && second === 1) {
  95. node.value = 'scaleZ';
  96. node.nodes = [nodes[4]];
  97. return;
  98. }
  99. }
  100. function translate(node, values) {
  101. const { nodes } = node;
  102. if (!nodes[2]) {
  103. return;
  104. }
  105. // translate(tx, 0) => translate(tx)
  106. if (values[1] === 0) {
  107. node.nodes = [nodes[0]];
  108. return;
  109. }
  110. // translate(0, ty) => translateY(ty)
  111. if (values[0] === 0) {
  112. node.value = 'translateY';
  113. node.nodes = [nodes[2]];
  114. return;
  115. }
  116. }
  117. function translate3d(node, values) {
  118. const { nodes } = node;
  119. // translate3d(0, 0, tz) => translateZ(tz)
  120. if (values[0] === 0 && values[1] === 0) {
  121. node.value = 'translateZ';
  122. node.nodes = [nodes[4]];
  123. }
  124. }
  125. const reducers = {
  126. matrix3d,
  127. rotate3d,
  128. rotateZ,
  129. scale,
  130. scale3d,
  131. translate,
  132. translate3d
  133. };
  134. function normalizeReducerName(name) {
  135. const lowerCasedName = name.toLowerCase();
  136. if (lowerCasedName === 'rotatez') {
  137. return 'rotateZ';
  138. }
  139. return lowerCasedName;
  140. }
  141. function reduce(node) {
  142. const { nodes, type, value } = node;
  143. const normalizedReducerName = normalizeReducerName(value);
  144. if (type === 'function' && (0, _has2.default)(reducers, normalizedReducerName)) {
  145. reducers[normalizedReducerName](node, nodes.reduce(getValues, []));
  146. }
  147. return false;
  148. }
  149. exports.default = _postcss2.default.plugin('postcss-reduce-transforms', () => {
  150. return css => {
  151. const cache = {};
  152. css.walkDecls(/transform$/i, decl => {
  153. const value = decl.value;
  154. if (cache[value]) {
  155. decl.value = cache[value];
  156. return;
  157. }
  158. const result = (0, _postcssValueParser2.default)(value).walk(reduce).toString();
  159. decl.value = result;
  160. cache[value] = result;
  161. });
  162. };
  163. });
  164. module.exports = exports['default'];