Initial commit

Author: deflock

.babelrc.js

@@ -0,0 +1,13 @@
+"use strict";
+
+module.exports = {
+    presets: [
+        ["@babel/preset-env", {
+            "targets": {
+                "node": "8",
+            },
+            "modules": "commonjs",
+        }],
+    ],
+    plugins: [],
+};

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+/lib/
+/yarn.lock

.npmignore

@@ -0,0 +1,5 @@
+node_modules/
+/test/
+/.babelrc.js
+/.gitignore
+/yarn.lock

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-present Alex Tsvetkov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@deflock/postcss-optimize-inline-svg",
+  "version": "0.1.0",
+  "license": "MIT",
+  "homepage": "https://github.com/deflock/postcss-optimize-inline-svg",
+  "repository": "deflock/postcss-optimize-inline-svg",
+  "main": "lib/index.js",
+  "module": "src/index.mjs",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=8.0"
+  },
+  "scripts": {
+    "clean": "rimraf lib",
+    "compile": "babel src --out-dir lib",
+    "recompile": "yarn clean && yarn compile",
+    "pretest": "yarn recompile",
+    "test": "jest",
+    "prepublishOnly": "yarn test"
+  },
+  "dependencies": {
+    "is-svg": "^3.0.0",
+    "postcss": "^7.0.11",
+    "postcss-value-parser": "^3.3.1",
+    "svgo": "^1.1.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "cross-env": "^5.2.0",
+    "jest": "^23.6.0",
+    "rimraf": "^2.6.3"
+  }
+}

src/index.mjs

@@ -0,0 +1,142 @@
+import postcss from 'postcss';
+import valueParser from 'postcss-value-parser';
+import isSvg from 'is-svg';
+import SVGO from 'svgo';
+
+const PLUGIN_NAME = 'deflock-optimize-inline-svg';
+
+const DATAURI_DEFAULT_PATTERNS = [/data:image\/svg\+xml(;(charset=)?utf-8)?,/];
+
+/**
+ *
+ */
+export default postcss.plugin(PLUGIN_NAME, (opts = {}) => {
+    const options = Object.assign({
+        patterns: DATAURI_DEFAULT_PATTERNS,
+    }, opts);
+
+    const svgo = new SVGO(options.svgo);
+
+    return (css, result) => {
+        return new Promise((resolve, reject) => {
+            const promises = [];
+
+            const patterns = Array.isArray(options.patterns)
+                ? options.patterns
+                : [options.patterns];
+
+            css.walkDecls(decl => {
+                for (const pattern of patterns) {
+                    if (pattern.test(decl.value)) {
+                        promises.push(transformPromise(decl, 'value', options, result, svgo));
+                        break;
+                    }
+                }
+            });
+
+            return Promise.all(promises).then(resolve, reject);
+        });
+    };
+});
+
+/**
+ * @param {Object} decl
+ * @param {string} property
+ * @param {Object} options
+ * @param {Object} result
+ * @param {Object} svgo
+ */
+function transformPromise(decl, property, options, result, svgo) {
+    const promises = [];
+
+    const parser = valueParser(decl[property]).walk(node => {
+        if (node.type !== 'function' || node.value !== 'url' || !node.nodes.length) {
+            return;
+        }
+        let {value} = node.nodes[0];
+        let decodedUri, isUriEncoded;
+
+        try {
+            decodedUri = decode(value);
+            isUriEncoded = decodedUri !== value;
+        }
+        catch (e) {
+            // Swallow exception if we cannot decode the value
+            isUriEncoded = false;
+        }
+
+        if (isUriEncoded) {
+            value = decodedUri;
+        }
+
+        let svg = value;
+
+        const patterns = Array.isArray(options.patterns)
+            ? options.patterns
+            : [options.patterns];
+
+        for (const pattern of patterns) {
+            if (pattern.test(svg)) {
+                svg = svg.replace(pattern, '')
+            }
+        }
+
+        if (!isSvg(svg)) {
+            return;
+        }
+
+        promises.push(new Promise(async (resolve, reject) => {
+            const res = await svgo.optimize(svg);
+
+            if (res.error) {
+                return reject(`${PLUGIN_NAME}: ${res.error}`);
+            }
+
+            let data = isUriEncoded ? encode(res.data) : res.data;
+
+            // Should always encode # otherwise we yield a broken SVG
+            // in Firefox (works in Chrome however). See this issue:
+            // https://github.com/ben-eb/cssnano/issues/245
+            data = data.replace(/#/g, '%23');
+
+            node.nodes[0] = {
+                ...node.nodes[0],
+                value: 'data:image/svg+xml;charset=utf-8,' + data,
+                quote: isUriEncoded ? '"' : '\'',
+                type: 'string',
+                before: '',
+                after: '',
+            };
+
+            resolve();
+        }));
+
+        // By returning false we prevent traversal of descendent nodes within functions
+        return false;
+    });
+
+    return Promise.all(promises).then(() => (decl[property] = parser.toString()));
+}
+
+/**
+ * @param {string} data
+ * @returns {string}
+ */
+function encode(data) {
+    return data
+        .replace(/"/g, '\'')
+        .replace(/%/g, '%25')
+        .replace(/</g, '%3C')
+        .replace(/>/g, '%3E')
+        .replace(/&/g, '%26')
+        .replace(/#/g, '%23')
+        .replace(/\s+/g, ' ');
+}
+
+/**
+ * @param {string} data
+ * @returns {string}
+ */
+function decode(data) {
+    return decodeURIComponent(data);
+}

test/index.test.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const postcss = require('postcss');
+const plugin = require('..').default;
+
+process.chdir(__dirname);
+
+/**
+ * @param {string} input
+ * @param {string} expected
+ * @param {Object} pluginOptions
+ * @param {Object} postcssOptions
+ * @param {Array} warnings
+ * @returns {Promise}
+ */
+function run(input, expected, pluginOptions = {}, postcssOptions = {}, warnings = []) {
+    return postcss([plugin(pluginOptions)])
+        .process(input, Object.assign({from: 'input.css'}, postcssOptions))
+        .then((result) => {
+            const resultWarnings = result.warnings();
+            resultWarnings.forEach((warning, index) => {
+                expect(warnings[index]).toEqual(warning.text);
+            });
+            expect(resultWarnings.length).toEqual(warnings.length);
+            expect(result.css).toEqual(expected);
+            return result;
+        });
+}
+
+it('should work', () => {
+    run(
+        'a { background: url(\'data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon id="star_filled_1_" fill-rule="evenodd" clip-rule="evenodd" points="10,0 13.1,6.6 20,7.6 15,12.7 16.2,20 10,16.6 3.8,20 5,12.7 0,7.6 6.9,6.6 "/></svg>\') }',
+        'a { background: url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 0l3.1 6.6 6.9 1-5 5.1 1.2 7.3-6.2-3.4L3.8 20 5 12.7 0 7.6l6.9-1z"/></svg>\') }'
+    );
+});