prefixes.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. "use strict";
  2. var vendor = require('postcss').vendor;
  3. var Declaration = require('./declaration');
  4. var Resolution = require('./resolution');
  5. var Transition = require('./transition');
  6. var Processor = require('./processor');
  7. var Supports = require('./supports');
  8. var Browsers = require('./browsers');
  9. var Selector = require('./selector');
  10. var AtRule = require('./at-rule');
  11. var Value = require('./value');
  12. var utils = require('./utils');
  13. Selector.hack(require('./hacks/fullscreen'));
  14. Selector.hack(require('./hacks/placeholder'));
  15. Declaration.hack(require('./hacks/flex'));
  16. Declaration.hack(require('./hacks/order'));
  17. Declaration.hack(require('./hacks/filter'));
  18. Declaration.hack(require('./hacks/grid-end'));
  19. Declaration.hack(require('./hacks/animation'));
  20. Declaration.hack(require('./hacks/flex-flow'));
  21. Declaration.hack(require('./hacks/flex-grow'));
  22. Declaration.hack(require('./hacks/flex-wrap'));
  23. Declaration.hack(require('./hacks/grid-area'));
  24. Declaration.hack(require('./hacks/place-self'));
  25. Declaration.hack(require('./hacks/grid-start'));
  26. Declaration.hack(require('./hacks/align-self'));
  27. Declaration.hack(require('./hacks/appearance'));
  28. Declaration.hack(require('./hacks/flex-basis'));
  29. Declaration.hack(require('./hacks/mask-border'));
  30. Declaration.hack(require('./hacks/mask-composite'));
  31. Declaration.hack(require('./hacks/align-items'));
  32. Declaration.hack(require('./hacks/flex-shrink'));
  33. Declaration.hack(require('./hacks/break-props'));
  34. Declaration.hack(require('./hacks/color-adjust'));
  35. Declaration.hack(require('./hacks/writing-mode'));
  36. Declaration.hack(require('./hacks/border-image'));
  37. Declaration.hack(require('./hacks/align-content'));
  38. Declaration.hack(require('./hacks/border-radius'));
  39. Declaration.hack(require('./hacks/block-logical'));
  40. Declaration.hack(require('./hacks/grid-template'));
  41. Declaration.hack(require('./hacks/inline-logical'));
  42. Declaration.hack(require('./hacks/grid-row-align'));
  43. Declaration.hack(require('./hacks/transform-decl'));
  44. Declaration.hack(require('./hacks/flex-direction'));
  45. Declaration.hack(require('./hacks/image-rendering'));
  46. Declaration.hack(require('./hacks/backdrop-filter'));
  47. Declaration.hack(require('./hacks/background-clip'));
  48. Declaration.hack(require('./hacks/text-decoration'));
  49. Declaration.hack(require('./hacks/justify-content'));
  50. Declaration.hack(require('./hacks/background-size'));
  51. Declaration.hack(require('./hacks/grid-row-column'));
  52. Declaration.hack(require('./hacks/grid-rows-columns'));
  53. Declaration.hack(require('./hacks/grid-column-align'));
  54. Declaration.hack(require('./hacks/overscroll-behavior'));
  55. Declaration.hack(require('./hacks/grid-template-areas'));
  56. Declaration.hack(require('./hacks/text-emphasis-position'));
  57. Declaration.hack(require('./hacks/text-decoration-skip-ink'));
  58. Value.hack(require('./hacks/gradient'));
  59. Value.hack(require('./hacks/intrinsic'));
  60. Value.hack(require('./hacks/pixelated'));
  61. Value.hack(require('./hacks/image-set'));
  62. Value.hack(require('./hacks/cross-fade'));
  63. Value.hack(require('./hacks/display-flex'));
  64. Value.hack(require('./hacks/display-grid'));
  65. Value.hack(require('./hacks/filter-value'));
  66. var declsCache = {};
  67. var Prefixes =
  68. /*#__PURE__*/
  69. function () {
  70. function Prefixes(data, browsers, options) {
  71. if (options === void 0) {
  72. options = {};
  73. }
  74. this.data = data;
  75. this.browsers = browsers;
  76. this.options = options;
  77. var _this$preprocess = this.preprocess(this.select(this.data));
  78. this.add = _this$preprocess[0];
  79. this.remove = _this$preprocess[1];
  80. this.transition = new Transition(this);
  81. this.processor = new Processor(this);
  82. }
  83. /**
  84. * Return clone instance to remove all prefixes
  85. */
  86. var _proto = Prefixes.prototype;
  87. _proto.cleaner = function cleaner() {
  88. if (this.cleanerCache) {
  89. return this.cleanerCache;
  90. }
  91. if (this.browsers.selected.length) {
  92. var empty = new Browsers(this.browsers.data, []);
  93. this.cleanerCache = new Prefixes(this.data, empty, this.options);
  94. } else {
  95. return this;
  96. }
  97. return this.cleanerCache;
  98. }
  99. /**
  100. * Select prefixes from data, which is necessary for selected browsers
  101. */
  102. ;
  103. _proto.select = function select(list) {
  104. var _this = this;
  105. var selected = {
  106. add: {},
  107. remove: {}
  108. };
  109. var _loop = function _loop(name) {
  110. var data = list[name];
  111. var add = data.browsers.map(function (i) {
  112. var params = i.split(' ');
  113. return {
  114. browser: params[0] + " " + params[1],
  115. note: params[2]
  116. };
  117. });
  118. var notes = add.filter(function (i) {
  119. return i.note;
  120. }).map(function (i) {
  121. return _this.browsers.prefix(i.browser) + " " + i.note;
  122. });
  123. notes = utils.uniq(notes);
  124. add = add.filter(function (i) {
  125. return _this.browsers.isSelected(i.browser);
  126. }).map(function (i) {
  127. var prefix = _this.browsers.prefix(i.browser);
  128. if (i.note) {
  129. return prefix + " " + i.note;
  130. } else {
  131. return prefix;
  132. }
  133. });
  134. add = _this.sort(utils.uniq(add));
  135. if (_this.options.flexbox === 'no-2009') {
  136. add = add.filter(function (i) {
  137. return i.indexOf('2009') === -1;
  138. });
  139. }
  140. var all = data.browsers.map(function (i) {
  141. return _this.browsers.prefix(i);
  142. });
  143. if (data.mistakes) {
  144. all = all.concat(data.mistakes);
  145. }
  146. all = all.concat(notes);
  147. all = utils.uniq(all);
  148. if (add.length) {
  149. selected.add[name] = add;
  150. if (add.length < all.length) {
  151. selected.remove[name] = all.filter(function (i) {
  152. return add.indexOf(i) === -1;
  153. });
  154. }
  155. } else {
  156. selected.remove[name] = all;
  157. }
  158. };
  159. for (var name in list) {
  160. _loop(name);
  161. }
  162. return selected;
  163. }
  164. /**
  165. * Sort vendor prefixes
  166. */
  167. ;
  168. _proto.sort = function sort(prefixes) {
  169. return prefixes.sort(function (a, b) {
  170. var aLength = utils.removeNote(a).length;
  171. var bLength = utils.removeNote(b).length;
  172. if (aLength === bLength) {
  173. return b.length - a.length;
  174. } else {
  175. return bLength - aLength;
  176. }
  177. });
  178. }
  179. /**
  180. * Cache prefixes data to fast CSS processing
  181. */
  182. ;
  183. _proto.preprocess = function preprocess(selected) {
  184. var add = {
  185. 'selectors': [],
  186. '@supports': new Supports(Prefixes, this)
  187. };
  188. for (var name in selected.add) {
  189. var prefixes = selected.add[name];
  190. if (name === '@keyframes' || name === '@viewport') {
  191. add[name] = new AtRule(name, prefixes, this);
  192. } else if (name === '@resolution') {
  193. add[name] = new Resolution(name, prefixes, this);
  194. } else if (this.data[name].selector) {
  195. add.selectors.push(Selector.load(name, prefixes, this));
  196. } else {
  197. var props = this.data[name].props;
  198. if (props) {
  199. var value = Value.load(name, prefixes, this);
  200. for (var _iterator = props, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
  201. var _ref;
  202. if (_isArray) {
  203. if (_i >= _iterator.length) break;
  204. _ref = _iterator[_i++];
  205. } else {
  206. _i = _iterator.next();
  207. if (_i.done) break;
  208. _ref = _i.value;
  209. }
  210. var prop = _ref;
  211. if (!add[prop]) {
  212. add[prop] = {
  213. values: []
  214. };
  215. }
  216. add[prop].values.push(value);
  217. }
  218. } else {
  219. var values = add[name] && add[name].values || [];
  220. add[name] = Declaration.load(name, prefixes, this);
  221. add[name].values = values;
  222. }
  223. }
  224. }
  225. var remove = {
  226. selectors: []
  227. };
  228. for (var _name in selected.remove) {
  229. var _prefixes = selected.remove[_name];
  230. if (this.data[_name].selector) {
  231. var selector = Selector.load(_name, _prefixes);
  232. for (var _iterator2 = _prefixes, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
  233. var _ref2;
  234. if (_isArray2) {
  235. if (_i2 >= _iterator2.length) break;
  236. _ref2 = _iterator2[_i2++];
  237. } else {
  238. _i2 = _iterator2.next();
  239. if (_i2.done) break;
  240. _ref2 = _i2.value;
  241. }
  242. var prefix = _ref2;
  243. remove.selectors.push(selector.old(prefix));
  244. }
  245. } else if (_name === '@keyframes' || _name === '@viewport') {
  246. for (var _iterator3 = _prefixes, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
  247. var _ref3;
  248. if (_isArray3) {
  249. if (_i3 >= _iterator3.length) break;
  250. _ref3 = _iterator3[_i3++];
  251. } else {
  252. _i3 = _iterator3.next();
  253. if (_i3.done) break;
  254. _ref3 = _i3.value;
  255. }
  256. var _prefix = _ref3;
  257. var prefixed = "@" + _prefix + _name.slice(1);
  258. remove[prefixed] = {
  259. remove: true
  260. };
  261. }
  262. } else if (_name === '@resolution') {
  263. remove[_name] = new Resolution(_name, _prefixes, this);
  264. } else {
  265. var _props = this.data[_name].props;
  266. if (_props) {
  267. var _value = Value.load(_name, [], this);
  268. for (var _iterator4 = _prefixes, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
  269. var _ref4;
  270. if (_isArray4) {
  271. if (_i4 >= _iterator4.length) break;
  272. _ref4 = _iterator4[_i4++];
  273. } else {
  274. _i4 = _iterator4.next();
  275. if (_i4.done) break;
  276. _ref4 = _i4.value;
  277. }
  278. var _prefix2 = _ref4;
  279. var old = _value.old(_prefix2);
  280. if (old) {
  281. for (var _iterator5 = _props, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
  282. var _ref5;
  283. if (_isArray5) {
  284. if (_i5 >= _iterator5.length) break;
  285. _ref5 = _iterator5[_i5++];
  286. } else {
  287. _i5 = _iterator5.next();
  288. if (_i5.done) break;
  289. _ref5 = _i5.value;
  290. }
  291. var _prop = _ref5;
  292. if (!remove[_prop]) {
  293. remove[_prop] = {};
  294. }
  295. if (!remove[_prop].values) {
  296. remove[_prop].values = [];
  297. }
  298. remove[_prop].values.push(old);
  299. }
  300. }
  301. }
  302. } else {
  303. for (var _iterator6 = _prefixes, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
  304. var _ref6;
  305. if (_isArray6) {
  306. if (_i6 >= _iterator6.length) break;
  307. _ref6 = _iterator6[_i6++];
  308. } else {
  309. _i6 = _iterator6.next();
  310. if (_i6.done) break;
  311. _ref6 = _i6.value;
  312. }
  313. var _prefix3 = _ref6;
  314. var olds = this.decl(_name).old(_name, _prefix3);
  315. if (_name === 'align-self') {
  316. var a = add[_name] && add[_name].prefixes;
  317. if (a) {
  318. if (_prefix3 === '-webkit- 2009' && a.indexOf('-webkit-') !== -1) {
  319. continue;
  320. } else if (_prefix3 === '-webkit-' && a.indexOf('-webkit- 2009') !== -1) {
  321. continue;
  322. }
  323. }
  324. }
  325. for (var _iterator7 = olds, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
  326. var _ref7;
  327. if (_isArray7) {
  328. if (_i7 >= _iterator7.length) break;
  329. _ref7 = _iterator7[_i7++];
  330. } else {
  331. _i7 = _iterator7.next();
  332. if (_i7.done) break;
  333. _ref7 = _i7.value;
  334. }
  335. var _prefixed = _ref7;
  336. if (!remove[_prefixed]) {
  337. remove[_prefixed] = {};
  338. }
  339. remove[_prefixed].remove = true;
  340. }
  341. }
  342. }
  343. }
  344. }
  345. return [add, remove];
  346. }
  347. /**
  348. * Declaration loader with caching
  349. */
  350. ;
  351. _proto.decl = function decl(prop) {
  352. var decl = declsCache[prop];
  353. if (decl) {
  354. return decl;
  355. } else {
  356. declsCache[prop] = Declaration.load(prop);
  357. return declsCache[prop];
  358. }
  359. }
  360. /**
  361. * Return unprefixed version of property
  362. */
  363. ;
  364. _proto.unprefixed = function unprefixed(prop) {
  365. var value = this.normalize(vendor.unprefixed(prop));
  366. if (value === 'flex-direction') {
  367. value = 'flex-flow';
  368. }
  369. return value;
  370. }
  371. /**
  372. * Normalize prefix for remover
  373. */
  374. ;
  375. _proto.normalize = function normalize(prop) {
  376. return this.decl(prop).normalize(prop);
  377. }
  378. /**
  379. * Return prefixed version of property
  380. */
  381. ;
  382. _proto.prefixed = function prefixed(prop, prefix) {
  383. prop = vendor.unprefixed(prop);
  384. return this.decl(prop).prefixed(prop, prefix);
  385. }
  386. /**
  387. * Return values, which must be prefixed in selected property
  388. */
  389. ;
  390. _proto.values = function values(type, prop) {
  391. var data = this[type];
  392. var global = data['*'] && data['*'].values;
  393. var values = data[prop] && data[prop].values;
  394. if (global && values) {
  395. return utils.uniq(global.concat(values));
  396. } else {
  397. return global || values || [];
  398. }
  399. }
  400. /**
  401. * Group declaration by unprefixed property to check them
  402. */
  403. ;
  404. _proto.group = function group(decl) {
  405. var _this2 = this;
  406. var rule = decl.parent;
  407. var index = rule.index(decl);
  408. var length = rule.nodes.length;
  409. var unprefixed = this.unprefixed(decl.prop);
  410. var checker = function checker(step, callback) {
  411. index += step;
  412. while (index >= 0 && index < length) {
  413. var other = rule.nodes[index];
  414. if (other.type === 'decl') {
  415. if (step === -1 && other.prop === unprefixed) {
  416. if (!Browsers.withPrefix(other.value)) {
  417. break;
  418. }
  419. }
  420. if (_this2.unprefixed(other.prop) !== unprefixed) {
  421. break;
  422. } else if (callback(other) === true) {
  423. return true;
  424. }
  425. if (step === +1 && other.prop === unprefixed) {
  426. if (!Browsers.withPrefix(other.value)) {
  427. break;
  428. }
  429. }
  430. }
  431. index += step;
  432. }
  433. return false;
  434. };
  435. return {
  436. up: function up(callback) {
  437. return checker(-1, callback);
  438. },
  439. down: function down(callback) {
  440. return checker(+1, callback);
  441. }
  442. };
  443. };
  444. return Prefixes;
  445. }();
  446. module.exports = Prefixes;