From 6c1aec347c49dbf8739ab9b0f3dc13f2a92b16d0 Mon Sep 17 00:00:00 2001 From: John Kenny Date: Sat, 3 Feb 2024 19:25:51 -0800 Subject: [PATCH 1/4] Check for filter in style as well as attribute. --- lib/style.js | 2 +- plugins/collapseGroups.js | 8 ++++- test/plugins/collapseGroups.18.svg.txt | 45 ++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 test/plugins/collapseGroups.18.svg.txt diff --git a/lib/style.js b/lib/style.js index 5c1570d9e..ae31264e5 100644 --- a/lib/style.js +++ b/lib/style.js @@ -104,7 +104,7 @@ const parseStylesheet = (css, dynamic) => { /** * @type {(css: string) => StylesheetDeclaration[]} */ -const parseStyleDeclarations = (css) => { +export const parseStyleDeclarations = (css) => { /** @type {StylesheetDeclaration[]} */ const declarations = []; const ast = csstree.parse(css, { diff --git a/plugins/collapseGroups.js b/plugins/collapseGroups.js index 8f999755b..e0d0890da 100644 --- a/plugins/collapseGroups.js +++ b/plugins/collapseGroups.js @@ -1,3 +1,4 @@ +import { parseStyleDeclarations } from '../lib/style.js'; import { inheritableAttrs, elemsGroups } from './_collections.js'; /** @@ -68,11 +69,16 @@ export const fn = () => { node.children.length === 1 ) { const firstChild = node.children[0]; + let nodeHasFilter = node.attributes.filter ? true : false; + if (!nodeHasFilter && node.attributes.style) { + const styles = parseStyleDeclarations(node.attributes.style); + nodeHasFilter = styles.some((e) => e.name === 'filter'); + } // TODO untangle this mess if ( firstChild.type === 'element' && firstChild.attributes.id == null && - node.attributes.filter == null && + !nodeHasFilter && (node.attributes.class == null || firstChild.attributes.class == null) && ((node.attributes['clip-path'] == null && diff --git a/test/plugins/collapseGroups.18.svg.txt b/test/plugins/collapseGroups.18.svg.txt new file mode 100644 index 000000000..99c3eb60b --- /dev/null +++ b/test/plugins/collapseGroups.18.svg.txt @@ -0,0 +1,45 @@ +Don't collapse groups if outer group has filter (as style or attribute). + +=== + + + + + + + + + + + + + + + + + + + + + +@@@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 98d9e2db866b4d3b9dfffb975c86c8bf0628d755 Mon Sep 17 00:00:00 2001 From: John Kenny Date: Mon, 5 Feb 2024 06:43:48 -0800 Subject: [PATCH 2/4] Use computeStyle(). --- lib/style.js | 2 +- plugins/collapseGroups.js | 11 +++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/lib/style.js b/lib/style.js index ae31264e5..5c1570d9e 100644 --- a/lib/style.js +++ b/lib/style.js @@ -104,7 +104,7 @@ const parseStylesheet = (css, dynamic) => { /** * @type {(css: string) => StylesheetDeclaration[]} */ -export const parseStyleDeclarations = (css) => { +const parseStyleDeclarations = (css) => { /** @type {StylesheetDeclaration[]} */ const declarations = []; const ast = csstree.parse(css, { diff --git a/plugins/collapseGroups.js b/plugins/collapseGroups.js index e0d0890da..e8d1ce46d 100644 --- a/plugins/collapseGroups.js +++ b/plugins/collapseGroups.js @@ -1,4 +1,4 @@ -import { parseStyleDeclarations } from '../lib/style.js'; +import { computeStyle, collectStylesheet } from '../lib/style.js'; import { inheritableAttrs, elemsGroups } from './_collections.js'; /** @@ -51,7 +51,9 @@ const hasAnimatedAttr = (node, name) => { * * @type {import('./plugins-types.js').Plugin<'collapseGroups'>} */ -export const fn = () => { +export const fn = (root) => { + const stylesheet = collectStylesheet(root); + return { element: { exit: (node, parentNode) => { @@ -71,8 +73,9 @@ export const fn = () => { const firstChild = node.children[0]; let nodeHasFilter = node.attributes.filter ? true : false; if (!nodeHasFilter && node.attributes.style) { - const styles = parseStyleDeclarations(node.attributes.style); - nodeHasFilter = styles.some((e) => e.name === 'filter'); + if (computeStyle(stylesheet, node)['filter']) { + nodeHasFilter = true; + } } // TODO untangle this mess if ( From 2031eeff7c9c324dbf3008cc64a6eac73950dd4c Mon Sep 17 00:00:00 2001 From: johnkenny54 <45182853+johnkenny54@users.noreply.github.com> Date: Wed, 7 Feb 2024 07:07:13 -0800 Subject: [PATCH 3/4] Update plugins/collapseGroups.js Co-authored-by: Seth Falco --- plugins/collapseGroups.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/collapseGroups.js b/plugins/collapseGroups.js index e8d1ce46d..f275c6b95 100644 --- a/plugins/collapseGroups.js +++ b/plugins/collapseGroups.js @@ -71,7 +71,7 @@ export const fn = (root) => { node.children.length === 1 ) { const firstChild = node.children[0]; - let nodeHasFilter = node.attributes.filter ? true : false; + let nodeHasFilter = !!node.attributes.filter; if (!nodeHasFilter && node.attributes.style) { if (computeStyle(stylesheet, node)['filter']) { nodeHasFilter = true; From c820fc83df7de3daf4dfeaf1db6b1fa4e9e64a97 Mon Sep 17 00:00:00 2001 From: johnkenny54 <45182853+johnkenny54@users.noreply.github.com> Date: Wed, 7 Feb 2024 12:55:23 -0800 Subject: [PATCH 4/4] Update plugins/collapseGroups.js Co-authored-by: Seth Falco --- plugins/collapseGroups.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/plugins/collapseGroups.js b/plugins/collapseGroups.js index f275c6b95..449059d20 100644 --- a/plugins/collapseGroups.js +++ b/plugins/collapseGroups.js @@ -71,12 +71,9 @@ export const fn = (root) => { node.children.length === 1 ) { const firstChild = node.children[0]; - let nodeHasFilter = !!node.attributes.filter; - if (!nodeHasFilter && node.attributes.style) { - if (computeStyle(stylesheet, node)['filter']) { - nodeHasFilter = true; - } - } + const nodeHasFilter = !!( + node.attributes.filter || computeStyle(stylesheet, node).filter + ); // TODO untangle this mess if ( firstChild.type === 'element' &&