Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor minifyStyles plugin #1552

Merged
merged 1 commit into from
Sep 5, 2021
Merged

Refactor minifyStyles plugin #1552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 132 additions & 137 deletions plugins/minifyStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,153 +1,148 @@
'use strict';

/**
* @typedef {import('../lib/types').XastElement} XastElement
*/

const csso = require('csso');
const { traverse } = require('../lib/xast.js');

exports.type = 'visitor';
exports.name = 'minifyStyles';

exports.type = 'full';

exports.active = true;

exports.description =
'minifies styles and removes unused styles based on usage data';

exports.params = {
// ... CSSO options goes here

// additional
usage: {
force: false, // force to use usage data even if it unsafe (document contains <script> or on* attributes)
ids: true,
classes: true,
tags: true,
},
};

/**
* Minifies styles (<style> element + style attribute) using CSSO
*
* @author strarsis <[email protected]>
*
* @type {import('../lib/types').Plugin<csso.MinifyOptions & Omit<csso.CompressOptions, 'usage'> & {
* usage?: boolean | {
* force?: boolean,
* ids?: boolean,
* classes?: boolean,
* tags?: boolean
* }
* }>}
*/
exports.fn = function (ast, options) {
options = options || {};

var minifyOptionsForStylesheet = cloneObject(options);
var minifyOptionsForAttribute = cloneObject(options);
var elems = findStyleElems(ast);

minifyOptionsForStylesheet.usage = collectUsageData(ast, options);
minifyOptionsForAttribute.usage = null;

elems.forEach(function (elem) {
if (elem.isElem('style')) {
if (
elem.children[0].type === 'text' ||
elem.children[0].type === 'cdata'
) {
const styleCss = elem.children[0].value;
const minified = csso.minify(styleCss, minifyOptionsForStylesheet).css;
// preserve cdata if necessary
// TODO split cdata -> text optimisation into separate plugin
if (styleCss.indexOf('>') >= 0 || styleCss.indexOf('<') >= 0) {
elem.children[0].type = 'cdata';
elem.children[0].value = minified;
} else {
elem.children[0].type = 'text';
elem.children[0].value = minified;
}
}
} else {
// style attribute
var elemStyle = elem.attributes.style;

elem.attributes.style = csso.minifyBlock(
elemStyle,
minifyOptionsForAttribute
).css;
}
});

return ast;
};

function cloneObject(obj) {
return { ...obj };
}

function findStyleElems(ast) {
const nodesWithStyles = [];
traverse(ast, (node) => {
if (node.type === 'element') {
if (node.name === 'style' && node.children.length !== 0) {
nodesWithStyles.push(node);
} else if (node.attributes.style != null) {
nodesWithStyles.push(node);
}
}
});
return nodesWithStyles;
}

function shouldFilter(options, name) {
if ('usage' in options === false) {
return true;
}

if (options.usage && name in options.usage === false) {
return true;
exports.fn = (_root, { usage, ...params }) => {
let enableTagsUsage = true;
let enableIdsUsage = true;
let enableClassesUsage = true;
// force to use usage data even if it unsafe (document contains <script> or on* attributes)
let forceUsageDeoptimized = false;
if (typeof usage === 'boolean') {
enableTagsUsage = usage;
enableIdsUsage = usage;
enableClassesUsage = usage;
} else if (usage) {
enableTagsUsage = usage.tags == null ? true : usage.tags;
enableIdsUsage = usage.ids == null ? true : usage.ids;
enableClassesUsage = usage.classes == null ? true : usage.classes;
forceUsageDeoptimized = usage.force == null ? false : usage.force;
}

return Boolean(options.usage && options.usage[name]);
}

function collectUsageData(ast, options) {
let safe = true;
const usageData = {};
let hasData = false;
const rawData = {
ids: Object.create(null),
classes: Object.create(null),
tags: Object.create(null),
/**
* @type {Array<XastElement>}
*/
const styleElements = [];
/**
* @type {Array<XastElement>}
*/
const elementsWithStyleAttributes = [];
let deoptimized = false;
/**
* @type {Set<string>}
*/
const tagsUsage = new Set();
/**
* @type {Set<string>}
*/
const idsUsage = new Set();
/**
* @type {Set<string>}
*/
const classesUsage = new Set();

return {
element: {
enter: (node) => {
// detect deoptimisations
if (node.name === 'script') {
deoptimized = true;
}
for (const name of Object.keys(node.attributes)) {
if (name.startsWith('on')) {
deoptimized = true;
}
}
// collect tags, ids and classes usage
tagsUsage.add(node.name);
if (node.attributes.id != null) {
idsUsage.add(node.attributes.id);
}
if (node.attributes.class != null) {
for (const className of node.attributes.class.split(/\s+/)) {
classesUsage.add(className);
}
}
// collect style elements or elements with style attribute
if (node.name === 'style' && node.children.length !== 0) {
styleElements.push(node);
} else if (node.attributes.style != null) {
elementsWithStyleAttributes.push(node);
}
},
},

root: {
exit: () => {
/**
* @type {csso.Usage}
*/
const cssoUsage = {};
if (deoptimized === false || forceUsageDeoptimized === true) {
if (enableTagsUsage && tagsUsage.size !== 0) {
cssoUsage.tags = Array.from(tagsUsage);
}
if (enableIdsUsage && idsUsage.size !== 0) {
cssoUsage.ids = Array.from(idsUsage);
}
if (enableClassesUsage && classesUsage.size !== 0) {
cssoUsage.classes = Array.from(classesUsage);
}
}
// minify style elements
for (const node of styleElements) {
if (
node.children[0].type === 'text' ||
node.children[0].type === 'cdata'
) {
const cssText = node.children[0].value;
const minified = csso.minify(cssText, {
...params,
usage: cssoUsage,
}).css;
// preserve cdata if necessary
// TODO split cdata -> text optimisation into separate plugin
if (cssText.indexOf('>') >= 0 || cssText.indexOf('<') >= 0) {
node.children[0].type = 'cdata';
node.children[0].value = minified;
} else {
node.children[0].type = 'text';
node.children[0].value = minified;
}
}
}
// minify style attributes
for (const node of elementsWithStyleAttributes) {
// style attribute
const elemStyle = node.attributes.style;
node.attributes.style = csso.minifyBlock(elemStyle, {
...params,
}).css;
}
},
},
};

traverse(ast, (node) => {
if (node.type === 'element') {
if (node.name === 'script') {
safe = false;
}

rawData.tags[node.name] = true;

if (node.attributes.id != null) {
rawData.ids[node.attributes.id] = true;
}

if (node.attributes.class != null) {
node.attributes.class
.replace(/^\s+|\s+$/g, '')
.split(/\s+/)
.forEach((className) => {
rawData.classes[className] = true;
});
}

if (Object.keys(node.attributes).some((name) => /^on/i.test(name))) {
safe = false;
}
}
});

if (!safe && options.usage && options.usage.force) {
safe = true;
}

for (const [key, data] of Object.entries(rawData)) {
if (shouldFilter(options, key)) {
usageData[key] = Object.keys(data);
hasData = true;
}
}

return safe && hasData ? usageData : null;
}
};
1 change: 0 additions & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
"plugins/reusePaths.js",
"plugins/sortAttrs.js",
"plugins/removeEmptyContainers.js",
"plugins/minifyStyles.js",
"plugins/inlineStyles.js",
"plugins/preset-default.js"
]
Expand Down