index.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _browserslist = require('browserslist');
  4. var _browserslist2 = _interopRequireDefault(_browserslist);
  5. var _postcss = require('postcss');
  6. var _postcss2 = _interopRequireDefault(_postcss);
  7. var _vendors = require('vendors');
  8. var _vendors2 = _interopRequireDefault(_vendors);
  9. var _clone = require('./lib/clone');
  10. var _clone2 = _interopRequireDefault(_clone);
  11. var _ensureCompatibility = require('./lib/ensureCompatibility');
  12. var _ensureCompatibility2 = _interopRequireDefault(_ensureCompatibility);
  13. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  14. var prefixes = _vendors2.default.map(function (v) {
  15. return '-' + v + '-';
  16. });
  17. function intersect(a, b, not) {
  18. return a.filter(function (c) {
  19. var index = ~b.indexOf(c);
  20. return not ? !index : index;
  21. });
  22. }
  23. var different = function different(a, b) {
  24. return intersect(a, b, true).concat(intersect(b, a, true));
  25. };
  26. var filterPrefixes = function filterPrefixes(selector) {
  27. return intersect(prefixes, selector);
  28. };
  29. function sameVendor(selectorsA, selectorsB) {
  30. var same = function same(selectors) {
  31. return selectors.map(filterPrefixes).join();
  32. };
  33. return same(selectorsA) === same(selectorsB);
  34. }
  35. var noVendor = function noVendor(selector) {
  36. return !filterPrefixes(selector).length;
  37. };
  38. function sameParent(ruleA, ruleB) {
  39. var hasParent = ruleA.parent && ruleB.parent;
  40. var sameType = hasParent && ruleA.parent.type === ruleB.parent.type;
  41. // If an at rule, ensure that the parameters are the same
  42. if (hasParent && ruleA.parent.type !== 'root' && ruleB.parent.type !== 'root') {
  43. sameType = sameType && ruleA.parent.params === ruleB.parent.params && ruleA.parent.name === ruleB.parent.name;
  44. }
  45. return hasParent ? sameType : true;
  46. }
  47. function canMerge(ruleA, ruleB, browsers, compatibilityCache) {
  48. var a = ruleA.selectors;
  49. var b = ruleB.selectors;
  50. var selectors = a.concat(b);
  51. if (!(0, _ensureCompatibility2.default)(selectors, browsers, compatibilityCache)) {
  52. return false;
  53. }
  54. var parent = sameParent(ruleA, ruleB);
  55. var name = ruleA.parent.name;
  56. if (parent && name && ~name.indexOf('keyframes')) {
  57. return false;
  58. }
  59. return parent && (selectors.every(noVendor) || sameVendor(a, b));
  60. }
  61. var getDecls = function getDecls(rule) {
  62. return rule.nodes ? rule.nodes.map(String) : [];
  63. };
  64. var joinSelectors = function joinSelectors() {
  65. for (var _len = arguments.length, rules = Array(_len), _key = 0; _key < _len; _key++) {
  66. rules[_key] = arguments[_key];
  67. }
  68. return rules.map(function (s) {
  69. return s.selector;
  70. }).join();
  71. };
  72. function ruleLength() {
  73. for (var _len2 = arguments.length, rules = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  74. rules[_key2] = arguments[_key2];
  75. }
  76. return rules.map(function (r) {
  77. return r.nodes.length ? String(r) : '';
  78. }).join('').length;
  79. }
  80. function splitProp(prop) {
  81. var parts = prop.split('-');
  82. var base = void 0,
  83. rest = void 0;
  84. // Treat vendor prefixed properties as if they were unprefixed;
  85. // moving them when combined with non-prefixed properties can
  86. // cause issues. e.g. moving -webkit-background-clip when there
  87. // is a background shorthand definition.
  88. if (prop[0] === '-') {
  89. base = parts[2];
  90. rest = parts.slice(3);
  91. } else {
  92. base = parts[0];
  93. rest = parts.slice(1);
  94. }
  95. return [base, rest];
  96. }
  97. function isConflictingProp(propA, propB) {
  98. if (propA === propB) {
  99. return true;
  100. }
  101. var a = splitProp(propA);
  102. var b = splitProp(propB);
  103. return a[0] === b[0] && a[1].length !== b[1].length;
  104. }
  105. function hasConflicts(declProp, notMoved) {
  106. return notMoved.some(function (prop) {
  107. return isConflictingProp(prop, declProp);
  108. });
  109. }
  110. function partialMerge(first, second) {
  111. var _this = this;
  112. var intersection = intersect(getDecls(first), getDecls(second));
  113. if (!intersection.length) {
  114. return second;
  115. }
  116. var nextRule = second.next();
  117. if (nextRule && nextRule.type === 'rule' && canMerge(second, nextRule)) {
  118. var nextIntersection = intersect(getDecls(second), getDecls(nextRule));
  119. if (nextIntersection.length > intersection.length) {
  120. first = second;second = nextRule;intersection = nextIntersection;
  121. }
  122. }
  123. var recievingBlock = (0, _clone2.default)(second);
  124. recievingBlock.selector = joinSelectors(first, second);
  125. recievingBlock.nodes = [];
  126. second.parent.insertBefore(second, recievingBlock);
  127. var difference = different(getDecls(first), getDecls(second));
  128. var filterConflicts = function filterConflicts(decls, intersectn) {
  129. var willNotMove = [];
  130. return decls.reduce(function (willMove, decl) {
  131. var intersects = ~intersectn.indexOf(decl);
  132. var prop = decl.split(':')[0];
  133. var base = prop.split('-')[0];
  134. var canMove = difference.every(function (d) {
  135. return d.split(':')[0] !== base;
  136. });
  137. if (intersects && canMove && !hasConflicts(prop, willNotMove)) {
  138. willMove.push(decl);
  139. } else {
  140. willNotMove.push(prop);
  141. }
  142. return willMove;
  143. }, []);
  144. };
  145. intersection = filterConflicts(getDecls(first).reverse(), intersection);
  146. intersection = filterConflicts(getDecls(second), intersection);
  147. var firstClone = (0, _clone2.default)(first);
  148. var secondClone = (0, _clone2.default)(second);
  149. var moveDecl = function moveDecl(callback) {
  150. return function (decl) {
  151. if (~intersection.indexOf(String(decl))) {
  152. callback.call(_this, decl);
  153. }
  154. };
  155. };
  156. firstClone.walkDecls(moveDecl(function (decl) {
  157. decl.remove();
  158. recievingBlock.append(decl);
  159. }));
  160. secondClone.walkDecls(moveDecl(function (decl) {
  161. return decl.remove();
  162. }));
  163. var merged = ruleLength(firstClone, recievingBlock, secondClone);
  164. var original = ruleLength(first, second);
  165. if (merged < original) {
  166. first.replaceWith(firstClone);
  167. second.replaceWith(secondClone);
  168. [firstClone, recievingBlock, secondClone].forEach(function (r) {
  169. if (!r.nodes.length) {
  170. r.remove();
  171. }
  172. });
  173. if (!secondClone.parent) {
  174. return recievingBlock;
  175. }
  176. return secondClone;
  177. } else {
  178. recievingBlock.remove();
  179. return second;
  180. }
  181. }
  182. function selectorMerger(browsers, compatibilityCache) {
  183. var cache = null;
  184. return function (rule) {
  185. // Prime the cache with the first rule, or alternately ensure that it is
  186. // safe to merge both declarations before continuing
  187. if (!cache || !canMerge(rule, cache, browsers, compatibilityCache)) {
  188. cache = rule;
  189. return;
  190. }
  191. // Ensure that we don't deduplicate the same rule; this is sometimes
  192. // caused by a partial merge
  193. if (cache === rule) {
  194. cache = rule;
  195. return;
  196. }
  197. // Merge when declarations are exactly equal
  198. // e.g. h1 { color: red } h2 { color: red }
  199. if (getDecls(rule).join(';') === getDecls(cache).join(';')) {
  200. rule.selector = joinSelectors(cache, rule);
  201. cache.remove();
  202. cache = rule;
  203. return;
  204. }
  205. // Merge when both selectors are exactly equal
  206. // e.g. a { color: blue } a { font-weight: bold }
  207. if (cache.selector === rule.selector) {
  208. var cached = getDecls(cache);
  209. rule.walk(function (decl) {
  210. if (~cached.indexOf(String(decl))) {
  211. return decl.remove();
  212. }
  213. decl.moveTo(cache);
  214. });
  215. rule.remove();
  216. return;
  217. }
  218. // Partial merge: check if the rule contains a subset of the last; if
  219. // so create a joined selector with the subset, if smaller.
  220. cache = partialMerge(cache, rule);
  221. };
  222. }
  223. exports.default = _postcss2.default.plugin('postcss-merge-rules', function () {
  224. return function (css, result) {
  225. var opts = result.opts;
  226. var browsers = (0, _browserslist2.default)(null, {
  227. stats: opts && opts.stats,
  228. path: opts && opts.from,
  229. env: opts && opts.env
  230. });
  231. var compatibilityCache = {};
  232. css.walkRules(selectorMerger(browsers, compatibilityCache));
  233. };
  234. });
  235. module.exports = exports['default'];