diff --git a/plugins/addClassesToSVGElement.js b/plugins/addClassesToSVGElement.js index 7f38dd0d..140223be 100644 --- a/plugins/addClassesToSVGElement.js +++ b/plugins/addClassesToSVGElement.js @@ -69,8 +69,17 @@ exports.fn = (root, params) => { element: { enter: (node, parentNode) => { if (node.name === 'svg' && parentNode.type === 'root') { - // @ts-ignore class attribute will be just a string eventually - node.class.add(...classNames); + const classList = new Set( + node.attributes.class == null + ? null + : node.attributes.class.split(' ') + ); + for (const className of classNames) { + if (className != null) { + classList.add(className); + } + } + node.attributes.class = Array.from(classList).join(' '); } }, }, diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js index 1d9d3de3..7e2c755d 100644 --- a/plugins/inlineStyles.js +++ b/plugins/inlineStyles.js @@ -207,13 +207,19 @@ exports.fn = function (root, opts) { for (selectedEl of selector.selectedEls) { // class - var firstSubSelector = selector.item.data.children.first(); + const classList = new Set( + selectedEl.attributes.class == null + ? null + : selectedEl.attributes.class.split(' ') + ); + const firstSubSelector = selector.item.data.children.first(); if (firstSubSelector.type === 'ClassSelector') { - selectedEl.class.remove(firstSubSelector.name); + classList.delete(firstSubSelector.name); } - // clean up now empty class attributes - if (typeof selectedEl.class.item(0) === 'undefined') { + if (classList.size === 0) { delete selectedEl.attributes.class; + } else { + selectedEl.attributes.class = Array.from(classList).join(' '); } // ID diff --git a/plugins/reusePaths.js b/plugins/reusePaths.js index 0d9c1fa7..43b7f069 100644 --- a/plugins/reusePaths.js +++ b/plugins/reusePaths.js @@ -62,16 +62,7 @@ exports.fn = function (root) { ); root.children[0].spliceContent(0, 0, defsTag); for (let def of defs) { - // Remove class and style before copying to avoid circular refs in - // JSON.stringify. This is fine because we don't actually want class or - // style information to be copied. - const style = def.style; - const defClass = def.class; - delete def.style; - delete def.class; const defClone = def.clone(); - def.style = style; - def.class = defClass; delete defClone.attributes.transform; defsTag.spliceContent(0, 0, defClone); // Convert the original def to a use so the first usage isn't duplicated. diff --git a/test/plugins/addClassesToSVGElement.03.svg b/test/plugins/addClassesToSVGElement.03.svg new file mode 100644 index 00000000..a9ba2cea --- /dev/null +++ b/test/plugins/addClassesToSVGElement.03.svg @@ -0,0 +1,17 @@ +Should avoid adding existing classes + +=== + + + test + + +@@@ + + + test + + +@@@ + +{"classNames":["mySvg","size-big"]}