transition.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. 'use strict';
  2. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  3. var parser = require('postcss-value-parser');
  4. var vendor = require('postcss').vendor;
  5. var list = require('postcss').list;
  6. var Transition = function () {
  7. function Transition(prefixes) {
  8. _classCallCheck(this, Transition);
  9. Object.defineProperty(this, 'props', {
  10. enumerable: true,
  11. writable: true,
  12. value: ['transition', 'transition-property']
  13. });
  14. this.prefixes = prefixes;
  15. }
  16. /**
  17. * Process transition and add prefies for all necessary properties
  18. */
  19. Transition.prototype.add = function add(decl, result) {
  20. var _this = this;
  21. var prefix = void 0,
  22. prop = void 0;
  23. var declPrefixes = this.prefixes.add[decl.prop] && this.prefixes.add[decl.prop].prefixes || [];
  24. var params = this.parse(decl.value);
  25. var names = params.map(function (i) {
  26. return _this.findProp(i);
  27. });
  28. var added = [];
  29. if (names.some(function (i) {
  30. return i[0] === '-';
  31. })) {
  32. return;
  33. }
  34. for (var _iterator = params, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
  35. var _ref;
  36. if (_isArray) {
  37. if (_i >= _iterator.length) break;
  38. _ref = _iterator[_i++];
  39. } else {
  40. _i = _iterator.next();
  41. if (_i.done) break;
  42. _ref = _i.value;
  43. }
  44. var param = _ref;
  45. prop = this.findProp(param);
  46. if (prop[0] === '-') continue;
  47. var prefixer = this.prefixes.add[prop];
  48. if (!prefixer || !prefixer.prefixes) continue;
  49. for (var _iterator3 = prefixer.prefixes, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
  50. if (_isArray3) {
  51. if (_i3 >= _iterator3.length) break;
  52. prefix = _iterator3[_i3++];
  53. } else {
  54. _i3 = _iterator3.next();
  55. if (_i3.done) break;
  56. prefix = _i3.value;
  57. }
  58. var prefixed = this.prefixes.prefixed(prop, prefix);
  59. if (prefixed !== '-ms-transform' && names.indexOf(prefixed) === -1) {
  60. if (!this.disabled(prop, prefix)) {
  61. added.push(this.clone(prop, prefixed, param));
  62. }
  63. }
  64. }
  65. }
  66. params = params.concat(added);
  67. var value = this.stringify(params);
  68. var webkitClean = this.stringify(this.cleanFromUnprefixed(params, '-webkit-'));
  69. if (declPrefixes.indexOf('-webkit-') !== -1) {
  70. this.cloneBefore(decl, '-webkit-' + decl.prop, webkitClean);
  71. }
  72. this.cloneBefore(decl, decl.prop, webkitClean);
  73. if (declPrefixes.indexOf('-o-') !== -1) {
  74. var operaClean = this.stringify(this.cleanFromUnprefixed(params, '-o-'));
  75. this.cloneBefore(decl, '-o-' + decl.prop, operaClean);
  76. }
  77. for (var _iterator2 = declPrefixes, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
  78. if (_isArray2) {
  79. if (_i2 >= _iterator2.length) break;
  80. prefix = _iterator2[_i2++];
  81. } else {
  82. _i2 = _iterator2.next();
  83. if (_i2.done) break;
  84. prefix = _i2.value;
  85. }
  86. if (prefix !== '-webkit-' && prefix !== '-o-') {
  87. var prefixValue = this.stringify(this.cleanOtherPrefixes(params, prefix));
  88. this.cloneBefore(decl, prefix + decl.prop, prefixValue);
  89. }
  90. }
  91. if (value !== decl.value && !this.already(decl, decl.prop, value)) {
  92. this.checkForWarning(result, decl);
  93. decl.cloneBefore();
  94. decl.value = value;
  95. }
  96. };
  97. /**
  98. * Find property name
  99. */
  100. Transition.prototype.findProp = function findProp(param) {
  101. var prop = param[0].value;
  102. if (/^\d/.test(prop)) {
  103. for (var i = 0; i < param.length; i++) {
  104. var token = param[i];
  105. if (i !== 0 && token.type === 'word') {
  106. return token.value;
  107. }
  108. }
  109. }
  110. return prop;
  111. };
  112. /**
  113. * Does we aready have this declaration
  114. */
  115. Transition.prototype.already = function already(decl, prop, value) {
  116. return decl.parent.some(function (i) {
  117. return i.prop === prop && i.value === value;
  118. });
  119. };
  120. /**
  121. * Add declaration if it is not exist
  122. */
  123. Transition.prototype.cloneBefore = function cloneBefore(decl, prop, value) {
  124. if (!this.already(decl, prop, value)) {
  125. decl.cloneBefore({ prop: prop, value: value });
  126. }
  127. };
  128. /**
  129. * Show transition-property warning
  130. */
  131. Transition.prototype.checkForWarning = function checkForWarning(result, decl) {
  132. if (decl.prop !== 'transition-property') {
  133. return;
  134. }
  135. decl.parent.each(function (i) {
  136. if (i.type !== 'decl') {
  137. return undefined;
  138. }
  139. if (i.prop.indexOf('transition-') !== 0) {
  140. return undefined;
  141. }
  142. if (i.prop === 'transition-property') {
  143. return undefined;
  144. }
  145. if (list.comma(i.value).length > 1) {
  146. decl.warn(result, 'Replace transition-property to transition, ' + 'because Autoprefixer could not support ' + 'any cases of transition-property ' + 'and other transition-*');
  147. }
  148. return false;
  149. });
  150. };
  151. /**
  152. * Process transition and remove all unnecessary properties
  153. */
  154. Transition.prototype.remove = function remove(decl) {
  155. var _this2 = this;
  156. var params = this.parse(decl.value);
  157. params = params.filter(function (i) {
  158. var prop = _this2.prefixes.remove[_this2.findProp(i)];
  159. return !prop || !prop.remove;
  160. });
  161. var value = this.stringify(params);
  162. if (decl.value === value) {
  163. return;
  164. }
  165. if (params.length === 0) {
  166. decl.remove();
  167. return;
  168. }
  169. var double = decl.parent.some(function (i) {
  170. return i.prop === decl.prop && i.value === value;
  171. });
  172. var smaller = decl.parent.some(function (i) {
  173. return i !== decl && i.prop === decl.prop && i.value.length > value.length;
  174. });
  175. if (double || smaller) {
  176. decl.remove();
  177. return;
  178. }
  179. decl.value = value;
  180. };
  181. /**
  182. * Parse properties list to array
  183. */
  184. Transition.prototype.parse = function parse(value) {
  185. var ast = parser(value);
  186. var result = [];
  187. var param = [];
  188. for (var _iterator4 = ast.nodes, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
  189. var _ref2;
  190. if (_isArray4) {
  191. if (_i4 >= _iterator4.length) break;
  192. _ref2 = _iterator4[_i4++];
  193. } else {
  194. _i4 = _iterator4.next();
  195. if (_i4.done) break;
  196. _ref2 = _i4.value;
  197. }
  198. var node = _ref2;
  199. param.push(node);
  200. if (node.type === 'div' && node.value === ',') {
  201. result.push(param);
  202. param = [];
  203. }
  204. }
  205. result.push(param);
  206. return result.filter(function (i) {
  207. return i.length > 0;
  208. });
  209. };
  210. /**
  211. * Return properties string from array
  212. */
  213. Transition.prototype.stringify = function stringify(params) {
  214. if (params.length === 0) {
  215. return '';
  216. }
  217. var nodes = [];
  218. for (var _iterator5 = params, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
  219. var _ref3;
  220. if (_isArray5) {
  221. if (_i5 >= _iterator5.length) break;
  222. _ref3 = _iterator5[_i5++];
  223. } else {
  224. _i5 = _iterator5.next();
  225. if (_i5.done) break;
  226. _ref3 = _i5.value;
  227. }
  228. var param = _ref3;
  229. if (param[param.length - 1].type !== 'div') {
  230. param.push(this.div(params));
  231. }
  232. nodes = nodes.concat(param);
  233. }
  234. if (nodes[0].type === 'div') {
  235. nodes = nodes.slice(1);
  236. }
  237. if (nodes[nodes.length - 1].type === 'div') {
  238. nodes = nodes.slice(0, +-2 + 1 || undefined);
  239. }
  240. return parser.stringify({ nodes: nodes });
  241. };
  242. /**
  243. * Return new param array with different name
  244. */
  245. Transition.prototype.clone = function clone(origin, name, param) {
  246. var result = [];
  247. var changed = false;
  248. for (var _iterator6 = param, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
  249. var _ref4;
  250. if (_isArray6) {
  251. if (_i6 >= _iterator6.length) break;
  252. _ref4 = _iterator6[_i6++];
  253. } else {
  254. _i6 = _iterator6.next();
  255. if (_i6.done) break;
  256. _ref4 = _i6.value;
  257. }
  258. var i = _ref4;
  259. if (!changed && i.type === 'word' && i.value === origin) {
  260. result.push({ type: 'word', value: name });
  261. changed = true;
  262. } else {
  263. result.push(i);
  264. }
  265. }
  266. return result;
  267. };
  268. /**
  269. * Find or create seperator
  270. */
  271. Transition.prototype.div = function div(params) {
  272. for (var _iterator7 = params, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
  273. var _ref5;
  274. if (_isArray7) {
  275. if (_i7 >= _iterator7.length) break;
  276. _ref5 = _iterator7[_i7++];
  277. } else {
  278. _i7 = _iterator7.next();
  279. if (_i7.done) break;
  280. _ref5 = _i7.value;
  281. }
  282. var param = _ref5;
  283. for (var _iterator8 = param, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
  284. var _ref6;
  285. if (_isArray8) {
  286. if (_i8 >= _iterator8.length) break;
  287. _ref6 = _iterator8[_i8++];
  288. } else {
  289. _i8 = _iterator8.next();
  290. if (_i8.done) break;
  291. _ref6 = _i8.value;
  292. }
  293. var node = _ref6;
  294. if (node.type === 'div' && node.value === ',') {
  295. return node;
  296. }
  297. }
  298. }
  299. return { type: 'div', value: ',', after: ' ' };
  300. };
  301. Transition.prototype.cleanOtherPrefixes = function cleanOtherPrefixes(params, prefix) {
  302. var _this3 = this;
  303. return params.filter(function (param) {
  304. var current = vendor.prefix(_this3.findProp(param));
  305. return current === '' || current === prefix;
  306. });
  307. };
  308. /**
  309. * Remove all non-webkit prefixes and unprefixed params if we have prefixed
  310. */
  311. Transition.prototype.cleanFromUnprefixed = function cleanFromUnprefixed(params, prefix) {
  312. var _this4 = this;
  313. var remove = params.map(function (i) {
  314. return _this4.findProp(i);
  315. }).filter(function (i) {
  316. return i.slice(0, prefix.length) === prefix;
  317. }).map(function (i) {
  318. return _this4.prefixes.unprefixed(i);
  319. });
  320. var result = [];
  321. for (var _iterator9 = params, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
  322. var _ref7;
  323. if (_isArray9) {
  324. if (_i9 >= _iterator9.length) break;
  325. _ref7 = _iterator9[_i9++];
  326. } else {
  327. _i9 = _iterator9.next();
  328. if (_i9.done) break;
  329. _ref7 = _i9.value;
  330. }
  331. var param = _ref7;
  332. var prop = this.findProp(param);
  333. var p = vendor.prefix(prop);
  334. if (remove.indexOf(prop) === -1 && (p === prefix || p === '')) {
  335. result.push(param);
  336. }
  337. }
  338. return result;
  339. };
  340. /**
  341. * Check property for disabled by option
  342. */
  343. Transition.prototype.disabled = function disabled(prop, prefix) {
  344. var other = ['order', 'justify-content', 'align-self', 'align-content'];
  345. if (prop.indexOf('flex') !== -1 || other.indexOf(prop) !== -1) {
  346. if (this.prefixes.options.flexbox === false) {
  347. return true;
  348. }
  349. if (this.prefixes.options.flexbox === 'no-2009') {
  350. return prefix.indexOf('2009') !== -1;
  351. }
  352. }
  353. return undefined;
  354. };
  355. return Transition;
  356. }();
  357. module.exports = Transition;