simple.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. var cleanUpSelectors = require('./clean-up').selectors;
  2. var cleanUpBlock = require('./clean-up').block;
  3. var cleanUpAtRule = require('./clean-up').atRule;
  4. var split = require('../utils/split');
  5. var RGB = require('../colors/rgb');
  6. var HSL = require('../colors/hsl');
  7. var HexNameShortener = require('../colors/hex-name-shortener');
  8. var wrapForOptimizing = require('../properties/wrap-for-optimizing').all;
  9. var restoreFromOptimizing = require('../properties/restore-from-optimizing');
  10. var removeUnused = require('../properties/remove-unused');
  11. var DEFAULT_ROUNDING_PRECISION = 2;
  12. var CHARSET_TOKEN = '@charset';
  13. var CHARSET_REGEXP = new RegExp('^' + CHARSET_TOKEN, 'i');
  14. var IMPORT_REGEXP = /^@import["'\s]/i;
  15. var FONT_NUMERAL_WEIGHTS = ['100', '200', '300', '400', '500', '600', '700', '800', '900'];
  16. var FONT_NAME_WEIGHTS = ['normal', 'bold', 'bolder', 'lighter'];
  17. var FONT_NAME_WEIGHTS_WITHOUT_NORMAL = ['bold', 'bolder', 'lighter'];
  18. var WHOLE_PIXEL_VALUE = /(?:^|\s|\()(-?\d+)px/;
  19. var TIME_VALUE = /^(\-?[\d\.]+)(m?s)$/;
  20. var valueMinifiers = {
  21. 'background': function (value, index, total) {
  22. return index === 0 && total == 1 && (value == 'none' || value == 'transparent') ? '0 0' : value;
  23. },
  24. 'font-weight': function (value) {
  25. if (value == 'normal')
  26. return '400';
  27. else if (value == 'bold')
  28. return '700';
  29. else
  30. return value;
  31. },
  32. 'outline': function (value, index, total) {
  33. return index === 0 && total == 1 && value == 'none' ? '0' : value;
  34. }
  35. };
  36. function isNegative(property, idx) {
  37. return property.value[idx] && property.value[idx][0][0] == '-' && parseFloat(property.value[idx][0]) < 0;
  38. }
  39. function zeroMinifier(name, value) {
  40. if (value.indexOf('0') == -1)
  41. return value;
  42. if (value.indexOf('-') > -1) {
  43. value = value
  44. .replace(/([^\w\d\-]|^)\-0([^\.]|$)/g, '$10$2')
  45. .replace(/([^\w\d\-]|^)\-0([^\.]|$)/g, '$10$2');
  46. }
  47. return value
  48. .replace(/(^|\s)0+([1-9])/g, '$1$2')
  49. .replace(/(^|\D)\.0+(\D|$)/g, '$10$2')
  50. .replace(/(^|\D)\.0+(\D|$)/g, '$10$2')
  51. .replace(/\.([1-9]*)0+(\D|$)/g, function (match, nonZeroPart, suffix) {
  52. return (nonZeroPart.length > 0 ? '.' : '') + nonZeroPart + suffix;
  53. })
  54. .replace(/(^|\D)0\.(\d)/g, '$1.$2');
  55. }
  56. function zeroDegMinifier(_, value) {
  57. if (value.indexOf('0deg') == -1)
  58. return value;
  59. return value.replace(/\(0deg\)/g, '(0)');
  60. }
  61. function whitespaceMinifier(name, value) {
  62. if (name.indexOf('filter') > -1 || value.indexOf(' ') == -1)
  63. return value;
  64. value = value.replace(/\s+/g, ' ');
  65. if (value.indexOf('calc') > -1)
  66. value = value.replace(/\) ?\/ ?/g, ')/ ');
  67. return value
  68. .replace(/\( /g, '(')
  69. .replace(/ \)/g, ')')
  70. .replace(/, /g, ',');
  71. }
  72. function precisionMinifier(_, value, precisionOptions) {
  73. if (precisionOptions.value === -1 || value.indexOf('.') === -1)
  74. return value;
  75. return value
  76. .replace(precisionOptions.regexp, function (match, number) {
  77. return Math.round(parseFloat(number) * precisionOptions.multiplier) / precisionOptions.multiplier + 'px';
  78. })
  79. .replace(/(\d)\.($|\D)/g, '$1$2');
  80. }
  81. function unitMinifier(name, value, unitsRegexp) {
  82. if (/^(?:\-moz\-calc|\-webkit\-calc|calc)\(/.test(value))
  83. return value;
  84. if (name == 'flex' || name == '-ms-flex' || name == '-webkit-flex' || name == 'flex-basis' || name == '-webkit-flex-basis')
  85. return value;
  86. if (value.indexOf('%') > 0 && (name == 'height' || name == 'max-height' || name == 'width' || name == 'max-width'))
  87. return value;
  88. return value
  89. .replace(unitsRegexp, '$1' + '0' + '$2')
  90. .replace(unitsRegexp, '$1' + '0' + '$2');
  91. }
  92. function multipleZerosMinifier(property) {
  93. var values = property.value;
  94. var spliceAt;
  95. if (values.length == 4 && values[0][0] === '0' && values[1][0] === '0' && values[2][0] === '0' && values[3][0] === '0') {
  96. if (property.name.indexOf('box-shadow') > -1)
  97. spliceAt = 2;
  98. else
  99. spliceAt = 1;
  100. }
  101. if (spliceAt) {
  102. property.value.splice(spliceAt);
  103. property.dirty = true;
  104. }
  105. }
  106. function colorMininifier(name, value, compatibility) {
  107. if (value.indexOf('#') === -1 && value.indexOf('rgb') == -1 && value.indexOf('hsl') == -1)
  108. return HexNameShortener.shorten(value);
  109. value = value
  110. .replace(/rgb\((\-?\d+),(\-?\d+),(\-?\d+)\)/g, function (match, red, green, blue) {
  111. return new RGB(red, green, blue).toHex();
  112. })
  113. .replace(/hsl\((-?\d+),(-?\d+)%?,(-?\d+)%?\)/g, function (match, hue, saturation, lightness) {
  114. return new HSL(hue, saturation, lightness).toHex();
  115. })
  116. .replace(/(^|[^='"])#([0-9a-f]{6})/gi, function (match, prefix, color) {
  117. if (color[0] == color[1] && color[2] == color[3] && color[4] == color[5])
  118. return prefix + '#' + color[0] + color[2] + color[4];
  119. else
  120. return prefix + '#' + color;
  121. })
  122. .replace(/(rgb|rgba|hsl|hsla)\(([^\)]+)\)/g, function (match, colorFunction, colorDef) {
  123. var tokens = colorDef.split(',');
  124. var applies = (colorFunction == 'hsl' && tokens.length == 3) ||
  125. (colorFunction == 'hsla' && tokens.length == 4) ||
  126. (colorFunction == 'rgb' && tokens.length == 3 && colorDef.indexOf('%') > 0) ||
  127. (colorFunction == 'rgba' && tokens.length == 4 && colorDef.indexOf('%') > 0);
  128. if (!applies)
  129. return match;
  130. if (tokens[1].indexOf('%') == -1)
  131. tokens[1] += '%';
  132. if (tokens[2].indexOf('%') == -1)
  133. tokens[2] += '%';
  134. return colorFunction + '(' + tokens.join(',') + ')';
  135. });
  136. if (compatibility.colors.opacity && name.indexOf('background') == -1) {
  137. value = value.replace(/(?:rgba|hsla)\(0,0%?,0%?,0\)/g, function (match) {
  138. if (split(value, ',').pop().indexOf('gradient(') > -1)
  139. return match;
  140. return 'transparent';
  141. });
  142. }
  143. return HexNameShortener.shorten(value);
  144. }
  145. function pixelLengthMinifier(_, value, compatibility) {
  146. if (!WHOLE_PIXEL_VALUE.test(value))
  147. return value;
  148. return value.replace(WHOLE_PIXEL_VALUE, function (match, val) {
  149. var newValue;
  150. var intVal = parseInt(val);
  151. if (intVal === 0)
  152. return match;
  153. if (compatibility.properties.shorterLengthUnits && compatibility.units.pt && intVal * 3 % 4 === 0)
  154. newValue = intVal * 3 / 4 + 'pt';
  155. if (compatibility.properties.shorterLengthUnits && compatibility.units.pc && intVal % 16 === 0)
  156. newValue = intVal / 16 + 'pc';
  157. if (compatibility.properties.shorterLengthUnits && compatibility.units.in && intVal % 96 === 0)
  158. newValue = intVal / 96 + 'in';
  159. if (newValue)
  160. newValue = match.substring(0, match.indexOf(val)) + newValue;
  161. return newValue && newValue.length < match.length ? newValue : match;
  162. });
  163. }
  164. function timeUnitMinifier(_, value) {
  165. if (!TIME_VALUE.test(value))
  166. return value;
  167. return value.replace(TIME_VALUE, function (match, val, unit) {
  168. var newValue;
  169. if (unit == 'ms') {
  170. newValue = parseInt(val) / 1000 + 's';
  171. } else if (unit == 's') {
  172. newValue = parseFloat(val) * 1000 + 'ms';
  173. }
  174. return newValue.length < match.length ? newValue : match;
  175. });
  176. }
  177. function minifyBorderRadius(property) {
  178. var values = property.value;
  179. var spliceAt;
  180. if (values.length == 3 && values[1][0] == '/' && values[0][0] == values[2][0])
  181. spliceAt = 1;
  182. else if (values.length == 5 && values[2][0] == '/' && values[0][0] == values[3][0] && values[1][0] == values[4][0])
  183. spliceAt = 2;
  184. else if (values.length == 7 && values[3][0] == '/' && values[0][0] == values[4][0] && values[1][0] == values[5][0] && values[2][0] == values[6][0])
  185. spliceAt = 3;
  186. else if (values.length == 9 && values[4][0] == '/' && values[0][0] == values[5][0] && values[1][0] == values[6][0] && values[2][0] == values[7][0] && values[3][0] == values[8][0])
  187. spliceAt = 4;
  188. if (spliceAt) {
  189. property.value.splice(spliceAt);
  190. property.dirty = true;
  191. }
  192. }
  193. function minifyFilter(property) {
  194. if (property.value.length == 1) {
  195. property.value[0][0] = property.value[0][0].replace(/progid:DXImageTransform\.Microsoft\.(Alpha|Chroma)(\W)/, function (match, filter, suffix) {
  196. return filter.toLowerCase() + suffix;
  197. });
  198. }
  199. property.value[0][0] = property.value[0][0]
  200. .replace(/,(\S)/g, ', $1')
  201. .replace(/ ?= ?/g, '=');
  202. }
  203. function minifyFont(property) {
  204. var values = property.value;
  205. var hasNumeral = FONT_NUMERAL_WEIGHTS.indexOf(values[0][0]) > -1 ||
  206. values[1] && FONT_NUMERAL_WEIGHTS.indexOf(values[1][0]) > -1 ||
  207. values[2] && FONT_NUMERAL_WEIGHTS.indexOf(values[2][0]) > -1;
  208. if (hasNumeral)
  209. return;
  210. if (values[1] == '/')
  211. return;
  212. var normalCount = 0;
  213. if (values[0][0] == 'normal')
  214. normalCount++;
  215. if (values[1] && values[1][0] == 'normal')
  216. normalCount++;
  217. if (values[2] && values[2][0] == 'normal')
  218. normalCount++;
  219. if (normalCount > 1)
  220. return;
  221. var toOptimize;
  222. if (FONT_NAME_WEIGHTS_WITHOUT_NORMAL.indexOf(values[0][0]) > -1)
  223. toOptimize = 0;
  224. else if (values[1] && FONT_NAME_WEIGHTS_WITHOUT_NORMAL.indexOf(values[1][0]) > -1)
  225. toOptimize = 1;
  226. else if (values[2] && FONT_NAME_WEIGHTS_WITHOUT_NORMAL.indexOf(values[2][0]) > -1)
  227. toOptimize = 2;
  228. else if (FONT_NAME_WEIGHTS.indexOf(values[0][0]) > -1)
  229. toOptimize = 0;
  230. else if (values[1] && FONT_NAME_WEIGHTS.indexOf(values[1][0]) > -1)
  231. toOptimize = 1;
  232. else if (values[2] && FONT_NAME_WEIGHTS.indexOf(values[2][0]) > -1)
  233. toOptimize = 2;
  234. if (toOptimize !== undefined) {
  235. property.value[toOptimize][0] = valueMinifiers['font-weight'](values[toOptimize][0]);
  236. property.dirty = true;
  237. }
  238. }
  239. function optimizeBody(properties, options) {
  240. var property, name, value;
  241. var _properties = wrapForOptimizing(properties);
  242. for (var i = 0, l = _properties.length; i < l; i++) {
  243. property = _properties[i];
  244. name = property.name;
  245. if (property.hack && (
  246. (property.hack == 'star' || property.hack == 'underscore') && !options.compatibility.properties.iePrefixHack ||
  247. property.hack == 'backslash' && !options.compatibility.properties.ieSuffixHack ||
  248. property.hack == 'bang' && !options.compatibility.properties.ieBangHack))
  249. property.unused = true;
  250. if (name.indexOf('padding') === 0 && (isNegative(property, 0) || isNegative(property, 1) || isNegative(property, 2) || isNegative(property, 3)))
  251. property.unused = true;
  252. if (property.unused)
  253. continue;
  254. if (property.variable) {
  255. if (property.block)
  256. optimizeBody(property.value[0], options);
  257. continue;
  258. }
  259. for (var j = 0, m = property.value.length; j < m; j++) {
  260. value = property.value[j][0];
  261. if (valueMinifiers[name])
  262. value = valueMinifiers[name](value, j, m);
  263. value = whitespaceMinifier(name, value);
  264. value = precisionMinifier(name, value, options.precision);
  265. value = pixelLengthMinifier(name, value, options.compatibility);
  266. value = timeUnitMinifier(name, value);
  267. value = zeroMinifier(name, value);
  268. if (options.compatibility.properties.zeroUnits) {
  269. value = zeroDegMinifier(name, value);
  270. value = unitMinifier(name, value, options.unitsRegexp);
  271. }
  272. if (options.compatibility.properties.colors)
  273. value = colorMininifier(name, value, options.compatibility);
  274. property.value[j][0] = value;
  275. }
  276. multipleZerosMinifier(property);
  277. if (name.indexOf('border') === 0 && name.indexOf('radius') > 0)
  278. minifyBorderRadius(property);
  279. else if (name == 'filter')
  280. minifyFilter(property);
  281. else if (name == 'font')
  282. minifyFont(property);
  283. }
  284. restoreFromOptimizing(_properties, true);
  285. removeUnused(_properties);
  286. }
  287. function cleanupCharsets(tokens) {
  288. var hasCharset = false;
  289. for (var i = 0, l = tokens.length; i < l; i++) {
  290. var token = tokens[i];
  291. if (token[0] != 'at-rule')
  292. continue;
  293. if (!CHARSET_REGEXP.test(token[1][0]))
  294. continue;
  295. if (hasCharset || token[1][0].indexOf(CHARSET_TOKEN) == -1) {
  296. tokens.splice(i, 1);
  297. i--;
  298. l--;
  299. } else {
  300. hasCharset = true;
  301. tokens.splice(i, 1);
  302. tokens.unshift(['at-rule', [token[1][0].replace(CHARSET_REGEXP, CHARSET_TOKEN)]]);
  303. }
  304. }
  305. }
  306. function buildUnitRegexp(options) {
  307. var units = ['px', 'em', 'ex', 'cm', 'mm', 'in', 'pt', 'pc', '%'];
  308. var otherUnits = ['ch', 'rem', 'vh', 'vm', 'vmax', 'vmin', 'vw'];
  309. otherUnits.forEach(function (unit) {
  310. if (options.compatibility.units[unit])
  311. units.push(unit);
  312. });
  313. return new RegExp('(^|\\s|\\(|,)0(?:' + units.join('|') + ')(\\W|$)', 'g');
  314. }
  315. function buildPrecision(options) {
  316. var precision = {};
  317. precision.value = options.roundingPrecision === undefined ?
  318. DEFAULT_ROUNDING_PRECISION :
  319. options.roundingPrecision;
  320. precision.multiplier = Math.pow(10, precision.value);
  321. precision.regexp = new RegExp('(\\d*\\.\\d{' + (precision.value + 1) + ',})px', 'g');
  322. return precision;
  323. }
  324. function optimize(tokens, options, context) {
  325. var ie7Hack = options.compatibility.selectors.ie7Hack;
  326. var adjacentSpace = options.compatibility.selectors.adjacentSpace;
  327. var spaceAfterClosingBrace = options.compatibility.properties.spaceAfterClosingBrace;
  328. var mayHaveCharset = false;
  329. var afterContent = false;
  330. options.unitsRegexp = buildUnitRegexp(options);
  331. options.precision = buildPrecision(options);
  332. for (var i = 0, l = tokens.length; i < l; i++) {
  333. var token = tokens[i];
  334. switch (token[0]) {
  335. case 'selector':
  336. token[1] = cleanUpSelectors(token[1], !ie7Hack, adjacentSpace);
  337. optimizeBody(token[2], options);
  338. afterContent = true;
  339. break;
  340. case 'block':
  341. cleanUpBlock(token[1], spaceAfterClosingBrace);
  342. optimize(token[2], options, context);
  343. afterContent = true;
  344. break;
  345. case 'flat-block':
  346. cleanUpBlock(token[1], spaceAfterClosingBrace);
  347. optimizeBody(token[2], options);
  348. afterContent = true;
  349. break;
  350. case 'at-rule':
  351. cleanUpAtRule(token[1]);
  352. mayHaveCharset = true;
  353. }
  354. if (token[0] == 'at-rule' && IMPORT_REGEXP.test(token[1]) && afterContent) {
  355. context.warnings.push('Ignoring @import rule "' + token[1] + '" as it appears after rules thus browsers will ignore them.');
  356. token[1] = '';
  357. }
  358. if (token[1].length === 0 || (token[2] && token[2].length === 0)) {
  359. tokens.splice(i, 1);
  360. i--;
  361. l--;
  362. }
  363. }
  364. if (mayHaveCharset)
  365. cleanupCharsets(tokens);
  366. }
  367. module.exports = optimize;