You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

160 lines
4.0 KiB

4 years ago
  1. 'use strict';
  2. exports.type = 'full';
  3. exports.active = true;
  4. exports.description = 'minifies styles and removes unused styles based on usage data';
  5. exports.params = {
  6. // ... CSSO options goes here
  7. // additional
  8. usage: {
  9. force: false, // force to use usage data even if it unsafe (document contains <script> or on* attributes)
  10. ids: true,
  11. classes: true,
  12. tags: true
  13. }
  14. };
  15. var csso = require('csso');
  16. /**
  17. * Minifies styles (<style> element + style attribute) using CSSO
  18. *
  19. * @author strarsis <strarsis@gmail.com>
  20. */
  21. exports.fn = function(ast, options) {
  22. options = options || {};
  23. var minifyOptionsForStylesheet = cloneObject(options);
  24. var minifyOptionsForAttribute = cloneObject(options);
  25. var elems = findStyleElems(ast);
  26. minifyOptionsForStylesheet.usage = collectUsageData(ast, options);
  27. minifyOptionsForAttribute.usage = null;
  28. elems.forEach(function(elem) {
  29. if (elem.isElem('style')) {
  30. // <style> element
  31. var styleCss = elem.content[0].text || elem.content[0].cdata || [];
  32. var DATA = styleCss.indexOf('>') >= 0 || styleCss.indexOf('<') >= 0 ? 'cdata' : 'text';
  33. elem.content[0][DATA] = csso.minify(styleCss, minifyOptionsForStylesheet).css;
  34. } else {
  35. // style attribute
  36. var elemStyle = elem.attr('style').value;
  37. elem.attr('style').value = csso.minifyBlock(elemStyle, minifyOptionsForAttribute).css;
  38. }
  39. });
  40. return ast;
  41. };
  42. function cloneObject(obj) {
  43. var result = {};
  44. for (var key in obj) {
  45. result[key] = obj[key];
  46. }
  47. return result;
  48. }
  49. function findStyleElems(ast) {
  50. function walk(items, styles) {
  51. for (var i = 0; i < items.content.length; i++) {
  52. var item = items.content[i];
  53. // go deeper
  54. if (item.content) {
  55. walk(item, styles);
  56. }
  57. if (item.isElem('style') && !item.isEmpty()) {
  58. styles.push(item);
  59. } else if (item.isElem() && item.hasAttr('style')) {
  60. styles.push(item);
  61. }
  62. }
  63. return styles;
  64. }
  65. return walk(ast, []);
  66. }
  67. function shouldFilter(options, name) {
  68. if ('usage' in options === false) {
  69. return true;
  70. }
  71. if (options.usage && name in options.usage === false) {
  72. return true;
  73. }
  74. return Boolean(options.usage && options.usage[name]);
  75. }
  76. function collectUsageData(ast, options) {
  77. function walk(items, usageData) {
  78. for (var i = 0; i < items.content.length; i++) {
  79. var item = items.content[i];
  80. // go deeper
  81. if (item.content) {
  82. walk(item, usageData);
  83. }
  84. if (item.isElem('script')) {
  85. safe = false;
  86. }
  87. if (item.isElem()) {
  88. usageData.tags[item.elem] = true;
  89. if (item.hasAttr('id')) {
  90. usageData.ids[item.attr('id').value] = true;
  91. }
  92. if (item.hasAttr('class')) {
  93. item.attr('class').value.replace(/^\s+|\s+$/g, '').split(/\s+/).forEach(function(className) {
  94. usageData.classes[className] = true;
  95. });
  96. }
  97. if (item.attrs && Object.keys(item.attrs).some(function(name) { return /^on/i.test(name); })) {
  98. safe = false;
  99. }
  100. }
  101. }
  102. return usageData;
  103. }
  104. var safe = true;
  105. var usageData = {};
  106. var hasData = false;
  107. var rawData = walk(ast, {
  108. ids: Object.create(null),
  109. classes: Object.create(null),
  110. tags: Object.create(null)
  111. });
  112. if (!safe && options.usage && options.usage.force) {
  113. safe = true;
  114. }
  115. for (var key in rawData) {
  116. if (shouldFilter(options, key)) {
  117. usageData[key] = Object.keys(rawData[key]);
  118. hasData = true;
  119. }
  120. }
  121. return safe && hasData ? usageData : null;
  122. }