Add inlineUse plugin (#65)

svg-utils · Oct 18, 2024 · b590a57 · b590a57
1 parent 6e09def
commit b590a57
Show file tree

Hide file tree

Showing 14 changed files with 475 additions and 73 deletions.
diff --git a/lib/builtin.js b/lib/builtin.js
@@ -20,6 +20,7 @@ import * as convertShapeToPath from '../plugins/convertShapeToPath.js';
 import * as convertStyleToAttrs from '../plugins/convertStyleToAttrs.js';
 import * as createGroups from '../plugins/createGroups.js';
 import * as inlineStyles from '../plugins/inlineStyles.js';
+import * as inlineUse from '../plugins/inlineUse.js';
 import * as mergePaths from '../plugins/mergePaths.js';
 import * as minifyColors from '../plugins/minifyColors.js';
 import * as minifyPathData from '../plugins/minifyPathData.js';
@@ -86,6 +87,7 @@ export const builtin = Object.freeze([
   convertStyleToAttrs,
   createGroups,
   inlineStyles,
+  inlineUse,
   mergePaths,
   minifyColors,
   minifyPathData,

diff --git a/plugins/_collections.js b/plugins/_collections.js
@@ -2361,6 +2361,74 @@ export const colorsProps = new Set([
   'stroke',
 ]);
 
+/**
+ * See https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes.
+ * The list below also includes the shorthand property "font" and the "transform-origin" property.
+ */
+export const presentationProperties = new Set([
+  'alignment-baseline',
+  'baseline-shift',
+  'clip-path',
+  'clip-rule',
+  'color',
+  'color-interpolation',
+  'color-interpolation-filters',
+  'color-rendering',
+  'cursor',
+  'direction',
+  'display',
+  'dominant-baseline',
+  'fill',
+  'fill-opacity',
+  'fill-rule',
+  'filter',
+  'flood-color',
+  'flood-opacity',
+  'font',
+  'font-family',
+  'font-size',
+  'font-size-adjust',
+  'font-stretch',
+  'font-style',
+  'font-variant',
+  'font-weight',
+  'glyph-orientation-horizontal',
+  'glyph-orientation-vertical',
+  'image-rendering',
+  'letter-spacing',
+  'lighting-color',
+  'marker-end',
+  'marker-mid',
+  'marker-start',
+  'mask',
+  'opacity',
+  'overflow',
+  'paint-order',
+  'pointer-events',
+  'shape-rendering',
+  'stop-color',
+  'stop-opacity',
+  'stroke',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
+  'text-anchor',
+  'text-decoration',
+  'text-overflow',
+  'text-rendering',
+  'transform',
+  'unicode-bidi',
+  'vector-effect',
+  'visibility',
+  'white-space',
+  'word-spacing',
+  'writing-mode',
+]);
+
 // See https://www.w3.org/TR/SVG2/geometry.html#geometry-properties
 /** @type {Object<string,Set<string>>} */
 export const geometryProperties = {

diff --git a/plugins/_styles.js b/plugins/_styles.js
@@ -1,6 +1,6 @@
 import { getStyleDeclarations } from '../lib/css-tools.js';
 import { svgAttTransformToCSS } from '../lib/svg-to-css.js';
-import { inheritableAttrs } from './_collections.js';
+import { inheritableAttrs, presentationProperties } from './_collections.js';
 
 export const TRANSFORM_PROP_NAMES = ['transform', 'transform-origin'];
 
@@ -9,28 +9,51 @@ export const TRANSFORM_PROP_NAMES = ['transform', 'transform-origin'];
  * @returns {import('../lib/types.js').CSSDeclarationMap}
  */
 export function getInheritableProperties(element) {
+  return _getProperties(
+    element,
+    (name) => inheritableAttrs.has(name) || TRANSFORM_PROP_NAMES.includes(name),
+  );
+}
+
+/**
+ * @param {import('../lib/types.js').XastElement} element
+ * @returns {import('../lib/types.js').CSSDeclarationMap}
+ */
+export function getPresentationProperties(element) {
+  return _getProperties(element, (name) => presentationProperties.has(name));
+}
+
+/**
+ * @param {import('../lib/types.js').XastElement} element
+ * @param {function(string):boolean} fnInclude
+ * @returns {import('../lib/types.js').CSSDeclarationMap}
+ */
+function _getProperties(element, fnInclude) {
   /** @type {import('../lib/types.js').CSSDeclarationMap} */
   const props = new Map();
 
   // Gather all inheritable attributes.
   for (const [name, value] of Object.entries(element.attributes)) {
-    if (inheritableAttrs.has(name)) {
-      props.set(name, { value: value, important: false });
-    } else if (name === 'transform') {
+    if (!fnInclude(name)) {
+      continue;
+    }
+    if (name === 'transform') {
       const cssValue = svgAttTransformToCSS(value);
       if (cssValue) {
         props.set(name, cssValue);
       }
     } else if (TRANSFORM_PROP_NAMES.includes(name)) {
       props.set(name, { value: value, important: false });
+    } else {
+      props.set(name, { value: value, important: false });
     }
   }
 
   // Overwrite with inheritable properties.
   const styleProps = getStyleDeclarations(element);
   if (styleProps) {
     styleProps.forEach((v, k) => {
-      if (inheritableAttrs.has(k) || TRANSFORM_PROP_NAMES.includes(k)) {
+      if (fnInclude(k)) {
         if (v === null) {
           props.delete(k);
         } else {

diff --git a/plugins/cleanupStyleAttributes.js b/plugins/cleanupStyleAttributes.js
@@ -4,6 +4,7 @@ import { visitSkip } from '../lib/xast.js';
 import {
   elemsGroups,
   geometryProperties,
+  presentationProperties,
   uselessShapeProperties,
 } from './_collections.js';
 
@@ -12,74 +13,6 @@ export const description = 'removes invalid properties from style attributes';
 
 const CLASS_SPLITTER = /\s/;
 
-/**
- * See https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes.
- * The list below also includes the shorthand property "font".
- */
-const presentationProperties = new Set([
-  'alignment-baseline',
-  'baseline-shift',
-  'clip-path',
-  'clip-rule',
-  'color',
-  'color-interpolation',
-  'color-interpolation-filters',
-  'color-rendering',
-  'cursor',
-  'direction',
-  'display',
-  'dominant-baseline',
-  'fill',
-  'fill-opacity',
-  'fill-rule',
-  'filter',
-  'flood-color',
-  'flood-opacity',
-  'font',
-  'font-family',
-  'font-size',
-  'font-size-adjust',
-  'font-stretch',
-  'font-style',
-  'font-variant',
-  'font-weight',
-  'glyph-orientation-horizontal',
-  'glyph-orientation-vertical',
-  'image-rendering',
-  'letter-spacing',
-  'lighting-color',
-  'marker-end',
-  'marker-mid',
-  'marker-start',
-  'mask',
-  'opacity',
-  'overflow',
-  'paint-order',
-  'pointer-events',
-  'shape-rendering',
-  'stop-color',
-  'stop-opacity',
-  'stroke',
-  'stroke-dasharray',
-  'stroke-dashoffset',
-  'stroke-linecap',
-  'stroke-linejoin',
-  'stroke-miterlimit',
-  'stroke-opacity',
-  'stroke-width',
-  'text-anchor',
-  'text-decoration',
-  'text-overflow',
-  'text-rendering',
-  'transform',
-  'unicode-bidi',
-  'vector-effect',
-  'visibility',
-  'white-space',
-  'word-spacing',
-  'writing-mode',
-]);
-
 /**
  * @type {import('./plugins-types.js').Plugin<'cleanupStyleAttributes'>}
  */