Pass svgo options from command line and loader query to svgo in loader

Author: boopathi

example/package.json

@@ -12,6 +12,6 @@
     "babel-loader": "^6.2.2",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "webpack": "^1.10.1"
+    "webpack": "2.1.0-beta.4"
   }
 }

example/webpack.config.js

@@ -10,7 +10,18 @@ module.exports = {
     loaders: [
       {
         test: /\.svg$/,
-        loader: 'babel!' + svgLoader + '?es5=true'
+        loaders: [
+          'babel',
+          {
+            loader: svgLoader, // 'react-svg'
+            query: {
+              es5: false,
+              svgo: {
+                pretty: true
+              }
+            }
+          }
+        ]
       },
       {
         test: /\.js$/,

package.json

@@ -38,7 +38,8 @@
     "babel-plugin-syntax-jsx": "~6.5.0",
     "babel-preset-es2015-loose": "~7.0.0",
     "babel-preset-react": "~6.5.0",
-    "loader-utils": "^0.2.13",
+    "js-yaml": "~3.5.5",
+    "loader-utils": "~0.2.13",
     "svgo": "~0.6.3",
     "yargs": "~3.18.0"
   },

src/cli.js

@@ -3,17 +3,99 @@
 import loader from './loader';
 import fs from 'fs';
 import yargs from 'yargs';
+import yaml from 'js-yaml';
+import path from 'path';
 
-let {argv} = yargs.boolean('es5').boolean('0');
+let {argv} = yargs
+  .usage('Usage: $0 [files] [options]')
+  .option('5', {
+    alias: 'es5',
+    describe: 'Use babel presets es2015 and react',
+    boolean: true,
+    default: false
+  })
+  .option('0', {
+    alias: 'stdout',
+    describe: 'Print output to stdout',
+    boolean: true,
+    default: 'false'
+  })
+  // svgo options
+  .option('svgo', {
+    describe: 'Path to YAML or JS or JSON config file for SVGO',
+    nargs: 1
+  })
+  .array('svgo.plugins')
+  .option('svgo.floatPrecision', {number: true, default: 3})
+  .boolean('svgo.multipass')
+  .boolean('svgo.full')
+  .boolean('svgo.js2svg.pretty')
+  .option('svgo.js2svg.useShortTags', {default: true, boolean: true})
+  .demand(1)
+  .version(require('../package.json').version)
+  .help('h')
+  .alias('h', 'help');
 
 function makeFilename(filename) {
   return filename + '.react.js';
 }
 
+function handlePath(configFile) {
+  switch (path.extname(configFile)) {
+    case '.yaml':
+      return yaml.safeLoad(fs.readFileSync(configFile));
+    case '.json':
+    case '.js':
+      return require(path.join(process.cwd(), configFile));
+    default:
+      throw new Error('Unsupported config file format.');
+  }
+}
+
+let svgoOpts;
+
+switch (typeof argv.svgo) {
+  case 'string':
+    svgoOpts = handlePath(argv.svgo);
+    break;
+  case 'object':
+    svgoOpts = argv.svgo;
+    if (Array.isArray(svgoOpts.plugins)) break;
+
+    // when there is only one element
+    if (typeof svgoOpts.plugins === 'string') {
+      svgoOpts.plugins = [svgoOpts.plugins];
+      break;
+    }
+
+    // when there are many and is an object
+    if (svgoOpts.plugins) {
+      svgoOpts.plugins = Object
+        .keys(svgoOpts.plugins)
+        .map(key => {
+          if (svgoOpts.plugins[key] === true) return key;
+          return {[key]: svgoOpts.plugins[key]};
+        });
+    }
+    break;
+}
+
 argv._.map(file => {
   let source = fs.readFileSync(file);
+
+  let query;
+  try {
+    // serializable check
+    query = '?' + JSON.stringify({
+      es5: argv.es5,
+      svgo: svgoOpts
+    });
+  } catch(e) {
+    console.error('The options passed are not serializable.');
+    process.exit(1);
+  }
   let loaderContext = {
-    query: `?es5=${argv.es5}`,
+    query,
     cacheable() {},
     addDependency() {},
     async() {

src/loader.js

@@ -4,10 +4,11 @@ import loaderUtils from 'loader-utils';
 
 import plugin from './plugin';
 
-const svgo = new Svgo();
-
-function optimize (content) {
-  return new Promise(r => svgo.optimize(content, ({data}) => r(data)));
+function optimize (opts) {
+  const svgo = new Svgo(opts);
+  return function (content) {
+    return new Promise(r => svgo.optimize(content, ({data}) => r(data)));
+  };
 }
 
 function transform (opts) {
@@ -38,7 +39,7 @@ export default function (content) {
   let cb = this.async();
 
   Promise.resolve(String(content))
-    .then(optimize)
+    .then(optimize(query.svgo))
     .then(transform({
       es5: query.es5
     }))