[6a3a178] | 1 | 'use strict';
|
---|
| 2 |
|
---|
| 3 | /**
|
---|
| 4 | * @typedef {import('../lib/types').XastElement} XastElement
|
---|
| 5 | */
|
---|
| 6 |
|
---|
| 7 | const { visitSkip, detachNodeFromParent } = require('../lib/xast.js');
|
---|
| 8 | const JSAPI = require('../lib/svgo/jsAPI.js');
|
---|
| 9 |
|
---|
| 10 | exports.name = 'mergeStyles';
|
---|
| 11 | exports.type = 'visitor';
|
---|
| 12 | exports.active = true;
|
---|
| 13 | exports.description = 'merge multiple style elements into one';
|
---|
| 14 |
|
---|
| 15 | /**
|
---|
| 16 | * Merge multiple style elements into one.
|
---|
| 17 | *
|
---|
| 18 | * @author strarsis <strarsis@gmail.com>
|
---|
| 19 | *
|
---|
| 20 | * @type {import('../lib/types').Plugin<void>}
|
---|
| 21 | */
|
---|
| 22 | exports.fn = () => {
|
---|
| 23 | /**
|
---|
| 24 | * @type {null | XastElement}
|
---|
| 25 | */
|
---|
| 26 | let firstStyleElement = null;
|
---|
| 27 | let collectedStyles = '';
|
---|
| 28 | let styleContentType = 'text';
|
---|
| 29 |
|
---|
| 30 | return {
|
---|
| 31 | element: {
|
---|
| 32 | enter: (node, parentNode) => {
|
---|
| 33 | // skip <foreignObject> content
|
---|
| 34 | if (node.name === 'foreignObject') {
|
---|
| 35 | return visitSkip;
|
---|
| 36 | }
|
---|
| 37 |
|
---|
| 38 | // collect style elements
|
---|
| 39 | if (node.name !== 'style') {
|
---|
| 40 | return;
|
---|
| 41 | }
|
---|
| 42 |
|
---|
| 43 | // skip <style> with invalid type attribute
|
---|
| 44 | if (
|
---|
| 45 | node.attributes.type != null &&
|
---|
| 46 | node.attributes.type !== '' &&
|
---|
| 47 | node.attributes.type !== 'text/css'
|
---|
| 48 | ) {
|
---|
| 49 | return;
|
---|
| 50 | }
|
---|
| 51 |
|
---|
| 52 | // extract style element content
|
---|
| 53 | let css = '';
|
---|
| 54 | for (const child of node.children) {
|
---|
| 55 | if (child.type === 'text') {
|
---|
| 56 | css += child.value;
|
---|
| 57 | }
|
---|
| 58 | if (child.type === 'cdata') {
|
---|
| 59 | styleContentType = 'cdata';
|
---|
| 60 | css += child.value;
|
---|
| 61 | }
|
---|
| 62 | }
|
---|
| 63 |
|
---|
| 64 | // remove empty style elements
|
---|
| 65 | if (css.trim().length === 0) {
|
---|
| 66 | detachNodeFromParent(node, parentNode);
|
---|
| 67 | return;
|
---|
| 68 | }
|
---|
| 69 |
|
---|
| 70 | // collect css and wrap with media query if present in attribute
|
---|
| 71 | if (node.attributes.media == null) {
|
---|
| 72 | collectedStyles += css;
|
---|
| 73 | } else {
|
---|
| 74 | collectedStyles += `@media ${node.attributes.media}{${css}}`;
|
---|
| 75 | delete node.attributes.media;
|
---|
| 76 | }
|
---|
| 77 |
|
---|
| 78 | // combine collected styles in the first style element
|
---|
| 79 | if (firstStyleElement == null) {
|
---|
| 80 | firstStyleElement = node;
|
---|
| 81 | } else {
|
---|
| 82 | detachNodeFromParent(node, parentNode);
|
---|
| 83 | firstStyleElement.children = [
|
---|
| 84 | new JSAPI(
|
---|
| 85 | { type: styleContentType, value: collectedStyles },
|
---|
| 86 | firstStyleElement
|
---|
| 87 | ),
|
---|
| 88 | ];
|
---|
| 89 | }
|
---|
| 90 | },
|
---|
| 91 | },
|
---|
| 92 | };
|
---|
| 93 | };
|
---|