transition.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. "use strict";
  2. function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
  3. function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
  4. function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
  5. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  6. var parser = require('postcss-value-parser');
  7. var vendor = require('postcss').vendor;
  8. var list = require('postcss').list;
  9. var Browsers = require('./browsers');
  10. var Transition = /*#__PURE__*/function () {
  11. function Transition(prefixes) {
  12. _defineProperty(this, "props", ['transition', 'transition-property']);
  13. this.prefixes = prefixes;
  14. }
  15. /**
  16. * Process transition and add prefixes for all necessary properties
  17. */
  18. var _proto = Transition.prototype;
  19. _proto.add = function add(decl, result) {
  20. var _this = this;
  21. var prefix, prop;
  22. var add = this.prefixes.add[decl.prop];
  23. var vendorPrefixes = this.ruleVendorPrefixes(decl);
  24. var declPrefixes = vendorPrefixes || add && add.prefixes || [];
  25. var params = this.parse(decl.value);
  26. var names = params.map(function (i) {
  27. return _this.findProp(i);
  28. });
  29. var added = [];
  30. if (names.some(function (i) {
  31. return i[0] === '-';
  32. })) {
  33. return;
  34. }
  35. for (var _iterator = _createForOfIteratorHelperLoose(params), _step; !(_step = _iterator()).done;) {
  36. var param = _step.value;
  37. prop = this.findProp(param);
  38. if (prop[0] === '-') continue;
  39. var prefixer = this.prefixes.add[prop];
  40. if (!prefixer || !prefixer.prefixes) continue;
  41. for (var _iterator3 = _createForOfIteratorHelperLoose(prefixer.prefixes), _step3; !(_step3 = _iterator3()).done;) {
  42. prefix = _step3.value;
  43. if (vendorPrefixes && !vendorPrefixes.some(function (p) {
  44. return prefix.includes(p);
  45. })) {
  46. continue;
  47. }
  48. var prefixed = this.prefixes.prefixed(prop, prefix);
  49. if (prefixed !== '-ms-transform' && !names.includes(prefixed)) {
  50. if (!this.disabled(prop, prefix)) {
  51. added.push(this.clone(prop, prefixed, param));
  52. }
  53. }
  54. }
  55. }
  56. params = params.concat(added);
  57. var value = this.stringify(params);
  58. var webkitClean = this.stringify(this.cleanFromUnprefixed(params, '-webkit-'));
  59. if (declPrefixes.includes('-webkit-')) {
  60. this.cloneBefore(decl, "-webkit-" + decl.prop, webkitClean);
  61. }
  62. this.cloneBefore(decl, decl.prop, webkitClean);
  63. if (declPrefixes.includes('-o-')) {
  64. var operaClean = this.stringify(this.cleanFromUnprefixed(params, '-o-'));
  65. this.cloneBefore(decl, "-o-" + decl.prop, operaClean);
  66. }
  67. for (var _iterator2 = _createForOfIteratorHelperLoose(declPrefixes), _step2; !(_step2 = _iterator2()).done;) {
  68. prefix = _step2.value;
  69. if (prefix !== '-webkit-' && prefix !== '-o-') {
  70. var prefixValue = this.stringify(this.cleanOtherPrefixes(params, prefix));
  71. this.cloneBefore(decl, prefix + decl.prop, prefixValue);
  72. }
  73. }
  74. if (value !== decl.value && !this.already(decl, decl.prop, value)) {
  75. this.checkForWarning(result, decl);
  76. decl.cloneBefore();
  77. decl.value = value;
  78. }
  79. }
  80. /**
  81. * Find property name
  82. */
  83. ;
  84. _proto.findProp = function findProp(param) {
  85. var prop = param[0].value;
  86. if (/^\d/.test(prop)) {
  87. for (var _iterator4 = _createForOfIteratorHelperLoose(param.entries()), _step4; !(_step4 = _iterator4()).done;) {
  88. var _step4$value = _step4.value,
  89. i = _step4$value[0],
  90. token = _step4$value[1];
  91. if (i !== 0 && token.type === 'word') {
  92. return token.value;
  93. }
  94. }
  95. }
  96. return prop;
  97. }
  98. /**
  99. * Does we already have this declaration
  100. */
  101. ;
  102. _proto.already = function already(decl, prop, value) {
  103. return decl.parent.some(function (i) {
  104. return i.prop === prop && i.value === value;
  105. });
  106. }
  107. /**
  108. * Add declaration if it is not exist
  109. */
  110. ;
  111. _proto.cloneBefore = function cloneBefore(decl, prop, value) {
  112. if (!this.already(decl, prop, value)) {
  113. decl.cloneBefore({
  114. prop: prop,
  115. value: value
  116. });
  117. }
  118. }
  119. /**
  120. * Show transition-property warning
  121. */
  122. ;
  123. _proto.checkForWarning = function checkForWarning(result, decl) {
  124. if (decl.prop !== 'transition-property') {
  125. return;
  126. }
  127. decl.parent.each(function (i) {
  128. if (i.type !== 'decl') {
  129. return undefined;
  130. }
  131. if (i.prop.indexOf('transition-') !== 0) {
  132. return undefined;
  133. }
  134. if (i.prop === 'transition-property') {
  135. return undefined;
  136. }
  137. if (list.comma(i.value).length > 1) {
  138. decl.warn(result, 'Replace transition-property to transition, ' + 'because Autoprefixer could not support ' + 'any cases of transition-property ' + 'and other transition-*');
  139. }
  140. return false;
  141. });
  142. }
  143. /**
  144. * Process transition and remove all unnecessary properties
  145. */
  146. ;
  147. _proto.remove = function remove(decl) {
  148. var _this2 = this;
  149. var params = this.parse(decl.value);
  150. params = params.filter(function (i) {
  151. var prop = _this2.prefixes.remove[_this2.findProp(i)];
  152. return !prop || !prop.remove;
  153. });
  154. var value = this.stringify(params);
  155. if (decl.value === value) {
  156. return;
  157. }
  158. if (params.length === 0) {
  159. decl.remove();
  160. return;
  161. }
  162. var _double = decl.parent.some(function (i) {
  163. return i.prop === decl.prop && i.value === value;
  164. });
  165. var smaller = decl.parent.some(function (i) {
  166. return i !== decl && i.prop === decl.prop && i.value.length > value.length;
  167. });
  168. if (_double || smaller) {
  169. decl.remove();
  170. return;
  171. }
  172. decl.value = value;
  173. }
  174. /**
  175. * Parse properties list to array
  176. */
  177. ;
  178. _proto.parse = function parse(value) {
  179. var ast = parser(value);
  180. var result = [];
  181. var param = [];
  182. for (var _iterator5 = _createForOfIteratorHelperLoose(ast.nodes), _step5; !(_step5 = _iterator5()).done;) {
  183. var node = _step5.value;
  184. param.push(node);
  185. if (node.type === 'div' && node.value === ',') {
  186. result.push(param);
  187. param = [];
  188. }
  189. }
  190. result.push(param);
  191. return result.filter(function (i) {
  192. return i.length > 0;
  193. });
  194. }
  195. /**
  196. * Return properties string from array
  197. */
  198. ;
  199. _proto.stringify = function stringify(params) {
  200. if (params.length === 0) {
  201. return '';
  202. }
  203. var nodes = [];
  204. for (var _iterator6 = _createForOfIteratorHelperLoose(params), _step6; !(_step6 = _iterator6()).done;) {
  205. var param = _step6.value;
  206. if (param[param.length - 1].type !== 'div') {
  207. param.push(this.div(params));
  208. }
  209. nodes = nodes.concat(param);
  210. }
  211. if (nodes[0].type === 'div') {
  212. nodes = nodes.slice(1);
  213. }
  214. if (nodes[nodes.length - 1].type === 'div') {
  215. nodes = nodes.slice(0, +-2 + 1 || undefined);
  216. }
  217. return parser.stringify({
  218. nodes: nodes
  219. });
  220. }
  221. /**
  222. * Return new param array with different name
  223. */
  224. ;
  225. _proto.clone = function clone(origin, name, param) {
  226. var result = [];
  227. var changed = false;
  228. for (var _iterator7 = _createForOfIteratorHelperLoose(param), _step7; !(_step7 = _iterator7()).done;) {
  229. var i = _step7.value;
  230. if (!changed && i.type === 'word' && i.value === origin) {
  231. result.push({
  232. type: 'word',
  233. value: name
  234. });
  235. changed = true;
  236. } else {
  237. result.push(i);
  238. }
  239. }
  240. return result;
  241. }
  242. /**
  243. * Find or create separator
  244. */
  245. ;
  246. _proto.div = function div(params) {
  247. for (var _iterator8 = _createForOfIteratorHelperLoose(params), _step8; !(_step8 = _iterator8()).done;) {
  248. var param = _step8.value;
  249. for (var _iterator9 = _createForOfIteratorHelperLoose(param), _step9; !(_step9 = _iterator9()).done;) {
  250. var node = _step9.value;
  251. if (node.type === 'div' && node.value === ',') {
  252. return node;
  253. }
  254. }
  255. }
  256. return {
  257. type: 'div',
  258. value: ',',
  259. after: ' '
  260. };
  261. };
  262. _proto.cleanOtherPrefixes = function cleanOtherPrefixes(params, prefix) {
  263. var _this3 = this;
  264. return params.filter(function (param) {
  265. var current = vendor.prefix(_this3.findProp(param));
  266. return current === '' || current === prefix;
  267. });
  268. }
  269. /**
  270. * Remove all non-webkit prefixes and unprefixed params if we have prefixed
  271. */
  272. ;
  273. _proto.cleanFromUnprefixed = function cleanFromUnprefixed(params, prefix) {
  274. var _this4 = this;
  275. var remove = params.map(function (i) {
  276. return _this4.findProp(i);
  277. }).filter(function (i) {
  278. return i.slice(0, prefix.length) === prefix;
  279. }).map(function (i) {
  280. return _this4.prefixes.unprefixed(i);
  281. });
  282. var result = [];
  283. for (var _iterator10 = _createForOfIteratorHelperLoose(params), _step10; !(_step10 = _iterator10()).done;) {
  284. var param = _step10.value;
  285. var prop = this.findProp(param);
  286. var p = vendor.prefix(prop);
  287. if (!remove.includes(prop) && (p === prefix || p === '')) {
  288. result.push(param);
  289. }
  290. }
  291. return result;
  292. }
  293. /**
  294. * Check property for disabled by option
  295. */
  296. ;
  297. _proto.disabled = function disabled(prop, prefix) {
  298. var other = ['order', 'justify-content', 'align-self', 'align-content'];
  299. if (prop.includes('flex') || other.includes(prop)) {
  300. if (this.prefixes.options.flexbox === false) {
  301. return true;
  302. }
  303. if (this.prefixes.options.flexbox === 'no-2009') {
  304. return prefix.includes('2009');
  305. }
  306. }
  307. return undefined;
  308. }
  309. /**
  310. * Check if transition prop is inside vendor specific rule
  311. */
  312. ;
  313. _proto.ruleVendorPrefixes = function ruleVendorPrefixes(decl) {
  314. var parent = decl.parent;
  315. if (parent.type !== 'rule') {
  316. return false;
  317. } else if (!parent.selector.includes(':-')) {
  318. return false;
  319. }
  320. var selectors = Browsers.prefixes().filter(function (s) {
  321. return parent.selector.includes(':' + s);
  322. });
  323. return selectors.length > 0 ? selectors : false;
  324. };
  325. return Transition;
  326. }();
  327. module.exports = Transition;