Skip to content

Commit

Permalink
fix(minifyStyles): pass empty arrays for usage
Browse files Browse the repository at this point in the history
  • Loading branch information
SethFalco committed Sep 25, 2023
1 parent 197be56 commit a74d3f3
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 41 deletions.
86 changes: 45 additions & 41 deletions plugins/minifyStyles.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,47 @@

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

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

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

/**
* Minifies styles (<style> element + style attribute) using CSSO
* Minifies styles (<style> element + style attribute) using CSSO.
*
* @author strarsis <strarsis@gmail.com>
*
* @type {import('./plugins-types').Plugin<'minifyStyles'>}
*/
exports.fn = (_root, { usage, ...params }) => {
/** @type {Map<XastElement, XastParent>} */
const styleElements = new Map();

/** @type {Array<XastElement>} */
const elementsWithStyleAttributes = [];

/** @type {Set<string>} */
const tagsUsage = new Set();

/** @type {Set<string>} */
const idsUsage = new Set();

/** @type {Set<string>} */
const classesUsage = new Set();

let enableTagsUsage = true;
let enableIdsUsage = true;
let enableClassesUsage = true;
// force to use usage data even if it unsafe (document contains <script> or on* attributes)

/**
* Force to use usage data even if it unsafe. For example, the document
* contains <script> or in attributes..
*/
let forceUsageDeoptimized = false;

if (typeof usage === 'boolean') {
enableTagsUsage = usage;
enableIdsUsage = usage;
Expand All @@ -33,40 +53,20 @@ exports.fn = (_root, { usage, ...params }) => {
enableClassesUsage = usage.classes == null ? true : usage.classes;
forceUsageDeoptimized = usage.force == null ? false : usage.force;
}
/**
* @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) => {
enter: (node, parentNode) => {
// detect deoptimisations
if (node.name === 'script') {
if (
node.name === 'script' ||
Object.keys(node.attributes).some((name) => name.startsWith('on'))
) {
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) {
Expand All @@ -79,7 +79,7 @@ exports.fn = (_root, { usage, ...params }) => {
}
// collect style elements or elements with style attribute
if (node.name === 'style' && node.children.length !== 0) {
styleElements.push(node);
styleElements.set(node, parentNode);
} else if (node.attributes.style != null) {
elementsWithStyleAttributes.push(node);
}
Expand All @@ -88,23 +88,21 @@ exports.fn = (_root, { usage, ...params }) => {

root: {
exit: () => {
/**
* @type {csso.Usage}
*/
/** @type {csso.Usage} */
const cssoUsage = {};
if (deoptimized === false || forceUsageDeoptimized === true) {
if (enableTagsUsage && tagsUsage.size !== 0) {
if (!deoptimized || forceUsageDeoptimized) {
if (enableTagsUsage) {
cssoUsage.tags = Array.from(tagsUsage);
}
if (enableIdsUsage && idsUsage.size !== 0) {
if (enableIdsUsage) {
cssoUsage.ids = Array.from(idsUsage);
}
if (enableClassesUsage && classesUsage.size !== 0) {
if (enableClassesUsage) {
cssoUsage.classes = Array.from(classesUsage);
}
}
// minify style elements
for (const node of styleElements) {
for (const [node, parentNode] of styleElements.entries()) {
if (
node.children[0].type === 'text' ||
node.children[0].type === 'cdata'
Expand All @@ -114,6 +112,12 @@ exports.fn = (_root, { usage, ...params }) => {
...params,
usage: cssoUsage,
}).css;

if (minified.length === 0) {
detachNodeFromParent(node, parentNode);
continue;
}

// preserve cdata if necessary
// TODO split cdata -> text optimisation into separate plugin
if (cssText.indexOf('>') >= 0 || cssText.indexOf('<') >= 0) {
Expand Down
19 changes: 19 additions & 0 deletions test/plugins/minifyStyles.11.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a74d3f3

Please sign in to comment.