From 87b7bb0470acd5975760bc35efe4f5ffaa33fca1 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 15:35:50 +0200
Subject: [PATCH 001/162] Add plugin file.

---
 plugins/inlineStyles.js | 244 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 244 insertions(+)
 create mode 100644 plugins/inlineStyles.js

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
new file mode 100644
index 000000000..e39462267
--- /dev/null
+++ b/plugins/inlineStyles.js
@@ -0,0 +1,244 @@
+'use strict';
+
+exports.type = 'full';
+
+exports.active = true;
+
+exports.params = {
+    juice: {}
+};
+
+exports.description = 'moves styles from <style> to element styles';
+
+
+var cssParser = require('css'),
+    cheerio   = require('cheerio'),
+    juice     = require('juice'),
+    JSAPI     = require('../lib/svgo/jsAPI.js');
+
+
+function monkeysSvgo(item, callFn, arg) {
+  item.content.forEach(function(childItem) {
+    if(callFn(item, childItem, arg) && !childItem.isEmpty()) { // recurse
+      monkeysSvgo(childItem, callFn, arg);
+    }
+  });
+}
+
+function isSvgoElem(elem) {
+  return typeof elem !== 'undefined';
+}
+
+function cheerioLoadXml(xml) {
+  return cheerio.load(xml, { xmlMode: true });
+}
+function getXmlTag(elem) {
+  return '<' + elem + '>';
+}
+function makeCheerioElem(elem) {
+  return cheerioLoadXml(getXmlTag(elem));
+}
+function makeCheerioInst(elem) {
+  return makeCheerioElem(elem)(elem);
+}
+
+function parsePrefixable(fullName) {
+  var a = fullName.split(':');
+  if(a.length == 1) {
+    return { name: a[0] };
+  }
+  return { prefix: a[0], name: a[1] };
+}
+
+function processSvgoElem(pae, ae, $) {
+  // note: <xml> element skipped by svgo parser
+
+  if(pae.elem == '#document') {
+    pae.$ = $; // attach top cheerio ast node to top svgo ast node
+  }
+
+  var textToElem = pae;
+  if(isSvgoElem(ae.elem)) {
+    var nameInfo = parsePrefixable(ae.elem);
+
+    ae.$ = makeCheerioInst(nameInfo.name);
+    pae.$.append(ae.$);
+
+    if(ae.attrs && Object.keys(ae.attrs).length > 0) {
+      for(var attrKey in ae.attrs) {
+        var attr = ae.attrs[attrKey];
+
+        var attrNamePrefixed = '';
+        if(attr.prefix) {
+          attrNamePrefixed = attr.prefix + ':';
+        }
+        attrNamePrefixed = attrNamePrefixed + attr.name;
+
+        ae.$.attr(attrNamePrefixed, attr.value);
+      }
+    }
+
+    if(nameInfo.prefix) {
+      ae.$.prefix = nameInfo.prefix;
+    }
+
+    textToElem = ae;
+  }
+
+  if(typeof ae.text !== 'undefined') {
+    textToElem.$.text(ae.text);
+  }
+
+  return true;
+}
+
+function createEmptyCheerioDoc() {
+  var document  = makeCheerioElem('dummy');
+  var $document = document.root().empty();
+  return $document;
+}
+
+function svgoAst2CheerioAst(data) {
+  var $document = createEmptyCheerioDoc();
+  monkeysSvgo(data, processSvgoElem, $document);
+  return $document;
+}
+
+
+function monkeysCheerio($item, callFn, arg) {
+  if(typeof $item.children === 'object') {
+    for(var childItemIndex in $item.children) {
+      var $childItem = $item.children[ childItemIndex ];
+      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // recurse
+        monkeysCheerio($childItem, callFn, arg);
+      }
+    } 
+  } else if(typeof $item.children === 'function') {
+    $item.children().each(function(childItemIndex, $childItem) {
+      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // "
+        monkeysCheerio($childItem, callFn, arg);
+      }
+    });
+  } else {
+    return;
+  }
+}
+
+function isCheerioElem($elem) {
+  return typeof $elem !== 'undefined';
+}
+function isCheerioText($elem) {
+  return $elem.type == 'text';
+}
+
+function makeSvgoElem(elem, parentElem) {
+  return new JSAPI({ elem: elem }, parentElem);
+}
+function makeSvgoText(text, parentElem) {
+  return new JSAPI({ text: text }, parentElem);
+}
+
+function processCheerioElem($pae, $ae, s) {
+
+  if($pae.name == 'root') {
+    $pae.s = s; // attach top svgo ast node to top cheerio ast node
+  }
+
+  var $textToElem = $pae;
+  if(isCheerioElem($ae) && !isCheerioText($ae)) {
+    $ae.s = makeSvgoElem($ae.name, $pae.s);
+
+    $pae.s.content = $pae.s.content || [];
+    $pae.s.content.push($ae.s);
+
+
+    if($ae.attribs && Object.keys($ae.attribs).length > 0) {
+      for(var attrName in $ae.attribs) {
+        var attrValue    = $ae.attribs[attrName];
+        var attrNameInfo = parsePrefixable(attrName);
+        $ae.s.addAttr({
+          name:   attrNameInfo.name,
+          prefix: attrNameInfo.prefix || '', // explicit empty string otherwise expected
+          local:  attrNameInfo.name,
+          value:  attrValue
+        });
+      }
+    }
+
+    $textToElem = $ae;
+  }
+
+
+  if(isCheerioText($ae)) {
+    $pae.s.content = $pae.s.content || [];
+
+    $textToElem.s.content.push( makeSvgoText($ae.data, $pae.s) );
+  }
+
+  return true;
+}
+
+function cheerioAst2SvgoAst($) {
+  var data = makeSvgoElem('#document');
+  var $document = $.root()[0];
+  monkeysCheerio($document, processCheerioElem, data);
+  return data;
+}
+
+
+
+
+/**
+  * Moves styles from <style> to element styles
+  *
+  * @author strarsis <strarsis@gmail.com>
+  */
+var fs        = require('fs'),
+    stringify = require('json-stringify');
+exports.fn = function(data, svgoOptions) {
+
+  // svgo ast to cheerio ast
+  var $o = svgoAst2CheerioAst(data);
+  var $  = cheerioLoadXml($o.html());
+
+
+  // juice options required for svg and css classes cleanup
+  svgoOptions.xmlMode         = true;
+  svgoOptions.removeStyleTags = false;
+
+  var $i = juice.juiceDocument($, svgoOptions);
+
+
+  // as last step, remove classes when they are used only by one element in document:
+  var $styles = $('style');
+  $styles.each(function(si, $style) {
+    var css      = $style.children[0].data;
+    var cssAst   = cssParser.parse(css);
+
+    var cssRules = cssAst.stylesheet.rules;
+    cssRules.forEach(function(cssRule, cssRuleIndex) {
+      if(cssRule.type != 'rule') {
+        return;
+      }
+
+      cssRule.selectors.forEach(function(selector, selectorIndex) {
+        var $matches = $i(selector);
+        if(!$matches.length <= 1) { // matches only once
+          cssRule.selectors.splice(selectorIndex, 1);
+        }
+      });
+
+      if(cssRule.selectors.length == 0) { // clean up rules without any selectors left
+        cssRules.splice(cssRuleIndex, 1);
+      }
+    });
+
+    var newCss = cssParser.stringify(cssAst);
+    $style.children[0].data = newCss;
+  });
+
+
+  var dataNew = cheerioAst2SvgoAst($i);
+
+  return dataNew;
+};

From 298c0722d6cf25e7d0a1e109ddd9b65763481d4c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 15:51:13 +0200
Subject: [PATCH 002/162] Remove unused requires.

---
 plugins/inlineStyles.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index e39462267..8a2762ec9 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -193,8 +193,6 @@ function cheerioAst2SvgoAst($) {
   *
   * @author strarsis <strarsis@gmail.com>
   */
-var fs        = require('fs'),
-    stringify = require('json-stringify');
 exports.fn = function(data, svgoOptions) {
 
   // svgo ast to cheerio ast

From b4c8df9cc71ef01c2fc5f5f035685510cf192d0e Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 16:12:29 +0200
Subject: [PATCH 003/162] Add package dependencies required by inlineStyles
 plugin.

---
 package.json | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e6a30c425..94480e652 100644
--- a/package.json
+++ b/package.json
@@ -48,13 +48,15 @@
     "jshint": "jshint --show-non-errors ."
   },
   "dependencies": {
-    "sax": "~1.2.1",
     "coa": "~1.0.1",
-    "js-yaml": "~3.6.1",
     "colors": "~1.1.2",
-    "whet.extend": "~0.9.9",
+    "css": "^2.2.1",
+    "csso": "~2.2.1",
+    "js-yaml": "~3.6.1",
+    "juice": "^2.0.0",
     "mkdirp": "~0.5.1",
-    "csso": "~2.2.1"
+    "sax": "~1.2.1",
+    "whet.extend": "~0.9.9"
   },
   "devDependencies": {
     "mocha": "~3.0.2",

From 34e6bfa4238eb1a8c525b2c43cb3998a0ad13f6a Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 16:13:01 +0200
Subject: [PATCH 004/162] Fix jshint error / improve code + comment.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 8a2762ec9..bf8ce0f7c 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -221,7 +221,7 @@ exports.fn = function(data, svgoOptions) {
 
       cssRule.selectors.forEach(function(selector, selectorIndex) {
         var $matches = $i(selector);
-        if(!$matches.length <= 1) { // matches only once
+        if($matches.length > 1) { // if matches more than once
           cssRule.selectors.splice(selectorIndex, 1);
         }
       });

From b68892bf182414589a923bc0e3778470220e9217 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 16:13:21 +0200
Subject: [PATCH 005/162] Add inlineStyles plugin to enabled plugins list in
 svgo default config.

---
 .svgo.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.svgo.yml b/.svgo.yml
index a2b6e5202..3433ee09d 100644
--- a/.svgo.yml
+++ b/.svgo.yml
@@ -23,6 +23,7 @@ plugins:
   - removeXMLNS
   - removeEditorsNSData
   - cleanupAttrs
+  - inlineStyles
   - minifyStyles
   - convertStyleToAttrs
   - cleanupIDs

From bf29ceb9469fa06cff06dde24da8099fb516acbf Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 16:19:38 +0200
Subject: [PATCH 006/162] Add missing cheerio package dependency.

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 94480e652..594b99d72 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "jshint": "jshint --show-non-errors ."
   },
   "dependencies": {
+    "cheerio": "^0.22.0",
     "coa": "~1.0.1",
     "colors": "~1.1.2",
     "css": "^2.2.1",

From fe759cb2ac65ea2264bc32f648611caa108b172d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 16:40:34 +0200
Subject: [PATCH 007/162] Add test + fix for properly handling empty style
 elements.

---
 plugins/inlineStyles.js          |  4 ++++
 test/plugins/inlineStyles.01.svg | 13 +++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 test/plugins/inlineStyles.01.svg

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index bf8ce0f7c..e36af5009 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -210,6 +210,10 @@ exports.fn = function(data, svgoOptions) {
   // as last step, remove classes when they are used only by one element in document:
   var $styles = $('style');
   $styles.each(function(si, $style) {
+    if($style.children.length == 0) {
+      return;
+    }
+
     var css      = $style.children[0].data;
     var cssAst   = cssParser.parse(css);
 
diff --git a/test/plugins/inlineStyles.01.svg b/test/plugins/inlineStyles.01.svg
new file mode 100644
index 000000000..ccb7d4912
--- /dev/null
+++ b/test/plugins/inlineStyles.01.svg
@@ -0,0 +1,13 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style/>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+</svg>
+

From 8ef17ee4d6c6501ddeea93fe57dc39c703aa2d21 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 16:45:42 +0200
Subject: [PATCH 008/162] Fix css rule match logic.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index e36af5009..51a3a0dc2 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -225,7 +225,7 @@ exports.fn = function(data, svgoOptions) {
 
       cssRule.selectors.forEach(function(selector, selectorIndex) {
         var $matches = $i(selector);
-        if($matches.length > 1) { // if matches more than once
+        if($matches.length <= 1) { // if matches only once or not at all
           cssRule.selectors.splice(selectorIndex, 1);
         }
       });

From 5bfd49821b03271a0fa2a4cc9f49a44c1ea35e47 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Sep 2016 16:46:48 +0200
Subject: [PATCH 009/162] Add second test for removing classes that only match
 once or not at all.

---
 test/plugins/inlineStyles.02.svg | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 test/plugins/inlineStyles.02.svg

diff --git a/test/plugins/inlineStyles.02.svg b/test/plugins/inlineStyles.02.svg
new file mode 100644
index 000000000..d69cd6ab2
--- /dev/null
+++ b/test/plugins/inlineStyles.02.svg
@@ -0,0 +1,17 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0,.st2{fill:red;}
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st2 {
+  fill: red;
+}
+    </style>
+    <rect width="100" height="100" class="st0" style="fill: red; stroke-width: 3; stroke: blue;"/>
+</svg>

From 3615c0e76cea49c2dd1186b22249b20d62cdf6bc Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 7 Sep 2016 00:42:02 +0200
Subject: [PATCH 010/162] Migrate to csso instead css parser.

---
 package.json            |  3 +--
 plugins/inlineStyles.js | 47 +++++++++++++++++++++++------------------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 594b99d72..f711c2ce3 100644
--- a/package.json
+++ b/package.json
@@ -51,8 +51,7 @@
     "cheerio": "^0.22.0",
     "coa": "~1.0.1",
     "colors": "~1.1.2",
-    "css": "^2.2.1",
-    "csso": "~2.2.1",
+    "csso": "^2.2.1",
     "js-yaml": "~3.6.1",
     "juice": "^2.0.0",
     "mkdirp": "~0.5.1",
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 51a3a0dc2..9436e8e27 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -11,10 +11,10 @@ exports.params = {
 exports.description = 'moves styles from <style> to element styles';
 
 
-var cssParser = require('css'),
-    cheerio   = require('cheerio'),
-    juice     = require('juice'),
-    JSAPI     = require('../lib/svgo/jsAPI.js');
+var csso    = require('csso'),
+    cheerio = require('cheerio'),
+    juice   = require('juice'),
+    JSAPI   = require('../lib/svgo/jsAPI.js');
 
 
 function monkeysSvgo(item, callFn, arg) {
@@ -214,29 +214,34 @@ exports.fn = function(data, svgoOptions) {
       return;
     }
 
-    var css      = $style.children[0].data;
-    var cssAst   = cssParser.parse(css);
+    var cssStr = $style.children[0].data,
+        cssAst = csso.parse(cssStr, {
+          context: 'stylesheet'
+        });
 
-    var cssRules = cssAst.stylesheet.rules;
-    cssRules.forEach(function(cssRule, cssRuleIndex) {
-      if(cssRule.type != 'rule') {
-        return;
-      }
+    var anythingRemoved = false;
+    csso.walk(cssAst, function(node, item, list) {
+        if(node.type === 'SimpleSelector') {
+          var selectorStr = csso.translate(node);
 
-      cssRule.selectors.forEach(function(selector, selectorIndex) {
-        var $matches = $i(selector);
-        if($matches.length <= 1) { // if matches only once or not at all
-          cssRule.selectors.splice(selectorIndex, 1);
+          var $matches = $i(selectorStr);
+          if($matches.length == 1) { // if matches only once, remove it
+            list.remove(item);
+            anythingRemoved = true;
+          }
         }
-      });
 
-      if(cssRule.selectors.length == 0) { // clean up rules without any selectors left
-        cssRules.splice(cssRuleIndex, 1);
-      }
+        // clean up rulesets without selectors left
+        if(node.type === 'Ruleset' &&
+           node.selector.selectors.head == null) {
+            list.remove(item);
+        }
     });
 
-    var newCss = cssParser.stringify(cssAst);
-    $style.children[0].data = newCss;
+    if(anythingRemoved) {
+      var newCssStr = csso.translate(cssAst);
+      $style.children[0].data = newCssStr;
+    }
   });
 
 

From 5d1f98d30b53c3e8fa47bf09bfee9eabd19f08de Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 7 Sep 2016 00:42:32 +0200
Subject: [PATCH 011/162] Adjust test 2 expected output to normal csso output.

---
 test/plugins/inlineStyles.02.svg | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test/plugins/inlineStyles.02.svg b/test/plugins/inlineStyles.02.svg
index d69cd6ab2..14df11e56 100644
--- a/test/plugins/inlineStyles.02.svg
+++ b/test/plugins/inlineStyles.02.svg
@@ -9,9 +9,7 @@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st2 {
-  fill: red;
-}
+        .st2{fill:red}
     </style>
     <rect width="100" height="100" class="st0" style="fill: red; stroke-width: 3; stroke: blue;"/>
 </svg>

From 46aeebedd2cd5b5d5f8b8e4fd3da26392bac0dd3 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 7 Sep 2016 00:43:29 +0200
Subject: [PATCH 012/162] Add further tests.

---
 test/plugins/inlineStyles.03.svg | 17 +++++++++++++++++
 test/plugins/inlineStyles.04.svg | 15 +++++++++++++++
 test/plugins/inlineStyles.05.svg | 21 +++++++++++++++++++++
 test/plugins/inlineStyles.06.svg | 15 +++++++++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 test/plugins/inlineStyles.03.svg
 create mode 100644 test/plugins/inlineStyles.04.svg
 create mode 100644 test/plugins/inlineStyles.05.svg
 create mode 100644 test/plugins/inlineStyles.06.svg

diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
new file mode 100644
index 000000000..3d31ce343
--- /dev/null
+++ b/test/plugins/inlineStyles.03.svg
@@ -0,0 +1,17 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0,.st2{fill:red;}
+        .st1{color: yellow;}
+    </style>
+    <rect width="100" height="100" class="st0 st1" style="stroke-width:3;stroke:blue;"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st2{fill:red}
+    </style>
+    <rect width="100" height="100" class="st0 st1" style="fill: red; color: yellow; stroke-width: 3; stroke: blue;"/>
+</svg>
+
diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
new file mode 100644
index 000000000..ae96176fc
--- /dev/null
+++ b/test/plugins/inlineStyles.04.svg
@@ -0,0 +1,15 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{fill:red;}
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;fill:red;"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width: 3; fill: red;"/>
+</svg>
+
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
new file mode 100644
index 000000000..fe8424438
--- /dev/null
+++ b/test/plugins/inlineStyles.05.svg
@@ -0,0 +1,21 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{fill:red;} @media screen and (max-width: 200px) { .st1 { display: none; } }
+    </style>
+    <style>
+        .st0{color:yellow;}
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        @media screen and (max-width: 200px){.st1{display:none}}
+    </style>
+    <style>
+    </style>
+    <rect width="100" height="100" class="st0" style="fill: red; color: yellow; stroke-width: 3; stroke: blue;"/>
+</svg>
+
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
new file mode 100644
index 000000000..6b7ca40e0
--- /dev/null
+++ b/test/plugins/inlineStyles.06.svg
@@ -0,0 +1,15 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{fill:red;}
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+    </style>
+    <rect width="100" height="100" class="st0" style="fill: red; stroke-width: 3; stroke: blue;"/>
+</svg>
+

From f16abbfe407a072d92f10e10ff2f474d31d1461c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 7 Sep 2016 00:54:14 +0200
Subject: [PATCH 013/162] Improve comment cosmetically.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 9436e8e27..f2d84c8f9 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -207,7 +207,7 @@ exports.fn = function(data, svgoOptions) {
   var $i = juice.juiceDocument($, svgoOptions);
 
 
-  // as last step, remove classes when they are used only by one element in document:
+  // as last step, remove classes when they are used only by one element in document
   var $styles = $('style');
   $styles.each(function(si, $style) {
     if($style.children.length == 0) {

From 814369dfcd7bf7d440cb7eaea9bb4157894f6970 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 7 Sep 2016 00:54:43 +0200
Subject: [PATCH 014/162] Add code for removing style elements that now got
 empty content.

---
 plugins/inlineStyles.js          | 17 +++++++++++++----
 test/plugins/inlineStyles.04.svg |  2 --
 test/plugins/inlineStyles.05.svg |  2 --
 test/plugins/inlineStyles.06.svg |  2 --
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index f2d84c8f9..7d46c8648 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -225,22 +225,31 @@ exports.fn = function(data, svgoOptions) {
           var selectorStr = csso.translate(node);
 
           var $matches = $i(selectorStr);
-          if($matches.length == 1) { // if matches only once, remove it
+          if($matches.length == 1) { // if selector matches only once, remove the selector
             list.remove(item);
             anythingRemoved = true;
           }
         }
 
-        // clean up rulesets without selectors left
+        // clean up rulesets without any selectors left
         if(node.type === 'Ruleset' &&
            node.selector.selectors.head == null) {
             list.remove(item);
         }
     });
 
-    if(anythingRemoved) {
-      var newCssStr = csso.translate(cssAst);
+    if(!anythingRemoved) {
+      return;
+    }
+
+    var newCssStr = csso.translate(cssAst).trim();
+    if(newCssStr.length > 0) {
       $style.children[0].data = newCssStr;
+    } else {
+      // clean up style elements with now empty content
+      // note: style elements that already got empty content will 
+      //       intentionally not be removed by this plugin.
+      $styles.remove($style);
     }
   });
 
diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
index ae96176fc..c94b37c1e 100644
--- a/test/plugins/inlineStyles.04.svg
+++ b/test/plugins/inlineStyles.04.svg
@@ -8,8 +8,6 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style>
-    </style>
     <rect width="100" height="100" class="st0" style="stroke-width: 3; fill: red;"/>
 </svg>
 
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
index fe8424438..f1d0748cc 100644
--- a/test/plugins/inlineStyles.05.svg
+++ b/test/plugins/inlineStyles.05.svg
@@ -14,8 +14,6 @@
     <style>
         @media screen and (max-width: 200px){.st1{display:none}}
     </style>
-    <style>
-    </style>
     <rect width="100" height="100" class="st0" style="fill: red; color: yellow; stroke-width: 3; stroke: blue;"/>
 </svg>
 
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
index 6b7ca40e0..09cad3021 100644
--- a/test/plugins/inlineStyles.06.svg
+++ b/test/plugins/inlineStyles.06.svg
@@ -8,8 +8,6 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style>
-    </style>
     <rect width="100" height="100" class="st0" style="fill: red; stroke-width: 3; stroke: blue;"/>
 </svg>
 

From a3cec049e2baf82400c566f578a3df03cfa23d4f Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 7 Sep 2016 00:57:15 +0200
Subject: [PATCH 015/162] Move string trim() to condition in order to preserve
 subtleties in css output.

---
 plugins/inlineStyles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 7d46c8648..3e947f0d4 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -242,8 +242,8 @@ exports.fn = function(data, svgoOptions) {
       return;
     }
 
-    var newCssStr = csso.translate(cssAst).trim();
-    if(newCssStr.length > 0) {
+    var newCssStr = csso.translate(cssAst);
+    if(newCssStr.trim().length > 0) {
       $style.children[0].data = newCssStr;
     } else {
       // clean up style elements with now empty content

From 86cc4546e55333897edf257014785b8aa1f982e5 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 6 Oct 2016 20:50:06 +0200
Subject: [PATCH 016/162] Use juice options key. Add option for only once
 matching selectors.

---
 plugins/inlineStyles.js | 54 +++++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 3e947f0d4..843832aa7 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -5,7 +5,8 @@ exports.type = 'full';
 exports.active = true;
 
 exports.params = {
-    juice: {}
+    juice: {},
+    onlyOnceMatching: true
 };
 
 exports.description = 'moves styles from <style> to element styles';
@@ -186,27 +187,7 @@ function cheerioAst2SvgoAst($) {
 }
 
 
-
-
-/**
-  * Moves styles from <style> to element styles
-  *
-  * @author strarsis <strarsis@gmail.com>
-  */
-exports.fn = function(data, svgoOptions) {
-
-  // svgo ast to cheerio ast
-  var $o = svgoAst2CheerioAst(data);
-  var $  = cheerioLoadXml($o.html());
-
-
-  // juice options required for svg and css classes cleanup
-  svgoOptions.xmlMode         = true;
-  svgoOptions.removeStyleTags = false;
-
-  var $i = juice.juiceDocument($, svgoOptions);
-
-
+function cleanupSingleMatches($) {
   // as last step, remove classes when they are used only by one element in document
   var $styles = $('style');
   $styles.each(function(si, $style) {
@@ -252,9 +233,36 @@ exports.fn = function(data, svgoOptions) {
       $styles.remove($style);
     }
   });
+};
 
 
-  var dataNew = cheerioAst2SvgoAst($i);
 
+
+/**
+  * Moves styles from <style> to element styles
+  *
+  * @author strarsis <strarsis@gmail.com>
+  */
+exports.fn = function(data, opts) {
+  var juiceOpts = opts.juice;
+
+  // svgo ast to cheerio ast
+  var $o = svgoAst2CheerioAst(data);
+  var $  = cheerioLoadXml($o.html());
+
+  // juice options required for svg
+  juiceOpts.xmlMode = true;
+
+  if(opts.onlyOnceMatching) {
+    juiceOpts.removeStyleTags = false;
+  }
+
+  var $i = juice.juiceDocument($, juiceOpts);
+
+  if(opts.onlyOnceMatching) {
+    cleanupSingleMatches($);
+  }
+
+  var dataNew = cheerioAst2SvgoAst($i);
   return dataNew;
 };

From 65836b761b242d3ffce54cb5692aaadcd8b3607b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 6 Oct 2016 20:51:21 +0200
Subject: [PATCH 017/162] Fix context.

---
 plugins/inlineStyles.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 843832aa7..9e8510c96 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -187,9 +187,9 @@ function cheerioAst2SvgoAst($) {
 }
 
 
-function cleanupSingleMatches($) {
+function cleanupSingleMatches($i) {
   // as last step, remove classes when they are used only by one element in document
-  var $styles = $('style');
+  var $styles = $i('style');
   $styles.each(function(si, $style) {
     if($style.children.length == 0) {
       return;
@@ -260,7 +260,7 @@ exports.fn = function(data, opts) {
   var $i = juice.juiceDocument($, juiceOpts);
 
   if(opts.onlyOnceMatching) {
-    cleanupSingleMatches($);
+    cleanupSingleMatches($i);
   }
 
   var dataNew = cheerioAst2SvgoAst($i);

From c809447bd87fb145c3b0a7df668e0d35c5bf0ae5 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 6 Oct 2016 20:58:31 +0200
Subject: [PATCH 018/162] Fix jshint error.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 9e8510c96..754776624 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -233,7 +233,7 @@ function cleanupSingleMatches($i) {
       $styles.remove($style);
     }
   });
-};
+}
 
 
 

From a69b35b940cb765bbb6b248f6ac8d9ea82071b9e Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 10 Oct 2016 19:38:01 +0200
Subject: [PATCH 019/162] Move to cheerio-support code to lib/. Remove csso
 step because this should be implemented natively in juice.

---
 lib/svgo/cheerio-support.js | 175 +++++++++++++++++++++++++
 plugins/inlineStyles.js     | 250 ++----------------------------------
 2 files changed, 185 insertions(+), 240 deletions(-)
 create mode 100644 lib/svgo/cheerio-support.js

diff --git a/lib/svgo/cheerio-support.js b/lib/svgo/cheerio-support.js
new file mode 100644
index 000000000..f343a7efa
--- /dev/null
+++ b/lib/svgo/cheerio-support.js
@@ -0,0 +1,175 @@
+var cheerio = require('cheerio'),
+    JSAPI   = require('./jsAPI.js');
+
+function monkeysSvgo(item, callFn, arg) {
+  item.content.forEach(function(childItem) {
+    if(callFn(item, childItem, arg) && !childItem.isEmpty()) { // recurse
+      monkeysSvgo(childItem, callFn, arg);
+    }
+  });
+}
+
+function isSvgoElem(elem) {
+  return typeof elem !== 'undefined';
+}
+
+function cheerioLoadXml(xml) {
+  return cheerio.load(xml, { xmlMode: true });
+}
+function getXmlTag(elem) {
+  return '<' + elem + '>';
+}
+function makeCheerioElem(elem) {
+  return cheerioLoadXml(getXmlTag(elem));
+}
+function makeCheerioInst(elem) {
+  return makeCheerioElem(elem)(elem);
+}
+
+function parsePrefixable(fullName) {
+  var a = fullName.split(':');
+  if(a.length == 1) {
+    return { name: a[0] };
+  }
+  return { prefix: a[0], name: a[1] };
+}
+
+function processSvgoElem(pae, ae, $) {
+  // note: <xml> element skipped by svgo parser
+
+  if(pae.elem == '#document') {
+    pae.$ = $; // attach top cheerio ast node to top svgo ast node
+  }
+
+  var textToElem = pae;
+  if(isSvgoElem(ae.elem)) {
+    var nameInfo = parsePrefixable(ae.elem);
+
+    ae.$ = makeCheerioInst(nameInfo.name);
+    pae.$.append(ae.$);
+
+    if(ae.attrs && Object.keys(ae.attrs).length > 0) {
+      for(var attrKey in ae.attrs) {
+        var attr = ae.attrs[attrKey];
+
+        var attrNamePrefixed = '';
+        if(attr.prefix) {
+          attrNamePrefixed = attr.prefix + ':';
+        }
+        attrNamePrefixed = attrNamePrefixed + attr.name;
+
+        ae.$.attr(attrNamePrefixed, attr.value);
+      }
+    }
+
+    if(nameInfo.prefix) {
+      ae.$.prefix = nameInfo.prefix;
+    }
+
+    textToElem = ae;
+  }
+
+  if(typeof ae.text !== 'undefined') {
+    textToElem.$.text(ae.text);
+  }
+
+  return true;
+}
+
+function createEmptyCheerioDoc() {
+  var document  = makeCheerioElem('dummy');
+  var $document = document.root().empty();
+  return $document;
+}
+
+function svgoAst2CheerioAst(data) {
+  var $document = createEmptyCheerioDoc();
+  monkeysSvgo(data, processSvgoElem, $document);
+  var $documentProper = cheerioLoadXml($document.html()); // reload html in cheerio for proper cheerio instance
+  return $documentProper;
+}
+
+
+function monkeysCheerio($item, callFn, arg) {
+  if(typeof $item.children === 'object') {
+    for(var childItemIndex in $item.children) {
+      var $childItem = $item.children[ childItemIndex ];
+      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // recurse
+        monkeysCheerio($childItem, callFn, arg);
+      }
+    } 
+  } else if(typeof $item.children === 'function') {
+    $item.children().each(function(childItemIndex, $childItem) {
+      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // "
+        monkeysCheerio($childItem, callFn, arg);
+      }
+    });
+  } else {
+    return;
+  }
+}
+
+function isCheerioElem($elem) {
+  return typeof $elem !== 'undefined';
+}
+function isCheerioText($elem) {
+  return $elem.type == 'text';
+}
+
+function makeSvgoElem(elem, parentElem) {
+  return new JSAPI({ elem: elem }, parentElem);
+}
+function makeSvgoText(text, parentElem) {
+  return new JSAPI({ text: text }, parentElem);
+}
+
+function processCheerioElem($pae, $ae, s) {
+
+  if($pae.name == 'root') {
+    $pae.s = s; // attach top svgo ast node to top cheerio ast node
+  }
+
+  var $textToElem = $pae;
+  if(isCheerioElem($ae) && !isCheerioText($ae)) {
+    $ae.s = makeSvgoElem($ae.name, $pae.s);
+
+    $pae.s.content = $pae.s.content || [];
+    $pae.s.content.push($ae.s);
+
+
+    if($ae.attribs && Object.keys($ae.attribs).length > 0) {
+      for(var attrName in $ae.attribs) {
+        var attrValue    = $ae.attribs[attrName];
+        var attrNameInfo = parsePrefixable(attrName);
+        $ae.s.addAttr({
+          name:   attrNameInfo.name,
+          prefix: attrNameInfo.prefix || '', // explicit empty string otherwise expected
+          local:  attrNameInfo.name,
+          value:  attrValue
+        });
+      }
+    }
+
+    $textToElem = $ae;
+  }
+
+
+  if(isCheerioText($ae)) {
+    $pae.s.content = $pae.s.content || [];
+
+    $textToElem.s.content.push( makeSvgoText($ae.data, $pae.s) );
+  }
+
+  return true;
+}
+
+function cheerioAst2SvgoAst($) {
+  var data = makeSvgoElem('#document');
+  var $document = $.root()[0];
+  monkeysCheerio($document, processCheerioElem, data);
+  return data;
+}
+
+
+ module.exports.svgoAst2CheerioAst = svgoAst2CheerioAst;
+ module.exports.cheerioAst2SvgoAst = cheerioAst2SvgoAst;
\ No newline at end of file
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 754776624..ed7b192f4 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -5,237 +5,16 @@ exports.type = 'full';
 exports.active = true;
 
 exports.params = {
-    juice: {},
-    onlyOnceMatching: true
-};
-
-exports.description = 'moves styles from <style> to element styles';
-
-
-var csso    = require('csso'),
-    cheerio = require('cheerio'),
-    juice   = require('juice'),
-    JSAPI   = require('../lib/svgo/jsAPI.js');
-
-
-function monkeysSvgo(item, callFn, arg) {
-  item.content.forEach(function(childItem) {
-    if(callFn(item, childItem, arg) && !childItem.isEmpty()) { // recurse
-      monkeysSvgo(childItem, callFn, arg);
-    }
-  });
-}
-
-function isSvgoElem(elem) {
-  return typeof elem !== 'undefined';
-}
-
-function cheerioLoadXml(xml) {
-  return cheerio.load(xml, { xmlMode: true });
-}
-function getXmlTag(elem) {
-  return '<' + elem + '>';
-}
-function makeCheerioElem(elem) {
-  return cheerioLoadXml(getXmlTag(elem));
-}
-function makeCheerioInst(elem) {
-  return makeCheerioElem(elem)(elem);
-}
-
-function parsePrefixable(fullName) {
-  var a = fullName.split(':');
-  if(a.length == 1) {
-    return { name: a[0] };
-  }
-  return { prefix: a[0], name: a[1] };
-}
-
-function processSvgoElem(pae, ae, $) {
-  // note: <xml> element skipped by svgo parser
-
-  if(pae.elem == '#document') {
-    pae.$ = $; // attach top cheerio ast node to top svgo ast node
-  }
-
-  var textToElem = pae;
-  if(isSvgoElem(ae.elem)) {
-    var nameInfo = parsePrefixable(ae.elem);
-
-    ae.$ = makeCheerioInst(nameInfo.name);
-    pae.$.append(ae.$);
-
-    if(ae.attrs && Object.keys(ae.attrs).length > 0) {
-      for(var attrKey in ae.attrs) {
-        var attr = ae.attrs[attrKey];
-
-        var attrNamePrefixed = '';
-        if(attr.prefix) {
-          attrNamePrefixed = attr.prefix + ':';
-        }
-        attrNamePrefixed = attrNamePrefixed + attr.name;
-
-        ae.$.attr(attrNamePrefixed, attr.value);
-      }
-    }
-
-    if(nameInfo.prefix) {
-      ae.$.prefix = nameInfo.prefix;
-    }
-
-    textToElem = ae;
-  }
-
-  if(typeof ae.text !== 'undefined') {
-    textToElem.$.text(ae.text);
-  }
-
-  return true;
-}
-
-function createEmptyCheerioDoc() {
-  var document  = makeCheerioElem('dummy');
-  var $document = document.root().empty();
-  return $document;
-}
-
-function svgoAst2CheerioAst(data) {
-  var $document = createEmptyCheerioDoc();
-  monkeysSvgo(data, processSvgoElem, $document);
-  return $document;
-}
-
-
-function monkeysCheerio($item, callFn, arg) {
-  if(typeof $item.children === 'object') {
-    for(var childItemIndex in $item.children) {
-      var $childItem = $item.children[ childItemIndex ];
-      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // recurse
-        monkeysCheerio($childItem, callFn, arg);
-      }
-    } 
-  } else if(typeof $item.children === 'function') {
-    $item.children().each(function(childItemIndex, $childItem) {
-      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // "
-        monkeysCheerio($childItem, callFn, arg);
-      }
-    });
-  } else {
-    return;
-  }
-}
-
-function isCheerioElem($elem) {
-  return typeof $elem !== 'undefined';
-}
-function isCheerioText($elem) {
-  return $elem.type == 'text';
-}
-
-function makeSvgoElem(elem, parentElem) {
-  return new JSAPI({ elem: elem }, parentElem);
-}
-function makeSvgoText(text, parentElem) {
-  return new JSAPI({ text: text }, parentElem);
-}
-
-function processCheerioElem($pae, $ae, s) {
-
-  if($pae.name == 'root') {
-    $pae.s = s; // attach top svgo ast node to top cheerio ast node
-  }
-
-  var $textToElem = $pae;
-  if(isCheerioElem($ae) && !isCheerioText($ae)) {
-    $ae.s = makeSvgoElem($ae.name, $pae.s);
-
-    $pae.s.content = $pae.s.content || [];
-    $pae.s.content.push($ae.s);
-
-
-    if($ae.attribs && Object.keys($ae.attribs).length > 0) {
-      for(var attrName in $ae.attribs) {
-        var attrValue    = $ae.attribs[attrName];
-        var attrNameInfo = parsePrefixable(attrName);
-        $ae.s.addAttr({
-          name:   attrNameInfo.name,
-          prefix: attrNameInfo.prefix || '', // explicit empty string otherwise expected
-          local:  attrNameInfo.name,
-          value:  attrValue
-        });
-      }
-    }
-
-    $textToElem = $ae;
-  }
-
-
-  if(isCheerioText($ae)) {
-    $pae.s.content = $pae.s.content || [];
-
-    $textToElem.s.content.push( makeSvgoText($ae.data, $pae.s) );
-  }
-
-  return true;
-}
-
-function cheerioAst2SvgoAst($) {
-  var data = makeSvgoElem('#document');
-  var $document = $.root()[0];
-  monkeysCheerio($document, processCheerioElem, data);
-  return data;
-}
-
-
-function cleanupSingleMatches($i) {
-  // as last step, remove classes when they are used only by one element in document
-  var $styles = $i('style');
-  $styles.each(function(si, $style) {
-    if($style.children.length == 0) {
-      return;
-    }
-
-    var cssStr = $style.children[0].data,
-        cssAst = csso.parse(cssStr, {
-          context: 'stylesheet'
-        });
-
-    var anythingRemoved = false;
-    csso.walk(cssAst, function(node, item, list) {
-        if(node.type === 'SimpleSelector') {
-          var selectorStr = csso.translate(node);
-
-          var $matches = $i(selectorStr);
-          if($matches.length == 1) { // if selector matches only once, remove the selector
-            list.remove(item);
-            anythingRemoved = true;
-          }
-        }
-
-        // clean up rulesets without any selectors left
-        if(node.type === 'Ruleset' &&
-           node.selector.selectors.head == null) {
-            list.remove(item);
-        }
-    });
-
-    if(!anythingRemoved) {
-      return;
+    juice: {
+      onlyMatchedOnce: true
     }
+};
 
-    var newCssStr = csso.translate(cssAst);
-    if(newCssStr.trim().length > 0) {
-      $style.children[0].data = newCssStr;
-    } else {
-      // clean up style elements with now empty content
-      // note: style elements that already got empty content will 
-      //       intentionally not be removed by this plugin.
-      $styles.remove($style);
-    }
-  });
-}
+exports.description = 'inline styles using the juice module';
 
 
+var cheerioSupport = require('../lib/svgo/cheerio-support'),
+    juice          = require('juice');
 
 
 /**
@@ -247,22 +26,13 @@ exports.fn = function(data, opts) {
   var juiceOpts = opts.juice;
 
   // svgo ast to cheerio ast
-  var $o = svgoAst2CheerioAst(data);
-  var $  = cheerioLoadXml($o.html());
-
-  // juice options required for svg
-  juiceOpts.xmlMode = true;
+  var $ = cheerioSupport.svgoAst2CheerioAst(data);
 
-  if(opts.onlyOnceMatching) {
-    juiceOpts.removeStyleTags = false;
-  }
+  juiceOpts.xmlMode = true; // juice option required for svg
 
   var $i = juice.juiceDocument($, juiceOpts);
 
-  if(opts.onlyOnceMatching) {
-    cleanupSingleMatches($i);
-  }
-
-  var dataNew = cheerioAst2SvgoAst($i);
+  // cheerio ast back to svgo ast
+  var dataNew = cheerioSupport.cheerioAst2SvgoAst($i);
   return dataNew;
 };

From 2fb2be9ecbd9d00a13de82dc2be814e9af6b7408 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 10 Oct 2016 19:40:19 +0200
Subject: [PATCH 020/162] Remove juice module for now until node compatibility
 issue with juice has been fixed (see
 https://github.com/svg/svgo/pull/592#issuecomment-252683045).

---
 package.json            |  1 -
 plugins/inlineStyles.js | 15 +++++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index f711c2ce3..1a5354016 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,6 @@
     "colors": "~1.1.2",
     "csso": "^2.2.1",
     "js-yaml": "~3.6.1",
-    "juice": "^2.0.0",
     "mkdirp": "~0.5.1",
     "sax": "~1.2.1",
     "whet.extend": "~0.9.9"
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index ed7b192f4..504ace9f5 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -5,16 +5,13 @@ exports.type = 'full';
 exports.active = true;
 
 exports.params = {
-    juice: {
-      onlyMatchedOnce: true
-    }
+  onlyMatchedOnce: true
 };
 
-exports.description = 'inline styles using the juice module';
+exports.description = 'inline styles';
 
 
-var cheerioSupport = require('../lib/svgo/cheerio-support'),
-    juice          = require('juice');
+var cheerioSupport = require('../lib/svgo/cheerio-support');
 
 
 /**
@@ -28,11 +25,9 @@ exports.fn = function(data, opts) {
   // svgo ast to cheerio ast
   var $ = cheerioSupport.svgoAst2CheerioAst(data);
 
-  juiceOpts.xmlMode = true; // juice option required for svg
-
-  var $i = juice.juiceDocument($, juiceOpts);
+  // TODO
 
   // cheerio ast back to svgo ast
-  var dataNew = cheerioSupport.cheerioAst2SvgoAst($i);
+  var dataNew = cheerioSupport.cheerioAst2SvgoAst($);
   return dataNew;
 };

From 5a7af23cf8efae54c245e4a948bc218f8d3f4b7c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 11 Oct 2016 00:53:04 +0200
Subject: [PATCH 021/162] Implement alternative inlining code (without juice).
 Adjust tests to slightly different output style. Improve tests.

---
 package.json                     |  2 +
 plugins/inlineStyles.js          | 90 ++++++++++++++++++++++++++++++--
 test/plugins/inlineStyles.02.svg |  2 +-
 test/plugins/inlineStyles.03.svg |  7 ++-
 test/plugins/inlineStyles.05.svg |  2 +-
 test/plugins/inlineStyles.06.svg |  2 +-
 6 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 1a5354016..ae6938752 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,8 @@
     "js-yaml": "~3.6.1",
     "mkdirp": "~0.5.1",
     "sax": "~1.2.1",
+    "specificity": "^0.3.0",
+    "stable": "^0.1.5",
     "whet.extend": "~0.9.9"
   },
   "devDependencies": {
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 504ace9f5..a4e39993d 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -11,7 +11,10 @@ exports.params = {
 exports.description = 'inline styles';
 
 
-var cheerioSupport = require('../lib/svgo/cheerio-support');
+var cheerioSupport = require('../lib/svgo/cheerio-support'),
+    SPECIFICITY    = require('specificity'),
+    stable         = require('stable'),
+    csso           = require('csso');
 
 
 /**
@@ -20,12 +23,93 @@ var cheerioSupport = require('../lib/svgo/cheerio-support');
   * @author strarsis <strarsis@gmail.com>
   */
 exports.fn = function(data, opts) {
-  var juiceOpts = opts.juice;
 
   // svgo ast to cheerio ast
   var $ = cheerioSupport.svgoAst2CheerioAst(data);
 
-  // TODO
+  var $styles    = $('style');
+  var styleItems = [];
+  var selectorItems = [];
+  $styles.each(function(si, $style) {
+    if($style.children.length == 0) {
+      return;
+    }
+
+    let cssStr = $style.children[0].data;
+    if(cssStr.length == 0) {
+      return;
+    }
+
+    let cssAst = csso.parse(cssStr, {
+                   context: 'stylesheet'
+                 });
+    styleItems.push({
+      $style: $style,
+      cssAst: cssAst
+    });
+
+    csso.walk(cssAst, function(node, item, list) {
+      // single selector
+      if(node.type === 'SimpleSelector') {
+        let selectorStr  = csso.translate(node);
+        let selectorItem = {
+          selectorStr:        selectorStr,
+          simpleSelectorItem: item,
+          rulesetNode:        this.ruleset
+        };
+        selectorItems.push(selectorItem);
+      }
+    });
+  });
+
+  // stable sort selectors by specificity
+  var selectorItemsSorted = stable(selectorItems, function(item1, item2) {
+    return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
+  });
+
+  for(let selectorItem of selectorItemsSorted) {
+    let $selectedEls = $(selectorItem.selectorStr);
+    $selectedEls.each(function(i, el) {
+      let $el = $(this);
+      let elInlineCss = $el.css();
+      csso.walk(selectorItem.rulesetNode, function(node, item, list) {
+        if(node.type !== 'Declaration') {
+          return;
+        }
+        let propertyName  = node.property.name,
+            propertyValue = csso.translate(node.value);
+        $el.css(propertyName, propertyValue);
+      });
+      // re-apply the inline css (to preserve specificity):
+      $el.css(elInlineCss);
+    });
+
+    if($selectedEls.length > 0) {
+      // clean up matching simple selectors
+      selectorItem.rulesetNode.selector.selectors.remove(selectorItem.simpleSelectorItem);
+    }
+  }
+
+  // clean up rulesets without any selectors left
+  for(let styleItem of styleItems) {
+    csso.walk(styleItem.cssAst, function(node, item, list) {
+      // clean up rulesets without any selectors left
+      if(node.type === 'Ruleset' &&
+         node.selector.selectors.head == null) {
+          list.remove(item);
+      }
+    });
+  }
+
+  // update the css selectors / blocks
+  for(let styleItem of styleItems) {
+    // clean up now emtpy style elements
+    if(styleItem.cssAst.rules.isEmpty()){
+      $styles.remove(styleItem.$style);
+      continue;
+    }
+    styleItem.$style.children[0].data = csso.translate(styleItem.cssAst);
+  }
 
   // cheerio ast back to svgo ast
   var dataNew = cheerioSupport.cheerioAst2SvgoAst($);
diff --git a/test/plugins/inlineStyles.02.svg b/test/plugins/inlineStyles.02.svg
index 14df11e56..9998f51d5 100644
--- a/test/plugins/inlineStyles.02.svg
+++ b/test/plugins/inlineStyles.02.svg
@@ -11,5 +11,5 @@
     <style>
         .st2{fill:red}
     </style>
-    <rect width="100" height="100" class="st0" style="fill: red; stroke-width: 3; stroke: blue;"/>
+    <rect width="100" height="100" class="st0" style="stroke-width: 3; stroke: blue; fill: red;"/>
 </svg>
diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index 3d31ce343..31fb7b13c 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -1,7 +1,6 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0,.st2{fill:red;}
-        .st1{color: yellow;}
+        #test2{color:blue;fill:blue}.st0,.st2{fill:red}.st1{color:yellow}#test1{color:blue}
     </style>
     <rect width="100" height="100" class="st0 st1" style="stroke-width:3;stroke:blue;"/>
 </svg>
@@ -10,8 +9,8 @@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st2{fill:red}
+        #test2{color:blue;fill:blue}.st2{fill:red}#test1{color:blue}
     </style>
-    <rect width="100" height="100" class="st0 st1" style="fill: red; color: yellow; stroke-width: 3; stroke: blue;"/>
+    <rect width="100" height="100" class="st0 st1" style="stroke-width: 3; stroke: blue; fill: red; color: yellow;"/>
 </svg>
 
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
index f1d0748cc..84c7bb4d9 100644
--- a/test/plugins/inlineStyles.05.svg
+++ b/test/plugins/inlineStyles.05.svg
@@ -14,6 +14,6 @@
     <style>
         @media screen and (max-width: 200px){.st1{display:none}}
     </style>
-    <rect width="100" height="100" class="st0" style="fill: red; color: yellow; stroke-width: 3; stroke: blue;"/>
+    <rect width="100" height="100" class="st0" style="stroke-width: 3; stroke: blue; fill: red; color: yellow;"/>
 </svg>
 
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
index 09cad3021..65ff1a6a6 100644
--- a/test/plugins/inlineStyles.06.svg
+++ b/test/plugins/inlineStyles.06.svg
@@ -8,6 +8,6 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill: red; stroke-width: 3; stroke: blue;"/>
+    <rect width="100" height="100" class="st0" style="stroke-width: 3; stroke: blue; fill: red;"/>
 </svg>
 

From a1f1e32e3873f6488bcfd8d4b1b261861c28fb3d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 11 Oct 2016 00:57:33 +0200
Subject: [PATCH 022/162] Implement feature for skipping selectors that match
 more than once. Add further test.

---
 plugins/inlineStyles.js          |  6 +++++-
 test/plugins/inlineStyles.07.svg | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 test/plugins/inlineStyles.07.svg

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index a4e39993d..4efc2a1ab 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -8,7 +8,7 @@ exports.params = {
   onlyMatchedOnce: true
 };
 
-exports.description = 'inline styles';
+exports.description = 'inline styles (optionally skip selectors that match more than once)';
 
 
 var cheerioSupport = require('../lib/svgo/cheerio-support'),
@@ -69,6 +69,10 @@ exports.fn = function(data, opts) {
 
   for(let selectorItem of selectorItemsSorted) {
     let $selectedEls = $(selectorItem.selectorStr);
+    if(opts.onlyMatchedOnce && $selectedEls.length > 1) {
+      // skip selectors that match more than once if option onlyMatchedOnce is turned on
+      continue;
+    }
     $selectedEls.each(function(i, el) {
       let $el = $(this);
       let elInlineCss = $el.css();
diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
new file mode 100644
index 000000000..6bb4152f1
--- /dev/null
+++ b/test/plugins/inlineStyles.07.svg
@@ -0,0 +1,18 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{fill:red}.st1{fill:blue}
+    </style>
+    <rect width="100" height="100" class="st0 st1" style="stroke-width:3;stroke:blue;"/>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{fill:red}
+    </style>
+    <rect width="100" height="100" class="st0 st1" style="stroke-width: 3; stroke: blue; fill: blue;"/>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+</svg>
+

From 30f01a234d244249ff03c2a5f5c40ad56c1fcb29 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 11 Oct 2016 01:00:22 +0200
Subject: [PATCH 023/162] Fix jshint errors.

---
 lib/svgo/cheerio-support.js | 350 ++++++++++++++++++------------------
 plugins/inlineStyles.js     |   6 +-
 2 files changed, 179 insertions(+), 177 deletions(-)

diff --git a/lib/svgo/cheerio-support.js b/lib/svgo/cheerio-support.js
index f343a7efa..8d11f75d0 100644
--- a/lib/svgo/cheerio-support.js
+++ b/lib/svgo/cheerio-support.js
@@ -1,175 +1,177 @@
-var cheerio = require('cheerio'),
-    JSAPI   = require('./jsAPI.js');
-
-function monkeysSvgo(item, callFn, arg) {
-  item.content.forEach(function(childItem) {
-    if(callFn(item, childItem, arg) && !childItem.isEmpty()) { // recurse
-      monkeysSvgo(childItem, callFn, arg);
-    }
-  });
-}
-
-function isSvgoElem(elem) {
-  return typeof elem !== 'undefined';
-}
-
-function cheerioLoadXml(xml) {
-  return cheerio.load(xml, { xmlMode: true });
-}
-function getXmlTag(elem) {
-  return '<' + elem + '>';
-}
-function makeCheerioElem(elem) {
-  return cheerioLoadXml(getXmlTag(elem));
-}
-function makeCheerioInst(elem) {
-  return makeCheerioElem(elem)(elem);
-}
-
-function parsePrefixable(fullName) {
-  var a = fullName.split(':');
-  if(a.length == 1) {
-    return { name: a[0] };
-  }
-  return { prefix: a[0], name: a[1] };
-}
-
-function processSvgoElem(pae, ae, $) {
-  // note: <xml> element skipped by svgo parser
-
-  if(pae.elem == '#document') {
-    pae.$ = $; // attach top cheerio ast node to top svgo ast node
-  }
-
-  var textToElem = pae;
-  if(isSvgoElem(ae.elem)) {
-    var nameInfo = parsePrefixable(ae.elem);
-
-    ae.$ = makeCheerioInst(nameInfo.name);
-    pae.$.append(ae.$);
-
-    if(ae.attrs && Object.keys(ae.attrs).length > 0) {
-      for(var attrKey in ae.attrs) {
-        var attr = ae.attrs[attrKey];
-
-        var attrNamePrefixed = '';
-        if(attr.prefix) {
-          attrNamePrefixed = attr.prefix + ':';
-        }
-        attrNamePrefixed = attrNamePrefixed + attr.name;
-
-        ae.$.attr(attrNamePrefixed, attr.value);
-      }
-    }
-
-    if(nameInfo.prefix) {
-      ae.$.prefix = nameInfo.prefix;
-    }
-
-    textToElem = ae;
-  }
-
-  if(typeof ae.text !== 'undefined') {
-    textToElem.$.text(ae.text);
-  }
-
-  return true;
-}
-
-function createEmptyCheerioDoc() {
-  var document  = makeCheerioElem('dummy');
-  var $document = document.root().empty();
-  return $document;
-}
-
-function svgoAst2CheerioAst(data) {
-  var $document = createEmptyCheerioDoc();
-  monkeysSvgo(data, processSvgoElem, $document);
-  var $documentProper = cheerioLoadXml($document.html()); // reload html in cheerio for proper cheerio instance
-  return $documentProper;
-}
-
-
-function monkeysCheerio($item, callFn, arg) {
-  if(typeof $item.children === 'object') {
-    for(var childItemIndex in $item.children) {
-      var $childItem = $item.children[ childItemIndex ];
-      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // recurse
-        monkeysCheerio($childItem, callFn, arg);
-      }
-    } 
-  } else if(typeof $item.children === 'function') {
-    $item.children().each(function(childItemIndex, $childItem) {
-      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // "
-        monkeysCheerio($childItem, callFn, arg);
-      }
-    });
-  } else {
-    return;
-  }
-}
-
-function isCheerioElem($elem) {
-  return typeof $elem !== 'undefined';
-}
-function isCheerioText($elem) {
-  return $elem.type == 'text';
-}
-
-function makeSvgoElem(elem, parentElem) {
-  return new JSAPI({ elem: elem }, parentElem);
-}
-function makeSvgoText(text, parentElem) {
-  return new JSAPI({ text: text }, parentElem);
-}
-
-function processCheerioElem($pae, $ae, s) {
-
-  if($pae.name == 'root') {
-    $pae.s = s; // attach top svgo ast node to top cheerio ast node
-  }
-
-  var $textToElem = $pae;
-  if(isCheerioElem($ae) && !isCheerioText($ae)) {
-    $ae.s = makeSvgoElem($ae.name, $pae.s);
-
-    $pae.s.content = $pae.s.content || [];
-    $pae.s.content.push($ae.s);
-
-
-    if($ae.attribs && Object.keys($ae.attribs).length > 0) {
-      for(var attrName in $ae.attribs) {
-        var attrValue    = $ae.attribs[attrName];
-        var attrNameInfo = parsePrefixable(attrName);
-        $ae.s.addAttr({
-          name:   attrNameInfo.name,
-          prefix: attrNameInfo.prefix || '', // explicit empty string otherwise expected
-          local:  attrNameInfo.name,
-          value:  attrValue
-        });
-      }
-    }
-
-    $textToElem = $ae;
-  }
-
-
-  if(isCheerioText($ae)) {
-    $pae.s.content = $pae.s.content || [];
-
-    $textToElem.s.content.push( makeSvgoText($ae.data, $pae.s) );
-  }
-
-  return true;
-}
-
-function cheerioAst2SvgoAst($) {
-  var data = makeSvgoElem('#document');
-  var $document = $.root()[0];
-  monkeysCheerio($document, processCheerioElem, data);
-  return data;
-}
-
-
- module.exports.svgoAst2CheerioAst = svgoAst2CheerioAst;
+'use strict';
+
+var cheerio = require('cheerio'),
+    JSAPI   = require('./jsAPI.js');
+
+function monkeysSvgo(item, callFn, arg) {
+  item.content.forEach(function(childItem) {
+    if(callFn(item, childItem, arg) && !childItem.isEmpty()) { // recurse
+      monkeysSvgo(childItem, callFn, arg);
+    }
+  });
+}
+
+function isSvgoElem(elem) {
+  return typeof elem !== 'undefined';
+}
+
+function cheerioLoadXml(xml) {
+  return cheerio.load(xml, { xmlMode: true });
+}
+function getXmlTag(elem) {
+  return '<' + elem + '>';
+}
+function makeCheerioElem(elem) {
+  return cheerioLoadXml(getXmlTag(elem));
+}
+function makeCheerioInst(elem) {
+  return makeCheerioElem(elem)(elem);
+}
+
+function parsePrefixable(fullName) {
+  var a = fullName.split(':');
+  if(a.length == 1) {
+    return { name: a[0] };
+  }
+  return { prefix: a[0], name: a[1] };
+}
+
+function processSvgoElem(pae, ae, $) {
+  // note: <xml> element skipped by svgo parser
+
+  if(pae.elem == '#document') {
+    pae.$ = $; // attach top cheerio ast node to top svgo ast node
+  }
+
+  var textToElem = pae;
+  if(isSvgoElem(ae.elem)) {
+    var nameInfo = parsePrefixable(ae.elem);
+
+    ae.$ = makeCheerioInst(nameInfo.name);
+    pae.$.append(ae.$);
+
+    if(ae.attrs && Object.keys(ae.attrs).length > 0) {
+      for(var attrKey in ae.attrs) {
+        var attr = ae.attrs[attrKey];
+
+        var attrNamePrefixed = '';
+        if(attr.prefix) {
+          attrNamePrefixed = attr.prefix + ':';
+        }
+        attrNamePrefixed = attrNamePrefixed + attr.name;
+
+        ae.$.attr(attrNamePrefixed, attr.value);
+      }
+    }
+
+    if(nameInfo.prefix) {
+      ae.$.prefix = nameInfo.prefix;
+    }
+
+    textToElem = ae;
+  }
+
+  if(typeof ae.text !== 'undefined') {
+    textToElem.$.text(ae.text);
+  }
+
+  return true;
+}
+
+function createEmptyCheerioDoc() {
+  var document  = makeCheerioElem('dummy');
+  var $document = document.root().empty();
+  return $document;
+}
+
+function svgoAst2CheerioAst(data) {
+  var $document = createEmptyCheerioDoc();
+  monkeysSvgo(data, processSvgoElem, $document);
+  var $documentProper = cheerioLoadXml($document.html()); // reload html in cheerio for proper cheerio instance
+  return $documentProper;
+}
+
+
+function monkeysCheerio($item, callFn, arg) {
+  if(typeof $item.children === 'object') {
+    for(var childItemIndex in $item.children) {
+      var $childItem = $item.children[ childItemIndex ];
+      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // recurse
+        monkeysCheerio($childItem, callFn, arg);
+      }
+    } 
+  } else if(typeof $item.children === 'function') {
+    $item.children().each(function(childItemIndex, $childItem) {
+      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // "
+        monkeysCheerio($childItem, callFn, arg);
+      }
+    });
+  } else {
+    return;
+  }
+}
+
+function isCheerioElem($elem) {
+  return typeof $elem !== 'undefined';
+}
+function isCheerioText($elem) {
+  return $elem.type == 'text';
+}
+
+function makeSvgoElem(elem, parentElem) {
+  return new JSAPI({ elem: elem }, parentElem);
+}
+function makeSvgoText(text, parentElem) {
+  return new JSAPI({ text: text }, parentElem);
+}
+
+function processCheerioElem($pae, $ae, s) {
+
+  if($pae.name == 'root') {
+    $pae.s = s; // attach top svgo ast node to top cheerio ast node
+  }
+
+  var $textToElem = $pae;
+  if(isCheerioElem($ae) && !isCheerioText($ae)) {
+    $ae.s = makeSvgoElem($ae.name, $pae.s);
+
+    $pae.s.content = $pae.s.content || [];
+    $pae.s.content.push($ae.s);
+
+
+    if($ae.attribs && Object.keys($ae.attribs).length > 0) {
+      for(var attrName in $ae.attribs) {
+        var attrValue    = $ae.attribs[attrName];
+        var attrNameInfo = parsePrefixable(attrName);
+        $ae.s.addAttr({
+          name:   attrNameInfo.name,
+          prefix: attrNameInfo.prefix || '', // explicit empty string otherwise expected
+          local:  attrNameInfo.name,
+          value:  attrValue
+        });
+      }
+    }
+
+    $textToElem = $ae;
+  }
+
+
+  if(isCheerioText($ae)) {
+    $pae.s.content = $pae.s.content || [];
+
+    $textToElem.s.content.push( makeSvgoText($ae.data, $pae.s) );
+  }
+
+  return true;
+}
+
+function cheerioAst2SvgoAst($) {
+  var data = makeSvgoElem('#document');
+  var $document = $.root()[0];
+  monkeysCheerio($document, processCheerioElem, data);
+  return data;
+}
+
+
+ module.exports.svgoAst2CheerioAst = svgoAst2CheerioAst;
  module.exports.cheerioAst2SvgoAst = cheerioAst2SvgoAst;
\ No newline at end of file
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 4efc2a1ab..a92e9d4e1 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -48,7 +48,7 @@ exports.fn = function(data, opts) {
       cssAst: cssAst
     });
 
-    csso.walk(cssAst, function(node, item, list) {
+    csso.walk(cssAst, function(node, item) {
       // single selector
       if(node.type === 'SimpleSelector') {
         let selectorStr  = csso.translate(node);
@@ -73,10 +73,10 @@ exports.fn = function(data, opts) {
       // skip selectors that match more than once if option onlyMatchedOnce is turned on
       continue;
     }
-    $selectedEls.each(function(i, el) {
+    $selectedEls.each(function() {
       let $el = $(this);
       let elInlineCss = $el.css();
-      csso.walk(selectorItem.rulesetNode, function(node, item, list) {
+      csso.walk(selectorItem.rulesetNode, function(node) {
         if(node.type !== 'Declaration') {
           return;
         }

From 91554efd70747b4cfbca141af88f87016263e908 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 11 Oct 2016 01:10:17 +0200
Subject: [PATCH 024/162] Fix jshint issue on node v0.12.x. Improve code
 cosmetically.

---
 plugins/inlineStyles.js | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index a92e9d4e1..aed1e1375 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -1,6 +1,6 @@
 'use strict';
 
-exports.type = 'full';
+exports.type   = 'full';
 
 exports.active = true;
 
@@ -27,20 +27,20 @@ exports.fn = function(data, opts) {
   // svgo ast to cheerio ast
   var $ = cheerioSupport.svgoAst2CheerioAst(data);
 
-  var $styles    = $('style');
-  var styleItems = [];
+  var $styles       = $('style');
+  var styleItems    = [];
   var selectorItems = [];
   $styles.each(function(si, $style) {
     if($style.children.length == 0) {
       return;
     }
 
-    let cssStr = $style.children[0].data;
+    var cssStr = $style.children[0].data;
     if(cssStr.length == 0) {
       return;
     }
 
-    let cssAst = csso.parse(cssStr, {
+    var cssAst = csso.parse(cssStr, {
                    context: 'stylesheet'
                  });
     styleItems.push({
@@ -51,8 +51,8 @@ exports.fn = function(data, opts) {
     csso.walk(cssAst, function(node, item) {
       // single selector
       if(node.type === 'SimpleSelector') {
-        let selectorStr  = csso.translate(node);
-        let selectorItem = {
+        var selectorStr  = csso.translate(node);
+        var selectorItem = {
           selectorStr:        selectorStr,
           simpleSelectorItem: item,
           rulesetNode:        this.ruleset
@@ -67,20 +67,20 @@ exports.fn = function(data, opts) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
 
-  for(let selectorItem of selectorItemsSorted) {
-    let $selectedEls = $(selectorItem.selectorStr);
+  for(var selectorItem of selectorItemsSorted) {
+    var $selectedEls = $(selectorItem.selectorStr);
     if(opts.onlyMatchedOnce && $selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is turned on
       continue;
     }
     $selectedEls.each(function() {
-      let $el = $(this);
-      let elInlineCss = $el.css();
+      var $el = $(this);
+      var elInlineCss = $el.css();
       csso.walk(selectorItem.rulesetNode, function(node) {
         if(node.type !== 'Declaration') {
           return;
         }
-        let propertyName  = node.property.name,
+        var propertyName  = node.property.name,
             propertyValue = csso.translate(node.value);
         $el.css(propertyName, propertyValue);
       });
@@ -94,8 +94,11 @@ exports.fn = function(data, opts) {
     }
   }
 
+
+  var styleItem = {};
+
   // clean up rulesets without any selectors left
-  for(let styleItem of styleItems) {
+  for(styleItem of styleItems) {
     csso.walk(styleItem.cssAst, function(node, item, list) {
       // clean up rulesets without any selectors left
       if(node.type === 'Ruleset' &&
@@ -106,7 +109,7 @@ exports.fn = function(data, opts) {
   }
 
   // update the css selectors / blocks
-  for(let styleItem of styleItems) {
+  for(styleItem of styleItems) {
     // clean up now emtpy style elements
     if(styleItem.cssAst.rules.isEmpty()){
       $styles.remove(styleItem.$style);
@@ -115,6 +118,7 @@ exports.fn = function(data, opts) {
     styleItem.$style.children[0].data = csso.translate(styleItem.cssAst);
   }
 
+
   // cheerio ast back to svgo ast
   var dataNew = cheerioSupport.cheerioAst2SvgoAst($);
   return dataNew;

From e123e293ea966e339eda864eba6a5cbecb07881a Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 13 Oct 2016 15:01:10 +0200
Subject: [PATCH 025/162] Improve comment.

---
 plugins/inlineStyles.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index aed1e1375..b7037f0af 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -100,7 +100,6 @@ exports.fn = function(data, opts) {
   // clean up rulesets without any selectors left
   for(styleItem of styleItems) {
     csso.walk(styleItem.cssAst, function(node, item, list) {
-      // clean up rulesets without any selectors left
       if(node.type === 'Ruleset' &&
          node.selector.selectors.head == null) {
           list.remove(item);

From ebcd712bb982801fe9d841241ae90bea6e120e1b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 13 Oct 2016 15:35:26 +0200
Subject: [PATCH 026/162] Add comments.

---
 lib/svgo/cheerio-support.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/svgo/cheerio-support.js b/lib/svgo/cheerio-support.js
index 8d11f75d0..c693a101f 100644
--- a/lib/svgo/cheerio-support.js
+++ b/lib/svgo/cheerio-support.js
@@ -94,6 +94,7 @@ function svgoAst2CheerioAst(data) {
 
 function monkeysCheerio($item, callFn, arg) {
   if(typeof $item.children === 'object') {
+    // children   object
     for(var childItemIndex in $item.children) {
       var $childItem = $item.children[ childItemIndex ];
       if(callFn($item, $childItem, arg) && $item.children.length > 0) { // recurse
@@ -101,6 +102,7 @@ function monkeysCheerio($item, callFn, arg) {
       }
     } 
   } else if(typeof $item.children === 'function') {
+    // children() function
     $item.children().each(function(childItemIndex, $childItem) {
       if(callFn($item, $childItem, arg) && $item.children.length > 0) { // "
         monkeysCheerio($childItem, callFn, arg);

From 6740ab00234cc25aa8b0f642fd0fddabd5335751 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 13 Oct 2016 16:01:15 +0200
Subject: [PATCH 027/162] Use for-in loops instead for-of loops for
 compatibility for node 0.10.

---
 plugins/inlineStyles.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index b7037f0af..162833014 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -67,7 +67,8 @@ exports.fn = function(data, opts) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
 
-  for(var selectorItem of selectorItemsSorted) {
+  for(var selectorItemIndex in selectorItemsSorted) {
+    var selectorItem = selectorItemsSorted[selectorItemIndex];
     var $selectedEls = $(selectorItem.selectorStr);
     if(opts.onlyMatchedOnce && $selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is turned on
@@ -95,10 +96,12 @@ exports.fn = function(data, opts) {
   }
 
 
-  var styleItem = {};
+  var styleItemIndex = 0,
+      styleItem      = {};
 
   // clean up rulesets without any selectors left
-  for(styleItem of styleItems) {
+  for(styleItemIndex in styleItems) {
+    styleItem = styleItems[styleItemIndex];
     csso.walk(styleItem.cssAst, function(node, item, list) {
       if(node.type === 'Ruleset' &&
          node.selector.selectors.head == null) {
@@ -108,7 +111,8 @@ exports.fn = function(data, opts) {
   }
 
   // update the css selectors / blocks
-  for(styleItem of styleItems) {
+  for(styleItemIndex in styleItems) {
+    styleItem = styleItems[styleItemIndex];
     // clean up now emtpy style elements
     if(styleItem.cssAst.rules.isEmpty()){
       $styles.remove(styleItem.$style);

From 150868db004659e3de016e42b6613eb5c563d669 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 18 Nov 2016 17:17:48 +0100
Subject: [PATCH 028/162] Replace juice with css-select.

---
 lib/ext/add-parent-refs.js       |  22 ++++
 lib/ext/domutils-svgo.js         | 108 +++++++++++++++++++
 lib/svgo/cheerio-support.js      | 179 -------------------------------
 package.json                     |   3 +-
 plugins/inlineStyles.js          | 131 ++++++++++++----------
 test/plugins/inlineStyles.02.svg |   2 +-
 test/plugins/inlineStyles.03.svg |   2 +-
 test/plugins/inlineStyles.04.svg |   4 +-
 test/plugins/inlineStyles.05.svg |   2 +-
 test/plugins/inlineStyles.06.svg |   2 +-
 test/plugins/inlineStyles.07.svg |   2 +-
 11 files changed, 214 insertions(+), 243 deletions(-)
 create mode 100644 lib/ext/add-parent-refs.js
 create mode 100644 lib/ext/domutils-svgo.js
 delete mode 100644 lib/svgo/cheerio-support.js

diff --git a/lib/ext/add-parent-refs.js b/lib/ext/add-parent-refs.js
new file mode 100644
index 000000000..9e5be1073
--- /dev/null
+++ b/lib/ext/add-parent-refs.js
@@ -0,0 +1,22 @@
+'use strict';
+
+// Adds parent reference to each item 
+// (except the topmost root item which got no parent).
+
+var addParentRefs = function(data) {
+  if(!data.content) {
+    return;
+  }
+  var i      = 0,
+      length = data.content.length,
+      item;
+  while(i < length) {
+    item = data.content[i];
+    item.parent = data;
+    addParentRefs(item);
+    i++;
+  }
+  return data;
+};
+
+module.exports = addParentRefs;
diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
new file mode 100644
index 000000000..7224255b3
--- /dev/null
+++ b/lib/ext/domutils-svgo.js
@@ -0,0 +1,108 @@
+'use strict';
+
+// DOMUtils API for SVGO AST (used by css-select)
+
+var domUtilsSvgo = {};
+
+domUtilsSvgo.isTag = function(node) {
+  return node.elem;
+};
+
+domUtilsSvgo.getParent = function(node) {
+  return node.parent || null; // root item my be passed which got no parent
+};
+
+domUtilsSvgo.getChildren = function(node) {
+  var childNodes = [];
+  node.content.forEach(function(childNode) {
+    childNodes.push(childNode);
+  });
+  return childNodes;
+};
+
+domUtilsSvgo.getSiblings = function(node) {
+  var parent = domUtilsSvgo.getParent(node);
+  return domUtilsSvgo.getChildren(parent);
+};
+
+domUtilsSvgo.getName = function(node) {
+  return node.elem;
+};
+
+domUtilsSvgo.getText = function(node) {
+  var nodeText = node.content[0].text || node.content[0].cdata || [],
+          DATA = nodeText.indexOf('>') >= 0 || nodeText.indexOf('<') >= 0 ? 'cdata' : 'text';
+  return DATA;
+};
+
+domUtilsSvgo.hasAttrib = function(node, name) {
+  return node.hasAttr(name);
+};
+
+domUtilsSvgo.findAll = function(test, nodes) {
+  var result = [];
+	for(var i = 0, j = nodes.length; i < j; i++){
+		if(!domUtilsSvgo.isTag(nodes[i])) continue;
+		if(test(nodes[i])) result.push(nodes[i]); // TODO!
+
+		if(nodes[i].content && nodes[i].content.length > 0){
+			result = result.concat(domUtilsSvgo.findAll(test, nodes[i].content));
+		}
+	}
+	return result;
+};
+
+domUtilsSvgo.findOne = function(test, nodes) {
+  var node = null;
+
+	for(var i = 0, l = nodes.length; i < l && !node; i++){
+		if(!domUtilsSvgo.isTag(nodes[i])){
+			continue;
+		} else if(test(nodes[i])){
+			node = nodes[i];
+		} else if(nodes[i].content && nodes[i].content.length > 0){
+			node = domUtilsSvgo.findOne(test, nodes[i].content);
+		}
+	}
+
+	return node;
+};
+
+// Given an array of nodes, remove any member that is contained by another.
+domUtilsSvgo.removeSubsets = function(nodes) {
+	var idx = nodes.length, node, ancestor, replace;
+
+	// Check if each node (or one of its ancestors) is already contained in the
+	// array.
+	while (--idx > -1) {
+		node = ancestor = nodes[idx];
+
+		// Temporarily remove the node under consideration
+		nodes[idx] = null;
+		replace = true;
+
+		while (ancestor) {
+			if (nodes.indexOf(ancestor) > -1) {
+				replace = false;
+				nodes.splice(idx, 1);
+				break;
+			}
+			ancestor = domUtilsSvgo.getParent(ancestor);
+		}
+
+		// If the node has been found to be unique, re-insert it.
+		if (replace) {
+			nodes[idx] = node;
+		}
+	}
+
+	return nodes;
+};
+
+domUtilsSvgo.getAttributeValue = function(elem, name) {
+  var attr = elem.attr(name);
+  return attr && attr.value;
+};
+
+
+module.exports = domUtilsSvgo;
diff --git a/lib/svgo/cheerio-support.js b/lib/svgo/cheerio-support.js
deleted file mode 100644
index c693a101f..000000000
--- a/lib/svgo/cheerio-support.js
+++ /dev/null
@@ -1,179 +0,0 @@
-'use strict';
-
-var cheerio = require('cheerio'),
-    JSAPI   = require('./jsAPI.js');
-
-function monkeysSvgo(item, callFn, arg) {
-  item.content.forEach(function(childItem) {
-    if(callFn(item, childItem, arg) && !childItem.isEmpty()) { // recurse
-      monkeysSvgo(childItem, callFn, arg);
-    }
-  });
-}
-
-function isSvgoElem(elem) {
-  return typeof elem !== 'undefined';
-}
-
-function cheerioLoadXml(xml) {
-  return cheerio.load(xml, { xmlMode: true });
-}
-function getXmlTag(elem) {
-  return '<' + elem + '>';
-}
-function makeCheerioElem(elem) {
-  return cheerioLoadXml(getXmlTag(elem));
-}
-function makeCheerioInst(elem) {
-  return makeCheerioElem(elem)(elem);
-}
-
-function parsePrefixable(fullName) {
-  var a = fullName.split(':');
-  if(a.length == 1) {
-    return { name: a[0] };
-  }
-  return { prefix: a[0], name: a[1] };
-}
-
-function processSvgoElem(pae, ae, $) {
-  // note: <xml> element skipped by svgo parser
-
-  if(pae.elem == '#document') {
-    pae.$ = $; // attach top cheerio ast node to top svgo ast node
-  }
-
-  var textToElem = pae;
-  if(isSvgoElem(ae.elem)) {
-    var nameInfo = parsePrefixable(ae.elem);
-
-    ae.$ = makeCheerioInst(nameInfo.name);
-    pae.$.append(ae.$);
-
-    if(ae.attrs && Object.keys(ae.attrs).length > 0) {
-      for(var attrKey in ae.attrs) {
-        var attr = ae.attrs[attrKey];
-
-        var attrNamePrefixed = '';
-        if(attr.prefix) {
-          attrNamePrefixed = attr.prefix + ':';
-        }
-        attrNamePrefixed = attrNamePrefixed + attr.name;
-
-        ae.$.attr(attrNamePrefixed, attr.value);
-      }
-    }
-
-    if(nameInfo.prefix) {
-      ae.$.prefix = nameInfo.prefix;
-    }
-
-    textToElem = ae;
-  }
-
-  if(typeof ae.text !== 'undefined') {
-    textToElem.$.text(ae.text);
-  }
-
-  return true;
-}
-
-function createEmptyCheerioDoc() {
-  var document  = makeCheerioElem('dummy');
-  var $document = document.root().empty();
-  return $document;
-}
-
-function svgoAst2CheerioAst(data) {
-  var $document = createEmptyCheerioDoc();
-  monkeysSvgo(data, processSvgoElem, $document);
-  var $documentProper = cheerioLoadXml($document.html()); // reload html in cheerio for proper cheerio instance
-  return $documentProper;
-}
-
-
-function monkeysCheerio($item, callFn, arg) {
-  if(typeof $item.children === 'object') {
-    // children   object
-    for(var childItemIndex in $item.children) {
-      var $childItem = $item.children[ childItemIndex ];
-      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // recurse
-        monkeysCheerio($childItem, callFn, arg);
-      }
-    } 
-  } else if(typeof $item.children === 'function') {
-    // children() function
-    $item.children().each(function(childItemIndex, $childItem) {
-      if(callFn($item, $childItem, arg) && $item.children.length > 0) { // "
-        monkeysCheerio($childItem, callFn, arg);
-      }
-    });
-  } else {
-    return;
-  }
-}
-
-function isCheerioElem($elem) {
-  return typeof $elem !== 'undefined';
-}
-function isCheerioText($elem) {
-  return $elem.type == 'text';
-}
-
-function makeSvgoElem(elem, parentElem) {
-  return new JSAPI({ elem: elem }, parentElem);
-}
-function makeSvgoText(text, parentElem) {
-  return new JSAPI({ text: text }, parentElem);
-}
-
-function processCheerioElem($pae, $ae, s) {
-
-  if($pae.name == 'root') {
-    $pae.s = s; // attach top svgo ast node to top cheerio ast node
-  }
-
-  var $textToElem = $pae;
-  if(isCheerioElem($ae) && !isCheerioText($ae)) {
-    $ae.s = makeSvgoElem($ae.name, $pae.s);
-
-    $pae.s.content = $pae.s.content || [];
-    $pae.s.content.push($ae.s);
-
-
-    if($ae.attribs && Object.keys($ae.attribs).length > 0) {
-      for(var attrName in $ae.attribs) {
-        var attrValue    = $ae.attribs[attrName];
-        var attrNameInfo = parsePrefixable(attrName);
-        $ae.s.addAttr({
-          name:   attrNameInfo.name,
-          prefix: attrNameInfo.prefix || '', // explicit empty string otherwise expected
-          local:  attrNameInfo.name,
-          value:  attrValue
-        });
-      }
-    }
-
-    $textToElem = $ae;
-  }
-
-
-  if(isCheerioText($ae)) {
-    $pae.s.content = $pae.s.content || [];
-
-    $textToElem.s.content.push( makeSvgoText($ae.data, $pae.s) );
-  }
-
-  return true;
-}
-
-function cheerioAst2SvgoAst($) {
-  var data = makeSvgoElem('#document');
-  var $document = $.root()[0];
-  monkeysCheerio($document, processCheerioElem, data);
-  return data;
-}
-
-
- module.exports.svgoAst2CheerioAst = svgoAst2CheerioAst;
- module.exports.cheerioAst2SvgoAst = cheerioAst2SvgoAst;
\ No newline at end of file
diff --git a/package.json b/package.json
index ae6938752..1c839b6f2 100644
--- a/package.json
+++ b/package.json
@@ -48,12 +48,13 @@
     "jshint": "jshint --show-non-errors ."
   },
   "dependencies": {
-    "cheerio": "^0.22.0",
     "coa": "~1.0.1",
     "colors": "~1.1.2",
+    "css-select": "^1.2.0",
     "csso": "^2.2.1",
     "js-yaml": "~3.6.1",
     "mkdirp": "~0.5.1",
+    "mock-require": "^2.0.0",
     "sax": "~1.2.1",
     "specificity": "^0.3.0",
     "stable": "^0.1.5",
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 162833014..b35bfe817 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -5,52 +5,57 @@ exports.type   = 'full';
 exports.active = true;
 
 exports.params = {
-  onlyMatchedOnce: true
+  onlyMatchedOnce:        true,
+  removeMatchedSelectors: true
 };
 
 exports.description = 'inline styles (optionally skip selectors that match more than once)';
 
 
-var cheerioSupport = require('../lib/svgo/cheerio-support'),
-    SPECIFICITY    = require('specificity'),
-    stable         = require('stable'),
-    csso           = require('csso');
+var SPECIFICITY   = require('specificity'),
+    stable        = require('stable'),
+    csso          = require('csso'),
 
+    mock          = require('mock-require'),
+    domutilsSvgo  = require('../lib/ext/domutils-svgo'),
+    addParentRefs = require('../lib/ext/add-parent-refs');
+    mock('domutils', domutilsSvgo);
+var cssSelect     = require('css-select');
 
 /**
-  * Moves styles from <style> to element styles
+  * Moves + merges styles from style elements to element styles
   *
   * @author strarsis <strarsis@gmail.com>
   */
 exports.fn = function(data, opts) {
+  data = addParentRefs(data);
 
-  // svgo ast to cheerio ast
-  var $ = cheerioSupport.svgoAst2CheerioAst(data);
+  // fetch <style/>s
+  var styleEls      = cssSelect('style', data, {xmlMode: true});
 
-  var $styles       = $('style');
-  var styleItems    = [];
-  var selectorItems = [];
-  $styles.each(function(si, $style) {
-    if($style.children.length == 0) {
-      return;
-    }
+  var styleItems    = [],
+      selectorItems = [];
+
+  var styleEl;
+  for(var styleElId in styleEls) {
+    styleEl = styleEls[styleElId];
 
-    var cssStr = $style.children[0].data;
-    if(cssStr.length == 0) {
-      return;
+    if(!styleEl.content || !styleEl.content[0] || 
+       !styleEl.content[0].text || styleEl.content[0].text.length == 0) {
+      continue;
     }
+    var cssStr = styleEl.content[0].text;
 
-    var cssAst = csso.parse(cssStr, {
-                   context: 'stylesheet'
-                 });
+    // <style/>s with CSS AST
+    var cssAst = csso.parse(cssStr, {context: 'stylesheet'});
     styleItems.push({
-      $style: $style,
-      cssAst: cssAst
+      styleEl: styleEl,
+      cssAst:  cssAst
     });
 
+    // CSS selectors with CSS rulesets
     csso.walk(cssAst, function(node, item) {
-      // single selector
-      if(node.type === 'SimpleSelector') {
+      if(node.type === 'SimpleSelector') { // single selector
         var selectorStr  = csso.translate(node);
         var selectorItem = {
           selectorStr:        selectorStr,
@@ -60,46 +65,59 @@ exports.fn = function(data, opts) {
         selectorItems.push(selectorItem);
       }
     });
-  });
+  }
 
-  // stable sort selectors by specificity
+  // stable-sort selectors by specificity
   var selectorItemsSorted = stable(selectorItems, function(item1, item2) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
 
+  // apply css to matched elements
+  var selectorItem,
+      selectedEls;
   for(var selectorItemIndex in selectorItemsSorted) {
-    var selectorItem = selectorItemsSorted[selectorItemIndex];
-    var $selectedEls = $(selectorItem.selectorStr);
-    if(opts.onlyMatchedOnce && $selectedEls.length > 1) {
-      // skip selectors that match more than once if option onlyMatchedOnce is turned on
+    selectorItem = selectorItemsSorted[selectorItemIndex];
+    selectedEls  = cssSelect(selectorItem.selectorStr, data, {xmlMode: true});
+    if(opts.onlyMatchedOnce && selectedEls.length > 1) {
+      // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;
     }
-    $selectedEls.each(function() {
-      var $el = $(this);
-      var elInlineCss = $el.css();
-      csso.walk(selectorItem.rulesetNode, function(node) {
-        if(node.type !== 'Declaration') {
-          return;
+
+    var selectedEl;
+    for(var selectedElId in selectedEls) {
+      selectedEl = selectedEls[selectedElId];
+
+      // merge element (inline) styles + selector <style/>
+      var elInlineStyleAttr = selectedEl.attr('style'),
+          elInlineStyles    = elInlineStyleAttr.value,
+          inlineCssAst      = csso.parse(elInlineStyles, {context: 'block'});      
+
+      var newInlineCssAst   = csso.parse('', {context: 'block'}); // for empty an CSS AST (Block context)
+      csso.walk(selectorItem.rulesetNode, function(node, item) {
+        if(node.type === 'Declaration') {
+          newInlineCssAst.declarations.insert(item);
         }
-        var propertyName  = node.property.name,
-            propertyValue = csso.translate(node.value);
-        $el.css(propertyName, propertyValue);
       });
-      // re-apply the inline css (to preserve specificity):
-      $el.css(elInlineCss);
-    });
+      csso.walk(inlineCssAst, function(node, item) {
+        if(node.type === 'Declaration') {
+          newInlineCssAst.declarations.insert(item);
+        }
+      });
+      var newCss = csso.translate(newInlineCssAst);
+
+      elInlineStyleAttr.value = newCss;
+      selectedEl.addAttr(elInlineStyleAttr);
+    }
 
-    if($selectedEls.length > 0) {
-      // clean up matching simple selectors
+    if(opts.removeMatchedSelectors && selectedEls.length > 0) {
+      // clean up matching simple selectors if option removeMatchedSelectors is enabled
       selectorItem.rulesetNode.selector.selectors.remove(selectorItem.simpleSelectorItem);
     }
   }
 
-
+  // clean up <style/> rulesets without any selectors left
   var styleItemIndex = 0,
       styleItem      = {};
-
-  // clean up rulesets without any selectors left
   for(styleItemIndex in styleItems) {
     styleItem = styleItems[styleItemIndex];
     csso.walk(styleItem.cssAst, function(node, item, list) {
@@ -110,19 +128,20 @@ exports.fn = function(data, opts) {
     });
   }
 
-  // update the css selectors / blocks
+  // update the css selectors / blocks in and <style/>s themselves
+  var styleParent;
   for(styleItemIndex in styleItems) {
     styleItem = styleItems[styleItemIndex];
-    // clean up now emtpy style elements
     if(styleItem.cssAst.rules.isEmpty()){
-      $styles.remove(styleItem.$style);
+      // clean up now emtpy <style/>s
+      styleParent = styleItem.styleEl.parent;
+      styleParent.content.splice(styleParent.content.indexOf(styleItem.styleEl), 1);
       continue;
     }
-    styleItem.$style.children[0].data = csso.translate(styleItem.cssAst);
-  }
 
+    // update existing <style>s
+    styleItem.styleEl.content[0].text = csso.translate(styleItem.cssAst);
+  }
 
-  // cheerio ast back to svgo ast
-  var dataNew = cheerioSupport.cheerioAst2SvgoAst($);
-  return dataNew;
+  return data;
 };
diff --git a/test/plugins/inlineStyles.02.svg b/test/plugins/inlineStyles.02.svg
index 9998f51d5..13a1a6fa3 100644
--- a/test/plugins/inlineStyles.02.svg
+++ b/test/plugins/inlineStyles.02.svg
@@ -11,5 +11,5 @@
     <style>
         .st2{fill:red}
     </style>
-    <rect width="100" height="100" class="st0" style="stroke-width: 3; stroke: blue; fill: red;"/>
+    <rect width="100" height="100" class="st0" style="fill:red;stroke-width:3;stroke:blue"/>
 </svg>
diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index 31fb7b13c..8893eec7f 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -11,6 +11,6 @@
     <style>
         #test2{color:blue;fill:blue}.st2{fill:red}#test1{color:blue}
     </style>
-    <rect width="100" height="100" class="st0 st1" style="stroke-width: 3; stroke: blue; fill: red; color: yellow;"/>
+    <rect width="100" height="100" class="st0 st1" style="color:yellow;fill:red;stroke-width:3;stroke:blue"/>
 </svg>
 
diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
index c94b37c1e..361a56b08 100644
--- a/test/plugins/inlineStyles.04.svg
+++ b/test/plugins/inlineStyles.04.svg
@@ -1,6 +1,6 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0{fill:red;}
+        .st0{fill:blue;}
     </style>
     <rect width="100" height="100" class="st0" style="stroke-width:3;fill:red;"/>
 </svg>
@@ -8,6 +8,6 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="stroke-width: 3; fill: red;"/>
+    <rect width="100" height="100" class="st0" style="fill:blue;stroke-width:3;fill:red"/>
 </svg>
 
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
index 84c7bb4d9..2ab36d77d 100644
--- a/test/plugins/inlineStyles.05.svg
+++ b/test/plugins/inlineStyles.05.svg
@@ -14,6 +14,6 @@
     <style>
         @media screen and (max-width: 200px){.st1{display:none}}
     </style>
-    <rect width="100" height="100" class="st0" style="stroke-width: 3; stroke: blue; fill: red; color: yellow;"/>
+    <rect width="100" height="100" class="st0" style="color:yellow;fill:red;stroke-width:3;stroke:blue"/>
 </svg>
 
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
index 65ff1a6a6..1f3956b48 100644
--- a/test/plugins/inlineStyles.06.svg
+++ b/test/plugins/inlineStyles.06.svg
@@ -8,6 +8,6 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="stroke-width: 3; stroke: blue; fill: red;"/>
+    <rect width="100" height="100" class="st0" style="fill:red;stroke-width:3;stroke:blue"/>
 </svg>
 
diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
index 6bb4152f1..93868953d 100644
--- a/test/plugins/inlineStyles.07.svg
+++ b/test/plugins/inlineStyles.07.svg
@@ -12,7 +12,7 @@
     <style>
         .st0{fill:red}
     </style>
-    <rect width="100" height="100" class="st0 st1" style="stroke-width: 3; stroke: blue; fill: blue;"/>
+    <rect width="100" height="100" class="st0 st1" style="fill:blue;stroke-width:3;stroke:blue"/>
     <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
 </svg>
 

From 193d93bfcda185692c924f114e14db5e556eebec Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 18 Nov 2016 17:33:44 +0100
Subject: [PATCH 029/162] Adjust plugin to use new css-select adapter option,
 remove mocking. Add adapter/domutils API comments to svgo domutils adapter
 from updated css-select readme. Use css-select from github commit until it
 has been released to npm.

---
 lib/ext/domutils-svgo.js | 30 +++++++++++++++++++++++++++++-
 package.json             |  3 +--
 plugins/inlineStyles.js  | 12 ++++++------
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index 7224255b3..993b49a79 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -4,14 +4,20 @@
 
 var domUtilsSvgo = {};
 
+// is the node a tag?
 domUtilsSvgo.isTag = function(node) {
   return node.elem;
 };
 
+// does at least one of passed element nodes pass the test predicate?
+
+
+// get the parent of the node
 domUtilsSvgo.getParent = function(node) {
   return node.parent || null; // root item my be passed which got no parent
 };
 
+// get the node's children
 domUtilsSvgo.getChildren = function(node) {
   var childNodes = [];
   node.content.forEach(function(childNode) {
@@ -20,25 +26,35 @@ domUtilsSvgo.getChildren = function(node) {
   return childNodes;
 };
 
+/*
+  get the siblings of the node. Note that unlike jQuery's `siblings` method,
+  this is expected to include the current node as well
+  TODO/Clarify: Add current node on top to returned siblings list?
+*/
 domUtilsSvgo.getSiblings = function(node) {
   var parent = domUtilsSvgo.getParent(node);
   return domUtilsSvgo.getChildren(parent);
 };
 
+// get the name of the tag
 domUtilsSvgo.getName = function(node) {
   return node.elem;
 };
 
+// get the text content of the node, and its children if it has any
 domUtilsSvgo.getText = function(node) {
   var nodeText = node.content[0].text || node.content[0].cdata || [],
           DATA = nodeText.indexOf('>') >= 0 || nodeText.indexOf('<') >= 0 ? 'cdata' : 'text';
   return DATA;
 };
 
+// does the element have the named attribute?
 domUtilsSvgo.hasAttrib = function(node, name) {
   return node.hasAttr(name);
 };
 
+// finds all of the element nodes in the array that match the test predicate,
+// as well as any of their children that match it
 domUtilsSvgo.findAll = function(test, nodes) {
   var result = [];
 	for(var i = 0, j = nodes.length; i < j; i++){
@@ -68,7 +84,8 @@ domUtilsSvgo.findOne = function(test, nodes) {
 	return node;
 };
 
-// Given an array of nodes, remove any member that is contained by another.
+// takes an array of nodes, and removes any duplicates, as well as any nodes
+// whose ancestors are also in the array
 domUtilsSvgo.removeSubsets = function(nodes) {
 	var idx = nodes.length, node, ancestor, replace;
 
@@ -99,10 +116,21 @@ domUtilsSvgo.removeSubsets = function(nodes) {
 	return nodes;
 };
 
+// get the attribute value
 domUtilsSvgo.getAttributeValue = function(elem, name) {
   var attr = elem.attr(name);
   return attr && attr.value;
 };
 
 
+/*
+  The adapter can also optionally include an equals method, if your DOM
+  structure needs a custom equality test to compare two objects which refer
+  to the same underlying node. If not provided, `css-select` will fall back to
+  `a === b`.
+*/
+// equals: ( a:Node, b:Node ) => Boolean
+// not needed for svgo AST
+
+
 module.exports = domUtilsSvgo;
diff --git a/package.json b/package.json
index 1c839b6f2..7d2dc8ec5 100644
--- a/package.json
+++ b/package.json
@@ -50,11 +50,10 @@
   "dependencies": {
     "coa": "~1.0.1",
     "colors": "~1.1.2",
-    "css-select": "^1.2.0",
+    "css-select": "github:fb55/css-select#e109d4b3668354542c806a6b652410f135d679ae",
     "csso": "^2.2.1",
     "js-yaml": "~3.6.1",
     "mkdirp": "~0.5.1",
-    "mock-require": "^2.0.0",
     "sax": "~1.2.1",
     "specificity": "^0.3.0",
     "stable": "^0.1.5",
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index b35bfe817..50d86dcd0 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -16,11 +16,11 @@ var SPECIFICITY   = require('specificity'),
     stable        = require('stable'),
     csso          = require('csso'),
 
-    mock          = require('mock-require'),
     domutilsSvgo  = require('../lib/ext/domutils-svgo'),
-    addParentRefs = require('../lib/ext/add-parent-refs');
-    mock('domutils', domutilsSvgo);
-var cssSelect     = require('css-select');
+    addParentRefs = require('../lib/ext/add-parent-refs'),
+    cssSelect     = require('css-select');
+
+var cssSelectOpts = {xmlMode: true, adapter: domutilsSvgo};
 
 /**
   * Moves + merges styles from style elements to element styles
@@ -31,7 +31,7 @@ exports.fn = function(data, opts) {
   data = addParentRefs(data);
 
   // fetch <style/>s
-  var styleEls      = cssSelect('style', data, {xmlMode: true});
+  var styleEls      = cssSelect('style', data, cssSelectOpts);
 
   var styleItems    = [],
       selectorItems = [];
@@ -77,7 +77,7 @@ exports.fn = function(data, opts) {
       selectedEls;
   for(var selectorItemIndex in selectorItemsSorted) {
     selectorItem = selectorItemsSorted[selectorItemIndex];
-    selectedEls  = cssSelect(selectorItem.selectorStr, data, {xmlMode: true});
+    selectedEls  = cssSelect(selectorItem.selectorStr, data, cssSelectOpts);
     if(opts.onlyMatchedOnce && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;

From 92c5c486a659aca7aba29ae92dc67ca76e8a558a Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 18 Nov 2016 17:42:16 +0100
Subject: [PATCH 030/162] Use more clear syntax for tag check.

---
 lib/ext/domutils-svgo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index 993b49a79..3b7c1779f 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -6,7 +6,7 @@ var domUtilsSvgo = {};
 
 // is the node a tag?
 domUtilsSvgo.isTag = function(node) {
-  return node.elem;
+  return typeof node.elem !== 'undefined';
 };
 
 // does at least one of passed element nodes pass the test predicate?

From 2104ad46566800edad7a314a2b39886ce327c22c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 18 Nov 2016 17:43:14 +0100
Subject: [PATCH 031/162] Improve code.

---
 lib/ext/domutils-svgo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index 3b7c1779f..f671f457d 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -6,7 +6,7 @@ var domUtilsSvgo = {};
 
 // is the node a tag?
 domUtilsSvgo.isTag = function(node) {
-  return typeof node.elem !== 'undefined';
+  return (typeof node.elem !== 'undefined');
 };
 
 // does at least one of passed element nodes pass the test predicate?

From e5dc5ba528d9c5bed681197cfb4b6a5f182c3b50 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 18 Nov 2016 17:49:59 +0100
Subject: [PATCH 032/162] Add missing existsOne implementation.

---
 lib/ext/domutils-svgo.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index f671f457d..76e04cb97 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -10,7 +10,22 @@ domUtilsSvgo.isTag = function(node) {
 };
 
 // does at least one of passed element nodes pass the test predicate?
-
+domUtilsSvgo.existsOne = function(test, elems) {
+  for(var i = 0, l = elems.length; i < l; i++){
+    if(
+      domUtilsSvgo.isTag(elems[i]) && (
+        test(elems[i]) || (
+          elems[i].content.length > 0 &&
+          domUtilsSvgo.existsOne(test, elems[i].content)
+        )
+      )
+    ){
+      return true;
+    }
+  }
+
+  return false;
+};
 
 // get the parent of the node
 domUtilsSvgo.getParent = function(node) {

From 1d63cc0af231b2ecb97a965a2af97a04675f968d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 18 Nov 2016 17:54:09 +0100
Subject: [PATCH 033/162] Match up adapter code to adapter example code in
 css-select README.

---
 lib/ext/domutils-svgo.js | 275 +++++++++++++++++++--------------------
 1 file changed, 136 insertions(+), 139 deletions(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index 76e04cb97..075bfbbc6 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -1,151 +1,148 @@
 'use strict';
 
 // DOMUtils API for SVGO AST (used by css-select)
-
-var domUtilsSvgo = {};
-
-// is the node a tag?
-domUtilsSvgo.isTag = function(node) {
-  return (typeof node.elem !== 'undefined');
-};
-
-// does at least one of passed element nodes pass the test predicate?
-domUtilsSvgo.existsOne = function(test, elems) {
-  for(var i = 0, l = elems.length; i < l; i++){
-    if(
-      domUtilsSvgo.isTag(elems[i]) && (
-        test(elems[i]) || (
-          elems[i].content.length > 0 &&
-          domUtilsSvgo.existsOne(test, elems[i].content)
+module.exports = {
+
+  // is the node a tag?
+  isTag: function(node) {
+    return (typeof node.elem !== 'undefined');
+  },
+
+  // does at least one of passed element nodes pass the test predicate?
+  existsOne: function(test, elems) {
+    for(var i = 0, l = elems.length; i < l; i++){
+      if(
+        this.isTag(elems[i]) && (
+          test(elems[i]) || (
+            elems[i].content.length > 0 &&
+            this.existsOne(test, elems[i].content)
+          )
         )
-      )
-    ){
-      return true;
+      ){
+        return true;
+      }
     }
-  }
-
-  return false;
-};
-
-// get the parent of the node
-domUtilsSvgo.getParent = function(node) {
-  return node.parent || null; // root item my be passed which got no parent
-};
-
-// get the node's children
-domUtilsSvgo.getChildren = function(node) {
-  var childNodes = [];
-  node.content.forEach(function(childNode) {
-    childNodes.push(childNode);
-  });
-  return childNodes;
-};
-
-/*
-  get the siblings of the node. Note that unlike jQuery's `siblings` method,
-  this is expected to include the current node as well
-  TODO/Clarify: Add current node on top to returned siblings list?
-*/
-domUtilsSvgo.getSiblings = function(node) {
-  var parent = domUtilsSvgo.getParent(node);
-  return domUtilsSvgo.getChildren(parent);
-};
-
-// get the name of the tag
-domUtilsSvgo.getName = function(node) {
-  return node.elem;
-};
 
-// get the text content of the node, and its children if it has any
-domUtilsSvgo.getText = function(node) {
-  var nodeText = node.content[0].text || node.content[0].cdata || [],
-          DATA = nodeText.indexOf('>') >= 0 || nodeText.indexOf('<') >= 0 ? 'cdata' : 'text';
-  return DATA;
-};
-
-// does the element have the named attribute?
-domUtilsSvgo.hasAttrib = function(node, name) {
-  return node.hasAttr(name);
-};
-
-// finds all of the element nodes in the array that match the test predicate,
-// as well as any of their children that match it
-domUtilsSvgo.findAll = function(test, nodes) {
-  var result = [];
-	for(var i = 0, j = nodes.length; i < j; i++){
-		if(!domUtilsSvgo.isTag(nodes[i])) continue;
-		if(test(nodes[i])) result.push(nodes[i]); // TODO!
-
-		if(nodes[i].content && nodes[i].content.length > 0){
-			result = result.concat(domUtilsSvgo.findAll(test, nodes[i].content));
-		}
-	}
-	return result;
-};
+    return false;
+  },
+
+  // get the parent of the node
+  getParent: function(node) {
+    return node.parent || null; // root item my be passed which got no parent
+  },
+
+  // get the node's children
+  getChildren: function(node) {
+    var childNodes = [];
+    node.content.forEach(function(childNode) {
+      childNodes.push(childNode);
+    });
+    return childNodes;
+  },
+
+  /*
+    get the siblings of the node. Note that unlike jQuery's `siblings` method,
+    this is expected to include the current node as well
+    TODO/Clarify: Add current node on top to returned siblings list?
+  */
+  getSiblings: function(node) {
+    var parent = this.getParent(node);
+    return this.getChildren(parent);
+  },
+
+  // get the name of the tag
+  getName: function(node) {
+    return node.elem;
+  },
+
+  // get the text content of the node, and its children if it has any
+  getText: function(node) {
+    var nodeText = node.content[0].text || node.content[0].cdata || [],
+            DATA = nodeText.indexOf('>') >= 0 || nodeText.indexOf('<') >= 0 ? 'cdata' : 'text';
+    return DATA;
+  },
+
+  // does the element have the named attribute?
+  hasAttrib: function(node, name) {
+    return node.hasAttr(name);
+  },
+
+  // finds all of the element nodes in the array that match the test predicate,
+  // as well as any of their children that match it
+  findAll: function(test, nodes) {
+    var result = [];
+    for(var i = 0, j = nodes.length; i < j; i++){
+      if(!this.isTag(nodes[i])) continue;
+      if(test(nodes[i])) result.push(nodes[i]); // TODO!
+
+      if(nodes[i].content && nodes[i].content.length > 0){
+        result = result.concat(this.findAll(test, nodes[i].content));
+      }
+    }
+    return result;
+  },
+
+  findOne: function(test, nodes) {
+    var node = null;
+
+    for(var i = 0, l = nodes.length; i < l && !node; i++){
+      if(!this.isTag(nodes[i])){
+        continue;
+      } else if(test(nodes[i])){
+        node = nodes[i];
+      } else if(nodes[i].content && nodes[i].content.length > 0){
+        node = this.findOne(test, nodes[i].content);
+      }
+    }
 
-domUtilsSvgo.findOne = function(test, nodes) {
-  var node = null;
+    return node;
+  },
+
+  // takes an array of nodes, and removes any duplicates, as well as any nodes
+  // whose ancestors are also in the array
+  removeSubsets: function(nodes) {
+    var idx = nodes.length, node, ancestor, replace;
+
+    // Check if each node (or one of its ancestors) is already contained in the
+    // array.
+    while (--idx > -1) {
+      node = ancestor = nodes[idx];
+
+      // Temporarily remove the node under consideration
+      nodes[idx] = null;
+      replace = true;
+
+      while (ancestor) {
+        if (nodes.indexOf(ancestor) > -1) {
+          replace = false;
+          nodes.splice(idx, 1);
+          break;
+        }
+        ancestor = this.getParent(ancestor);
+      }
+
+      // If the node has been found to be unique, re-insert it.
+      if (replace) {
+        nodes[idx] = node;
+      }
+    }
 
-	for(var i = 0, l = nodes.length; i < l && !node; i++){
-		if(!domUtilsSvgo.isTag(nodes[i])){
-			continue;
-		} else if(test(nodes[i])){
-			node = nodes[i];
-		} else if(nodes[i].content && nodes[i].content.length > 0){
-			node = domUtilsSvgo.findOne(test, nodes[i].content);
-		}
-	}
+    return nodes;
+  },
 
-	return node;
-};
+  // get the attribute value
+  getAttributeValue: function(elem, name) {
+    var attr = elem.attr(name);
+    return attr && attr.value;
+  },
 
-// takes an array of nodes, and removes any duplicates, as well as any nodes
-// whose ancestors are also in the array
-domUtilsSvgo.removeSubsets = function(nodes) {
-	var idx = nodes.length, node, ancestor, replace;
-
-	// Check if each node (or one of its ancestors) is already contained in the
-	// array.
-	while (--idx > -1) {
-		node = ancestor = nodes[idx];
-
-		// Temporarily remove the node under consideration
-		nodes[idx] = null;
-		replace = true;
-
-		while (ancestor) {
-			if (nodes.indexOf(ancestor) > -1) {
-				replace = false;
-				nodes.splice(idx, 1);
-				break;
-			}
-			ancestor = domUtilsSvgo.getParent(ancestor);
-		}
-
-		// If the node has been found to be unique, re-insert it.
-		if (replace) {
-			nodes[idx] = node;
-		}
-	}
-
-	return nodes;
-};
 
-// get the attribute value
-domUtilsSvgo.getAttributeValue = function(elem, name) {
-  var attr = elem.attr(name);
-  return attr && attr.value;
+  /*
+    The adapter can also optionally include an equals method, if your DOM
+    structure needs a custom equality test to compare two objects which refer
+    to the same underlying node. If not provided, `css-select` will fall back to
+    `a === b`.
+  */
+  // equals: ( a:Node, b:Node ) => Boolean
+  // not needed for svgo AST
 };
-
-
-/*
-  The adapter can also optionally include an equals method, if your DOM
-  structure needs a custom equality test to compare two objects which refer
-  to the same underlying node. If not provided, `css-select` will fall back to
-  `a === b`.
-*/
-// equals: ( a:Node, b:Node ) => Boolean
-// not needed for svgo AST
-
-
-module.exports = domUtilsSvgo;

From 7897ed746e353f5ed826f15822278412c46f87d8 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 18 Nov 2016 18:01:40 +0100
Subject: [PATCH 034/162] Use terminology (node/elem) from adapter example in
 css-select README. Add function definition as comment, too. Clean up
 comments.

---
 lib/ext/domutils-svgo.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index 075bfbbc6..fba3abc1c 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -4,11 +4,13 @@
 module.exports = {
 
   // is the node a tag?
+  // isTag: ( node:Node ) => isTag:Boolean
   isTag: function(node) {
     return (typeof node.elem !== 'undefined');
   },
 
   // does at least one of passed element nodes pass the test predicate?
+  // existsOne: ( test:Predicate, elems:[ElementNode] ) => existsOne:Boolean
   existsOne: function(test, elems) {
     for(var i = 0, l = elems.length; i < l; i++){
       if(
@@ -27,11 +29,13 @@ module.exports = {
   },
 
   // get the parent of the node
+  // getParent: ( node:Node ) => parentNode:Node
   getParent: function(node) {
     return node.parent || null; // root item my be passed which got no parent
   },
 
   // get the node's children
+  // getChildren: ( node:Node ) => children:[Node]
   getChildren: function(node) {
     var childNodes = [];
     node.content.forEach(function(childNode) {
@@ -45,17 +49,20 @@ module.exports = {
     this is expected to include the current node as well
     TODO/Clarify: Add current node on top to returned siblings list?
   */
+  // getSiblings: ( node:Node ) => siblings:[Node]
   getSiblings: function(node) {
     var parent = this.getParent(node);
     return this.getChildren(parent);
   },
 
   // get the name of the tag
-  getName: function(node) {
-    return node.elem;
+  // getName: ( elem:ElementNode ) => tagName:String
+  getName: function(elemAst) {
+    return elemAst.elem;
   },
 
   // get the text content of the node, and its children if it has any
+  // getText: ( node:Node ) => text:String
   getText: function(node) {
     var nodeText = node.content[0].text || node.content[0].cdata || [],
             DATA = nodeText.indexOf('>') >= 0 || nodeText.indexOf('<') >= 0 ? 'cdata' : 'text';
@@ -63,12 +70,14 @@ module.exports = {
   },
 
   // does the element have the named attribute?
-  hasAttrib: function(node, name) {
-    return node.hasAttr(name);
+  // hasAttrib: ( elem:ElementNode, name:String ) => hasAttrib:Boolean
+  hasAttrib: function(elem, name) {
+    return elem.hasAttr(name);
   },
 
   // finds all of the element nodes in the array that match the test predicate,
   // as well as any of their children that match it
+  // findAll: ( test:Predicate, nodes:[Node] ) => elems:[ElementNode]
   findAll: function(test, nodes) {
     var result = [];
     for(var i = 0, j = nodes.length; i < j; i++){
@@ -100,6 +109,7 @@ module.exports = {
 
   // takes an array of nodes, and removes any duplicates, as well as any nodes
   // whose ancestors are also in the array
+  // removeSubsets: ( nodes:[Node] ) => unique:[Node]
   removeSubsets: function(nodes) {
     var idx = nodes.length, node, ancestor, replace;
 
@@ -131,6 +141,7 @@ module.exports = {
   },
 
   // get the attribute value
+  // getAttributeValue: ( elem:ElementNode, name:String ) => value:String
   getAttributeValue: function(elem, name) {
     var attr = elem.attr(name);
     return attr && attr.value;

From 3f31b3418ebf2d68e8f0bbbd814fa2dc92d0cf92 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 18 Nov 2016 18:06:14 +0100
Subject: [PATCH 035/162] Add/improve TODO comment remarks.

---
 lib/ext/domutils-svgo.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index fba3abc1c..d3f59a92a 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -47,7 +47,8 @@ module.exports = {
   /*
     get the siblings of the node. Note that unlike jQuery's `siblings` method,
     this is expected to include the current node as well
-    TODO/Clarify: Add current node on top to returned siblings list?
+    TODO/Clarify: Add current node to returned siblings list 
+                  (see https://github.com/fb55/css-select/issues/73)?
   */
   // getSiblings: ( node:Node ) => siblings:[Node]
   getSiblings: function(node) {
@@ -91,6 +92,8 @@ module.exports = {
     return result;
   },
 
+  // TODO: Is this also required 
+  //       (see https://github.com/fb55/css-select/issues/74)?
   findOne: function(test, nodes) {
     var node = null;
 

From 8bc26fee6f304e0e195577117da419d76a8a9374 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 19 Nov 2016 14:20:33 +0100
Subject: [PATCH 036/162] Remove TODO for getSiblings (resolved).

---
 lib/ext/domutils-svgo.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index d3f59a92a..ef2a18623 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -47,8 +47,6 @@ module.exports = {
   /*
     get the siblings of the node. Note that unlike jQuery's `siblings` method,
     this is expected to include the current node as well
-    TODO/Clarify: Add current node to returned siblings list 
-                  (see https://github.com/fb55/css-select/issues/73)?
   */
   // getSiblings: ( node:Node ) => siblings:[Node]
   getSiblings: function(node) {

From 19a19c58abae091fddbe2f6e5ead197c87d8c9ca Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 19 Nov 2016 14:46:02 +0100
Subject: [PATCH 037/162] Improve comments.

---
 plugins/inlineStyles.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 50d86dcd0..0288dbcbb 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -46,16 +46,18 @@ exports.fn = function(data, opts) {
     }
     var cssStr = styleEl.content[0].text;
 
-    // <style/>s with CSS AST
+    // <style/>s and their css ast
     var cssAst = csso.parse(cssStr, {context: 'stylesheet'});
     styleItems.push({
       styleEl: styleEl,
       cssAst:  cssAst
     });
 
-    // CSS selectors with CSS rulesets
+    // css selectors and their css ruleset
     csso.walk(cssAst, function(node, item) {
-      if(node.type === 'SimpleSelector') { // single selector
+      if(node.type === 'SimpleSelector') {
+		// csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module:
+	    // Selector group ('Selector' in csso) separated by comma: <'SimpleSelector'>, <'SimpleSelector'>, ...
         var selectorStr  = csso.translate(node);
         var selectorItem = {
           selectorStr:        selectorStr,
@@ -72,7 +74,7 @@ exports.fn = function(data, opts) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
 
-  // apply css to matched elements
+  // apply CSS to matched elements
   var selectorItem,
       selectedEls;
   for(var selectorItemIndex in selectorItemsSorted) {
@@ -92,7 +94,7 @@ exports.fn = function(data, opts) {
           elInlineStyles    = elInlineStyleAttr.value,
           inlineCssAst      = csso.parse(elInlineStyles, {context: 'block'});      
 
-      var newInlineCssAst   = csso.parse('', {context: 'block'}); // for empty an CSS AST (Block context)
+      var newInlineCssAst   = csso.parse('', {context: 'block'}); // for empty an css ast (Block context)
       csso.walk(selectorItem.rulesetNode, function(node, item) {
         if(node.type === 'Declaration') {
           newInlineCssAst.declarations.insert(item);

From f3d5de085f425ceb6e13f44e2b5abe43c30a4551 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 19 Nov 2016 14:49:33 +0100
Subject: [PATCH 038/162] Cosmetic comment improvements.

---
 plugins/inlineStyles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 0288dbcbb..f76739c13 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -56,7 +56,7 @@ exports.fn = function(data, opts) {
     // css selectors and their css ruleset
     csso.walk(cssAst, function(node, item) {
       if(node.type === 'SimpleSelector') {
-		// csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module:
+		// csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
 	    // Selector group ('Selector' in csso) separated by comma: <'SimpleSelector'>, <'SimpleSelector'>, ...
         var selectorStr  = csso.translate(node);
         var selectorItem = {
@@ -74,7 +74,7 @@ exports.fn = function(data, opts) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
 
-  // apply CSS to matched elements
+  // apply css to matched elements
   var selectorItem,
       selectedEls;
   for(var selectorItemIndex in selectorItemsSorted) {

From c7b46d57ccda29e725a2702b666f700ef445be63 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 20 Nov 2016 17:23:04 +0100
Subject: [PATCH 039/162] Fix + simplify css-select adapter.

---
 lib/ext/domutils-svgo.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index ef2a18623..665f96a45 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -37,11 +37,7 @@ module.exports = {
   // get the node's children
   // getChildren: ( node:Node ) => children:[Node]
   getChildren: function(node) {
-    var childNodes = [];
-    node.content.forEach(function(childNode) {
-      childNodes.push(childNode);
-    });
-    return childNodes;
+    return node.content || [];
   },
 
   /*
@@ -65,7 +61,7 @@ module.exports = {
   getText: function(node) {
     var nodeText = node.content[0].text || node.content[0].cdata || [],
             DATA = nodeText.indexOf('>') >= 0 || nodeText.indexOf('<') >= 0 ? 'cdata' : 'text';
-    return DATA;
+    return nodeText || DATA;
   },
 
   // does the element have the named attribute?

From b3853c89ccfd91702e64ca5b84364784ebe9112a Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 20 Nov 2016 17:24:04 +0100
Subject: [PATCH 040/162] Use css-select base adapter for reducing required
 csso adapter code.

---
 lib/ext/domutils-svgo.js | 121 +++------------------------------------
 package.json             |   1 +
 2 files changed, 9 insertions(+), 113 deletions(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index 665f96a45..e10f16490 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -1,7 +1,9 @@
 'use strict';
 
+var baseAdapter = require('css-select-base-adapter');
+
 // DOMUtils API for SVGO AST (used by css-select)
-module.exports = {
+var svgoMinAdapter = {
 
   // is the node a tag?
   // isTag: ( node:Node ) => isTag:Boolean
@@ -9,25 +11,6 @@ module.exports = {
     return (typeof node.elem !== 'undefined');
   },
 
-  // does at least one of passed element nodes pass the test predicate?
-  // existsOne: ( test:Predicate, elems:[ElementNode] ) => existsOne:Boolean
-  existsOne: function(test, elems) {
-    for(var i = 0, l = elems.length; i < l; i++){
-      if(
-        this.isTag(elems[i]) && (
-          test(elems[i]) || (
-            elems[i].content.length > 0 &&
-            this.existsOne(test, elems[i].content)
-          )
-        )
-      ){
-        return true;
-      }
-    }
-
-    return false;
-  },
-
   // get the parent of the node
   // getParent: ( node:Node ) => parentNode:Node
   getParent: function(node) {
@@ -40,16 +23,6 @@ module.exports = {
     return node.content || [];
   },
 
-  /*
-    get the siblings of the node. Note that unlike jQuery's `siblings` method,
-    this is expected to include the current node as well
-  */
-  // getSiblings: ( node:Node ) => siblings:[Node]
-  getSiblings: function(node) {
-    var parent = this.getParent(node);
-    return this.getChildren(parent);
-  },
-
   // get the name of the tag
   // getName: ( elem:ElementNode ) => tagName:String
   getName: function(elemAst) {
@@ -64,93 +37,15 @@ module.exports = {
     return nodeText || DATA;
   },
 
-  // does the element have the named attribute?
-  // hasAttrib: ( elem:ElementNode, name:String ) => hasAttrib:Boolean
-  hasAttrib: function(elem, name) {
-    return elem.hasAttr(name);
-  },
-
-  // finds all of the element nodes in the array that match the test predicate,
-  // as well as any of their children that match it
-  // findAll: ( test:Predicate, nodes:[Node] ) => elems:[ElementNode]
-  findAll: function(test, nodes) {
-    var result = [];
-    for(var i = 0, j = nodes.length; i < j; i++){
-      if(!this.isTag(nodes[i])) continue;
-      if(test(nodes[i])) result.push(nodes[i]); // TODO!
-
-      if(nodes[i].content && nodes[i].content.length > 0){
-        result = result.concat(this.findAll(test, nodes[i].content));
-      }
-    }
-    return result;
-  },
-
-  // TODO: Is this also required 
-  //       (see https://github.com/fb55/css-select/issues/74)?
-  findOne: function(test, nodes) {
-    var node = null;
-
-    for(var i = 0, l = nodes.length; i < l && !node; i++){
-      if(!this.isTag(nodes[i])){
-        continue;
-      } else if(test(nodes[i])){
-        node = nodes[i];
-      } else if(nodes[i].content && nodes[i].content.length > 0){
-        node = this.findOne(test, nodes[i].content);
-      }
-    }
-
-    return node;
-  },
-
-  // takes an array of nodes, and removes any duplicates, as well as any nodes
-  // whose ancestors are also in the array
-  // removeSubsets: ( nodes:[Node] ) => unique:[Node]
-  removeSubsets: function(nodes) {
-    var idx = nodes.length, node, ancestor, replace;
-
-    // Check if each node (or one of its ancestors) is already contained in the
-    // array.
-    while (--idx > -1) {
-      node = ancestor = nodes[idx];
-
-      // Temporarily remove the node under consideration
-      nodes[idx] = null;
-      replace = true;
-
-      while (ancestor) {
-        if (nodes.indexOf(ancestor) > -1) {
-          replace = false;
-          nodes.splice(idx, 1);
-          break;
-        }
-        ancestor = this.getParent(ancestor);
-      }
-
-      // If the node has been found to be unique, re-insert it.
-      if (replace) {
-        nodes[idx] = node;
-      }
-    }
-
-    return nodes;
-  },
-
   // get the attribute value
   // getAttributeValue: ( elem:ElementNode, name:String ) => value:String
   getAttributeValue: function(elem, name) {
     var attr = elem.attr(name);
     return attr && attr.value;
-  },
+  }
+};
 
+// using base adapter for default implementations
+var svgoAdapter = baseAdapter(svgoMinAdapter);
 
-  /*
-    The adapter can also optionally include an equals method, if your DOM
-    structure needs a custom equality test to compare two objects which refer
-    to the same underlying node. If not provided, `css-select` will fall back to
-    `a === b`.
-  */
-  // equals: ( a:Node, b:Node ) => Boolean
-  // not needed for svgo AST
-};
+module.exports  = svgoAdapter;
diff --git a/package.json b/package.json
index 7d2dc8ec5..d6ce8d02f 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "coa": "~1.0.1",
     "colors": "~1.1.2",
     "css-select": "github:fb55/css-select#e109d4b3668354542c806a6b652410f135d679ae",
+    "css-select-base-adapter": "github:nrkn/css-select-base-adapter#master",
     "csso": "^2.2.1",
     "js-yaml": "~3.6.1",
     "mkdirp": "~0.5.1",

From 941b6ca945286603e0b56d75bb386233273bc876 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 20 Nov 2016 17:25:55 +0100
Subject: [PATCH 041/162] Cosmetic comment change.

---
 lib/ext/domutils-svgo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index e10f16490..d9070f111 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -45,7 +45,7 @@ var svgoMinAdapter = {
   }
 };
 
-// using base adapter for default implementations
+// use base adapter for default implementations
 var svgoAdapter = baseAdapter(svgoMinAdapter);
 
 module.exports  = svgoAdapter;

From b6dd3d1681e5b1ae662435871410f09e0110d04c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 20 Nov 2016 17:46:51 +0100
Subject: [PATCH 042/162] Add object.assign shim for node v0.1x support.

---
 lib/ext/domutils-svgo.js | 1 +
 package.json             | 1 +
 2 files changed, 2 insertions(+)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index d9070f111..31ffd6bf3 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -1,6 +1,7 @@
 'use strict';
 
 var baseAdapter = require('css-select-base-adapter');
+require('object.assign').shim(); // for node v0.1x support
 
 // DOMUtils API for SVGO AST (used by css-select)
 var svgoMinAdapter = {
diff --git a/package.json b/package.json
index d6ce8d02f..7d95b1ea8 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "csso": "^2.2.1",
     "js-yaml": "~3.6.1",
     "mkdirp": "~0.5.1",
+    "object.assign": "^4.0.4",
     "sax": "~1.2.1",
     "specificity": "^0.3.0",
     "stable": "^0.1.5",

From 88629181b69102ad07de24085cdb8aa323d47447 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 20 Nov 2016 21:37:20 +0100
Subject: [PATCH 043/162] Fix/improve csso API usage in adapter.

---
 lib/ext/domutils-svgo.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index 31ffd6bf3..50ca94833 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -9,7 +9,7 @@ var svgoMinAdapter = {
   // is the node a tag?
   // isTag: ( node:Node ) => isTag:Boolean
   isTag: function(node) {
-    return (typeof node.elem !== 'undefined');
+    return node.isElem();
   },
 
   // get the parent of the node
@@ -35,7 +35,7 @@ var svgoMinAdapter = {
   getText: function(node) {
     var nodeText = node.content[0].text || node.content[0].cdata || [],
             DATA = nodeText.indexOf('>') >= 0 || nodeText.indexOf('<') >= 0 ? 'cdata' : 'text';
-    return nodeText || DATA;
+    return DATA;
   },
 
   // get the attribute value

From 57b84a8ce6309c21a7d30be55ae0131ad3e33197 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 20 Nov 2016 21:38:56 +0100
Subject: [PATCH 044/162] Change css-select-base-adapter package source to npm.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7d95b1ea8..12feae137 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "coa": "~1.0.1",
     "colors": "~1.1.2",
     "css-select": "github:fb55/css-select#e109d4b3668354542c806a6b652410f135d679ae",
-    "css-select-base-adapter": "github:nrkn/css-select-base-adapter#master",
+    "css-select-base-adapter": "^0.1.0",
     "csso": "^2.2.1",
     "js-yaml": "~3.6.1",
     "mkdirp": "~0.5.1",

From 297f39422722c6dd7b164a6fc511acc25065c5d6 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 21 Nov 2016 15:18:39 +0100
Subject: [PATCH 045/162] Improve svgo API usage.

---
 lib/ext/add-parent-refs.js | 2 +-
 lib/ext/domutils-svgo.js   | 3 +--
 plugins/inlineStyles.js    | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/lib/ext/add-parent-refs.js b/lib/ext/add-parent-refs.js
index 9e5be1073..76debfb7f 100644
--- a/lib/ext/add-parent-refs.js
+++ b/lib/ext/add-parent-refs.js
@@ -4,7 +4,7 @@
 // (except the topmost root item which got no parent).
 
 var addParentRefs = function(data) {
-  if(!data.content) {
+  if(data.isEmpty()) {
     return;
   }
   var i      = 0,
diff --git a/lib/ext/domutils-svgo.js b/lib/ext/domutils-svgo.js
index 50ca94833..f2d02fee6 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/domutils-svgo.js
@@ -41,8 +41,7 @@ var svgoMinAdapter = {
   // get the attribute value
   // getAttributeValue: ( elem:ElementNode, name:String ) => value:String
   getAttributeValue: function(elem, name) {
-    var attr = elem.attr(name);
-    return attr && attr.value;
+    return elem.hasAttr(name) && elem.attr(name).value;
   }
 };
 
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index f76739c13..df2ab5a6d 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -40,8 +40,8 @@ exports.fn = function(data, opts) {
   for(var styleElId in styleEls) {
     styleEl = styleEls[styleElId];
 
-    if(!styleEl.content || !styleEl.content[0] || 
-       !styleEl.content[0].text || styleEl.content[0].text.length == 0) {
+    if( styleEl.isEmpty()       || !styleEl.content[0] || 
+       !styleEl.content[0].text ||  styleEl.content[0].text.length == 0) {
       continue;
     }
     var cssStr = styleEl.content[0].text;

From 3e54b1cdbd6421dcecfa4a63713eddeb6a9d70ac Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 21 Nov 2016 15:19:16 +0100
Subject: [PATCH 046/162] Move to own css selection method.

---
 lib/ext/select-css.js   | 15 +++++++++++++++
 plugins/inlineStyles.js | 12 +++---------
 2 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 lib/ext/select-css.js

diff --git a/lib/ext/select-css.js b/lib/ext/select-css.js
new file mode 100644
index 000000000..5f870258d
--- /dev/null
+++ b/lib/ext/select-css.js
@@ -0,0 +1,15 @@
+'use strict';
+
+var cssSelect     = require('css-select'),
+    domutilsSvgo  = require('./domutils-svgo'),
+	addParentRefs = require('./add-parent-refs');
+
+var cssSelectOpts = {xmlMode: true, adapter: domutilsSvgo};
+
+module.exports    = function(selector, data) {
+
+  // TODO: Add this functionality to svgo API
+  data = addParentRefs(data);
+
+  return cssSelect(selector, data, cssSelectOpts);
+};
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index df2ab5a6d..d9a410433 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -15,12 +15,7 @@ exports.description = 'inline styles (optionally skip selectors that match more
 var SPECIFICITY   = require('specificity'),
     stable        = require('stable'),
     csso          = require('csso'),
-
-    domutilsSvgo  = require('../lib/ext/domutils-svgo'),
-    addParentRefs = require('../lib/ext/add-parent-refs'),
-    cssSelect     = require('css-select');
-
-var cssSelectOpts = {xmlMode: true, adapter: domutilsSvgo};
+	selectCss     = require('../lib/ext/select-css');
 
 /**
   * Moves + merges styles from style elements to element styles
@@ -28,10 +23,9 @@ var cssSelectOpts = {xmlMode: true, adapter: domutilsSvgo};
   * @author strarsis <strarsis@gmail.com>
   */
 exports.fn = function(data, opts) {
-  data = addParentRefs(data);
 
   // fetch <style/>s
-  var styleEls      = cssSelect('style', data, cssSelectOpts);
+  var styleEls      = selectCss('style', data);
 
   var styleItems    = [],
       selectorItems = [];
@@ -79,7 +73,7 @@ exports.fn = function(data, opts) {
       selectedEls;
   for(var selectorItemIndex in selectorItemsSorted) {
     selectorItem = selectorItemsSorted[selectorItemIndex];
-    selectedEls  = cssSelect(selectorItem.selectorStr, data, cssSelectOpts);
+    selectedEls  = selectCss(selectorItem.selectorStr, data);
     if(opts.onlyMatchedOnce && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;

From f37d589c4b4c251a89cdd7e642e2df012f664542 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 21 Nov 2016 19:53:49 +0100
Subject: [PATCH 047/162] Add / improve comments.

---
 plugins/inlineStyles.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index d9a410433..cc14b4ab7 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -24,7 +24,7 @@ var SPECIFICITY   = require('specificity'),
   */
 exports.fn = function(data, opts) {
 
-  // fetch <style/>s
+  // collect <style/>s
   var styleEls      = selectCss('style', data);
 
   var styleItems    = [],
@@ -36,18 +36,19 @@ exports.fn = function(data, opts) {
 
     if( styleEl.isEmpty()       || !styleEl.content[0] || 
        !styleEl.content[0].text ||  styleEl.content[0].text.length == 0) {
+      // skip empty <style/>s
       continue;
     }
     var cssStr = styleEl.content[0].text;
 
-    // <style/>s and their css ast
+    // collect <style/>s and the css ast they contain
     var cssAst = csso.parse(cssStr, {context: 'stylesheet'});
     styleItems.push({
       styleEl: styleEl,
       cssAst:  cssAst
     });
 
-    // css selectors and their css ruleset
+    // collect css selectors and their containing ruleset
     csso.walk(cssAst, function(node, item) {
       if(node.type === 'SimpleSelector') {
 		// csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
@@ -63,12 +64,12 @@ exports.fn = function(data, opts) {
     });
   }
 
-  // stable-sort selectors by specificity
+  // stable-sort css selectors by their specificity
   var selectorItemsSorted = stable(selectorItems, function(item1, item2) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
 
-  // apply css to matched elements
+  // apply <style/> styles to matched elements
   var selectorItem,
       selectedEls;
   for(var selectorItemIndex in selectorItemsSorted) {
@@ -83,12 +84,12 @@ exports.fn = function(data, opts) {
     for(var selectedElId in selectedEls) {
       selectedEl = selectedEls[selectedElId];
 
-      // merge element (inline) styles + selector <style/>
+      // merge element(inline) styles + matching <style/> styles
       var elInlineStyleAttr = selectedEl.attr('style'),
           elInlineStyles    = elInlineStyleAttr.value,
           inlineCssAst      = csso.parse(elInlineStyles, {context: 'block'});      
 
-      var newInlineCssAst   = csso.parse('', {context: 'block'}); // for empty an css ast (Block context)
+      var newInlineCssAst   = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
       csso.walk(selectorItem.rulesetNode, function(node, item) {
         if(node.type === 'Declaration') {
           newInlineCssAst.declarations.insert(item);
@@ -111,7 +112,7 @@ exports.fn = function(data, opts) {
     }
   }
 
-  // clean up <style/> rulesets without any selectors left
+  // clean up <style/> rulesets without any css selectors left
   var styleItemIndex = 0,
       styleItem      = {};
   for(styleItemIndex in styleItems) {
@@ -124,7 +125,7 @@ exports.fn = function(data, opts) {
     });
   }
 
-  // update the css selectors / blocks in and <style/>s themselves
+  // update / clean up <style/>s with their changed ast
   var styleParent;
   for(styleItemIndex in styleItems) {
     styleItem = styleItems[styleItemIndex];
@@ -135,7 +136,7 @@ exports.fn = function(data, opts) {
       continue;
     }
 
-    // update existing <style>s
+    // update existing, left over <style>s
     styleItem.styleEl.content[0].text = csso.translate(styleItem.cssAst);
   }
 

From 01d16f18546ff67471abb574f8e91117eec01d2e Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 21 Nov 2016 19:54:42 +0100
Subject: [PATCH 048/162] Use better emtpy <style/> check.

---
 plugins/inlineStyles.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index cc14b4ab7..2a7466bd0 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -34,8 +34,7 @@ exports.fn = function(data, opts) {
   for(var styleElId in styleEls) {
     styleEl = styleEls[styleElId];
 
-    if( styleEl.isEmpty()       || !styleEl.content[0] || 
-       !styleEl.content[0].text ||  styleEl.content[0].text.length == 0) {
+    if( styleEl.isEmpty()) {
       // skip empty <style/>s
       continue;
     }

From fe49aa7cf0868a299ae7c704bef99b1a665e440e Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 21 Nov 2016 19:55:03 +0100
Subject: [PATCH 049/162] Improve comment.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 2a7466bd0..1f0ef0605 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -40,7 +40,7 @@ exports.fn = function(data, opts) {
     }
     var cssStr = styleEl.content[0].text;
 
-    // collect <style/>s and the css ast they contain
+    // collect <style/>s and their css ast
     var cssAst = csso.parse(cssStr, {context: 'stylesheet'});
     styleItems.push({
       styleEl: styleEl,

From f7adbc4ef7e52a1e3e744ec535246f290c16128d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 22 Nov 2016 17:07:34 +0100
Subject: [PATCH 050/162] Improve code.

---
 plugins/inlineStyles.js | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 1f0ef0605..1a0b27a0e 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -29,12 +29,10 @@ exports.fn = function(data, opts) {
 
   var styleItems    = [],
       selectorItems = [];
+  for(var styleElIndex in styleEls) {
+    var styleEl = styleEls[styleElIndex];
 
-  var styleEl;
-  for(var styleElId in styleEls) {
-    styleEl = styleEls[styleElId];
-
-    if( styleEl.isEmpty()) {
+    if(styleEl.isEmpty()) {
       // skip empty <style/>s
       continue;
     }
@@ -69,19 +67,16 @@ exports.fn = function(data, opts) {
   });
 
   // apply <style/> styles to matched elements
-  var selectorItem,
-      selectedEls;
   for(var selectorItemIndex in selectorItemsSorted) {
-    selectorItem = selectorItemsSorted[selectorItemIndex];
-    selectedEls  = selectCss(selectorItem.selectorStr, data);
+    var selectorItem = selectorItemsSorted[selectorItemIndex],
+        selectedEls  = selectCss(selectorItem.selectorStr, data);
     if(opts.onlyMatchedOnce && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;
     }
 
-    var selectedEl;
-    for(var selectedElId in selectedEls) {
-      selectedEl = selectedEls[selectedElId];
+    for(var selectedElIndex in selectedEls) {
+      var selectedEl = selectedEls[selectedElIndex];
 
       // merge element(inline) styles + matching <style/> styles
       var elInlineStyleAttr = selectedEl.attr('style'),
@@ -125,12 +120,11 @@ exports.fn = function(data, opts) {
   }
 
   // update / clean up <style/>s with their changed ast
-  var styleParent;
   for(styleItemIndex in styleItems) {
     styleItem = styleItems[styleItemIndex];
     if(styleItem.cssAst.rules.isEmpty()){
       // clean up now emtpy <style/>s
-      styleParent = styleItem.styleEl.parent;
+      var styleParent = styleItem.styleEl.parent;
       styleParent.content.splice(styleParent.content.indexOf(styleItem.styleEl), 1);
       continue;
     }

From af8a2acff86381f939af04f89b620876f5c3a6f0 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 25 Nov 2016 16:58:36 +0100
Subject: [PATCH 051/162] Replace parent references with parent node search
 function.

---
 lib/ext/add-parent-refs.js                    | 22 --------------
 lib/ext/find-parent.js                        | 20 +++++++++++++
 lib/ext/recurse-ast.js                        | 30 +++++++++++++++++++
 lib/ext/select-css.js                         | 29 +++++++++---------
 .../{domutils-svgo.js => svgo-css-adapter.js} | 18 +++++++----
 plugins/inlineStyles.js                       |  5 ++--
 6 files changed, 80 insertions(+), 44 deletions(-)
 delete mode 100644 lib/ext/add-parent-refs.js
 create mode 100644 lib/ext/find-parent.js
 create mode 100644 lib/ext/recurse-ast.js
 rename lib/ext/{domutils-svgo.js => svgo-css-adapter.js} (74%)

diff --git a/lib/ext/add-parent-refs.js b/lib/ext/add-parent-refs.js
deleted file mode 100644
index 76debfb7f..000000000
--- a/lib/ext/add-parent-refs.js
+++ /dev/null
@@ -1,22 +0,0 @@
-'use strict';
-
-// Adds parent reference to each item 
-// (except the topmost root item which got no parent).
-
-var addParentRefs = function(data) {
-  if(data.isEmpty()) {
-    return;
-  }
-  var i      = 0,
-      length = data.content.length,
-      item;
-  while(i < length) {
-    item = data.content[i];
-    item.parent = data;
-    addParentRefs(item);
-    i++;
-  }
-  return data;
-};
-
-module.exports = addParentRefs;
diff --git a/lib/ext/find-parent.js b/lib/ext/find-parent.js
new file mode 100644
index 000000000..6c3e2b205
--- /dev/null
+++ b/lib/ext/find-parent.js
@@ -0,0 +1,20 @@
+'use strict';
+
+var recurseAst = require('./recurse-ast');
+
+module.exports = function(rootNode, childNode) {
+
+  if(rootNode == childNode) {
+    return null; // root node has no parent
+  }
+
+  var foundParentNode = null;
+  var _findParentNode = function(childNodeCompare) {
+    if(childNode == childNodeCompare) {
+      foundParentNode = this.parent;
+      return false; // abort recursion
+    }
+  };
+  recurseAst.bind({parent:null})(rootNode, _findParentNode);
+  return foundParentNode;
+};
diff --git a/lib/ext/recurse-ast.js b/lib/ext/recurse-ast.js
new file mode 100644
index 000000000..b3b02db6c
--- /dev/null
+++ b/lib/ext/recurse-ast.js
@@ -0,0 +1,30 @@
+'use strict';
+
+module.exports = function(startNode, fn, reverse) {
+
+  function monkeys(node) {
+
+    for(var childNodeIndex in node.content) {
+      var childNode = node.content[childNodeIndex];
+
+      // reverse pass
+      if (reverse && childNode.content) {
+        monkeys(childNode);
+      }
+
+      var fnRes = fn.bind({parent: node})(childNode);
+      if(fnRes === false) {
+        return fnRes;
+      }
+
+      // direct pass
+      if (!reverse && childNode.content) {
+        monkeys(childNode);
+      }
+
+    }
+
+  }
+
+  return monkeys(startNode);
+};
diff --git a/lib/ext/select-css.js b/lib/ext/select-css.js
index 5f870258d..faf8fa924 100644
--- a/lib/ext/select-css.js
+++ b/lib/ext/select-css.js
@@ -1,15 +1,14 @@
-'use strict';
-
-var cssSelect     = require('css-select'),
-    domutilsSvgo  = require('./domutils-svgo'),
-	addParentRefs = require('./add-parent-refs');
-
-var cssSelectOpts = {xmlMode: true, adapter: domutilsSvgo};
-
-module.exports    = function(selector, data) {
-
-  // TODO: Add this functionality to svgo API
-  data = addParentRefs(data);
-
-  return cssSelect(selector, data, cssSelectOpts);
-};
+'use strict';
+
+var cssSelect      = require('css-select'),
+    SvgoCssAdapter = require('./svgo-css-adapter');
+
+var cssSelectOpts = {xmlMode: true};
+
+module.exports    = function(selector, rootNode) {
+  if(!cssSelectOpts.adapter) {
+    cssSelectOpts.adapter = new SvgoCssAdapter(rootNode);
+  }
+
+  return cssSelect(selector, rootNode, cssSelectOpts);
+};
diff --git a/lib/ext/domutils-svgo.js b/lib/ext/svgo-css-adapter.js
similarity index 74%
rename from lib/ext/domutils-svgo.js
rename to lib/ext/svgo-css-adapter.js
index f2d02fee6..264bbaafe 100644
--- a/lib/ext/domutils-svgo.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -1,10 +1,11 @@
 'use strict';
 
-var baseAdapter = require('css-select-base-adapter');
+var baseCssAdapter = require('css-select-base-adapter');
 require('object.assign').shim(); // for node v0.1x support
+var findParent  = require('./find-parent');
 
 // DOMUtils API for SVGO AST (used by css-select)
-var svgoMinAdapter = {
+var svgoCssAdapterMin = {
 
   // is the node a tag?
   // isTag: ( node:Node ) => isTag:Boolean
@@ -15,7 +16,7 @@ var svgoMinAdapter = {
   // get the parent of the node
   // getParent: ( node:Node ) => parentNode:Node
   getParent: function(node) {
-    return node.parent || null; // root item my be passed which got no parent
+    return findParent(this.rootNode, node);
   },
 
   // get the node's children
@@ -46,6 +47,13 @@ var svgoMinAdapter = {
 };
 
 // use base adapter for default implementations
-var svgoAdapter = baseAdapter(svgoMinAdapter);
+var svgoCssAdapterProto = baseCssAdapter(svgoCssAdapterMin);
 
-module.exports  = svgoAdapter;
+
+// svgo adapter constructor for passing root node
+var SvgoCssAdapter = function(rootNode) {
+  this.rootNode = rootNode;
+};
+SvgoCssAdapter.prototype = svgoCssAdapterProto;
+
+module.exports  = SvgoCssAdapter;
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 1a0b27a0e..0d0d1150a 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -15,7 +15,8 @@ exports.description = 'inline styles (optionally skip selectors that match more
 var SPECIFICITY   = require('specificity'),
     stable        = require('stable'),
     csso          = require('csso'),
-	selectCss     = require('../lib/ext/select-css');
+	selectCss     = require('../lib/ext/select-css'),
+    findParent    = require('../lib/ext/find-parent');
 
 /**
   * Moves + merges styles from style elements to element styles
@@ -124,7 +125,7 @@ exports.fn = function(data, opts) {
     styleItem = styleItems[styleItemIndex];
     if(styleItem.cssAst.rules.isEmpty()){
       // clean up now emtpy <style/>s
-      var styleParent = styleItem.styleEl.parent;
+      var styleParent = findParent(data, styleItem.styleEl);
       styleParent.content.splice(styleParent.content.indexOf(styleItem.styleEl), 1);
       continue;
     }

From 913c38025eec6245d735adef184cf3e6108d2f5f Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 25 Nov 2016 17:13:10 +0100
Subject: [PATCH 052/162] Cosmetic code changes.

---
 lib/ext/select-css.js       |  4 ++--
 lib/ext/svgo-css-adapter.js |  2 +-
 plugins/inlineStyles.js     | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/ext/select-css.js b/lib/ext/select-css.js
index faf8fa924..ffe4ceca2 100644
--- a/lib/ext/select-css.js
+++ b/lib/ext/select-css.js
@@ -3,9 +3,9 @@
 var cssSelect      = require('css-select'),
     SvgoCssAdapter = require('./svgo-css-adapter');
 
-var cssSelectOpts = {xmlMode: true};
+var cssSelectOpts  = {xmlMode: true};
 
-module.exports    = function(selector, rootNode) {
+module.exports     = function(selector, rootNode) {
   if(!cssSelectOpts.adapter) {
     cssSelectOpts.adapter = new SvgoCssAdapter(rootNode);
   }
diff --git a/lib/ext/svgo-css-adapter.js b/lib/ext/svgo-css-adapter.js
index 264bbaafe..c8015135f 100644
--- a/lib/ext/svgo-css-adapter.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -2,7 +2,7 @@
 
 var baseCssAdapter = require('css-select-base-adapter');
 require('object.assign').shim(); // for node v0.1x support
-var findParent  = require('./find-parent');
+var findParent = require('./find-parent');
 
 // DOMUtils API for SVGO AST (used by css-select)
 var svgoCssAdapterMin = {
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 0d0d1150a..127508b8e 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -12,11 +12,11 @@ exports.params = {
 exports.description = 'inline styles (optionally skip selectors that match more than once)';
 
 
-var SPECIFICITY   = require('specificity'),
-    stable        = require('stable'),
-    csso          = require('csso'),
-	selectCss     = require('../lib/ext/select-css'),
-    findParent    = require('../lib/ext/find-parent');
+var SPECIFICITY = require('specificity'),
+    stable      = require('stable'),
+    csso        = require('csso'),
+    selectCss   = require('../lib/ext/select-css'),
+    findParent  = require('../lib/ext/find-parent');
 
 /**
   * Moves + merges styles from style elements to element styles

From 821c3f2e67d6663dce112221f50135a3a1562f9c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 27 Nov 2016 12:52:51 +0100
Subject: [PATCH 053/162] Fix getText method.

---
 lib/ext/svgo-css-adapter.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/ext/svgo-css-adapter.js b/lib/ext/svgo-css-adapter.js
index c8015135f..b6516299f 100644
--- a/lib/ext/svgo-css-adapter.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -34,9 +34,7 @@ var svgoCssAdapterMin = {
   // get the text content of the node, and its children if it has any
   // getText: ( node:Node ) => text:String
   getText: function(node) {
-    var nodeText = node.content[0].text || node.content[0].cdata || [],
-            DATA = nodeText.indexOf('>') >= 0 || nodeText.indexOf('<') >= 0 ? 'cdata' : 'text';
-    return DATA;
+    return node.content[0].text || node.content[0].cdata || '';
   },
 
   // get the attribute value

From 279431b86100e8cf33c6ee7e73364cc166f651e3 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 27 Nov 2016 12:59:18 +0100
Subject: [PATCH 054/162] Let adapter methods return null when single
 node/attribute is expected but not found.

---
 lib/ext/svgo-css-adapter.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/ext/svgo-css-adapter.js b/lib/ext/svgo-css-adapter.js
index b6516299f..db65199ad 100644
--- a/lib/ext/svgo-css-adapter.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -16,7 +16,7 @@ var svgoCssAdapterMin = {
   // get the parent of the node
   // getParent: ( node:Node ) => parentNode:Node
   getParent: function(node) {
-    return findParent(this.rootNode, node);
+    return findParent(this.rootNode, node) || null;
   },
 
   // get the node's children
@@ -40,7 +40,7 @@ var svgoCssAdapterMin = {
   // get the attribute value
   // getAttributeValue: ( elem:ElementNode, name:String ) => value:String
   getAttributeValue: function(elem, name) {
-    return elem.hasAttr(name) && elem.attr(name).value;
+    return elem.hasAttr(name) ? elem.attr(name).value : null;
   }
 };
 

From 7ea1b95f2f7ac5abea42985819f2f7d3999a4e09 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Dec 2016 23:15:55 +0100
Subject: [PATCH 055/162] Fix for non-existing style attribute in target
 element (see https://github.com/strarsis/svgo/pull/1/files).

---
 plugins/inlineStyles.js          | 17 +++++++++++++----
 test/plugins/inlineStyles.08.svg | 12 ++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 test/plugins/inlineStyles.08.svg

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 127508b8e..046b9773c 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -80,11 +80,20 @@ exports.fn = function(data, opts) {
       var selectedEl = selectedEls[selectedElIndex];
 
       // merge element(inline) styles + matching <style/> styles
-      var elInlineStyleAttr = selectedEl.attr('style'),
-          elInlineStyles    = elInlineStyleAttr.value,
-          inlineCssAst      = csso.parse(elInlineStyles, {context: 'block'});      
+      // empty defaults in case there is no style attribute
+      var elInlineStyleAttr = { name:   'style',
+                                value:  '',
+                                prefix: '',
+                                local:  'style'
+                              },
+          elInlineStyles    = '';
+      if(selectedEl.hasAttr('style')) {
+        elInlineStyleAttr = selectedEl.attr('style');
+        elInlineStyles    = elInlineStyleAttr.value;
+      }
+      var inlineCssAst    = csso.parse(elInlineStyles, {context: 'block'});
 
-      var newInlineCssAst   = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
+      var newInlineCssAst = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
       csso.walk(selectorItem.rulesetNode, function(node, item) {
         if(node.type === 'Declaration') {
           newInlineCssAst.declarations.insert(item);
diff --git a/test/plugins/inlineStyles.08.svg b/test/plugins/inlineStyles.08.svg
new file mode 100644
index 000000000..045d01b80
--- /dev/null
+++ b/test/plugins/inlineStyles.08.svg
@@ -0,0 +1,12 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{fill:blue;}
+    </style>
+    <rect width="100" height="100" class="st0"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect width="100" height="100" class="st0" style="fill:blue"/>
+</svg>

From b3ddf64f5ff40b4b44c08fa8d798fa5fb776d82d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 6 Dec 2016 23:19:08 +0100
Subject: [PATCH 056/162] Cosmetic code change.

---
 plugins/inlineStyles.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 046b9773c..ff6c6509f 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -81,11 +81,7 @@ exports.fn = function(data, opts) {
 
       // merge element(inline) styles + matching <style/> styles
       // empty defaults in case there is no style attribute
-      var elInlineStyleAttr = { name:   'style',
-                                value:  '',
-                                prefix: '',
-                                local:  'style'
-                              },
+      var elInlineStyleAttr = { name: 'style', value: '', prefix: '', local: 'style' },
           elInlineStyles    = '';
       if(selectedEl.hasAttr('style')) {
         elInlineStyleAttr = selectedEl.attr('style');

From 3c0dc05d4e8df0a6b6189944ae499fcddaae0632 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 9 Dec 2016 09:18:45 +0100
Subject: [PATCH 057/162] Improve comments. Add comments. Cosmetic code
 changes.

---
 lib/ext/find-parent.js      | 4 ++++
 lib/ext/recurse-ast.js      | 4 ++++
 lib/ext/select-css.js       | 4 ++++
 lib/ext/svgo-css-adapter.js | 4 +++-
 plugins/inlineStyles.js     | 8 +++++---
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/lib/ext/find-parent.js b/lib/ext/find-parent.js
index 6c3e2b205..8b1bb5fab 100644
--- a/lib/ext/find-parent.js
+++ b/lib/ext/find-parent.js
@@ -2,6 +2,10 @@
 
 var recurseAst = require('./recurse-ast');
 
+/**
+  * Returns parent node of a given node.
+  * Returns null if node has no parent (root node).
+  */
 module.exports = function(rootNode, childNode) {
 
   if(rootNode == childNode) {
diff --git a/lib/ext/recurse-ast.js b/lib/ext/recurse-ast.js
index b3b02db6c..58ccb8179 100644
--- a/lib/ext/recurse-ast.js
+++ b/lib/ext/recurse-ast.js
@@ -1,5 +1,9 @@
 'use strict';
 
+/**
+  * Traverses a svgo AST recursively and invokes passed callback with visited node.
+  * The callback function also can retrieve the parent node via this.parent.
+  */
 module.exports = function(startNode, fn, reverse) {
 
   function monkeys(node) {
diff --git a/lib/ext/select-css.js b/lib/ext/select-css.js
index ffe4ceca2..7902d3314 100644
--- a/lib/ext/select-css.js
+++ b/lib/ext/select-css.js
@@ -5,6 +5,10 @@ var cssSelect      = require('css-select'),
 
 var cssSelectOpts  = {xmlMode: true};
 
+/**
+  * Returns array of csso AST nodes that match a passed css selector 
+  * against a passed node (usually the root node).
+  */
 module.exports     = function(selector, rootNode) {
   if(!cssSelectOpts.adapter) {
     cssSelectOpts.adapter = new SvgoCssAdapter(rootNode);
diff --git a/lib/ext/svgo-css-adapter.js b/lib/ext/svgo-css-adapter.js
index db65199ad..d89f11bd0 100644
--- a/lib/ext/svgo-css-adapter.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -4,7 +4,9 @@ var baseCssAdapter = require('css-select-base-adapter');
 require('object.assign').shim(); // for node v0.1x support
 var findParent = require('./find-parent');
 
-// DOMUtils API for SVGO AST (used by css-select)
+/**
+  * DOMUtils API for SVGO AST (used by css-select)
+  */
 var svgoCssAdapterMin = {
 
   // is the node a tag?
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index ff6c6509f..103935e8e 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -49,8 +49,9 @@ exports.fn = function(data, opts) {
     // collect css selectors and their containing ruleset
     csso.walk(cssAst, function(node, item) {
       if(node.type === 'SimpleSelector') {
-		// csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
-	    // Selector group ('Selector' in csso) separated by comma: <'SimpleSelector'>, <'SimpleSelector'>, ...
+		    // csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
+	      // Selector group ('Selector' in csso) consisting of simple selectors ('SimpleSelector' in csso), separated by comma.
+        // <Selector>: <'SimpleSelector'>, <'SimpleSelector'>, ...
         var selectorStr  = csso.translate(node);
         var selectorItem = {
           selectorStr:        selectorStr,
@@ -79,16 +80,17 @@ exports.fn = function(data, opts) {
     for(var selectedElIndex in selectedEls) {
       var selectedEl = selectedEls[selectedElIndex];
 
-      // merge element(inline) styles + matching <style/> styles
       // empty defaults in case there is no style attribute
       var elInlineStyleAttr = { name: 'style', value: '', prefix: '', local: 'style' },
           elInlineStyles    = '';
+
       if(selectedEl.hasAttr('style')) {
         elInlineStyleAttr = selectedEl.attr('style');
         elInlineStyles    = elInlineStyleAttr.value;
       }
       var inlineCssAst    = csso.parse(elInlineStyles, {context: 'block'});
 
+      // merge element(inline) styles + matching <style/> styles
       var newInlineCssAst = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
       csso.walk(selectorItem.rulesetNode, function(node, item) {
         if(node.type === 'Declaration') {

From 5da1482eb817701a71e98945674b8a318c84d388 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 9 Dec 2016 15:23:51 +0100
Subject: [PATCH 058/162] Improve variable names. Improve comments.

---
 lib/ext/find-parent.js | 6 +++---
 lib/ext/recurse-ast.js | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/lib/ext/find-parent.js b/lib/ext/find-parent.js
index 8b1bb5fab..6275705d7 100644
--- a/lib/ext/find-parent.js
+++ b/lib/ext/find-parent.js
@@ -6,9 +6,9 @@ var recurseAst = require('./recurse-ast');
   * Returns parent node of a given node.
   * Returns null if node has no parent (root node).
   */
-module.exports = function(rootNode, childNode) {
+module.exports = function(startNode, childNode) {
 
-  if(rootNode == childNode) {
+  if(startNode == childNode) {
     return null; // root node has no parent
   }
 
@@ -19,6 +19,6 @@ module.exports = function(rootNode, childNode) {
       return false; // abort recursion
     }
   };
-  recurseAst.bind({parent:null})(rootNode, _findParentNode);
+  recurseAst.bind({parent:null})(startNode, _findParentNode);
   return foundParentNode;
 };
diff --git a/lib/ext/recurse-ast.js b/lib/ext/recurse-ast.js
index 58ccb8179..9da835593 100644
--- a/lib/ext/recurse-ast.js
+++ b/lib/ext/recurse-ast.js
@@ -2,7 +2,9 @@
 
 /**
   * Traverses a svgo AST recursively and invokes passed callback with visited node.
-  * The callback function also can retrieve the parent node via this.parent.
+  * The callback function also can retrieve 
+  *   the parent node via this.parent.
+  *   the root   node via this.root (passed to be recursed against)
   */
 module.exports = function(startNode, fn, reverse) {
 
@@ -16,7 +18,7 @@ module.exports = function(startNode, fn, reverse) {
         monkeys(childNode);
       }
 
-      var fnRes = fn.bind({parent: node})(childNode);
+      var fnRes = fn.bind({root: startNode, parent: node})(childNode);
       if(fnRes === false) {
         return fnRes;
       }

From 73fcd3cdfd55be7a2bcd9c54cd1bcd9f8a34db2b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 9 Dec 2016 15:24:08 +0100
Subject: [PATCH 059/162] Add support for mediaqueries.

---
 plugins/inlineStyles.js | 37 ++++++++++++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 103935e8e..9a032c395 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -6,7 +6,8 @@ exports.active = true;
 
 exports.params = {
   onlyMatchedOnce:        true,
-  removeMatchedSelectors: true
+  removeMatchedSelectors: true,
+  useMqs:                 ['screen']
 };
 
 exports.description = 'inline styles (optionally skip selectors that match more than once)';
@@ -47,24 +48,45 @@ exports.fn = function(data, opts) {
     });
 
     // collect css selectors and their containing ruleset
+    var curAtRuleExpNode = null;
     csso.walk(cssAst, function(node, item) {
+      if(node.type === 'AtruleExpression') {
+        // media query expression
+        curAtRuleExpNode = node;
+      }
+
       if(node.type === 'SimpleSelector') {
 		    // csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
 	      // Selector group ('Selector' in csso) consisting of simple selectors ('SimpleSelector' in csso), separated by comma.
         // <Selector>: <'SimpleSelector'>, <'SimpleSelector'>, ...
-        var selectorStr  = csso.translate(node);
+        var selectorStr = csso.translate(node);
+
+        // mediaquery if SimpleSelector belongs to one
+        var mqStr = '';
+        if(curAtRuleExpNode !== null) {
+          mqStr = csso.translate(curAtRuleExpNode);
+        }
+
         var selectorItem = {
           selectorStr:        selectorStr,
           simpleSelectorItem: item,
-          rulesetNode:        this.ruleset
+          rulesetNode:        this.ruleset,
+          atRuleExpNode:      curAtRuleExpNode,
+          mqStr:              mqStr
         };
         selectorItems.push(selectorItem);
       }
     });
   }
 
+  // filter for mediaqueries to be used or without any mediaquery
+  var selectorItemsMqs = selectorItems.filter(function(selectorItem) {
+    return (selectorItem.mqStr.length == 0 || 
+            opts.useMqs.indexOf(selectorItem.mqStr) > -1);
+  });
+
   // stable-sort css selectors by their specificity
-  var selectorItemsSorted = stable(selectorItems, function(item1, item2) {
+  var selectorItemsSorted = stable(selectorItemsMqs, function(item1, item2) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
 
@@ -114,12 +136,17 @@ exports.fn = function(data, opts) {
     }
   }
 
-  // clean up <style/> rulesets without any css selectors left
   var styleItemIndex = 0,
       styleItem      = {};
   for(styleItemIndex in styleItems) {
     styleItem = styleItems[styleItemIndex];
     csso.walk(styleItem.cssAst, function(node, item, list) {
+      // clean up <style/> atrules without any rulesets left
+      if(node.type === 'Atrule' &&
+         node.block.rules.head === null) {
+        list.remove(item);
+      }
+      // clean up <style/> rulesets without any css selectors left
       if(node.type === 'Ruleset' &&
          node.selector.selectors.head == null) {
           list.remove(item);

From 28271b4a27514ff013cf2ddfe1cfbc2dcd87dd22 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 9 Dec 2016 15:24:17 +0100
Subject: [PATCH 060/162] Add test for mediaqueries.

---
 test/plugins/inlineStyles.07.svg | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
index 93868953d..3e3aba672 100644
--- a/test/plugins/inlineStyles.07.svg
+++ b/test/plugins/inlineStyles.07.svg
@@ -1,18 +1,16 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0{fill:red}.st1{fill:blue}
+        .st0{fill:red}.st1{fill:blue}@media only screen and (max-width: 500px){.st1{fill:yellow}}
     </style>
     <rect width="100" height="100" class="st0 st1" style="stroke-width:3;stroke:blue;"/>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0{fill:red}
+        @media only screen and (max-width: 500px){.st1{fill:yellow}}
     </style>
-    <rect width="100" height="100" class="st0 st1" style="fill:blue;stroke-width:3;stroke:blue"/>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+    <rect width="100" height="100" class="st0 st1" style="fill:blue;fill:red;stroke-width:3;stroke:blue"/>
 </svg>
 

From 2ef6a978f817ce38d0c3b9ac7a8cda2290c3c4bc Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 9 Dec 2016 17:18:06 +0100
Subject: [PATCH 061/162] Update css-select package dependency reference.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 12feae137..8094df6ec 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
   "dependencies": {
     "coa": "~1.0.1",
     "colors": "~1.1.2",
-    "css-select": "github:fb55/css-select#e109d4b3668354542c806a6b652410f135d679ae",
+    "css-select": "github:fb55/css-select#e02737b8fd5bf8271818cefe8b6dfe7de3584dbd",
     "css-select-base-adapter": "^0.1.0",
     "csso": "^2.2.1",
     "js-yaml": "~3.6.1",

From f6e5f40452d04d5cb66357db355b4419d2042fad Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 11 Dec 2016 21:26:21 +0100
Subject: [PATCH 062/162] Use native spliceContent method.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 9a032c395..d0fa1c160 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -160,7 +160,7 @@ exports.fn = function(data, opts) {
     if(styleItem.cssAst.rules.isEmpty()){
       // clean up now emtpy <style/>s
       var styleParent = findParent(data, styleItem.styleEl);
-      styleParent.content.splice(styleParent.content.indexOf(styleItem.styleEl), 1);
+      styleParent.spliceContent(styleParent.content.indexOf(styleItem.styleEl), 1);
       continue;
     }
 

From f4b3c58360b05a4b6a620a85e887cf7f84e1970c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 11 Dec 2016 21:31:26 +0100
Subject: [PATCH 063/162] Remove findParent(...) as jsAPI parentNode property
 already references to parent node.

---
 lib/ext/find-parent.js      | 24 ------------------------
 lib/ext/recurse-ast.js      | 36 ------------------------------------
 lib/ext/svgo-css-adapter.js |  3 +--
 plugins/inlineStyles.js     |  5 ++---
 4 files changed, 3 insertions(+), 65 deletions(-)
 delete mode 100644 lib/ext/find-parent.js
 delete mode 100644 lib/ext/recurse-ast.js

diff --git a/lib/ext/find-parent.js b/lib/ext/find-parent.js
deleted file mode 100644
index 6275705d7..000000000
--- a/lib/ext/find-parent.js
+++ /dev/null
@@ -1,24 +0,0 @@
-'use strict';
-
-var recurseAst = require('./recurse-ast');
-
-/**
-  * Returns parent node of a given node.
-  * Returns null if node has no parent (root node).
-  */
-module.exports = function(startNode, childNode) {
-
-  if(startNode == childNode) {
-    return null; // root node has no parent
-  }
-
-  var foundParentNode = null;
-  var _findParentNode = function(childNodeCompare) {
-    if(childNode == childNodeCompare) {
-      foundParentNode = this.parent;
-      return false; // abort recursion
-    }
-  };
-  recurseAst.bind({parent:null})(startNode, _findParentNode);
-  return foundParentNode;
-};
diff --git a/lib/ext/recurse-ast.js b/lib/ext/recurse-ast.js
deleted file mode 100644
index 9da835593..000000000
--- a/lib/ext/recurse-ast.js
+++ /dev/null
@@ -1,36 +0,0 @@
-'use strict';
-
-/**
-  * Traverses a svgo AST recursively and invokes passed callback with visited node.
-  * The callback function also can retrieve 
-  *   the parent node via this.parent.
-  *   the root   node via this.root (passed to be recursed against)
-  */
-module.exports = function(startNode, fn, reverse) {
-
-  function monkeys(node) {
-
-    for(var childNodeIndex in node.content) {
-      var childNode = node.content[childNodeIndex];
-
-      // reverse pass
-      if (reverse && childNode.content) {
-        monkeys(childNode);
-      }
-
-      var fnRes = fn.bind({root: startNode, parent: node})(childNode);
-      if(fnRes === false) {
-        return fnRes;
-      }
-
-      // direct pass
-      if (!reverse && childNode.content) {
-        monkeys(childNode);
-      }
-
-    }
-
-  }
-
-  return monkeys(startNode);
-};
diff --git a/lib/ext/svgo-css-adapter.js b/lib/ext/svgo-css-adapter.js
index d89f11bd0..fc77a2230 100644
--- a/lib/ext/svgo-css-adapter.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -2,7 +2,6 @@
 
 var baseCssAdapter = require('css-select-base-adapter');
 require('object.assign').shim(); // for node v0.1x support
-var findParent = require('./find-parent');
 
 /**
   * DOMUtils API for SVGO AST (used by css-select)
@@ -18,7 +17,7 @@ var svgoCssAdapterMin = {
   // get the parent of the node
   // getParent: ( node:Node ) => parentNode:Node
   getParent: function(node) {
-    return findParent(this.rootNode, node) || null;
+    return node.parentNode || null;
   },
 
   // get the node's children
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index d0fa1c160..a67b982ed 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -16,8 +16,7 @@ exports.description = 'inline styles (optionally skip selectors that match more
 var SPECIFICITY = require('specificity'),
     stable      = require('stable'),
     csso        = require('csso'),
-    selectCss   = require('../lib/ext/select-css'),
-    findParent  = require('../lib/ext/find-parent');
+    selectCss   = require('../lib/ext/select-css');
 
 /**
   * Moves + merges styles from style elements to element styles
@@ -159,7 +158,7 @@ exports.fn = function(data, opts) {
     styleItem = styleItems[styleItemIndex];
     if(styleItem.cssAst.rules.isEmpty()){
       // clean up now emtpy <style/>s
-      var styleParent = findParent(data, styleItem.styleEl);
+      var styleParent = styleItem.styleEl.parentNode;
       styleParent.spliceContent(styleParent.content.indexOf(styleItem.styleEl), 1);
       continue;
     }

From f5c1003f995dd262758ec2f1dca981d861a35d01 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 11 Dec 2016 23:28:36 +0100
Subject: [PATCH 064/162] Add proper specificity handling for !important.

---
 plugins/inlineStyles.js          | 44 +++++++++++++++++++++++---------
 test/plugins/inlineStyles.04.svg |  5 ++--
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index a67b982ed..224a41303 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -47,13 +47,17 @@ exports.fn = function(data, opts) {
     });
 
     // collect css selectors and their containing ruleset
-    var curAtRuleExpNode = null;
+    var curSelectorItem  = null,
+        curAtRuleExpNode = null;
     csso.walk(cssAst, function(node, item) {
+
+      // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
       if(node.type === 'AtruleExpression') {
         // media query expression
         curAtRuleExpNode = node;
       }
 
+      // retains reference to the last SimpleSelector for "look-ahead"
       if(node.type === 'SimpleSelector') {
 		    // csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
 	      // Selector group ('Selector' in csso) consisting of simple selectors ('SimpleSelector' in csso), separated by comma.
@@ -66,15 +70,24 @@ exports.fn = function(data, opts) {
           mqStr = csso.translate(curAtRuleExpNode);
         }
 
-        var selectorItem = {
+        curSelectorItem = {
           selectorStr:        selectorStr,
+
           simpleSelectorItem: item,
           rulesetNode:        this.ruleset,
+
           atRuleExpNode:      curAtRuleExpNode,
           mqStr:              mqStr
         };
-        selectorItems.push(selectorItem);
+        selectorItems.push(curSelectorItem);
       }
+
+      // "look-ahead the SimpleSelector", Value node comes _after_ the affected SimpleSelector
+      if(node.type === 'Value') {
+        // !important value?
+        curSelectorItem.important = node.important;
+      }
+
     });
   }
 
@@ -88,10 +101,16 @@ exports.fn = function(data, opts) {
   var selectorItemsSorted = stable(selectorItemsMqs, function(item1, item2) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
+  //  and secondly by !important
+  var selectorItemsSortedImp = stable(selectorItemsSorted, function(item1, item2) {
+    var item1Score = ~~item1.important, // (cast boolean to number)
+        item2Score = ~~item2.important; //  "
+    return (item1Score - item2Score);
+  });
 
   // apply <style/> styles to matched elements
-  for(var selectorItemIndex in selectorItemsSorted) {
-    var selectorItem = selectorItemsSorted[selectorItemIndex],
+  for(var selectorItemIndex in selectorItemsSortedImp) {
+    var selectorItem = selectorItemsSortedImp[selectorItemIndex],
         selectedEls  = selectCss(selectorItem.selectorStr, data);
     if(opts.onlyMatchedOnce && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
@@ -113,18 +132,19 @@ exports.fn = function(data, opts) {
 
       // merge element(inline) styles + matching <style/> styles
       var newInlineCssAst = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
-      csso.walk(selectorItem.rulesetNode, function(node, item) {
-        if(node.type === 'Declaration') {
-          newInlineCssAst.declarations.insert(item);
+
+      var _walkInline = function(node, item) {
+        if(node.type === 'Value') {
+          node.important = false; // !important irrelevant inline
         }
-      });
-      csso.walk(inlineCssAst, function(node, item) {
         if(node.type === 'Declaration') {
           newInlineCssAst.declarations.insert(item);
         }
-      });
-      var newCss = csso.translate(newInlineCssAst);
+      };
+      csso.walk(selectorItem.rulesetNode, _walkInline);
+      csso.walk(inlineCssAst,             _walkInline);
 
+      var newCss = csso.translate(newInlineCssAst);
       elInlineStyleAttr.value = newCss;
       selectedEl.addAttr(elInlineStyleAttr);
     }
diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
index 361a56b08..bf545949b 100644
--- a/test/plugins/inlineStyles.04.svg
+++ b/test/plugins/inlineStyles.04.svg
@@ -1,13 +1,14 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
+        .st0{fill:red !important;}
         .st0{fill:blue;}
     </style>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;fill:red;"/>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill:blue;stroke-width:3;fill:red"/>
+    <rect width="100" height="100" class="st0" style="fill:red;fill:blue;stroke-width:3"/>
 </svg>
 

From 001977378566bba15b887d023ca661babc414623 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 12 Dec 2016 02:38:34 +0100
Subject: [PATCH 065/162] Fix !important handling/sorting. Fix !important
 sorting related test.

---
 plugins/inlineStyles.js          | 46 +++++++++++++++-----------------
 test/plugins/inlineStyles.04.svg |  2 +-
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 224a41303..6404bbea6 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -47,8 +47,7 @@ exports.fn = function(data, opts) {
     });
 
     // collect css selectors and their containing ruleset
-    var curSelectorItem  = null,
-        curAtRuleExpNode = null;
+    var curAtRuleExpNode = null;
     csso.walk(cssAst, function(node, item) {
 
       // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
@@ -57,7 +56,6 @@ exports.fn = function(data, opts) {
         curAtRuleExpNode = node;
       }
 
-      // retains reference to the last SimpleSelector for "look-ahead"
       if(node.type === 'SimpleSelector') {
 		    // csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
 	      // Selector group ('Selector' in csso) consisting of simple selectors ('SimpleSelector' in csso), separated by comma.
@@ -70,7 +68,7 @@ exports.fn = function(data, opts) {
           mqStr = csso.translate(curAtRuleExpNode);
         }
 
-        curSelectorItem = {
+        var curSelectorItem = {
           selectorStr:        selectorStr,
 
           simpleSelectorItem: item,
@@ -82,12 +80,6 @@ exports.fn = function(data, opts) {
         selectorItems.push(curSelectorItem);
       }
 
-      // "look-ahead the SimpleSelector", Value node comes _after_ the affected SimpleSelector
-      if(node.type === 'Value') {
-        // !important value?
-        curSelectorItem.important = node.important;
-      }
-
     });
   }
 
@@ -101,16 +93,11 @@ exports.fn = function(data, opts) {
   var selectorItemsSorted = stable(selectorItemsMqs, function(item1, item2) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
   });
-  //  and secondly by !important
-  var selectorItemsSortedImp = stable(selectorItemsSorted, function(item1, item2) {
-    var item1Score = ~~item1.important, // (cast boolean to number)
-        item2Score = ~~item2.important; //  "
-    return (item1Score - item2Score);
-  });
 
   // apply <style/> styles to matched elements
-  for(var selectorItemIndex in selectorItemsSortedImp) {
-    var selectorItem = selectorItemsSortedImp[selectorItemIndex],
+  for(var selectorItemIndex in selectorItemsSorted) {
+    var selectorItem = selectorItemsSorted[selectorItemIndex],
+
         selectedEls  = selectCss(selectorItem.selectorStr, data);
     if(opts.onlyMatchedOnce && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
@@ -119,7 +106,6 @@ exports.fn = function(data, opts) {
 
     for(var selectedElIndex in selectedEls) {
       var selectedEl = selectedEls[selectedElIndex];
-
       // empty defaults in case there is no style attribute
       var elInlineStyleAttr = { name: 'style', value: '', prefix: '', local: 'style' },
           elInlineStyles    = '';
@@ -133,18 +119,30 @@ exports.fn = function(data, opts) {
       // merge element(inline) styles + matching <style/> styles
       var newInlineCssAst = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
 
-      var _walkInline = function(node, item) {
-        if(node.type === 'Value') {
-          node.important = false; // !important irrelevant inline
-        }
+      var mergedDeclarations = [];
+      var _walkInline = function(node, item, list) {
         if(node.type === 'Declaration') {
-          newInlineCssAst.declarations.insert(item);
+          mergedDeclarations.push(item);
         }
       };
       csso.walk(selectorItem.rulesetNode, _walkInline);
       csso.walk(inlineCssAst,             _walkInline);
 
+      // sort by !important(ce)
+      var mergedDeclarationsSorted = stable(mergedDeclarations, function(declaration1, declaration2) {
+        var declaration1Score = ~~declaration1.important, // (cast boolean to number)
+            declaration2Score = ~~declaration2.important; //  "
+        return (declaration1Score - declaration2Score);
+      });
+
+      // to css
+      for(var mergedDeclarationsSortedIndex in mergedDeclarationsSorted) {
+        var declaration = mergedDeclarationsSorted[mergedDeclarationsSortedIndex];
+        declaration.data.value.important = false; // !important is irrelevant in inline styles
+        newInlineCssAst.declarations.insert(declaration);
+      }
       var newCss = csso.translate(newInlineCssAst);
+
       elInlineStyleAttr.value = newCss;
       selectedEl.addAttr(elInlineStyleAttr);
     }
diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
index bf545949b..185eb22ba 100644
--- a/test/plugins/inlineStyles.04.svg
+++ b/test/plugins/inlineStyles.04.svg
@@ -9,6 +9,6 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill:red;fill:blue;stroke-width:3"/>
+    <rect width="100" height="100" class="st0" style="fill:blue;fill:red;stroke-width:3"/>
 </svg>
 

From a33efc88bb18cf7b0786fb82430b01a044018ca4 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 12 Dec 2016 03:25:02 +0100
Subject: [PATCH 066/162] Improve variable/function names. Improve comment.

---
 plugins/inlineStyles.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 6404bbea6..90db5747a 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -53,6 +53,7 @@ exports.fn = function(data, opts) {
       // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
       if(node.type === 'AtruleExpression') {
         // media query expression
+        // Node: this.atruleExpression is not set (null) for SimpleSelectors
         curAtRuleExpNode = node;
       }
 
@@ -120,13 +121,13 @@ exports.fn = function(data, opts) {
       var newInlineCssAst = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
 
       var mergedDeclarations = [];
-      var _walkInline = function(node, item, list) {
+      var _fetchDeclarations = function(node, item, list) {
         if(node.type === 'Declaration') {
           mergedDeclarations.push(item);
         }
       };
-      csso.walk(selectorItem.rulesetNode, _walkInline);
-      csso.walk(inlineCssAst,             _walkInline);
+      csso.walk(selectorItem.rulesetNode, _fetchDeclarations);
+      csso.walk(inlineCssAst,             _fetchDeclarations);
 
       // sort by !important(ce)
       var mergedDeclarationsSorted = stable(mergedDeclarations, function(declaration1, declaration2) {

From 123f94adda22a18d7950a330a6e7d2b0b9bd5e0c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 12 Dec 2016 06:40:28 +0100
Subject: [PATCH 067/162] Add test for issue
 https://github.com/svg/svgo/pull/592#issuecomment-266327016.

---
 test/plugins/inlineStyles.09.svg | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 test/plugins/inlineStyles.09.svg

diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
new file mode 100644
index 000000000..95e1a3958
--- /dev/null
+++ b/test/plugins/inlineStyles.09.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
+  <style>
+    .cls-7 {
+      only-cls-7: 1;
+    }
+    .cls-7,
+    .cls-8 {
+      cls-7-and-8: 1;
+    }
+  </style>
+
+  <path class="cls-7"/>
+  <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8"/>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
+    <path class="cls-7" style="cls-7-and-8:1;only-cls-7:1"/>
+    <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8" style="cls-7-and-8:1"/>
+</svg>
\ No newline at end of file

From e371ef3f9a049967d1db967b27d45ec8f6a48f9b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 12 Dec 2016 06:41:42 +0100
Subject: [PATCH 068/162] Fix jshint unused variable error.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 90db5747a..708e1bfd5 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -121,7 +121,7 @@ exports.fn = function(data, opts) {
       var newInlineCssAst = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
 
       var mergedDeclarations = [];
-      var _fetchDeclarations = function(node, item, list) {
+      var _fetchDeclarations = function(node, item) {
         if(node.type === 'Declaration') {
           mergedDeclarations.push(item);
         }

From f222530befdfa0aa839efd73deb0a527c6ee7e4b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 12 Dec 2016 06:59:08 +0100
Subject: [PATCH 069/162] Add fix for leaking declaration references
 (csso.translate(...)).

---
 plugins/inlineStyles.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 708e1bfd5..ee5a74bbe 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -126,8 +126,10 @@ exports.fn = function(data, opts) {
           mergedDeclarations.push(item);
         }
       };
-      csso.walk(selectorItem.rulesetNode, _fetchDeclarations);
-      csso.walk(inlineCssAst,             _fetchDeclarations);
+      var itemRulesetNodeCloned = csso.clone(selectorItem.rulesetNode);
+        // clone to prevent leaking declaration references (csso.translate(...))
+      csso.walk(itemRulesetNodeCloned, _fetchDeclarations);
+      csso.walk(inlineCssAst,          _fetchDeclarations);
 
       // sort by !important(ce)
       var mergedDeclarationsSorted = stable(mergedDeclarations, function(declaration1, declaration2) {

From a336b3c445cee08abc23bb4561aee2a15d349375 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 12 Dec 2016 17:37:01 +0100
Subject: [PATCH 070/162] Remove !important removal for inline styles
 (inline-relative specificity).

---
 plugins/inlineStyles.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index ee5a74bbe..9d42d6cc8 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -141,7 +141,6 @@ exports.fn = function(data, opts) {
       // to css
       for(var mergedDeclarationsSortedIndex in mergedDeclarationsSorted) {
         var declaration = mergedDeclarationsSorted[mergedDeclarationsSortedIndex];
-        declaration.data.value.important = false; // !important is irrelevant in inline styles
         newInlineCssAst.declarations.insert(declaration);
       }
       var newCss = csso.translate(newInlineCssAst);

From 82eab751fe06d0e98b353a07c0f476d47c78076b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 12 Dec 2016 17:39:58 +0100
Subject: [PATCH 071/162] Adjust test.

---
 test/plugins/inlineStyles.04.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
index 185eb22ba..7e5e3ffdd 100644
--- a/test/plugins/inlineStyles.04.svg
+++ b/test/plugins/inlineStyles.04.svg
@@ -9,6 +9,6 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill:blue;fill:red;stroke-width:3"/>
+    <rect width="100" height="100" class="st0" style="fill:blue;fill:red!important;stroke-width:3"/>
 </svg>
 

From 94d36fed1662ba0e308d68391ba05787954b5dd7 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 12 Dec 2016 18:21:46 +0100
Subject: [PATCH 072/162] Use more systematic tests. Fix style ordering (found
 out by the new tests).

---
 plugins/inlineStyles.js          | 11 +++++++----
 test/plugins/inlineStyles.01.svg |  8 ++------
 test/plugins/inlineStyles.02.svg |  9 +++------
 test/plugins/inlineStyles.03.svg | 29 +++++++++++++++++------------
 test/plugins/inlineStyles.04.svg |  7 +++----
 test/plugins/inlineStyles.05.svg | 20 ++++++++++++--------
 test/plugins/inlineStyles.06.svg | 16 +++++++++++++---
 test/plugins/inlineStyles.07.svg | 17 +++++++++--------
 test/plugins/inlineStyles.08.svg | 13 +++++++++----
 test/plugins/inlineStyles.09.svg | 28 ++++++++++++----------------
 10 files changed, 87 insertions(+), 71 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 9d42d6cc8..3e3ce0780 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -50,12 +50,15 @@ exports.fn = function(data, opts) {
     var curAtRuleExpNode = null;
     csso.walk(cssAst, function(node, item) {
 
+      // media query blocks
       // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
-      if(node.type === 'AtruleExpression') {
-        // media query expression
-        // Node: this.atruleExpression is not set (null) for SimpleSelectors
+      if(node.type === 'AtruleExpression') { // marks the beginning of an Atrule
         curAtRuleExpNode = node;
       }
+      // "look-ahead the SimpleSelector", Atrule node comes _after_ the affected SimpleSelector
+      if(node.type === 'Atrule')           { // marks the end of an Atrule
+        curAtRuleExpNode = null;
+      }
 
       if(node.type === 'SimpleSelector') {
 		    // csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
@@ -93,7 +96,7 @@ exports.fn = function(data, opts) {
   // stable-sort css selectors by their specificity
   var selectorItemsSorted = stable(selectorItemsMqs, function(item1, item2) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
-  });
+  }).reverse(); // last style applies last (final)
 
   // apply <style/> styles to matched elements
   for(var selectorItemIndex in selectorItemsSorted) {
diff --git a/test/plugins/inlineStyles.01.svg b/test/plugins/inlineStyles.01.svg
index ccb7d4912..24cda3991 100644
--- a/test/plugins/inlineStyles.01.svg
+++ b/test/plugins/inlineStyles.01.svg
@@ -1,13 +1,9 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style>
-    </style>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+    <rect width="100" height="100" class="st0"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style/>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+    <rect width="100" height="100" class="st0"/>
 </svg>
-
diff --git a/test/plugins/inlineStyles.02.svg b/test/plugins/inlineStyles.02.svg
index 13a1a6fa3..045d01b80 100644
--- a/test/plugins/inlineStyles.02.svg
+++ b/test/plugins/inlineStyles.02.svg
@@ -1,15 +1,12 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0,.st2{fill:red;}
+        .st0{fill:blue;}
     </style>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+    <rect width="100" height="100" class="st0"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style>
-        .st2{fill:red}
-    </style>
-    <rect width="100" height="100" class="st0" style="fill:red;stroke-width:3;stroke:blue"/>
+    <rect width="100" height="100" class="st0" style="fill:blue"/>
 </svg>
diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index 8893eec7f..bbc8f17cf 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -1,16 +1,21 @@
-<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style>
-        #test2{color:blue;fill:blue}.st0,.st2{fill:red}.st1{color:yellow}#test1{color:blue}
-    </style>
-    <rect width="100" height="100" class="st0 st1" style="stroke-width:3;stroke:blue;"/>
+<svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
+  <style>
+    .cls-7 {
+      only-cls-7: 1;
+    }
+    .cls-7,
+    .cls-8 {
+      cls-7-and-8: 1;
+    }
+  </style>
+
+  <path class="cls-7"/>
+  <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8"/>
 </svg>
 
 @@@
 
-<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style>
-        #test2{color:blue;fill:blue}.st2{fill:red}#test1{color:blue}
-    </style>
-    <rect width="100" height="100" class="st0 st1" style="color:yellow;fill:red;stroke-width:3;stroke:blue"/>
-</svg>
-
+<svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
+    <path class="cls-7" style="only-cls-7:1;cls-7-and-8:1"/>
+    <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8" style="cls-7-and-8:1"/>
+</svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
index 7e5e3ffdd..8f3f0cb27 100644
--- a/test/plugins/inlineStyles.04.svg
+++ b/test/plugins/inlineStyles.04.svg
@@ -1,14 +1,13 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0{fill:red !important;}
         .st0{fill:blue;}
+        .st1{fill:red; }
     </style>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;"/>
+    <rect width="100" height="100" class="st0 st1"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill:blue;fill:red!important;stroke-width:3"/>
+    <rect width="100" height="100" class="st0 st1" style="fill:blue;fill:red"/>
 </svg>
-
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
index 2ab36d77d..2a03f9fb2 100644
--- a/test/plugins/inlineStyles.05.svg
+++ b/test/plugins/inlineStyles.05.svg
@@ -1,19 +1,23 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0{fill:red;} @media screen and (max-width: 200px) { .st1 { display: none; } }
+        @media screen { 
+          .st1{fill:red;}
+        }
+        @media print {
+          .st1{stroke:blue;}
+        }
+        .st1 {
+          color: yellow;
+        }
     </style>
-    <style>
-        .st0{color:yellow;}
-    </style>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+    <rect width="100" height="100" class="st0 st1"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        @media screen and (max-width: 200px){.st1{display:none}}
+        @media print{.st1{stroke:blue}}
     </style>
-    <rect width="100" height="100" class="st0" style="color:yellow;fill:red;stroke-width:3;stroke:blue"/>
+    <rect width="100" height="100" class="st0 st1" style="fill:red;color:yellow"/>
 </svg>
-
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
index 1f3956b48..5895243e9 100644
--- a/test/plugins/inlineStyles.06.svg
+++ b/test/plugins/inlineStyles.06.svg
@@ -1,13 +1,23 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0{fill:red;}
+        .red {
+          fill: red;
+        }
+        .blue {
+          fill: blue;
+        }
     </style>
-    <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue;"/>
+    <rect width="100" height="100" class="red blue"/>
+    <rect width="100" height="100" class="blue red"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill:red;stroke-width:3;stroke:blue"/>
+    <rect width="100" height="100" class="red blue" style="fill:red;fill:blue"/>
+    <rect width="100" height="100" class="blue red" style="fill:red;fill:blue"/>
 </svg>
 
+@@@
+
+{"onlyMatchedOnce":false}
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
index 3e3aba672..6c770bd50 100644
--- a/test/plugins/inlineStyles.07.svg
+++ b/test/plugins/inlineStyles.07.svg
@@ -1,16 +1,17 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0{fill:red}.st1{fill:blue}@media only screen and (max-width: 500px){.st1{fill:yellow}}
+        .red {
+          fill: red !important;
+        }
+        .blue {
+          fill: blue;
+        }
     </style>
-    <rect width="100" height="100" class="st0 st1" style="stroke-width:3;stroke:blue;"/>
+    <rect width="100" height="100" class="blue red"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style>
-        @media only screen and (max-width: 500px){.st1{fill:yellow}}
-    </style>
-    <rect width="100" height="100" class="st0 st1" style="fill:blue;fill:red;stroke-width:3;stroke:blue"/>
-</svg>
-
+    <rect width="100" height="100" class="blue red" style="fill:red!important;fill:blue"/>
+</svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.08.svg b/test/plugins/inlineStyles.08.svg
index 045d01b80..01552ef9b 100644
--- a/test/plugins/inlineStyles.08.svg
+++ b/test/plugins/inlineStyles.08.svg
@@ -1,12 +1,17 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        .st0{fill:blue;}
+        .red {
+          fill: red !important;
+        }
+        .blue {
+          fill: blue;
+        }
     </style>
-    <rect width="100" height="100" class="st0"/>
+    <rect width="100" height="100" class="blue red" style="fill:yellow"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill:blue"/>
-</svg>
+    <rect width="100" height="100" class="blue red" style="fill:red!important;fill:blue;fill:yellow"/>
+</svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
index 95e1a3958..469c09368 100644
--- a/test/plugins/inlineStyles.09.svg
+++ b/test/plugins/inlineStyles.09.svg
@@ -1,21 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
-  <style>
-    .cls-7 {
-      only-cls-7: 1;
-    }
-    .cls-7,
-    .cls-8 {
-      cls-7-and-8: 1;
-    }
-  </style>
-
-  <path class="cls-7"/>
-  <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8"/>
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .red {
+          fill: red !important;
+        }
+        .blue {
+          fill: blue;
+        }
+    </style>
+    <rect width="100" height="100" class="blue red" style="fill:yellow !important"/>
 </svg>
 
 @@@
 
-<svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
-    <path class="cls-7" style="cls-7-and-8:1;only-cls-7:1"/>
-    <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8" style="cls-7-and-8:1"/>
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect width="100" height="100" class="blue red" style="fill:red!important;fill:blue;fill:yellow!important"/>
 </svg>
\ No newline at end of file

From f5eed30a718cdb9d4df46ba6c9b7ca0a7f607c56 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 13 Dec 2016 15:24:51 +0100
Subject: [PATCH 073/162] Simplify loops to one.

---
 plugins/inlineStyles.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 3e3ce0780..106325f35 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -174,10 +174,6 @@ exports.fn = function(data, opts) {
           list.remove(item);
       }
     });
-  }
-
-  // update / clean up <style/>s with their changed ast
-  for(styleItemIndex in styleItems) {
     styleItem = styleItems[styleItemIndex];
     if(styleItem.cssAst.rules.isEmpty()){
       // clean up now emtpy <style/>s

From f9eda396c3b0cd47f4e8466f7a056881812aabe6 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 13 Dec 2016 15:28:02 +0100
Subject: [PATCH 074/162] Add test + support for styles in CDATA.

---
 plugins/inlineStyles.js          |  2 +-
 test/plugins/inlineStyles.10.svg | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 test/plugins/inlineStyles.10.svg

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 106325f35..fc3027add 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -37,7 +37,7 @@ exports.fn = function(data, opts) {
       // skip empty <style/>s
       continue;
     }
-    var cssStr = styleEl.content[0].text;
+    var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];
 
     // collect <style/>s and their css ast
     var cssAst = csso.parse(cssStr, {context: 'stylesheet'});
diff --git a/test/plugins/inlineStyles.10.svg b/test/plugins/inlineStyles.10.svg
new file mode 100644
index 000000000..f0cbd1dc4
--- /dev/null
+++ b/test/plugins/inlineStyles.10.svg
@@ -0,0 +1,14 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        <![CDATA[
+            .st0{fill:blue;}
+        ]]>
+    </style>
+    <rect width="100" height="100" class="st0"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect width="100" height="100" class="st0" style="fill:blue"/>
+</svg>

From 5688e3b47dccb2b919784f9dc03dd0dd44df5cbd Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 13 Dec 2016 15:32:59 +0100
Subject: [PATCH 075/162] Improve comment.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index fc3027add..eeb491e72 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -96,7 +96,7 @@ exports.fn = function(data, opts) {
   // stable-sort css selectors by their specificity
   var selectorItemsSorted = stable(selectorItemsMqs, function(item1, item2) {
     return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
-  }).reverse(); // last style applies last (final)
+  }).reverse(); // last declaration applies last (final)
 
   // apply <style/> styles to matched elements
   for(var selectorItemIndex in selectorItemsSorted) {

From ccff9b2733399d52958fe08a2f82c2b4a2744896 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 13 Dec 2016 15:40:56 +0100
Subject: [PATCH 076/162] Improve code.

---
 plugins/inlineStyles.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index eeb491e72..da731f758 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -94,8 +94,8 @@ exports.fn = function(data, opts) {
   });
 
   // stable-sort css selectors by their specificity
-  var selectorItemsSorted = stable(selectorItemsMqs, function(item1, item2) {
-    return SPECIFICITY.compare(item1.selectorStr, item2.selectorStr);
+  var selectorItemsSorted = stable(selectorItemsMqs, function(itemA, itemB) {
+    return SPECIFICITY.compare(itemA.selectorStr, itemB.selectorStr);
   }).reverse(); // last declaration applies last (final)
 
   // apply <style/> styles to matched elements
@@ -135,10 +135,10 @@ exports.fn = function(data, opts) {
       csso.walk(inlineCssAst,          _fetchDeclarations);
 
       // sort by !important(ce)
-      var mergedDeclarationsSorted = stable(mergedDeclarations, function(declaration1, declaration2) {
-        var declaration1Score = ~~declaration1.important, // (cast boolean to number)
-            declaration2Score = ~~declaration2.important; //  "
-        return (declaration1Score - declaration2Score);
+      var mergedDeclarationsSorted = stable(mergedDeclarations, function(declarationA, declarationB) {
+        var declarationAScore = ~~declarationA.important, // (cast boolean to number)
+            declarationBScore = ~~declarationB.important; //  "
+        return (declarationAScore - declarationBScore);
       });
 
       // to css

From 8784548dcb28d61ea076897d60690188980afb85 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 13 Dec 2016 15:49:10 +0100
Subject: [PATCH 077/162] Fix !important(ce) sorting + tests.

---
 plugins/inlineStyles.js          | 4 ++--
 test/plugins/inlineStyles.07.svg | 2 +-
 test/plugins/inlineStyles.08.svg | 2 +-
 test/plugins/inlineStyles.09.svg | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index da731f758..64f6095e9 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -136,8 +136,8 @@ exports.fn = function(data, opts) {
 
       // sort by !important(ce)
       var mergedDeclarationsSorted = stable(mergedDeclarations, function(declarationA, declarationB) {
-        var declarationAScore = ~~declarationA.important, // (cast boolean to number)
-            declarationBScore = ~~declarationB.important; //  "
+        var declarationAScore = ~~declarationA.data.value.important, // (cast boolean to number)
+            declarationBScore = ~~declarationB.data.value.important; //  "
         return (declarationAScore - declarationBScore);
       });
 
diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
index 6c770bd50..d64e28b6b 100644
--- a/test/plugins/inlineStyles.07.svg
+++ b/test/plugins/inlineStyles.07.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:red!important;fill:blue"/>
+    <rect width="100" height="100" class="blue red" style="fill:blue;fill:red!important"/>
 </svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.08.svg b/test/plugins/inlineStyles.08.svg
index 01552ef9b..ce9a296d4 100644
--- a/test/plugins/inlineStyles.08.svg
+++ b/test/plugins/inlineStyles.08.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:red!important;fill:blue;fill:yellow"/>
+    <rect width="100" height="100" class="blue red" style="fill:blue;fill:yellow;fill:red!important"/>
 </svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
index 469c09368..4505467b7 100644
--- a/test/plugins/inlineStyles.09.svg
+++ b/test/plugins/inlineStyles.09.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:red!important;fill:blue;fill:yellow!important"/>
+    <rect width="100" height="100" class="blue red" style="fill:blue;fill:red!important;fill:yellow!important"/>
 </svg>
\ No newline at end of file

From cc27c46a9a7d0cf2920018c016fd05f22be6226b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 14 Dec 2016 17:59:37 +0100
Subject: [PATCH 078/162] Simplified select-css method + adapter.

---
 lib/ext/select-css.js       |  6 +-----
 lib/ext/svgo-css-adapter.js | 10 ++--------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/lib/ext/select-css.js b/lib/ext/select-css.js
index 7902d3314..7bfe330ef 100644
--- a/lib/ext/select-css.js
+++ b/lib/ext/select-css.js
@@ -3,16 +3,12 @@
 var cssSelect      = require('css-select'),
     SvgoCssAdapter = require('./svgo-css-adapter');
 
-var cssSelectOpts  = {xmlMode: true};
+var cssSelectOpts  = {xmlMode: true, adapter: SvgoCssAdapter};
 
 /**
   * Returns array of csso AST nodes that match a passed css selector 
   * against a passed node (usually the root node).
   */
 module.exports     = function(selector, rootNode) {
-  if(!cssSelectOpts.adapter) {
-    cssSelectOpts.adapter = new SvgoCssAdapter(rootNode);
-  }
-
   return cssSelect(selector, rootNode, cssSelectOpts);
 };
diff --git a/lib/ext/svgo-css-adapter.js b/lib/ext/svgo-css-adapter.js
index fc77a2230..dee1f21b4 100644
--- a/lib/ext/svgo-css-adapter.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -46,13 +46,7 @@ var svgoCssAdapterMin = {
 };
 
 // use base adapter for default implementations
-var svgoCssAdapterProto = baseCssAdapter(svgoCssAdapterMin);
+var svgoCssAdapter = baseCssAdapter(svgoCssAdapterMin);
 
 
-// svgo adapter constructor for passing root node
-var SvgoCssAdapter = function(rootNode) {
-  this.rootNode = rootNode;
-};
-SvgoCssAdapter.prototype = svgoCssAdapterProto;
-
-module.exports  = SvgoCssAdapter;
+module.exports = svgoCssAdapter;

From 6709815bf120956c637892e0fd37a2a7a8c64ffd Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 14 Dec 2016 18:00:42 +0100
Subject: [PATCH 079/162] Add comment to test.

---
 test/plugins/inlineStyles.03.svg | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index bbc8f17cf..ae9225cac 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -1,4 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
+  <!-- for https://github.com/svg/svgo/pull/592#issuecomment-266327016 -->
   <style>
     .cls-7 {
       only-cls-7: 1;
@@ -16,6 +17,7 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
+<!--for https://github.com/svg/svgo/pull/592#issuecomment-266327016-->
     <path class="cls-7" style="only-cls-7:1;cls-7-and-8:1"/>
     <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8" style="cls-7-and-8:1"/>
 </svg>
\ No newline at end of file

From e79a0d5ac8f1e039ed34392a5e5ac5b975454e04 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 14 Dec 2016 18:03:11 +0100
Subject: [PATCH 080/162] Remove unnecessary line.

---
 plugins/inlineStyles.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 64f6095e9..3140bd1be 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -174,7 +174,6 @@ exports.fn = function(data, opts) {
           list.remove(item);
       }
     });
-    styleItem = styleItems[styleItemIndex];
     if(styleItem.cssAst.rules.isEmpty()){
       // clean up now emtpy <style/>s
       var styleParent = styleItem.styleEl.parentNode;

From 49eb9f615dfda79fca7fd53891fbe6f904773f1b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 14 Dec 2016 18:04:43 +0100
Subject: [PATCH 081/162] Cosmetic code changes.

---
 lib/ext/svgo-css-adapter.js | 4 ++--
 plugins/inlineStyles.js     | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/ext/svgo-css-adapter.js b/lib/ext/svgo-css-adapter.js
index dee1f21b4..57ca47307 100644
--- a/lib/ext/svgo-css-adapter.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -45,8 +45,8 @@ var svgoCssAdapterMin = {
   }
 };
 
-// use base adapter for default implementations
-var svgoCssAdapter = baseCssAdapter(svgoCssAdapterMin);
 
+// use base adapter for default implementation
+var svgoCssAdapter = baseCssAdapter(svgoCssAdapterMin);
 
 module.exports = svgoCssAdapter;
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 3140bd1be..0d864edc7 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -110,6 +110,7 @@ exports.fn = function(data, opts) {
 
     for(var selectedElIndex in selectedEls) {
       var selectedEl = selectedEls[selectedElIndex];
+
       // empty defaults in case there is no style attribute
       var elInlineStyleAttr = { name: 'style', value: '', prefix: '', local: 'style' },
           elInlineStyles    = '';
@@ -162,18 +163,21 @@ exports.fn = function(data, opts) {
       styleItem      = {};
   for(styleItemIndex in styleItems) {
     styleItem = styleItems[styleItemIndex];
+
     csso.walk(styleItem.cssAst, function(node, item, list) {
       // clean up <style/> atrules without any rulesets left
       if(node.type === 'Atrule' &&
          node.block.rules.head === null) {
         list.remove(item);
       }
+
       // clean up <style/> rulesets without any css selectors left
       if(node.type === 'Ruleset' &&
          node.selector.selectors.head == null) {
           list.remove(item);
       }
     });
+
     if(styleItem.cssAst.rules.isEmpty()){
       // clean up now emtpy <style/>s
       var styleParent = styleItem.styleEl.parentNode;

From 43aba2faab0aa99ff42df862f41d700fa1d4dca1 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 14 Dec 2016 18:06:06 +0100
Subject: [PATCH 082/162] Cosmetic code changes.

---
 lib/ext/select-css.js       | 2 +-
 lib/ext/svgo-css-adapter.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/lib/ext/select-css.js b/lib/ext/select-css.js
index 7bfe330ef..be1887a03 100644
--- a/lib/ext/select-css.js
+++ b/lib/ext/select-css.js
@@ -3,7 +3,7 @@
 var cssSelect      = require('css-select'),
     SvgoCssAdapter = require('./svgo-css-adapter');
 
-var cssSelectOpts  = {xmlMode: true, adapter: SvgoCssAdapter};
+var cssSelectOpts  = { xmlMode: true, adapter: SvgoCssAdapter };
 
 /**
   * Returns array of csso AST nodes that match a passed css selector 
diff --git a/lib/ext/svgo-css-adapter.js b/lib/ext/svgo-css-adapter.js
index 57ca47307..9d18ca19b 100644
--- a/lib/ext/svgo-css-adapter.js
+++ b/lib/ext/svgo-css-adapter.js
@@ -45,7 +45,6 @@ var svgoCssAdapterMin = {
   }
 };
 
-
 // use base adapter for default implementation
 var svgoCssAdapter = baseCssAdapter(svgoCssAdapterMin);
 

From 2b0ad6b4c78d5c2e3cbc9a7babe8f8fbc6096867 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 14 Dec 2016 19:40:37 +0100
Subject: [PATCH 083/162] Move css query feature into svgo core (jsAPI). Adjust
 to browser API querySelector(...) method. Adjust inlineStyles plugin to null
 result if no elements matched.

---
 lib/ext/select-css.js                 | 14 --------------
 lib/svgo/jsAPI.js                     | 17 ++++++++++++++++-
 lib/{ext => svgo}/svgo-css-adapter.js |  0
 plugins/inlineStyles.js               | 11 +++++------
 4 files changed, 21 insertions(+), 21 deletions(-)
 delete mode 100644 lib/ext/select-css.js
 rename lib/{ext => svgo}/svgo-css-adapter.js (100%)

diff --git a/lib/ext/select-css.js b/lib/ext/select-css.js
deleted file mode 100644
index be1887a03..000000000
--- a/lib/ext/select-css.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-var cssSelect      = require('css-select'),
-    SvgoCssAdapter = require('./svgo-css-adapter');
-
-var cssSelectOpts  = { xmlMode: true, adapter: SvgoCssAdapter };
-
-/**
-  * Returns array of csso AST nodes that match a passed css selector 
-  * against a passed node (usually the root node).
-  */
-module.exports     = function(selector, rootNode) {
-  return cssSelect(selector, rootNode, cssSelectOpts);
-};
diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 1e2f55fbf..ff24c28c7 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -1,6 +1,9 @@
 'use strict';
 
-var EXTEND = require('whet.extend');
+var EXTEND    = require('whet.extend'),
+    cssSelect = require('css-select');
+
+var SvgoCssAdapter = require('./svgo-css-adapter');
 
 var JSAPI = module.exports = function(data, parentNode) {
     EXTEND(this, data);
@@ -296,3 +299,15 @@ JSAPI.prototype.renameElem = function(name) {
     return false;
 
 };
+
+/**
+ * Evaluate a string of css selectors against the element and return matched elements
+ *
+ * @param {String} selectors css selector(s) string
+ * @return {Array} null if no elements matched
+ */
+ JSAPI.prototype.querySelector = function(selectors) {
+   var cssSelectOpts = { xmlMode: true, adapter: SvgoCssAdapter };
+   var matchedEls    = cssSelect(selectors, this, cssSelectOpts);
+   return matchedEls.length > 0 ? matchedEls : null;
+};
diff --git a/lib/ext/svgo-css-adapter.js b/lib/svgo/svgo-css-adapter.js
similarity index 100%
rename from lib/ext/svgo-css-adapter.js
rename to lib/svgo/svgo-css-adapter.js
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 0d864edc7..e0d46c26c 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -15,8 +15,7 @@ exports.description = 'inline styles (optionally skip selectors that match more
 
 var SPECIFICITY = require('specificity'),
     stable      = require('stable'),
-    csso        = require('csso'),
-    selectCss   = require('../lib/ext/select-css');
+    csso        = require('csso');
 
 /**
   * Moves + merges styles from style elements to element styles
@@ -26,7 +25,7 @@ var SPECIFICITY = require('specificity'),
 exports.fn = function(data, opts) {
 
   // collect <style/>s
-  var styleEls      = selectCss('style', data);
+  var styleEls      = data.querySelector('style');
 
   var styleItems    = [],
       selectorItems = [];
@@ -102,8 +101,8 @@ exports.fn = function(data, opts) {
   for(var selectorItemIndex in selectorItemsSorted) {
     var selectorItem = selectorItemsSorted[selectorItemIndex],
 
-        selectedEls  = selectCss(selectorItem.selectorStr, data);
-    if(opts.onlyMatchedOnce && selectedEls.length > 1) {
+        selectedEls  = data.querySelector(selectorItem.selectorStr);
+    if(opts.onlyMatchedOnce && selectedEls && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;
     }
@@ -153,7 +152,7 @@ exports.fn = function(data, opts) {
       selectedEl.addAttr(elInlineStyleAttr);
     }
 
-    if(opts.removeMatchedSelectors && selectedEls.length > 0) {
+    if(opts.removeMatchedSelectors && selectedEls && selectedEls.length > 0) {
       // clean up matching simple selectors if option removeMatchedSelectors is enabled
       selectorItem.rulesetNode.selector.selectors.remove(selectorItem.simpleSelectorItem);
     }

From da208697d200fab99767731939eb2762265d6181 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 14 Dec 2016 19:45:12 +0100
Subject: [PATCH 084/162] Improve comment.

---
 lib/svgo/jsAPI.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index ff24c28c7..bbf8d13a4 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -301,7 +301,7 @@ JSAPI.prototype.renameElem = function(name) {
 };
 
 /**
- * Evaluate a string of css selectors against the element and return matched elements
+ * Evaluates a string of css selectors against the element and returns matched elements
  *
  * @param {String} selectors css selector(s) string
  * @return {Array} null if no elements matched

From 94651a06d18181d8ad2fd175eb20238399050920 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 14 Dec 2016 20:44:56 +0100
Subject: [PATCH 085/162] Cosmetic code change.

---
 lib/svgo/jsAPI.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index bbf8d13a4..a074507e4 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -307,7 +307,10 @@ JSAPI.prototype.renameElem = function(name) {
  * @return {Array} null if no elements matched
  */
  JSAPI.prototype.querySelector = function(selectors) {
+
    var cssSelectOpts = { xmlMode: true, adapter: SvgoCssAdapter };
    var matchedEls    = cssSelect(selectors, this, cssSelectOpts);
+
    return matchedEls.length > 0 ? matchedEls : null;
+
 };

From c096aa0b87bb3fa68434402af445991091492156 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 18 Dec 2016 16:25:50 +0100
Subject: [PATCH 086/162] Rename querySelector to querySelectorAll so it
 matches its DOM API equivalent

---
 lib/svgo/jsAPI.js       | 2 +-
 plugins/inlineStyles.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index a074507e4..cb052a12b 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -306,7 +306,7 @@ JSAPI.prototype.renameElem = function(name) {
  * @param {String} selectors css selector(s) string
  * @return {Array} null if no elements matched
  */
- JSAPI.prototype.querySelector = function(selectors) {
+ JSAPI.prototype.querySelectorAll = function(selectors) {
 
    var cssSelectOpts = { xmlMode: true, adapter: SvgoCssAdapter };
    var matchedEls    = cssSelect(selectors, this, cssSelectOpts);
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index e0d46c26c..260b7370d 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -25,7 +25,7 @@ var SPECIFICITY = require('specificity'),
 exports.fn = function(data, opts) {
 
   // collect <style/>s
-  var styleEls      = data.querySelector('style');
+  var styleEls      = data.querySelectorAll('style');
 
   var styleItems    = [],
       selectorItems = [];
@@ -101,7 +101,7 @@ exports.fn = function(data, opts) {
   for(var selectorItemIndex in selectorItemsSorted) {
     var selectorItem = selectorItemsSorted[selectorItemIndex],
 
-        selectedEls  = data.querySelector(selectorItem.selectorStr);
+        selectedEls  = data.querySelectorAll(selectorItem.selectorStr);
     if(opts.onlyMatchedOnce && selectedEls && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;

From 3e2ccb44b3f284e2b9f1e1aa3c4c9a279435ab6c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 18 Dec 2016 16:31:00 +0100
Subject: [PATCH 087/162] Move css-select options to variable in jsAPI.

---
 lib/svgo/jsAPI.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index cb052a12b..0b2579387 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -4,6 +4,10 @@ var EXTEND    = require('whet.extend'),
     cssSelect = require('css-select');
 
 var SvgoCssAdapter = require('./svgo-css-adapter');
+var cssSelectOpts = {
+  xmlMode: true,
+  adapter: SvgoCssAdapter
+};
 
 var JSAPI = module.exports = function(data, parentNode) {
     EXTEND(this, data);
@@ -308,8 +312,7 @@ JSAPI.prototype.renameElem = function(name) {
  */
  JSAPI.prototype.querySelectorAll = function(selectors) {
 
-   var cssSelectOpts = { xmlMode: true, adapter: SvgoCssAdapter };
-   var matchedEls    = cssSelect(selectors, this, cssSelectOpts);
+   var matchedEls = cssSelect(selectors, this, cssSelectOpts);
 
    return matchedEls.length > 0 ? matchedEls : null;
 

From 56a229ca687dd53cba66a5d081ed550d148e5f77 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 18 Dec 2016 16:35:38 +0100
Subject: [PATCH 088/162] Add further DOM API CSS related methods.

---
 lib/svgo/jsAPI.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 0b2579387..234fbb4a1 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -317,3 +317,27 @@ JSAPI.prototype.renameElem = function(name) {
    return matchedEls.length > 0 ? matchedEls : null;
 
 };
+
+/**
+ * Evaluates a string of css selectors against the element and returns only the first matched element
+ *
+ * @param {String} selectors css selector(s) string
+ * @return {Array} null if no element matched
+ */
+ JSAPI.prototype.querySelector = function(selectors) {
+
+   return cssSelect.selectOne(selectors, this, cssSelectOpts);
+
+};
+
+/**
+ * Tests if a selector matches a given element
+ *
+ * @param {String} selector css selector string
+ * @return {Boolean} true if element would be selected by selector string, false if it does not
+ */
+ JSAPI.prototype.matches = function(selector) {
+
+   return cssSelect.is(selector, this, cssSelectOpts);
+
+};

From b3e085d77acf167cb6c23642a2633f5ada8b397c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 19 Dec 2016 16:51:04 +0100
Subject: [PATCH 089/162] Rename data variable to document as it is more
 intuitive.

---
 plugins/inlineStyles.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 260b7370d..7b65e60dd 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -22,10 +22,10 @@ var SPECIFICITY = require('specificity'),
   *
   * @author strarsis <strarsis@gmail.com>
   */
-exports.fn = function(data, opts) {
+exports.fn = function(document, opts) {
 
   // collect <style/>s
-  var styleEls      = data.querySelectorAll('style');
+  var styleEls      = document.querySelectorAll('style');
 
   var styleItems    = [],
       selectorItems = [];
@@ -101,7 +101,7 @@ exports.fn = function(data, opts) {
   for(var selectorItemIndex in selectorItemsSorted) {
     var selectorItem = selectorItemsSorted[selectorItemIndex],
 
-        selectedEls  = data.querySelectorAll(selectorItem.selectorStr);
+        selectedEls  = document.querySelectorAll(selectorItem.selectorStr);
     if(opts.onlyMatchedOnce && selectedEls && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;
@@ -188,5 +188,5 @@ exports.fn = function(data, opts) {
     styleItem.styleEl.content[0].text = csso.translate(styleItem.cssAst);
   }
 
-  return data;
+  return document;
 };

From a67ed530a567b93c5a051ba9cacd31dfcbe4bcef Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 19 Dec 2016 16:53:06 +0100
Subject: [PATCH 090/162] Improve css-select adapter module file name. Start
 css-select adapter variable with lowercase name (no constructor).

---
 lib/svgo/{svgo-css-adapter.js => css-select-adapter.js} | 6 +++---
 lib/svgo/jsAPI.js                                       | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename lib/svgo/{svgo-css-adapter.js => css-select-adapter.js} (89%)

diff --git a/lib/svgo/svgo-css-adapter.js b/lib/svgo/css-select-adapter.js
similarity index 89%
rename from lib/svgo/svgo-css-adapter.js
rename to lib/svgo/css-select-adapter.js
index 9d18ca19b..46ba346ea 100644
--- a/lib/svgo/svgo-css-adapter.js
+++ b/lib/svgo/css-select-adapter.js
@@ -6,7 +6,7 @@ require('object.assign').shim(); // for node v0.1x support
 /**
   * DOMUtils API for SVGO AST (used by css-select)
   */
-var svgoCssAdapterMin = {
+var svgoCssSelectAdapterMin = {
 
   // is the node a tag?
   // isTag: ( node:Node ) => isTag:Boolean
@@ -46,6 +46,6 @@ var svgoCssAdapterMin = {
 };
 
 // use base adapter for default implementation
-var svgoCssAdapter = baseCssAdapter(svgoCssAdapterMin);
+var svgoCssSelectAdapter = baseCssAdapter(svgoCssSelectAdapterMin);
 
-module.exports = svgoCssAdapter;
+module.exports = svgoCssSelectAdapter;
diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 234fbb4a1..8540c160e 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -3,10 +3,10 @@
 var EXTEND    = require('whet.extend'),
     cssSelect = require('css-select');
 
-var SvgoCssAdapter = require('./svgo-css-adapter');
+var svgoCssSelectAdapter = require('./css-select-adapter');
 var cssSelectOpts = {
   xmlMode: true,
-  adapter: SvgoCssAdapter
+  adapter: svgoCssSelectAdapter
 };
 
 var JSAPI = module.exports = function(data, parentNode) {

From db20f5bc4d5bf6ae8e5195d7f90f1bb85c5a248c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 2 Jan 2017 20:41:54 +0100
Subject: [PATCH 091/162] Add further css select adapter API related comments.

---
 lib/svgo/css-select-adapter.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/svgo/css-select-adapter.js b/lib/svgo/css-select-adapter.js
index 46ba346ea..6f7c990dd 100644
--- a/lib/svgo/css-select-adapter.js
+++ b/lib/svgo/css-select-adapter.js
@@ -16,6 +16,7 @@ var svgoCssSelectAdapterMin = {
 
   // get the parent of the node
   // getParent: ( node:Node ) => parentNode:Node
+  // returns null when no parent exists
   getParent: function(node) {
     return node.parentNode || null;
   },
@@ -34,12 +35,14 @@ var svgoCssSelectAdapterMin = {
 
   // get the text content of the node, and its children if it has any
   // getText: ( node:Node ) => text:String
+  // returns empty string when there is no text
   getText: function(node) {
     return node.content[0].text || node.content[0].cdata || '';
   },
 
   // get the attribute value
   // getAttributeValue: ( elem:ElementNode, name:String ) => value:String
+  // returns null when attribute doesn't exist
   getAttributeValue: function(elem, name) {
     return elem.hasAttr(name) ? elem.attr(name).value : null;
   }

From cedfda22e0fc6fa8a3c3117c25a8acfaf71983db Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 19 Jan 2017 15:49:33 +0100
Subject: [PATCH 092/162] Use latest npm package for css-select dependency.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8094df6ec..5e8084daa 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
   "dependencies": {
     "coa": "~1.0.1",
     "colors": "~1.1.2",
-    "css-select": "github:fb55/css-select#e02737b8fd5bf8271818cefe8b6dfe7de3584dbd",
+    "css-select": "^1.3.0-rc0",
     "css-select-base-adapter": "^0.1.0",
     "csso": "^2.2.1",
     "js-yaml": "~3.6.1",

From a794897636efd6507da9354e98de12e8bb2f1112 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 21 Jan 2017 20:10:48 +0100
Subject: [PATCH 093/162] Add support for pseudo classes.

---
 plugins/inlineStyles.js          | 30 +++++++++++++++++++++++++-----
 test/plugins/inlineStyles.11.svg | 16 ++++++++++++++++
 2 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 test/plugins/inlineStyles.11.svg

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 7b65e60dd..67e72ebbd 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -7,7 +7,8 @@ exports.active = true;
 exports.params = {
   onlyMatchedOnce:        true,
   removeMatchedSelectors: true,
-  useMqs:                 ['screen']
+  useMqs:                 ['screen'],
+  usePseudoclasses:       []
 };
 
 exports.description = 'inline styles (optionally skip selectors that match more than once)';
@@ -46,8 +47,9 @@ exports.fn = function(document, opts) {
     });
 
     // collect css selectors and their containing ruleset
-    var curAtRuleExpNode = null;
-    csso.walk(cssAst, function(node, item) {
+    var curAtRuleExpNode   = null,
+        curPseudoclassNode = null;
+    csso.walk(cssAst, function(node, item, list) {
 
       // media query blocks
       // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
@@ -59,10 +61,16 @@ exports.fn = function(document, opts) {
         curAtRuleExpNode = null;
       }
 
+      // Pseudo classes for a SimpleSelector
+      if(node.type == 'PseudoClass') {
+        curPseudoclassNode = node;
+      }
+
       if(node.type === 'SimpleSelector') {
 		    // csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
 	      // Selector group ('Selector' in csso) consisting of simple selectors ('SimpleSelector' in csso), separated by comma.
         // <Selector>: <'SimpleSelector'>, <'SimpleSelector'>, ...
+
         var selectorStr = csso.translate(node);
 
         // mediaquery if SimpleSelector belongs to one
@@ -78,9 +86,15 @@ exports.fn = function(document, opts) {
           rulesetNode:        this.ruleset,
 
           atRuleExpNode:      curAtRuleExpNode,
-          mqStr:              mqStr
+          mqStr:              mqStr,
+
+          pseudoclassNode:    curPseudoclassNode
         };
         selectorItems.push(curSelectorItem);
+
+
+        // pseudo class scope ends with the SimpleSelector
+        curPseudoclassNode = null;
       }
 
     });
@@ -92,8 +106,14 @@ exports.fn = function(document, opts) {
             opts.useMqs.indexOf(selectorItem.mqStr) > -1);
   });
 
+  // filter for pseudo classes to be used or not using a pseudo class
+  var selectorItemsPseudoclasses = selectorItemsMqs.filter(function(selectorItem) {
+    return (selectorItem.pseudoclassNode == null || 
+            opts.usePseudoclasses.indexOf(selectorItem.pseudoclassNode.name) > -1);
+  });
+
   // stable-sort css selectors by their specificity
-  var selectorItemsSorted = stable(selectorItemsMqs, function(itemA, itemB) {
+  var selectorItemsSorted = stable(selectorItemsPseudoclasses, function(itemA, itemB) {
     return SPECIFICITY.compare(itemA.selectorStr, itemB.selectorStr);
   }).reverse(); // last declaration applies last (final)
 
diff --git a/test/plugins/inlineStyles.11.svg b/test/plugins/inlineStyles.11.svg
new file mode 100644
index 000000000..e7b75eea2
--- /dev/null
+++ b/test/plugins/inlineStyles.11.svg
@@ -0,0 +1,16 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{fill:blue;}
+        .st0:hover{stroke:red;}
+    </style>
+    <rect width="100" height="100" class="st0"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0:hover{stroke:red}
+    </style>
+    <rect width="100" height="100" class="st0" style="fill:blue"/>
+</svg>

From 5dd38da67f61edb0935fc0495b0f9d077dc89dcc Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 21 Jan 2017 20:14:29 +0100
Subject: [PATCH 094/162] Improve variable names.

---
 plugins/inlineStyles.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 67e72ebbd..7695f5216 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -8,7 +8,7 @@ exports.params = {
   onlyMatchedOnce:        true,
   removeMatchedSelectors: true,
   useMqs:                 ['screen'],
-  usePseudoclasses:       []
+  usePseudoClasses:       []
 };
 
 exports.description = 'inline styles (optionally skip selectors that match more than once)';
@@ -47,23 +47,23 @@ exports.fn = function(document, opts) {
     });
 
     // collect css selectors and their containing ruleset
-    var curAtRuleExpNode   = null,
-        curPseudoclassNode = null;
+    var curAtruleExpNode   = null,
+        curPseudoClassNode = null;
     csso.walk(cssAst, function(node, item, list) {
 
       // media query blocks
       // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
       if(node.type === 'AtruleExpression') { // marks the beginning of an Atrule
-        curAtRuleExpNode = node;
+        curAtruleExpNode = node;
       }
       // "look-ahead the SimpleSelector", Atrule node comes _after_ the affected SimpleSelector
       if(node.type === 'Atrule')           { // marks the end of an Atrule
-        curAtRuleExpNode = null;
+        curAtruleExpNode = null;
       }
 
       // Pseudo classes for a SimpleSelector
       if(node.type == 'PseudoClass') {
-        curPseudoclassNode = node;
+        curPseudoClassNode = node;
       }
 
       if(node.type === 'SimpleSelector') {
@@ -75,8 +75,8 @@ exports.fn = function(document, opts) {
 
         // mediaquery if SimpleSelector belongs to one
         var mqStr = '';
-        if(curAtRuleExpNode !== null) {
-          mqStr = csso.translate(curAtRuleExpNode);
+        if(curAtruleExpNode !== null) {
+          mqStr = csso.translate(curAtruleExpNode);
         }
 
         var curSelectorItem = {
@@ -85,16 +85,16 @@ exports.fn = function(document, opts) {
           simpleSelectorItem: item,
           rulesetNode:        this.ruleset,
 
-          atRuleExpNode:      curAtRuleExpNode,
+          atRuleExpNode:      curAtruleExpNode,
           mqStr:              mqStr,
 
-          pseudoclassNode:    curPseudoclassNode
+          pseudoClassNode:    curPseudoClassNode
         };
         selectorItems.push(curSelectorItem);
 
 
         // pseudo class scope ends with the SimpleSelector
-        curPseudoclassNode = null;
+        curPseudoClassNode = null;
       }
 
     });
@@ -107,13 +107,13 @@ exports.fn = function(document, opts) {
   });
 
   // filter for pseudo classes to be used or not using a pseudo class
-  var selectorItemsPseudoclasses = selectorItemsMqs.filter(function(selectorItem) {
-    return (selectorItem.pseudoclassNode == null || 
-            opts.usePseudoclasses.indexOf(selectorItem.pseudoclassNode.name) > -1);
+  var selectorItemsPseudoClasses = selectorItemsMqs.filter(function(selectorItem) {
+    return (selectorItem.pseudoClassNode == null || 
+            opts.usePseudoClasses.indexOf(selectorItem.pseudoClassNode.name) > -1);
   });
 
   // stable-sort css selectors by their specificity
-  var selectorItemsSorted = stable(selectorItemsPseudoclasses, function(itemA, itemB) {
+  var selectorItemsSorted = stable(selectorItemsPseudoClasses, function(itemA, itemB) {
     return SPECIFICITY.compare(itemA.selectorStr, itemB.selectorStr);
   }).reverse(); // last declaration applies last (final)
 

From 5beb962db5c9480433c3d10773989a4137a1ca60 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 21 Jan 2017 20:16:41 +0100
Subject: [PATCH 095/162] Fix lint error.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 7695f5216..59813d9ac 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -49,7 +49,7 @@ exports.fn = function(document, opts) {
     // collect css selectors and their containing ruleset
     var curAtruleExpNode   = null,
         curPseudoClassNode = null;
-    csso.walk(cssAst, function(node, item, list) {
+    csso.walk(cssAst, function(node, item) {
 
       // media query blocks
       // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector

From c90ac181d3251fc4c8ebc409ab1f13dadcde1883 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 21 Jan 2017 20:30:16 +0100
Subject: [PATCH 096/162] Simplify selector structure/flattening.

---
 plugins/inlineStyles.js | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 59813d9ac..01e361756 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -71,28 +71,14 @@ exports.fn = function(document, opts) {
 	      // Selector group ('Selector' in csso) consisting of simple selectors ('SimpleSelector' in csso), separated by comma.
         // <Selector>: <'SimpleSelector'>, <'SimpleSelector'>, ...
 
-        var selectorStr = csso.translate(node);
-
-        // mediaquery if SimpleSelector belongs to one
-        var mqStr = '';
-        if(curAtruleExpNode !== null) {
-          mqStr = csso.translate(curAtruleExpNode);
-        }
-
         var curSelectorItem = {
-          selectorStr:        selectorStr,
-
           simpleSelectorItem: item,
           rulesetNode:        this.ruleset,
-
           atRuleExpNode:      curAtruleExpNode,
-          mqStr:              mqStr,
-
           pseudoClassNode:    curPseudoClassNode
         };
         selectorItems.push(curSelectorItem);
 
-
         // pseudo class scope ends with the SimpleSelector
         curPseudoClassNode = null;
       }
@@ -100,10 +86,14 @@ exports.fn = function(document, opts) {
     });
   }
 
+
   // filter for mediaqueries to be used or without any mediaquery
   var selectorItemsMqs = selectorItems.filter(function(selectorItem) {
-    return (selectorItem.mqStr.length == 0 || 
-            opts.useMqs.indexOf(selectorItem.mqStr) > -1);
+    if(selectorItem.atRuleExpNode == null) {
+      return true;
+    }
+    var mqStr = csso.translate(selectorItem.atRuleExpNode);
+    return opts.useMqs.indexOf(mqStr) > -1;
   });
 
   // filter for pseudo classes to be used or not using a pseudo class
@@ -112,6 +102,12 @@ exports.fn = function(document, opts) {
             opts.usePseudoClasses.indexOf(selectorItem.pseudoClassNode.name) > -1);
   });
 
+
+  // compile css selector strings
+  selectorItemsPseudoClasses.map(function(selectorItem) {
+    selectorItem.selectorStr = csso.translate(selectorItem.simpleSelectorItem.data);
+  });
+
   // stable-sort css selectors by their specificity
   var selectorItemsSorted = stable(selectorItemsPseudoClasses, function(itemA, itemB) {
     return SPECIFICITY.compare(itemA.selectorStr, itemB.selectorStr);

From 3964dc48f9606427a140f84d23a1df62d80c22de Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 21 Jan 2017 20:30:34 +0100
Subject: [PATCH 097/162] Improve comment.

---
 plugins/inlineStyles.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 01e361756..886370fc6 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -61,7 +61,8 @@ exports.fn = function(document, opts) {
         curAtruleExpNode = null;
       }
 
-      // Pseudo classes for a SimpleSelector
+      // Pseudo classes
+      // "look-behind the SimpleSelector", PseudoClass node comes _before_ the affected SimpleSelector
       if(node.type == 'PseudoClass') {
         curPseudoClassNode = node;
       }

From 1c7240a315f2c55785111e46fff80ce78c99f591 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 26 Jan 2017 17:17:14 +0100
Subject: [PATCH 098/162] Add comments for documenting options. Improve plugin
 description.

---
 plugins/inlineStyles.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 886370fc6..f6ab6770a 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -11,7 +11,7 @@ exports.params = {
   usePseudoClasses:       []
 };
 
-exports.description = 'inline styles (optionally skip selectors that match more than once)';
+exports.description = 'inline styles (additional options)';
 
 
 var SPECIFICITY = require('specificity'),
@@ -21,6 +21,25 @@ var SPECIFICITY = require('specificity'),
 /**
   * Moves + merges styles from style elements to element styles
   *
+  * Options
+  *   onlyMatchedOnce (default: true)
+  *     inline only selectors that match once
+  *
+  *   removeMatchedSelectors (default: true)
+  *     clean up matched selectors,
+  *     leave selectors that hadn't matched
+  *
+  *   useMqs (default: ['screen'])
+  *     what mediaqueries to be used,
+  *     non-mediaquery styles are always used
+  *
+  *   usePseudoClasses (default: [])
+  *     what pseudo-classes to be used,
+  *     non-pseudo-class styles are always used
+  *
+  * @param {Object} root (document)
+  * @param {Object} params plugin params
+  *
   * @author strarsis <strarsis@gmail.com>
   */
 exports.fn = function(document, opts) {

From e9e2be9ea89df3bfa8de463e8d69abc7396ab308 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 30 Jan 2017 01:51:17 +0100
Subject: [PATCH 099/162] Fix syntax error.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a39ee427f..d3478a2ec 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "colors": "~1.1.2",
     "css-select": "^1.3.0-rc0",
     "css-select-base-adapter": "^0.1.0",
-    "csso": "~2.3.1"
+    "csso": "~2.3.1",
     "js-yaml": "~3.7.0",
     "mkdirp": "~0.5.1",
     "object.assign": "^4.0.4",

From c8241c4424f2c82590316c6ea9222ac1ddecd6f3 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 2 Feb 2017 00:26:50 +0100
Subject: [PATCH 100/162] Remove PseudoClass to use from its SimpleSelector for
 proper matching with css-select. Add test for selectively inlining
 PseudoClass (':hover').

---
 plugins/inlineStyles.js          | 26 +++++++++++++++++++-------
 test/plugins/inlineStyles.12.svg | 16 ++++++++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 test/plugins/inlineStyles.12.svg

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index f6ab6770a..765d9811a 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -67,8 +67,9 @@ exports.fn = function(document, opts) {
 
     // collect css selectors and their containing ruleset
     var curAtruleExpNode   = null,
-        curPseudoClassNode = null;
-    csso.walk(cssAst, function(node, item) {
+        curPseudoClassItem = null,
+        curPseudoClassList = null;
+    csso.walk(cssAst, function(node, item, list) {
 
       // media query blocks
       // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
@@ -83,7 +84,8 @@ exports.fn = function(document, opts) {
       // Pseudo classes
       // "look-behind the SimpleSelector", PseudoClass node comes _before_ the affected SimpleSelector
       if(node.type == 'PseudoClass') {
-        curPseudoClassNode = node;
+        curPseudoClassItem = item;
+        curPseudoClassList = list;
       }
 
       if(node.type === 'SimpleSelector') {
@@ -95,12 +97,15 @@ exports.fn = function(document, opts) {
           simpleSelectorItem: item,
           rulesetNode:        this.ruleset,
           atRuleExpNode:      curAtruleExpNode,
-          pseudoClassNode:    curPseudoClassNode
+
+          pseudoClassItem:    curPseudoClassItem,
+          pseudoClassList:    curPseudoClassList
         };
         selectorItems.push(curSelectorItem);
 
         // pseudo class scope ends with the SimpleSelector
-        curPseudoClassNode = null;
+        curPseudoClassItem = null;
+        curPseudoClassList = null;
       }
 
     });
@@ -118,10 +123,17 @@ exports.fn = function(document, opts) {
 
   // filter for pseudo classes to be used or not using a pseudo class
   var selectorItemsPseudoClasses = selectorItemsMqs.filter(function(selectorItem) {
-    return (selectorItem.pseudoClassNode == null || 
-            opts.usePseudoClasses.indexOf(selectorItem.pseudoClassNode.name) > -1);
+    return (selectorItem.pseudoClassItem == null || 
+            opts.usePseudoClasses.indexOf(selectorItem.pseudoClassItem.data.name) > -1);
   });
 
+  // remove PseudoClass from its SimpleSelector for proper matching
+  selectorItemsPseudoClasses.map(function(selectorItem) {
+    if(selectorItem.pseudoClassItem == null) {
+      return;
+    }
+    selectorItem.pseudoClassList.remove(selectorItem.pseudoClassItem);
+  });
 
   // compile css selector strings
   selectorItemsPseudoClasses.map(function(selectorItem) {
diff --git a/test/plugins/inlineStyles.12.svg b/test/plugins/inlineStyles.12.svg
new file mode 100644
index 000000000..7f7f40bc9
--- /dev/null
+++ b/test/plugins/inlineStyles.12.svg
@@ -0,0 +1,16 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0:hover{stroke:red;}
+    </style>
+    <rect width="100" height="100" class="st0"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect width="100" height="100" class="st0" style="stroke:red"/>
+</svg>
+
+@@@
+
+{"usePseudoClasses":["hover"]}
\ No newline at end of file

From b6d6c35858a186b69a378bf0ead6ef06fc4670da Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 2 Feb 2017 00:27:30 +0100
Subject: [PATCH 101/162] Use lowercase for specificity module variable.

---
 plugins/inlineStyles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 765d9811a..2a1051a31 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -14,7 +14,7 @@ exports.params = {
 exports.description = 'inline styles (additional options)';
 
 
-var SPECIFICITY = require('specificity'),
+var specificity = require('specificity'),
     stable      = require('stable'),
     csso        = require('csso');
 
@@ -142,7 +142,7 @@ exports.fn = function(document, opts) {
 
   // stable-sort css selectors by their specificity
   var selectorItemsSorted = stable(selectorItemsPseudoClasses, function(itemA, itemB) {
-    return SPECIFICITY.compare(itemA.selectorStr, itemB.selectorStr);
+    return specificity.compare(itemA.selectorStr, itemB.selectorStr);
   }).reverse(); // last declaration applies last (final)
 
   // apply <style/> styles to matched elements

From 6167206a122a0f5a59c26bb318eab61e569577ec Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 11 Feb 2017 01:59:16 +0100
Subject: [PATCH 102/162] Add logic handling Atrules without styles (like
 @import).

---
 plugins/inlineStyles.js          |  1 +
 test/plugins/inlineStyles.13.svg | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 test/plugins/inlineStyles.13.svg

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 2a1051a31..dd77fa116 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -214,6 +214,7 @@ exports.fn = function(document, opts) {
     csso.walk(styleItem.cssAst, function(node, item, list) {
       // clean up <style/> atrules without any rulesets left
       if(node.type === 'Atrule' &&
+         node.block && node.block.rules && // Atrules containing rulesets
          node.block.rules.head === null) {
         list.remove(item);
       }
diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
new file mode 100644
index 000000000..016736798
--- /dev/null
+++ b/test/plugins/inlineStyles.13.svg
@@ -0,0 +1,23 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css?family=Roboto');
+
+      .blue {
+        fill: blue;
+      }
+    </style>
+  </defs>
+  <rect width="100" height="100" class="blue"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
+    <defs>
+        <style>
+            @import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);
+        </style>
+    </defs>
+    <rect width="100" height="100" class="blue" style="fill:blue"/>
+</svg>
\ No newline at end of file

From 350bf740b5f3ca445636ffd3192e581c71b39610 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 11 Feb 2017 02:10:02 +0100
Subject: [PATCH 103/162] Change to strict equals.

---
 plugins/inlineStyles.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index dd77fa116..265025418 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -83,7 +83,7 @@ exports.fn = function(document, opts) {
 
       // Pseudo classes
       // "look-behind the SimpleSelector", PseudoClass node comes _before_ the affected SimpleSelector
-      if(node.type == 'PseudoClass') {
+      if(node.type === 'PseudoClass') {
         curPseudoClassItem = item;
         curPseudoClassList = list;
       }
@@ -114,7 +114,7 @@ exports.fn = function(document, opts) {
 
   // filter for mediaqueries to be used or without any mediaquery
   var selectorItemsMqs = selectorItems.filter(function(selectorItem) {
-    if(selectorItem.atRuleExpNode == null) {
+    if(selectorItem.atRuleExpNode === null) {
       return true;
     }
     var mqStr = csso.translate(selectorItem.atRuleExpNode);
@@ -123,13 +123,13 @@ exports.fn = function(document, opts) {
 
   // filter for pseudo classes to be used or not using a pseudo class
   var selectorItemsPseudoClasses = selectorItemsMqs.filter(function(selectorItem) {
-    return (selectorItem.pseudoClassItem == null || 
+    return (selectorItem.pseudoClassItem === null || 
             opts.usePseudoClasses.indexOf(selectorItem.pseudoClassItem.data.name) > -1);
   });
 
   // remove PseudoClass from its SimpleSelector for proper matching
   selectorItemsPseudoClasses.map(function(selectorItem) {
-    if(selectorItem.pseudoClassItem == null) {
+    if(selectorItem.pseudoClassItem === null) {
       return;
     }
     selectorItem.pseudoClassList.remove(selectorItem.pseudoClassItem);
@@ -150,7 +150,7 @@ exports.fn = function(document, opts) {
     var selectorItem = selectorItemsSorted[selectorItemIndex],
 
         selectedEls  = document.querySelectorAll(selectorItem.selectorStr);
-    if(opts.onlyMatchedOnce && selectedEls && selectedEls.length > 1) {
+    if(opts.onlyMatchedOnce && selectedEls !== null && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;
     }
@@ -200,7 +200,7 @@ exports.fn = function(document, opts) {
       selectedEl.addAttr(elInlineStyleAttr);
     }
 
-    if(opts.removeMatchedSelectors && selectedEls && selectedEls.length > 0) {
+    if(opts.removeMatchedSelectors && selectedEls !== null && selectedEls.length > 0) {
       // clean up matching simple selectors if option removeMatchedSelectors is enabled
       selectorItem.rulesetNode.selector.selectors.remove(selectorItem.simpleSelectorItem);
     }
@@ -214,14 +214,14 @@ exports.fn = function(document, opts) {
     csso.walk(styleItem.cssAst, function(node, item, list) {
       // clean up <style/> atrules without any rulesets left
       if(node.type === 'Atrule' &&
-         node.block && node.block.rules && // Atrules containing rulesets
+         node.block !== null && node.block.rules !== null && // Atrules containing rulesets
          node.block.rules.head === null) {
         list.remove(item);
       }
 
       // clean up <style/> rulesets without any css selectors left
       if(node.type === 'Ruleset' &&
-         node.selector.selectors.head == null) {
+         node.selector.selectors.head === null) {
           list.remove(item);
       }
     });

From c130ecc8be0b9fcf461421fcb1e0596c747a312d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 11 Feb 2017 02:13:16 +0100
Subject: [PATCH 104/162] Use isEmpty() instead null check.

---
 plugins/inlineStyles.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 265025418..bd07d6119 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -214,14 +214,15 @@ exports.fn = function(document, opts) {
     csso.walk(styleItem.cssAst, function(node, item, list) {
       // clean up <style/> atrules without any rulesets left
       if(node.type === 'Atrule' &&
-         node.block !== null && node.block.rules !== null && // Atrules containing rulesets
-         node.block.rules.head === null) {
+         // only Atrules containing rulesets
+         node.block !== null && node.block.rules !== null &&
+         node.block.rules.isEmpty()) {
         list.remove(item);
       }
 
       // clean up <style/> rulesets without any css selectors left
       if(node.type === 'Ruleset' &&
-         node.selector.selectors.head === null) {
+         node.selector.selectors.isEmpty()) {
           list.remove(item);
       }
     });

From aa7a7860d1a43a553b9d378c937c821f89cb9a8f Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 11 Feb 2017 18:05:19 +0100
Subject: [PATCH 105/162] Improve test for Atrules.

---
 test/plugins/inlineStyles.13.svg | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
index 016736798..b080f9a91 100644
--- a/test/plugins/inlineStyles.13.svg
+++ b/test/plugins/inlineStyles.13.svg
@@ -1,8 +1,34 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
   <defs>
     <style>
+      @charset 'UTF-8';
+
+      @namespace svg url(http://www.w3.org/2000/svg);
+
       @import url('https://fonts.googleapis.com/css?family=Roboto');
 
+      @font-face {
+        font-family: SomeFont;
+        src: local("Some Font"),
+        local("SomeFont"),
+        url(SomeFont.ttf);
+        font-weight: bold;
+      }
+
+      @viewport {
+        zoom: 0.8;
+        min-zoom: 0.4;
+        max-zoom: 0.9;
+      }
+
+      @keyframes identifier {
+          0% { top:  0; }
+         50% { top: 30px; left: 20px; }
+         50% { top: 10px; }
+        100% { top:  0; }
+      }
+
+
       .blue {
         fill: blue;
       }
@@ -16,7 +42,7 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
     <defs>
         <style>
-            @import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);
+            @charset &apos;UTF-8&apos;;@namespace svg url(http://www.w3.org/2000/svg);@import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);@font-face{font-family:SomeFont;src:local(&quot;Some Font&quot;), local(&quot;SomeFont&quot;), url(SomeFont.ttf);font-weight:bold}@viewport{zoom:0.8;min-zoom:0.4;max-zoom:0.9}@keyframes identifier{0%{top:0}50%{top:30px;left:20px}50%{top:10px}100%{top:0}}
         </style>
     </defs>
     <rect width="100" height="100" class="blue" style="fill:blue"/>

From ab1c8bbe9039ed7fbb749cb7f339a96f0e454790 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 11 Feb 2017 18:05:34 +0100
Subject: [PATCH 106/162] Add fix for some Atrules.

---
 plugins/inlineStyles.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index bd07d6119..9c30f1137 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -215,7 +215,8 @@ exports.fn = function(document, opts) {
       // clean up <style/> atrules without any rulesets left
       if(node.type === 'Atrule' &&
          // only Atrules containing rulesets
-         node.block !== null && node.block.rules !== null &&
+         node.block !== null &&
+         typeof node.block.rules !== 'undefined' &&
          node.block.rules.isEmpty()) {
         list.remove(item);
       }

From ed029c58e3bf326e1759155135a74b228d15b658 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 11 Feb 2017 18:20:58 +0100
Subject: [PATCH 107/162] Add test for complex mediaquery + <defs/>.

---
 test/plugins/inlineStyles.14.svg | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 test/plugins/inlineStyles.14.svg

diff --git a/test/plugins/inlineStyles.14.svg b/test/plugins/inlineStyles.14.svg
new file mode 100644
index 000000000..e2655e18e
--- /dev/null
+++ b/test/plugins/inlineStyles.14.svg
@@ -0,0 +1,25 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
+  <defs>
+    <style>
+      @media only screen 
+        and (min-device-width: 320px) 
+        and (max-device-width: 480px)
+        and (-webkit-min-device-pixel-ratio: 2) {
+
+          .blue { fill: blue; }
+
+      }
+    </style>
+  </defs>
+  <rect width="100" height="100" class="blue"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
+    <rect width="100" height="100" class="blue" style="fill:blue"/>
+</svg>
+
+@@@
+
+{"useMqs": ["only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"]}
\ No newline at end of file

From de85b0f1033d3b8519e877c6ff1e65914f5f40e9 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 11 Feb 2017 18:21:17 +0100
Subject: [PATCH 108/162] Add clean up for empty <defs/>.

---
 plugins/inlineStyles.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 9c30f1137..9e75ed5e8 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -230,8 +230,16 @@ exports.fn = function(document, opts) {
 
     if(styleItem.cssAst.rules.isEmpty()){
       // clean up now emtpy <style/>s
-      var styleParent = styleItem.styleEl.parentNode;
-      styleParent.spliceContent(styleParent.content.indexOf(styleItem.styleEl), 1);
+      var styleParentEl = styleItem.styleEl.parentNode;
+      styleParentEl.spliceContent(styleParentEl.content.indexOf(styleItem.styleEl), 1);
+
+      if(styleParentEl.elem === 'defs' &&
+         styleParentEl.content.length === 0) {
+        // also clean up now empty <def/>s
+        var defsParentEl = styleParentEl.parentNode;
+        defsParentEl.spliceContent(defsParentEl.content.indexOf(styleParentEl), 1);
+      }
+
       continue;
     }
 

From 30569d1745f01b746ace39dff3b9ccf45e88f569 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 11 Feb 2017 18:29:40 +0100
Subject: [PATCH 109/162] Add Atrules with nesting to Atrules test. Improve
 Atrules test.

---
 test/plugins/inlineStyles.13.svg | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
index b080f9a91..47f587226 100644
--- a/test/plugins/inlineStyles.13.svg
+++ b/test/plugins/inlineStyles.13.svg
@@ -1,12 +1,15 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
   <defs>
     <style>
+
+      /* Simple Atrules */
       @charset 'UTF-8';
 
       @namespace svg url(http://www.w3.org/2000/svg);
 
       @import url('https://fonts.googleapis.com/css?family=Roboto');
 
+      /* Atrules with block */
       @font-face {
         font-family: SomeFont;
         src: local("Some Font"),
@@ -29,6 +32,22 @@
       }
 
 
+      /* Nested rules */
+      @page :first {
+        margin: 1in;
+      }
+
+      @supports (display: flex) {
+        .module { display: flex; }
+      }
+
+      @document url('http://example.com/test.html') {
+        rect {
+          stroke: red;
+        }
+      }
+
+
       .blue {
         fill: blue;
       }
@@ -42,7 +61,7 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
     <defs>
         <style>
-            @charset &apos;UTF-8&apos;;@namespace svg url(http://www.w3.org/2000/svg);@import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);@font-face{font-family:SomeFont;src:local(&quot;Some Font&quot;), local(&quot;SomeFont&quot;), url(SomeFont.ttf);font-weight:bold}@viewport{zoom:0.8;min-zoom:0.4;max-zoom:0.9}@keyframes identifier{0%{top:0}50%{top:30px;left:20px}50%{top:10px}100%{top:0}}
+            @charset &apos;UTF-8&apos;;@namespace svg url(http://www.w3.org/2000/svg);@import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);@font-face{font-family:SomeFont;src:local(&quot;Some Font&quot;), local(&quot;SomeFont&quot;), url(SomeFont.ttf);font-weight:bold}@viewport{zoom:0.8;min-zoom:0.4;max-zoom:0.9}@keyframes identifier{0%{top:0}50%{top:30px;left:20px}50%{top:10px}100%{top:0}}@page :first{margin:1in}@supports (display: flex){.module{display:flex}}@document url(&apos;http://example.com/test.html&apos;){rect{stroke:red}}
         </style>
     </defs>
     <rect width="100" height="100" class="blue" style="fill:blue"/>

From 57601a91c363d653ec7be922b1553d752f0ded04 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 25 Feb 2017 01:33:52 +0100
Subject: [PATCH 110/162] Gracefully skipping troubling selectors. Add test
 with yet exotic selectors (deep combinator selectors from CSS Scoping
 Module).

---
 plugins/inlineStyles.js          | 11 +++++-
 test/plugins/inlineStyles.15.svg | 67 ++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 test/plugins/inlineStyles.15.svg

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 9e75ed5e8..04a3a0da6 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -148,8 +148,17 @@ exports.fn = function(document, opts) {
   // apply <style/> styles to matched elements
   for(var selectorItemIndex in selectorItemsSorted) {
     var selectorItem = selectorItemsSorted[selectorItemIndex],
-
+        selectedEls  = null;
+    try {
         selectedEls  = document.querySelectorAll(selectorItem.selectorStr);
+    } catch(e) {
+      if(e.constructor == SyntaxError) {
+        console.warn('Syntax error when trying to select \n\n' + selectorItem.selectorStr + '\n\n, skipped.');
+        continue;
+      }
+      throw e;
+    }
+
     if(opts.onlyMatchedOnce && selectedEls !== null && selectedEls.length > 1) {
       // skip selectors that match more than once if option onlyMatchedOnce is enabled
       continue;
diff --git a/test/plugins/inlineStyles.15.svg b/test/plugins/inlineStyles.15.svg
new file mode 100644
index 000000000..dc9284692
--- /dev/null
+++ b/test/plugins/inlineStyles.15.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" standalone="no"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs xmlns="http://www.w3.org/1999/xhtml">
+<style type="text/css">
+html /deep/ [layout][horizontal], html /deep/ [layout][vertical] { display: flex; }
+html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] { display: inline-flex; }
+html /deep/ [layout][horizontal] { flex-direction: row; }
+html /deep/ [layout][horizontal][reverse] { flex-direction: row-reverse; }
+html /deep/ [layout][vertical] { flex-direction: column; }
+html /deep/ [layout][vertical][reverse] { flex-direction: column-reverse; }
+html /deep/ [layout][wrap] { flex-wrap: wrap; }
+html /deep/ [layout][wrap-reverse] { flex-wrap: wrap-reverse; }
+html /deep/ [flex] { flex: 1 1 0px; }
+html /deep/ [flex][auto] { flex: 1 1 auto; }
+html /deep/ [flex][none] { flex: 0 0 auto; }
+html /deep/ [flex][one] { flex: 1 1 0px; }
+html /deep/ [flex][two] { flex: 2 1 0px; }
+html /deep/ [flex][three] { flex: 3 1 0px; }
+html /deep/ [flex][four] { flex: 4 1 0px; }
+html /deep/ [flex][five] { flex: 5 1 0px; }
+html /deep/ [flex][six] { flex: 6 1 0px; }
+html /deep/ [flex][seven] { flex: 7 1 0px; }
+html /deep/ [flex][eight] { flex: 8 1 0px; }
+html /deep/ [flex][nine] { flex: 9 1 0px; }
+html /deep/ [flex][ten] { flex: 10 1 0px; }
+html /deep/ [flex][eleven] { flex: 11 1 0px; }
+html /deep/ [flex][twelve] { flex: 12 1 0px; }
+html /deep/ [layout][start] { align-items: flex-start; }
+html /deep/ [layout][center] { align-items: center; }
+html /deep/ [layout][end] { align-items: flex-end; }
+html /deep/ [layout][start-justified] { justify-content: flex-start; }
+html /deep/ [layout][center-justified] { justify-content: center; }
+html /deep/ [layout][end-justified] { justify-content: flex-end; }
+html /deep/ [layout][around-justified] { justify-content: space-around; }
+html /deep/ [layout][justified] { justify-content: space-between; }
+html /deep/ [self-start] { align-self: flex-start; }
+html /deep/ [self-center] { align-self: center; }
+html /deep/ [self-end] { align-self: flex-end; }
+html /deep/ [self-stretch] { align-self: stretch; }
+html /deep/ [block] { display: block; }
+html /deep/ [hidden] { display: none !important; }
+html /deep/ [relative] { position: relative; }
+html /deep/ [fit] { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
+body[fullbleed] { margin: 0px; height: 100vh; }
+html /deep/ [segment], html /deep/ segment { display: block; position: relative; box-sizing: border-box; margin: 1em 0.5em; padding: 1em; -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: white; }
+html /deep/ core-icon { display: inline-block; vertical-align: middle; background-repeat: no-repeat; }
+html /deep/ core-icon[size=""] { position: relative; }
+</style>
+</defs>
+<g id="airplanemode-on">
+<path d="M10.2,9"/>
+</g>
+</svg>
+
+@@@
+
+<?xml version="1.0" standalone="no"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs xmlns="http://www.w3.org/1999/xhtml">
+        <style type="text/css">
+            html /deep/ [layout][horizontal],html /deep/ [layout][vertical]{display:flex}html /deep/ [layout][horizontal][inline],html /deep/ [layout][vertical][inline]{display:inline-flex}html /deep/ [layout][horizontal]{flex-direction:row}html /deep/ [layout][horizontal][reverse]{flex-direction:row-reverse}html /deep/ [layout][vertical]{flex-direction:column}html /deep/ [layout][vertical][reverse]{flex-direction:column-reverse}html /deep/ [layout][wrap]{flex-wrap:wrap}html /deep/ [layout][wrap-reverse]{flex-wrap:wrap-reverse}html /deep/ [flex]{flex:1 1 0px}html /deep/ [flex][auto]{flex:1 1 auto}html /deep/ [flex][none]{flex:0 0 auto}html /deep/ [flex][one]{flex:1 1 0px}html /deep/ [flex][two]{flex:2 1 0px}html /deep/ [flex][three]{flex:3 1 0px}html /deep/ [flex][four]{flex:4 1 0px}html /deep/ [flex][five]{flex:5 1 0px}html /deep/ [flex][six]{flex:6 1 0px}html /deep/ [flex][seven]{flex:7 1 0px}html /deep/ [flex][eight]{flex:8 1 0px}html /deep/ [flex][nine]{flex:9 1 0px}html /deep/ [flex][ten]{flex:10 1 0px}html /deep/ [flex][eleven]{flex:11 1 0px}html /deep/ [flex][twelve]{flex:12 1 0px}html /deep/ [layout][start]{align-items:flex-start}html /deep/ [layout][center]{align-items:center}html /deep/ [layout][end]{align-items:flex-end}html /deep/ [layout][start-justified]{justify-content:flex-start}html /deep/ [layout][center-justified]{justify-content:center}html /deep/ [layout][end-justified]{justify-content:flex-end}html /deep/ [layout][around-justified]{justify-content:space-around}html /deep/ [layout][justified]{justify-content:space-between}html /deep/ [self-start]{align-self:flex-start}html /deep/ [self-center]{align-self:center}html /deep/ [self-end]{align-self:flex-end}html /deep/ [self-stretch]{align-self:stretch}html /deep/ [block]{display:block}html /deep/ [hidden]{display:none!important}html /deep/ [relative]{position:relative}html /deep/ [fit]{position:absolute;top:0px;right:0px;bottom:0px;left:0px}body[fullbleed]{margin:0px;height:100vh}html /deep/ [segment],html /deep/ segment{display:block;position:relative;box-sizing:border-box;margin:1em 0.5em;padding:1em;-webkit-box-shadow:rgba(0,0,0,0.0980392) 0px 0px 0px 1px;box-shadow:rgba(0,0,0,0.0980392) 0px 0px 0px 1px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;background-color:white}html /deep/ core-icon{display:inline-block;vertical-align:middle;background-repeat:no-repeat}html /deep/ core-icon[size=&quot;&quot;]{position:relative}
+        </style>
+    </defs>
+    <g id="airplanemode-on">
+        <path d="M10.2,9"/>
+    </g>
+</svg>
\ No newline at end of file

From 634cb4303d1b8b566760091596fbdfb93badf513 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 25 Feb 2017 14:50:06 +0100
Subject: [PATCH 111/162] Replace specificity calculation with built-in csso
 one. Remove now unneeded specificity package dependency.

---
 lib/css-tools.js        | 25 +++++++++++++++++++++++++
 package.json            |  1 -
 plugins/inlineStyles.js | 16 ++++++++--------
 3 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 lib/css-tools.js

diff --git a/lib/css-tools.js b/lib/css-tools.js
new file mode 100644
index 000000000..917914a66
--- /dev/null
+++ b/lib/css-tools.js
@@ -0,0 +1,25 @@
+'use strict';
+
+var specificity = require('csso/lib/compressor/restructure/prepare/specificity');
+
+// extracted from https://github.com/keeganstreet/specificity/blob/master/specificity.js#L211
+function compareSpecificity(aSpecificity, bSpecificity) {
+  for (var i = 0; i < 4; i += 1) {
+			if (aSpecificity[i] < bSpecificity[i]) {
+				return -1;
+			} else if (aSpecificity[i] > bSpecificity[i]) {
+				return 1;
+			}
+		}
+
+		return 0;
+}
+
+function compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode) {
+  var aSpecificity = specificity(aSimpleSelectorNode),
+      bSpecificity = specificity(bSimpleSelectorNode);
+  return compareSpecificity(aSpecificity, bSpecificity);
+}
+
+module.exports.compareSpecificity        = compareSpecificity;
+module.exports.compareSimpleSelectorNode = compareSimpleSelectorNode;
\ No newline at end of file
diff --git a/package.json b/package.json
index d3478a2ec..e40fe0caa 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
     "mkdirp": "~0.5.1",
     "object.assign": "^4.0.4",
     "sax": "~1.2.1",
-    "specificity": "^0.3.0",
     "stable": "^0.1.5",
     "whet.extend": "~0.9.9"
   },
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 04a3a0da6..f1fb40fdf 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -14,9 +14,9 @@ exports.params = {
 exports.description = 'inline styles (additional options)';
 
 
-var specificity = require('specificity'),
-    stable      = require('stable'),
-    csso        = require('csso');
+var stable   = require('stable'),
+    csso     = require('csso'),
+    cssTools = require('../lib/css-tools');
 
 /**
   * Moves + merges styles from style elements to element styles
@@ -135,16 +135,16 @@ exports.fn = function(document, opts) {
     selectorItem.pseudoClassList.remove(selectorItem.pseudoClassItem);
   });
 
+  // stable-sort css selectors by their specificity
+  var selectorItemsSorted = stable(selectorItemsPseudoClasses, function(itemA, itemB) {
+    return cssTools.compareSimpleSelectorNode(itemA.simpleSelectorItem.data, itemB.simpleSelectorItem.data);
+  }).reverse(); // last declaration applies last (final)
+
   // compile css selector strings
   selectorItemsPseudoClasses.map(function(selectorItem) {
     selectorItem.selectorStr = csso.translate(selectorItem.simpleSelectorItem.data);
   });
 
-  // stable-sort css selectors by their specificity
-  var selectorItemsSorted = stable(selectorItemsPseudoClasses, function(itemA, itemB) {
-    return specificity.compare(itemA.selectorStr, itemB.selectorStr);
-  }).reverse(); // last declaration applies last (final)
-
   // apply <style/> styles to matched elements
   for(var selectorItemIndex in selectorItemsSorted) {
     var selectorItem = selectorItemsSorted[selectorItemIndex],

From 92b692edd03b47fdddd36d64748c141b81fd716a Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 25 Feb 2017 19:09:43 +0100
Subject: [PATCH 112/162] Fix phpdoc.

---
 plugins/inlineStyles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index f1fb40fdf..cb6d205e9 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -37,8 +37,8 @@ var stable   = require('stable'),
   *     what pseudo-classes to be used,
   *     non-pseudo-class styles are always used
   *
-  * @param {Object} root (document)
-  * @param {Object} params plugin params
+  * @param {Object} document document element
+  * @param {Object} opts plugin params
   *
   * @author strarsis <strarsis@gmail.com>
   */

From cb069be8ae283c867da2e3064290428946ba751d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 26 Feb 2017 03:20:13 +0000
Subject: [PATCH 113/162] Remove unnecessary loop.

---
 plugins/inlineStyles.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index cb6d205e9..9f0b4b684 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -140,20 +140,16 @@ exports.fn = function(document, opts) {
     return cssTools.compareSimpleSelectorNode(itemA.simpleSelectorItem.data, itemB.simpleSelectorItem.data);
   }).reverse(); // last declaration applies last (final)
 
-  // compile css selector strings
-  selectorItemsPseudoClasses.map(function(selectorItem) {
-    selectorItem.selectorStr = csso.translate(selectorItem.simpleSelectorItem.data);
-  });
-
   // apply <style/> styles to matched elements
   for(var selectorItemIndex in selectorItemsSorted) {
     var selectorItem = selectorItemsSorted[selectorItemIndex],
+        selectorStr  = csso.translate(selectorItem.simpleSelectorItem.data),
         selectedEls  = null;
     try {
-        selectedEls  = document.querySelectorAll(selectorItem.selectorStr);
+        selectedEls  = document.querySelectorAll(selectorStr);
     } catch(e) {
       if(e.constructor == SyntaxError) {
-        console.warn('Syntax error when trying to select \n\n' + selectorItem.selectorStr + '\n\n, skipped.');
+        console.warn('Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped.');
         continue;
       }
       throw e;

From 23e6b0a41a5c8ff3c4273092bc64569cb21cce91 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 18 Mar 2017 20:36:57 +0100
Subject: [PATCH 114/162] Adjust tests to new CSSStyleDeclarations setting
 (deduplicated styles + declaration ordering).

---
 test/plugins/inlineStyles.03.svg |  2 +-
 test/plugins/inlineStyles.04.svg |  2 +-
 test/plugins/inlineStyles.05.svg | 18 ++++++------------
 test/plugins/inlineStyles.06.svg |  4 ++--
 test/plugins/inlineStyles.07.svg |  2 +-
 test/plugins/inlineStyles.08.svg |  2 +-
 test/plugins/inlineStyles.09.svg |  2 +-
 test/plugins/inlineStyles.12.svg |  2 +-
 test/plugins/inlineStyles.13.svg |  2 +-
 test/plugins/inlineStyles.14.svg |  2 +-
 10 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index ae9225cac..4b0f1e1e9 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -18,6 +18,6 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
 <!--for https://github.com/svg/svgo/pull/592#issuecomment-266327016-->
-    <path class="cls-7" style="only-cls-7:1;cls-7-and-8:1"/>
+    <path class="cls-7" style="cls-7-and-8:1;only-cls-7:1"/>
     <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8" style="cls-7-and-8:1"/>
 </svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
index 8f3f0cb27..3602750f4 100644
--- a/test/plugins/inlineStyles.04.svg
+++ b/test/plugins/inlineStyles.04.svg
@@ -9,5 +9,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0 st1" style="fill:blue;fill:red"/>
+    <rect width="100" height="100" class="st0 st1" style="fill:red"/>
 </svg>
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
index 2a03f9fb2..e099fdc57 100644
--- a/test/plugins/inlineStyles.05.svg
+++ b/test/plugins/inlineStyles.05.svg
@@ -1,23 +1,17 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
-        @media screen { 
-          .st1{fill:red;}
-        }
-        @media print {
-          .st1{stroke:blue;}
-        }
         .st1 {
-          color: yellow;
+          fill: red;
+        }
+        .st0 {
+          color: blue;
         }
     </style>
-    <rect width="100" height="100" class="st0 st1"/>
+    <rect width="100" height="100" class="st0 st1" style="color:yellow"/>
 </svg>
 
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <style>
-        @media print{.st1{stroke:blue}}
-    </style>
-    <rect width="100" height="100" class="st0 st1" style="fill:red;color:yellow"/>
+    <rect width="100" height="100" class="st0 st1" style="color:yellow;fill:red"/>
 </svg>
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
index 5895243e9..a6c53be18 100644
--- a/test/plugins/inlineStyles.06.svg
+++ b/test/plugins/inlineStyles.06.svg
@@ -14,8 +14,8 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="red blue" style="fill:red;fill:blue"/>
-    <rect width="100" height="100" class="blue red" style="fill:red;fill:blue"/>
+    <rect width="100" height="100" class="red blue" style="fill:blue"/>
+    <rect width="100" height="100" class="blue red" style="fill:blue"/>
 </svg>
 
 @@@
diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
index d64e28b6b..1692710d5 100644
--- a/test/plugins/inlineStyles.07.svg
+++ b/test/plugins/inlineStyles.07.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:blue;fill:red!important"/>
+    <rect width="100" height="100" class="blue red" style="fill:red!important"/>
 </svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.08.svg b/test/plugins/inlineStyles.08.svg
index ce9a296d4..468904edf 100644
--- a/test/plugins/inlineStyles.08.svg
+++ b/test/plugins/inlineStyles.08.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:blue;fill:yellow;fill:red!important"/>
+    <rect width="100" height="100" class="blue red" style="fill:red!important"/>
 </svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
index 4505467b7..e68247449 100644
--- a/test/plugins/inlineStyles.09.svg
+++ b/test/plugins/inlineStyles.09.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:blue;fill:red!important;fill:yellow!important"/>
+    <rect width="100" height="100" class="blue red" style="fill:yellow!important"/>
 </svg>
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.12.svg b/test/plugins/inlineStyles.12.svg
index 7f7f40bc9..8bcd74f25 100644
--- a/test/plugins/inlineStyles.12.svg
+++ b/test/plugins/inlineStyles.12.svg
@@ -13,4 +13,4 @@
 
 @@@
 
-{"usePseudoClasses":["hover"]}
\ No newline at end of file
+{"usePseudos":[":hover"]}
\ No newline at end of file
diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
index 47f587226..5738a826d 100644
--- a/test/plugins/inlineStyles.13.svg
+++ b/test/plugins/inlineStyles.13.svg
@@ -61,7 +61,7 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
     <defs>
         <style>
-            @charset &apos;UTF-8&apos;;@namespace svg url(http://www.w3.org/2000/svg);@import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);@font-face{font-family:SomeFont;src:local(&quot;Some Font&quot;), local(&quot;SomeFont&quot;), url(SomeFont.ttf);font-weight:bold}@viewport{zoom:0.8;min-zoom:0.4;max-zoom:0.9}@keyframes identifier{0%{top:0}50%{top:30px;left:20px}50%{top:10px}100%{top:0}}@page :first{margin:1in}@supports (display: flex){.module{display:flex}}@document url(&apos;http://example.com/test.html&apos;){rect{stroke:red}}
+            @charset &apos;UTF-8&apos;;@namespace svg url(http://www.w3.org/2000/svg);@import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);@font-face{font-family:SomeFont;src:local(&quot;Some Font&quot;),local(&quot;SomeFont&quot;),url(SomeFont.ttf);font-weight:bold}@viewport{zoom:0.8;min-zoom:0.4;max-zoom:0.9}@keyframes identifier{0%{top:0}50%{top:30px;left:20px}50%{top:10px}100%{top:0}}@page :first{margin:1in}@supports (display:flex){.module{display:flex}}@document url(&apos;http://example.com/test.html&apos;){rect{stroke:red}}
         </style>
     </defs>
     <rect width="100" height="100" class="blue" style="fill:blue"/>
diff --git a/test/plugins/inlineStyles.14.svg b/test/plugins/inlineStyles.14.svg
index e2655e18e..f02354955 100644
--- a/test/plugins/inlineStyles.14.svg
+++ b/test/plugins/inlineStyles.14.svg
@@ -22,4 +22,4 @@
 
 @@@
 
-{"useMqs": ["only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"]}
\ No newline at end of file
+{"useMqs": ["media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)"]}
\ No newline at end of file

From 2a7f45a88eda51464d730b55428f747efa0056b7 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 18 Mar 2017 20:38:56 +0100
Subject: [PATCH 115/162] Implement new CSSStyleDeclarations interface. Move
 css related functions to css-tools sub-module. Rewrite inlineStyles plugin
 for handling the AST over latest csstree.

---
 lib/css-tools.js                  | 155 ++++++++++++++++++----
 lib/svgo/css-style-declaration.js |  79 ++++++++++++
 lib/svgo/jsAPI.js                 |  46 ++++++-
 package.json                      |   3 +-
 plugins/inlineStyles.js           | 207 ++++++++++--------------------
 5 files changed, 322 insertions(+), 168 deletions(-)
 create mode 100644 lib/svgo/css-style-declaration.js

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 917914a66..60e7adb6e 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -1,25 +1,130 @@
-'use strict';
-
-var specificity = require('csso/lib/compressor/restructure/prepare/specificity');
-
-// extracted from https://github.com/keeganstreet/specificity/blob/master/specificity.js#L211
-function compareSpecificity(aSpecificity, bSpecificity) {
-  for (var i = 0; i < 4; i += 1) {
-			if (aSpecificity[i] < bSpecificity[i]) {
-				return -1;
-			} else if (aSpecificity[i] > bSpecificity[i]) {
-				return 1;
-			}
-		}
-
-		return 0;
-}
-
-function compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode) {
-  var aSpecificity = specificity(aSimpleSelectorNode),
-      bSpecificity = specificity(bSimpleSelectorNode);
-  return compareSpecificity(aSpecificity, bSpecificity);
-}
-
-module.exports.compareSpecificity        = compareSpecificity;
-module.exports.compareSimpleSelectorNode = compareSimpleSelectorNode;
\ No newline at end of file
+'use strict';
+
+var csstree     = require('css-tree'),
+    stable      = require('stable'),
+    specificity = require('csso/lib/restructure/prepare/specificity');
+
+
+function flattenToSelectors(cssAst) {
+  var selectors   = [],
+      curSelector = null;
+
+  // TODO: walkup to avoid look-behind
+  csstree.walk(cssAst, function(node, item, list) {
+
+    // selector with pseudos
+    // look-behind: The pseudo selectors come after the affected simple selector
+    if(node.type == 'PseudoClassSelector' || 
+       node.type == 'PseudoElementSelector') {
+      curSelector.pseudos.push({ item: item, list: list });
+    }
+
+    // (simple) selector
+    if(node.type !== 'Selector') {
+      return;
+    }
+
+    curSelector = {
+      item:    item,
+      atrule:  this.atrule,
+      rule:    this.rule,
+      pseudos: []
+    };
+    selectors.push(curSelector);
+
+  });
+
+  return selectors;
+}
+
+
+function filterByMqs(selectors, useMqs) {
+  return selectors.filter(function(selector) {
+    if(selector.atrule === null) {
+      return useMqs.indexOf('') > -1;
+    }
+
+    var mqName = selector.atrule.name;
+    var mqExpr = csstree.translate(selector.atrule.expression);
+    var mqStr  = [mqName, mqExpr].join(' ');
+    console.log(mqStr);
+
+    return useMqs.indexOf(mqStr) > -1;
+  });
+}
+
+function filterByPseudos(selectors, usePseudos) {
+  var emptySelectorObj = {
+    type: 'Selector',
+    children: []
+  };
+  return selectors.filter(function(selector) {
+    var pseudoSelectorsAst = csstree.fromPlainObject(emptySelectorObj);
+    for(var pseudo of selector.pseudos) {
+      pseudoSelectorsAst.children.appendData(pseudo.item.data);
+    }
+
+    var pseudoSelectorsStr = csstree.translate(pseudoSelectorsAst);
+
+    return usePseudos.indexOf(pseudoSelectorsStr) > -1;
+  });
+}
+
+function cleanPseudos(selectors) {
+  selectors.map(function(selector) {
+    for(var pseudo of selector.pseudos) {
+      pseudo.list.remove(pseudo.item);
+    }
+  });
+}
+
+
+// extracted from https://github.com/keeganstreet/specificity/blob/master/specificity.js#L211
+function compareSpecificity(aSpecificity, bSpecificity) {
+  for (var i = 0; i < 4; i += 1) {
+			if (aSpecificity[i] < bSpecificity[i]) {
+				return -1;
+			} else if (aSpecificity[i] > bSpecificity[i]) {
+				return 1;
+			}
+		}
+
+		return 0;
+}
+
+function compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode) {
+  var aSpecificity = specificity(aSimpleSelectorNode),
+      bSpecificity = specificity(bSimpleSelectorNode);
+  return compareSpecificity(aSpecificity, bSpecificity);
+}
+
+function _bySelectorSpecificity(selectorA, selectorB) {
+  return compareSimpleSelectorNode(selectorA.item.data, selectorB.item.data);
+}
+
+function sortSelectors(selectors) {
+  return stable(selectors, _bySelectorSpecificity);
+}
+
+
+// csso declaration to style declaration
+function cssoToStyleDeclaration(declaration) {
+  var propertyName     = declaration.property,
+      propertyValue    = csstree.translate(declaration.value),
+      propertyPriority = (declaration.important ? 'important' : '');
+  return { name: propertyName, property: { value: propertyValue, priority: propertyPriority } };
+}
+
+
+module.exports.flattenToSelectors        = flattenToSelectors;
+
+module.exports.filterByMqs               = filterByMqs;
+module.exports.filterByPseudos           = filterByPseudos;
+module.exports.cleanPseudos              = cleanPseudos;
+
+module.exports.compareSpecificity        = compareSpecificity;
+module.exports.compareSimpleSelectorNode = compareSimpleSelectorNode;
+
+module.exports.sortSelectors             = sortSelectors;
+
+module.exports.cssoToStyleDeclaration               = cssoToStyleDeclaration;
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
new file mode 100644
index 000000000..f23c43800
--- /dev/null
+++ b/lib/svgo/css-style-declaration.js
@@ -0,0 +1,79 @@
+'use strict';
+
+var csstree  = require('css-tree'),
+    csstools = require('../css-tools');
+
+var CSSStyleDeclaration = function(node) {
+  this.parentNode = node;
+
+  this.properties = new Map();
+  this.length     = 0;
+
+  this.update(); // initialize with styles from style attribute
+};
+
+
+CSSStyleDeclaration.prototype.update = function() {
+  var self = this;
+  if(!this.parentNode.hasAttr('style')) {
+    return;
+  }
+  var inlineCssStr = this.parentNode.attr('style').value;
+  var cssoDeclarations = csstree.parse(inlineCssStr, {context: 'declarationList'});
+  cssoDeclarations.children.each(function(cssoDeclaration) {
+    var styleDeclaration = csstools.cssoToStyleDeclaration(cssoDeclaration);
+    self.setProperty(styleDeclaration.name, styleDeclaration.property.value, styleDeclaration.property.priority);
+  });
+};
+
+
+CSSStyleDeclaration.prototype.getCssText = function() {
+  var declarationList = csstree.parse('', {context: 'declarationList'});
+  this.properties.forEach(function(property, propertyName) {
+    var strImportant   = (property.priority === 'important' ? '!important' : '');
+    var declarationStr = propertyName + ':' + property.value + strImportant;
+    var declaration    = csstree.parse(declarationStr, {context: 'declaration'});
+
+    declarationList.children.appendData(declaration);
+  });
+
+  return csstree.translate(declarationList);
+};
+
+CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
+  var property = this.properties.get(propertyName);
+  return property ? property.priority : '';
+};
+
+CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
+  var property = this.properties.get(propertyName);
+  return property ? property.value : null;
+};
+
+CSSStyleDeclaration.prototype.item = function(index) {
+  return Array.from(this.properties.keys())[index];
+};
+
+CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
+  this.properties.delete(propertyName);
+  this.length = this.properties.size;
+};
+
+CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
+  if(!propertyName) {
+    return false;
+  }
+
+  var property = { // always overwrites
+    value:    value,
+    priority: priority
+  };
+
+  this.properties.set(propertyName, property);
+  this.length = this.properties.size;
+
+  return this.properties.get(propertyName);
+};
+
+
+module.exports = CSSStyleDeclaration;
diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 8540c160e..056894427 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -1,7 +1,8 @@
 'use strict';
 
 var EXTEND    = require('whet.extend'),
-    cssSelect = require('css-select');
+    cssSelect = require('css-select'),
+    CSSStyleDeclaration = require('./css-style-declaration');
 
 var svgoCssSelectAdapter = require('./css-select-adapter');
 var cssSelectOpts = {
@@ -17,6 +18,8 @@ var JSAPI = module.exports = function(data, parentNode) {
             value: parentNode
         });
     }
+
+    this.style = new CSSStyleDeclaration(this);
 };
 
 /**
@@ -129,6 +132,10 @@ JSAPI.prototype.renameElem = function(name) {
  */
  JSAPI.prototype.hasAttr = function(name, val) {
 
+    if(name === 'style' && this.style && this.style.length > 0) {
+      return true;
+    }
+
     if (!this.attrs || !Object.keys(this.attrs).length) return false;
 
     if (!arguments.length) return !!this.attrs;
@@ -149,6 +156,10 @@ JSAPI.prototype.renameElem = function(name) {
  */
  JSAPI.prototype.hasAttrLocal = function(localName, val) {
 
+    if(localName === 'style' && this.style && this.style.length > 0) {
+        return true;
+    }
+
     if (!this.attrs || !Object.keys(this.attrs).length) return false;
 
     if (!arguments.length) return !!this.attrs;
@@ -194,6 +205,17 @@ JSAPI.prototype.renameElem = function(name) {
 
     if (!this.hasAttr() || !arguments.length) return undefined;
 
+    if(name === 'style' && this.style && this.style.length > 0) {
+      if(this.attrs.style) { // existing style attribute
+        this.attrs.style.value = this.style.getCssText();
+        return this.attrs.style;
+      }
+      return { // "virtual" style attribute
+        name: 'style',
+        value: this.style.getCssText()
+      };
+    }
+
     if (val !== undefined) return this.hasAttr(name, val) ? this.attrs[name] : undefined;
 
     return this.attrs[name];
@@ -215,6 +237,9 @@ JSAPI.prototype.renameElem = function(name) {
     if (val != null) {
         return elem ? elem.hasAttr(name, val) : false;
     } else if (elem && elem.hasAttr(name)) {
+        if(name === 'style' && this.style && this.style.length > 0) {
+            return this.attr('style');
+        }
         return elem.attrs[name].value;
     }
 
@@ -237,6 +262,10 @@ JSAPI.prototype.renameElem = function(name) {
 
     if (!recursive && val && this.attrs[name].value !== val) return false;
 
+    if(name === 'style' && this.style && this.style.length > 0) {
+      delete this.style;
+    }
+
     delete this.attrs[name];
 
     if (!Object.keys(this.attrs).length) delete this.attrs;
@@ -262,6 +291,10 @@ JSAPI.prototype.renameElem = function(name) {
     this.attrs = this.attrs || {};
     this.attrs[attr.name] = attr;
 
+    if(attr.name === 'style' && this.style && this.style.length > 0) {
+      this.style.update();
+    }
+
     return this.attrs[attr.name];
 
 };
@@ -278,9 +311,16 @@ JSAPI.prototype.renameElem = function(name) {
     if (!this.hasAttr()) return false;
 
     for (var name in this.attrs) {
+      if(name === 'style') {
+        continue; // handled below
+      }
         callback.call(context, this.attrs[name]);
     }
 
+    if(this.style && this.style.length > 0) {
+      callback.call(context, this.attr('style'));
+    }
+
     return true;
 
 };
@@ -296,6 +336,10 @@ JSAPI.prototype.renameElem = function(name) {
 
     if (!this.hasAttr()) return false;
 
+    if(this.style && this.style.length > 0) {
+      if (callback.call(context, this.attr('style'))) return true;
+    }
+
     for (var name in this.attrs) {
         if (callback.call(context, this.attrs[name])) return true;
     }
diff --git a/package.json b/package.json
index e40fe0caa..93f45de70 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,8 @@
     "colors": "~1.1.2",
     "css-select": "^1.3.0-rc0",
     "css-select-base-adapter": "^0.1.0",
-    "csso": "~2.3.1",
+    "css-tree": "github:csstree/csstree",
+    "csso": "^3.0.1",
     "js-yaml": "~3.7.0",
     "mkdirp": "~0.5.1",
     "object.assign": "^4.0.4",
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 9f0b4b684..601321a57 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -7,15 +7,14 @@ exports.active = true;
 exports.params = {
   onlyMatchedOnce:        true,
   removeMatchedSelectors: true,
-  useMqs:                 ['screen'],
-  usePseudoClasses:       []
+  useMqs:                 ['', 'screen'],
+  usePseudos:             ['']
 };
 
 exports.description = 'inline styles (additional options)';
 
 
-var stable   = require('stable'),
-    csso     = require('csso'),
+var csstree  = require('css-tree'),
     cssTools = require('../lib/css-tools');
 
 /**
@@ -33,9 +32,9 @@ var stable   = require('stable'),
   *     what mediaqueries to be used,
   *     non-mediaquery styles are always used
   *
-  *   usePseudoClasses (default: [])
-  *     what pseudo-classes to be used,
-  *     non-pseudo-class styles are always used
+  *   usePseudos (default: [])
+  *     what pseudo-classes/-elements to be used,
+  *     non-pseudo-class/-element styles are always used
   *
   * @param {Object} document document element
   * @param {Object} opts plugin params
@@ -45,13 +44,17 @@ var stable   = require('stable'),
 exports.fn = function(document, opts) {
 
   // collect <style/>s
-  var styleEls      = document.querySelectorAll('style');
+  var styleEls  = document.querySelectorAll('style');
 
-  var styleItems    = [],
-      selectorItems = [];
-  for(var styleElIndex in styleEls) {
-    var styleEl = styleEls[styleElIndex];
+  //no <styles/>s, nothing to do
+  if(styleEls === null) {
+    return document;
+  }
+
+  var styles    = [],
+      selectors = [];
 
+  for(var styleEl of styleEls) {
     if(styleEl.isEmpty()) {
       // skip empty <style/>s
       continue;
@@ -59,100 +62,49 @@ exports.fn = function(document, opts) {
     var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];
 
     // collect <style/>s and their css ast
-    var cssAst = csso.parse(cssStr, {context: 'stylesheet'});
-    styleItems.push({
+    var cssAst = csstree.parse(cssStr, {context: 'stylesheet'});
+    styles.push({
       styleEl: styleEl,
       cssAst:  cssAst
     });
 
-    // collect css selectors and their containing ruleset
-    var curAtruleExpNode   = null,
-        curPseudoClassItem = null,
-        curPseudoClassList = null;
-    csso.walk(cssAst, function(node, item, list) {
-
-      // media query blocks
-      // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
-      if(node.type === 'AtruleExpression') { // marks the beginning of an Atrule
-        curAtruleExpNode = node;
-      }
-      // "look-ahead the SimpleSelector", Atrule node comes _after_ the affected SimpleSelector
-      if(node.type === 'Atrule')           { // marks the end of an Atrule
-        curAtruleExpNode = null;
-      }
-
-      // Pseudo classes
-      // "look-behind the SimpleSelector", PseudoClass node comes _before_ the affected SimpleSelector
-      if(node.type === 'PseudoClass') {
-        curPseudoClassItem = item;
-        curPseudoClassList = list;
-      }
-
-      if(node.type === 'SimpleSelector') {
-		    // csso 'SimpleSelector' to be interpreted with CSS2.1 specs, _not_ with CSS3 Selector module specs:
-	      // Selector group ('Selector' in csso) consisting of simple selectors ('SimpleSelector' in csso), separated by comma.
-        // <Selector>: <'SimpleSelector'>, <'SimpleSelector'>, ...
-
-        var curSelectorItem = {
-          simpleSelectorItem: item,
-          rulesetNode:        this.ruleset,
-          atRuleExpNode:      curAtruleExpNode,
-
-          pseudoClassItem:    curPseudoClassItem,
-          pseudoClassList:    curPseudoClassList
-        };
-        selectorItems.push(curSelectorItem);
-
-        // pseudo class scope ends with the SimpleSelector
-        curPseudoClassItem = null;
-        curPseudoClassList = null;
-      }
-
-    });
+    selectors = selectors.concat(cssTools.flattenToSelectors(cssAst));
   }
 
 
   // filter for mediaqueries to be used or without any mediaquery
-  var selectorItemsMqs = selectorItems.filter(function(selectorItem) {
-    if(selectorItem.atRuleExpNode === null) {
-      return true;
-    }
-    var mqStr = csso.translate(selectorItem.atRuleExpNode);
-    return opts.useMqs.indexOf(mqStr) > -1;
-  });
+  var selectorsMq = cssTools.filterByMqs(selectors, opts.useMqs);
 
-  // filter for pseudo classes to be used or not using a pseudo class
-  var selectorItemsPseudoClasses = selectorItemsMqs.filter(function(selectorItem) {
-    return (selectorItem.pseudoClassItem === null || 
-            opts.usePseudoClasses.indexOf(selectorItem.pseudoClassItem.data.name) > -1);
-  });
+
+  // filter for pseudo elements to be used
+  var selectorsPseudo = cssTools.filterByPseudos(selectorsMq, opts.usePseudos);
 
   // remove PseudoClass from its SimpleSelector for proper matching
-  selectorItemsPseudoClasses.map(function(selectorItem) {
-    if(selectorItem.pseudoClassItem === null) {
-      return;
-    }
-    selectorItem.pseudoClassList.remove(selectorItem.pseudoClassItem);
-  });
+  cssTools.cleanPseudos(selectorsPseudo);
+
+
+  // stable sort selectors
+  var sortedSelectors = cssTools.sortSelectors(selectorsPseudo).reverse();
 
-  // stable-sort css selectors by their specificity
-  var selectorItemsSorted = stable(selectorItemsPseudoClasses, function(itemA, itemB) {
-    return cssTools.compareSimpleSelectorNode(itemA.simpleSelectorItem.data, itemB.simpleSelectorItem.data);
-  }).reverse(); // last declaration applies last (final)
 
   // apply <style/> styles to matched elements
-  for(var selectorItemIndex in selectorItemsSorted) {
-    var selectorItem = selectorItemsSorted[selectorItemIndex],
-        selectorStr  = csso.translate(selectorItem.simpleSelectorItem.data),
-        selectedEls  = null;
+  for(var selector of sortedSelectors) {
+    var selectorStr = csstree.translate(selector.item.data),
+        selectedEls = null;
+
     try {
-        selectedEls  = document.querySelectorAll(selectorStr);
+        selectedEls = document.querySelectorAll(selectorStr);
     } catch(e) {
-      if(e.constructor == SyntaxError) {
-        console.warn('Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped.');
-        continue;
-      }
-      throw e;
+        if(e.constructor == SyntaxError) {
+            console.warn('Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped.');
+            continue;
+        }
+        throw e;
+    }
+
+    if(selectedEls === null) {
+      // nothing selected
+      continue;
     }
 
     if(opts.onlyMatchedOnce && selectedEls !== null && selectedEls.length > 1) {
@@ -160,83 +112,54 @@ exports.fn = function(document, opts) {
       continue;
     }
 
-    for(var selectedElIndex in selectedEls) {
-      var selectedEl = selectedEls[selectedElIndex];
+    // apply <style/> to matched elements
+    for(var selectedEl of selectedEls) {
 
-      // empty defaults in case there is no style attribute
-      var elInlineStyleAttr = { name: 'style', value: '', prefix: '', local: 'style' },
-          elInlineStyles    = '';
-
-      if(selectedEl.hasAttr('style')) {
-        elInlineStyleAttr = selectedEl.attr('style');
-        elInlineStyles    = elInlineStyleAttr.value;
+      if(selector.rule === null) {
+        continue;
       }
-      var inlineCssAst    = csso.parse(elInlineStyles, {context: 'block'});
 
-      // merge element(inline) styles + matching <style/> styles
-      var newInlineCssAst = csso.parse('', {context: 'block'}); // for an empty css ast (in block context)
-
-      var mergedDeclarations = [];
-      var _fetchDeclarations = function(node, item) {
-        if(node.type === 'Declaration') {
-          mergedDeclarations.push(item);
+      // merge declarations
+      csstree.walkDeclarations(selector.rule, function(styleCssoDeclaration) {
+        var styleDeclaration = cssTools.cssoToStyleDeclaration(styleCssoDeclaration);
+        if(selectedEl.style.getPropertyValue(styleDeclaration.name)    !== null &&
+           selectedEl.style.getPropertyPriority(styleDeclaration.name) >=  styleDeclaration.property.priority) {
+          return;
         }
-      };
-      var itemRulesetNodeCloned = csso.clone(selectorItem.rulesetNode);
-        // clone to prevent leaking declaration references (csso.translate(...))
-      csso.walk(itemRulesetNodeCloned, _fetchDeclarations);
-      csso.walk(inlineCssAst,          _fetchDeclarations);
-
-      // sort by !important(ce)
-      var mergedDeclarationsSorted = stable(mergedDeclarations, function(declarationA, declarationB) {
-        var declarationAScore = ~~declarationA.data.value.important, // (cast boolean to number)
-            declarationBScore = ~~declarationB.data.value.important; //  "
-        return (declarationAScore - declarationBScore);
+        selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.property.value, styleDeclaration.property.priority);
       });
 
-      // to css
-      for(var mergedDeclarationsSortedIndex in mergedDeclarationsSorted) {
-        var declaration = mergedDeclarationsSorted[mergedDeclarationsSortedIndex];
-        newInlineCssAst.declarations.insert(declaration);
-      }
-      var newCss = csso.translate(newInlineCssAst);
-
-      elInlineStyleAttr.value = newCss;
-      selectedEl.addAttr(elInlineStyleAttr);
     }
 
     if(opts.removeMatchedSelectors && selectedEls !== null && selectedEls.length > 0) {
       // clean up matching simple selectors if option removeMatchedSelectors is enabled
-      selectorItem.rulesetNode.selector.selectors.remove(selectorItem.simpleSelectorItem);
+      selector.rule.selector.children.remove(selector.item);
     }
   }
 
-  var styleItemIndex = 0,
-      styleItem      = {};
-  for(styleItemIndex in styleItems) {
-    styleItem = styleItems[styleItemIndex];
 
-    csso.walk(styleItem.cssAst, function(node, item, list) {
+  for(var style of styles) {
+    csstree.walkRules(style.cssAst, function(node, item, list) {
       // clean up <style/> atrules without any rulesets left
       if(node.type === 'Atrule' &&
          // only Atrules containing rulesets
          node.block !== null &&
-         typeof node.block.rules !== 'undefined' &&
-         node.block.rules.isEmpty()) {
+         node.block.children.isEmpty()) {
         list.remove(item);
       }
 
       // clean up <style/> rulesets without any css selectors left
-      if(node.type === 'Ruleset' &&
-         node.selector.selectors.isEmpty()) {
+      if(node.type === 'Rule' &&
+         node.selector.children.isEmpty()) {
           list.remove(item);
       }
     });
 
-    if(styleItem.cssAst.rules.isEmpty()){
+
+    if(style.cssAst.children.isEmpty()){
       // clean up now emtpy <style/>s
-      var styleParentEl = styleItem.styleEl.parentNode;
-      styleParentEl.spliceContent(styleParentEl.content.indexOf(styleItem.styleEl), 1);
+      var styleParentEl = style.styleEl.parentNode;
+      styleParentEl.spliceContent(styleParentEl.content.indexOf(style.styleEl), 1);
 
       if(styleParentEl.elem === 'defs' &&
          styleParentEl.content.length === 0) {
@@ -248,9 +171,11 @@ exports.fn = function(document, opts) {
       continue;
     }
 
+
     // update existing, left over <style>s
-    styleItem.styleEl.content[0].text = csso.translate(styleItem.cssAst);
+    style.styleEl.content[0].text = csstree.translate(style.cssAst);
   }
 
+
   return document;
 };

From 57827dd6d73d0fb80cc1c1f8bcc910717a0155e3 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:08:31 +0100
Subject: [PATCH 116/162] Remove console.log(...).

---
 lib/css-tools.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 60e7adb6e..692377c17 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -47,7 +47,6 @@ function filterByMqs(selectors, useMqs) {
     var mqName = selector.atrule.name;
     var mqExpr = csstree.translate(selector.atrule.expression);
     var mqStr  = [mqName, mqExpr].join(' ');
-    console.log(mqStr);
 
     return useMqs.indexOf(mqStr) > -1;
   });

From 58ea1bdcb8d881a660eb1da2d18d578306f8ec1d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:08:46 +0100
Subject: [PATCH 117/162] Add loop skip.

---
 plugins/inlineStyles.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 601321a57..b47876762 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -146,6 +146,7 @@ exports.fn = function(document, opts) {
          node.block !== null &&
          node.block.children.isEmpty()) {
         list.remove(item);
+        continue;
       }
 
       // clean up <style/> rulesets without any css selectors left

From 6117cd4c7e2e78d4d17f32c5aa4886eea6a830ff Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:10:18 +0100
Subject: [PATCH 118/162] Fix loop continue.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index b47876762..730b74760 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -146,7 +146,7 @@ exports.fn = function(document, opts) {
          node.block !== null &&
          node.block.children.isEmpty()) {
         list.remove(item);
-        continue;
+        return;
       }
 
       // clean up <style/> rulesets without any css selectors left

From 1fa6197fa8b06592234233606172eca5f30c3be2 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:35:00 +0100
Subject: [PATCH 119/162] Disable unneeded parse options, adjust tests to
 slightly different styles output format.

---
 plugins/inlineStyles.js          | 2 +-
 test/plugins/inlineStyles.13.svg | 2 +-
 test/plugins/inlineStyles.15.svg | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 730b74760..e3d2109e5 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -62,7 +62,7 @@ exports.fn = function(document, opts) {
     var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];
 
     // collect <style/>s and their css ast
-    var cssAst = csstree.parse(cssStr, {context: 'stylesheet'});
+    var cssAst = csstree.parse(cssStr, {context: 'stylesheet', parseValue: false, parseCustomProperty: false});
     styles.push({
       styleEl: styleEl,
       cssAst:  cssAst
diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
index 5738a826d..f0930aacc 100644
--- a/test/plugins/inlineStyles.13.svg
+++ b/test/plugins/inlineStyles.13.svg
@@ -61,7 +61,7 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
     <defs>
         <style>
-            @charset &apos;UTF-8&apos;;@namespace svg url(http://www.w3.org/2000/svg);@import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);@font-face{font-family:SomeFont;src:local(&quot;Some Font&quot;),local(&quot;SomeFont&quot;),url(SomeFont.ttf);font-weight:bold}@viewport{zoom:0.8;min-zoom:0.4;max-zoom:0.9}@keyframes identifier{0%{top:0}50%{top:30px;left:20px}50%{top:10px}100%{top:0}}@page :first{margin:1in}@supports (display:flex){.module{display:flex}}@document url(&apos;http://example.com/test.html&apos;){rect{stroke:red}}
+            @charset &apos;UTF-8&apos;;@namespace svg url(http://www.w3.org/2000/svg);@import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);@font-face{font-family: SomeFont;src: local(&quot;Some Font&quot;), local(&quot;SomeFont&quot;), url(SomeFont.ttf);font-weight: bold}@viewport{zoom: 0.8;min-zoom: 0.4;max-zoom: 0.9}@keyframes identifier{0%{top: 0}50%{top: 30px;left: 20px}50%{top: 10px}100%{top: 0}}@page :first{margin: 1in}@supports (display: flex){.module{display: flex}}@document url(&apos;http://example.com/test.html&apos;){rect{stroke: red}}
         </style>
     </defs>
     <rect width="100" height="100" class="blue" style="fill:blue"/>
diff --git a/test/plugins/inlineStyles.15.svg b/test/plugins/inlineStyles.15.svg
index dc9284692..70fe4cf32 100644
--- a/test/plugins/inlineStyles.15.svg
+++ b/test/plugins/inlineStyles.15.svg
@@ -58,7 +58,7 @@ html /deep/ core-icon[size=""] { position: relative; }
 <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs xmlns="http://www.w3.org/1999/xhtml">
         <style type="text/css">
-            html /deep/ [layout][horizontal],html /deep/ [layout][vertical]{display:flex}html /deep/ [layout][horizontal][inline],html /deep/ [layout][vertical][inline]{display:inline-flex}html /deep/ [layout][horizontal]{flex-direction:row}html /deep/ [layout][horizontal][reverse]{flex-direction:row-reverse}html /deep/ [layout][vertical]{flex-direction:column}html /deep/ [layout][vertical][reverse]{flex-direction:column-reverse}html /deep/ [layout][wrap]{flex-wrap:wrap}html /deep/ [layout][wrap-reverse]{flex-wrap:wrap-reverse}html /deep/ [flex]{flex:1 1 0px}html /deep/ [flex][auto]{flex:1 1 auto}html /deep/ [flex][none]{flex:0 0 auto}html /deep/ [flex][one]{flex:1 1 0px}html /deep/ [flex][two]{flex:2 1 0px}html /deep/ [flex][three]{flex:3 1 0px}html /deep/ [flex][four]{flex:4 1 0px}html /deep/ [flex][five]{flex:5 1 0px}html /deep/ [flex][six]{flex:6 1 0px}html /deep/ [flex][seven]{flex:7 1 0px}html /deep/ [flex][eight]{flex:8 1 0px}html /deep/ [flex][nine]{flex:9 1 0px}html /deep/ [flex][ten]{flex:10 1 0px}html /deep/ [flex][eleven]{flex:11 1 0px}html /deep/ [flex][twelve]{flex:12 1 0px}html /deep/ [layout][start]{align-items:flex-start}html /deep/ [layout][center]{align-items:center}html /deep/ [layout][end]{align-items:flex-end}html /deep/ [layout][start-justified]{justify-content:flex-start}html /deep/ [layout][center-justified]{justify-content:center}html /deep/ [layout][end-justified]{justify-content:flex-end}html /deep/ [layout][around-justified]{justify-content:space-around}html /deep/ [layout][justified]{justify-content:space-between}html /deep/ [self-start]{align-self:flex-start}html /deep/ [self-center]{align-self:center}html /deep/ [self-end]{align-self:flex-end}html /deep/ [self-stretch]{align-self:stretch}html /deep/ [block]{display:block}html /deep/ [hidden]{display:none!important}html /deep/ [relative]{position:relative}html /deep/ [fit]{position:absolute;top:0px;right:0px;bottom:0px;left:0px}body[fullbleed]{margin:0px;height:100vh}html /deep/ [segment],html /deep/ segment{display:block;position:relative;box-sizing:border-box;margin:1em 0.5em;padding:1em;-webkit-box-shadow:rgba(0,0,0,0.0980392) 0px 0px 0px 1px;box-shadow:rgba(0,0,0,0.0980392) 0px 0px 0px 1px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;background-color:white}html /deep/ core-icon{display:inline-block;vertical-align:middle;background-repeat:no-repeat}html /deep/ core-icon[size=&quot;&quot;]{position:relative}
+            html /deep/ [layout][horizontal],html /deep/ [layout][vertical]{display: flex}html /deep/ [layout][horizontal][inline],html /deep/ [layout][vertical][inline]{display: inline-flex}html /deep/ [layout][horizontal]{flex-direction: row}html /deep/ [layout][horizontal][reverse]{flex-direction: row-reverse}html /deep/ [layout][vertical]{flex-direction: column}html /deep/ [layout][vertical][reverse]{flex-direction: column-reverse}html /deep/ [layout][wrap]{flex-wrap: wrap}html /deep/ [layout][wrap-reverse]{flex-wrap: wrap-reverse}html /deep/ [flex]{flex: 1 1 0px}html /deep/ [flex][auto]{flex: 1 1 auto}html /deep/ [flex][none]{flex: 0 0 auto}html /deep/ [flex][one]{flex: 1 1 0px}html /deep/ [flex][two]{flex: 2 1 0px}html /deep/ [flex][three]{flex: 3 1 0px}html /deep/ [flex][four]{flex: 4 1 0px}html /deep/ [flex][five]{flex: 5 1 0px}html /deep/ [flex][six]{flex: 6 1 0px}html /deep/ [flex][seven]{flex: 7 1 0px}html /deep/ [flex][eight]{flex: 8 1 0px}html /deep/ [flex][nine]{flex: 9 1 0px}html /deep/ [flex][ten]{flex: 10 1 0px}html /deep/ [flex][eleven]{flex: 11 1 0px}html /deep/ [flex][twelve]{flex: 12 1 0px}html /deep/ [layout][start]{align-items: flex-start}html /deep/ [layout][center]{align-items: center}html /deep/ [layout][end]{align-items: flex-end}html /deep/ [layout][start-justified]{justify-content: flex-start}html /deep/ [layout][center-justified]{justify-content: center}html /deep/ [layout][end-justified]{justify-content: flex-end}html /deep/ [layout][around-justified]{justify-content: space-around}html /deep/ [layout][justified]{justify-content: space-between}html /deep/ [self-start]{align-self: flex-start}html /deep/ [self-center]{align-self: center}html /deep/ [self-end]{align-self: flex-end}html /deep/ [self-stretch]{align-self: stretch}html /deep/ [block]{display: block}html /deep/ [hidden]{display: none !important}html /deep/ [relative]{position: relative}html /deep/ [fit]{position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px}body[fullbleed]{margin: 0px;height: 100vh}html /deep/ [segment],html /deep/ segment{display: block;position: relative;box-sizing: border-box;margin: 1em 0.5em;padding: 1em;-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 1px;box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 1px;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: white}html /deep/ core-icon{display: inline-block;vertical-align: middle;background-repeat: no-repeat}html /deep/ core-icon[size=&quot;&quot;]{position: relative}
         </style>
     </defs>
     <g id="airplanemode-on">

From 2d8215358d509c1b6239068db0bb3535314980e3 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:36:38 +0100
Subject: [PATCH 120/162] Remove unnecessary explicit stylesheet context.

---
 plugins/inlineStyles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index e3d2109e5..a5c2d67b3 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -62,7 +62,7 @@ exports.fn = function(document, opts) {
     var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];
 
     // collect <style/>s and their css ast
-    var cssAst = csstree.parse(cssStr, {context: 'stylesheet', parseValue: false, parseCustomProperty: false});
+    var cssAst = csstree.parse(cssStr, {parseValue: false, parseCustomProperty: false});
     styles.push({
       styleEl: styleEl,
       cssAst:  cssAst

From c50aea5d38c531334845228ca8e661b69b8c08b8 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:44:29 +0100
Subject: [PATCH 121/162] Simplify getCssText().

---
 lib/svgo/css-style-declaration.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index f23c43800..cbfe1ce34 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -28,16 +28,12 @@ CSSStyleDeclaration.prototype.update = function() {
 
 
 CSSStyleDeclaration.prototype.getCssText = function() {
-  var declarationList = csstree.parse('', {context: 'declarationList'});
+  var cssText = [];
   this.properties.forEach(function(property, propertyName) {
-    var strImportant   = (property.priority === 'important' ? '!important' : '');
-    var declarationStr = propertyName + ':' + property.value + strImportant;
-    var declaration    = csstree.parse(declarationStr, {context: 'declaration'});
-
-    declarationList.children.appendData(declaration);
+    var strImportant = property.priority === 'important' ? '!important' : '';
+    cssText.push(propertyName.trim() + ':' + property.value.trim() + strImportant);
   });
-
-  return csstree.translate(declarationList);
+  return cssText.join(';');
 };
 
 CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {

From a678f6debeeffd721f79b0d56b2faeee8a65871d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:46:24 +0100
Subject: [PATCH 122/162] Simpler cssoToStyleDeclaration(...) return object.

---
 lib/css-tools.js                  | 2 +-
 lib/svgo/css-style-declaration.js | 2 +-
 plugins/inlineStyles.js           | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 692377c17..05fbf4f3a 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -111,7 +111,7 @@ function cssoToStyleDeclaration(declaration) {
   var propertyName     = declaration.property,
       propertyValue    = csstree.translate(declaration.value),
       propertyPriority = (declaration.important ? 'important' : '');
-  return { name: propertyName, property: { value: propertyValue, priority: propertyPriority } };
+  return { name: propertyName, value: propertyValue, priority: propertyPriority };
 }
 
 
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index cbfe1ce34..ca558f83f 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -22,7 +22,7 @@ CSSStyleDeclaration.prototype.update = function() {
   var cssoDeclarations = csstree.parse(inlineCssStr, {context: 'declarationList'});
   cssoDeclarations.children.each(function(cssoDeclaration) {
     var styleDeclaration = csstools.cssoToStyleDeclaration(cssoDeclaration);
-    self.setProperty(styleDeclaration.name, styleDeclaration.property.value, styleDeclaration.property.priority);
+    self.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
   });
 };
 
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index a5c2d67b3..973adb68e 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -123,10 +123,10 @@ exports.fn = function(document, opts) {
       csstree.walkDeclarations(selector.rule, function(styleCssoDeclaration) {
         var styleDeclaration = cssTools.cssoToStyleDeclaration(styleCssoDeclaration);
         if(selectedEl.style.getPropertyValue(styleDeclaration.name)    !== null &&
-           selectedEl.style.getPropertyPriority(styleDeclaration.name) >=  styleDeclaration.property.priority) {
+           selectedEl.style.getPropertyPriority(styleDeclaration.name) >=  styleDeclaration.priority) {
           return;
         }
-        selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.property.value, styleDeclaration.property.priority);
+        selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
       });
 
     }

From d123b9d4f1760a1b1a8bf726a51df60a96941a04 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:49:08 +0100
Subject: [PATCH 123/162] Fix indent.

---
 lib/css-tools.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 05fbf4f3a..4631b638b 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -81,14 +81,14 @@ function cleanPseudos(selectors) {
 // extracted from https://github.com/keeganstreet/specificity/blob/master/specificity.js#L211
 function compareSpecificity(aSpecificity, bSpecificity) {
   for (var i = 0; i < 4; i += 1) {
-			if (aSpecificity[i] < bSpecificity[i]) {
-				return -1;
-			} else if (aSpecificity[i] > bSpecificity[i]) {
-				return 1;
-			}
-		}
-
-		return 0;
+    if (aSpecificity[i] < bSpecificity[i]) {
+      return -1;
+    } else if (aSpecificity[i] > bSpecificity[i]) {
+      return 1;
+    }
+  }
+
+  return 0;
 }
 
 function compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode) {

From 4a19b9b37fcd91cecd7708bdde53f1397c00c41c Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:49:32 +0100
Subject: [PATCH 124/162] Simplify cleanPseudos(...).

---
 lib/css-tools.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 4631b638b..3cade7504 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -70,10 +70,10 @@ function filterByPseudos(selectors, usePseudos) {
 }
 
 function cleanPseudos(selectors) {
-  selectors.map(function(selector) {
-    for(var pseudo of selector.pseudos) {
-      pseudo.list.remove(pseudo.item);
-    }
+  selectors.forEach(function(selector) {
+    selector.pseudos.forEach(function(pseudo) {
+        pseudo.list.remove(pseudo.item);
+    });
   });
 }
 

From b8a7fe8cbf7d114525bbd8c163d7736019f326c5 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 00:53:45 +0100
Subject: [PATCH 125/162] Simplify filterByPseudos(...).

---
 lib/css-tools.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 3cade7504..468058c5e 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -2,7 +2,8 @@
 
 var csstree     = require('css-tree'),
     stable      = require('stable'),
-    specificity = require('csso/lib/restructure/prepare/specificity');
+    specificity = require('csso/lib/restructure/prepare/specificity'),
+    List        = require('css-tree/lib/utils/list');
 
 
 function flattenToSelectors(cssAst) {
@@ -58,13 +59,14 @@ function filterByPseudos(selectors, usePseudos) {
     children: []
   };
   return selectors.filter(function(selector) {
-    var pseudoSelectorsAst = csstree.fromPlainObject(emptySelectorObj);
+    var pseudoNodes = [];
     for(var pseudo of selector.pseudos) {
-      pseudoSelectorsAst.children.appendData(pseudo.item.data);
+      pseudoNodes.push(pseudo.item.data);
     }
-
-    var pseudoSelectorsStr = csstree.translate(pseudoSelectorsAst);
-
+    var pseudoSelectorsStr = csstree.translate({
+      type: 'Selector',
+      children: new List().fromArray(pseudoNodes)
+    });
     return usePseudos.indexOf(pseudoSelectorsStr) > -1;
   });
 }

From df4752a631b43d942222d30ef55dd5099ab4fb64 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 01:00:42 +0100
Subject: [PATCH 126/162] Simplify/improve flattenToSelectors(...). Clean up
 now unused code.

---
 lib/css-tools.js | 53 +++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 468058c5e..f34dd37cb 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -7,33 +7,34 @@ var csstree     = require('css-tree'),
 
 
 function flattenToSelectors(cssAst) {
-  var selectors   = [],
-      curSelector = null;
+  var selectors   = [];
 
-  // TODO: walkup to avoid look-behind
-  csstree.walk(cssAst, function(node, item, list) {
-
-    // selector with pseudos
-    // look-behind: The pseudo selectors come after the affected simple selector
-    if(node.type == 'PseudoClassSelector' || 
-       node.type == 'PseudoElementSelector') {
-      curSelector.pseudos.push({ item: item, list: list });
-    }
-
-    // (simple) selector
-    if(node.type !== 'Selector') {
-      return;
+  csstree.walkRules(cssAst, function(node) {
+    if (node.type !== 'Rule') {
+        return;
     }
 
-    curSelector = {
-      item:    item,
-      atrule:  this.atrule,
-      rule:    this.rule,
-      pseudos: []
-    };
-    selectors.push(curSelector);
-
-  });
+    var atrule = this.atrule;
+    var rule   = node;
+
+    node.selector.children.each(function(selectorNode, selectorItem) {
+        var selector = {
+            item:    selectorItem,
+            atrule:  atrule,
+            rule:    rule,
+            pseudos: []
+        };
+
+        selectorNode.children.each(function(selectorChildNode, selectorChildItem, selectorChildList) {
+            if(selectorChildNode.type == 'PseudoClassSelector' || 
+               selectorChildNode.type == 'PseudoElementSelector') {
+                selector.pseudos.push({ item: selectorChildItem, list: selectorChildList });
+            }
+        });
+
+        selectors.push(selector);
+    });
+});
 
   return selectors;
 }
@@ -54,10 +55,6 @@ function filterByMqs(selectors, useMqs) {
 }
 
 function filterByPseudos(selectors, usePseudos) {
-  var emptySelectorObj = {
-    type: 'Selector',
-    children: []
-  };
   return selectors.filter(function(selector) {
     var pseudoNodes = [];
     for(var pseudo of selector.pseudos) {

From 52819cfc00ee0f7c425e22e90049d6f07ea2e9aa Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 01:03:15 +0100
Subject: [PATCH 127/162] Translate mq expression ast only when it is of
 MediaQueryList type.

---
 lib/css-tools.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index f34dd37cb..5163e9ed9 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -47,8 +47,11 @@ function filterByMqs(selectors, useMqs) {
     }
 
     var mqName = selector.atrule.name;
-    var mqExpr = csstree.translate(selector.atrule.expression);
-    var mqStr  = [mqName, mqExpr].join(' ');
+    var mqStr  = mqName;
+    if(selector.atrule.expression.type === 'MediaQueryList') {
+      var mqExpr = csstree.translate(selector.atrule.expression),
+          mqStr  = [mqName, mqExpr].join(' ');
+    }
 
     return useMqs.indexOf(mqStr) > -1;
   });

From 11ab2c5c3ea45cbc78294e6a99954d8aaa49dbd3 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 01:04:09 +0100
Subject: [PATCH 128/162] Fix jshint error.

---
 lib/css-tools.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 5163e9ed9..8f674511b 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -49,7 +49,7 @@ function filterByMqs(selectors, useMqs) {
     var mqName = selector.atrule.name;
     var mqStr  = mqName;
     if(selector.atrule.expression.type === 'MediaQueryList') {
-      var mqExpr = csstree.translate(selector.atrule.expression),
+      var mqExpr = csstree.translate(selector.atrule.expression);
           mqStr  = [mqName, mqExpr].join(' ');
     }
 

From 16cc3aa47284afd7bb8816d824a224cc7216c371 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 01:12:20 +0100
Subject: [PATCH 129/162] Disable unneeded parse options.

---
 lib/svgo/css-style-declaration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index ca558f83f..ddfa9f0a7 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -19,7 +19,7 @@ CSSStyleDeclaration.prototype.update = function() {
     return;
   }
   var inlineCssStr = this.parentNode.attr('style').value;
-  var cssoDeclarations = csstree.parse(inlineCssStr, {context: 'declarationList'});
+  var cssoDeclarations = csstree.parse(inlineCssStr, {context: 'declarationList', parseValue: false});
   cssoDeclarations.children.each(function(cssoDeclaration) {
     var styleDeclaration = csstools.cssoToStyleDeclaration(cssoDeclaration);
     self.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);

From c12bc17f5897eb9b922e23a861cd16678c0c0907 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sun, 19 Mar 2017 20:55:42 +0100
Subject: [PATCH 130/162] Add extra getProperties method.

---
 lib/svgo/css-style-declaration.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index ddfa9f0a7..e6318f1c2 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -71,5 +71,10 @@ CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priori
   return this.properties.get(propertyName);
 };
 
+// Extra function for retrieving all style properties
+CSSStyleDeclaration.prototype.getProperties = function() {
+  return this.properties;
+};
+
 
 module.exports = CSSStyleDeclaration;

From 8af462b4aff849d00fa34acfb3b40e6377255265 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 03:43:13 +0100
Subject: [PATCH 131/162] Use getters/setters for integration.

---
 lib/svgo/css-style-declaration.js | 105 +++++++++++++++++++++++++++---
 lib/svgo/jsAPI.js                 |  44 +------------
 lib/svgo/svg2js.js                |   8 +++
 3 files changed, 108 insertions(+), 49 deletions(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index e6318f1c2..ad91255a0 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -7,26 +7,108 @@ var CSSStyleDeclaration = function(node) {
   this.parentNode = node;
 
   this.properties = new Map();
-  this.length     = 0;
+  this.hasSynced  = false;
 
-  this.update(); // initialize with styles from style attribute
+  this.styleAttr     = null;
+  this.styleValue    = null;
+  this.hasParseError = false;
 };
 
+CSSStyleDeclaration.prototype.hasStyle = function() {
+  this.addStyleHandler();
+};
 
-CSSStyleDeclaration.prototype.update = function() {
-  var self = this;
-  if(!this.parentNode.hasAttr('style')) {
+
+
+
+// attr.style
+CSSStyleDeclaration.prototype.addStyleHandler = function() {
+  if(Object.getOwnPropertyDescriptor(this.parentNode.attrs, 'style')) {
+    return;
+  }
+
+  Object.defineProperty(this.parentNode.attrs, 'style', {
+    get:          this.getStyleAttr.bind(this),
+    set:          this.setStyleAttr.bind(this),
+    enumerable:   true,
+    configurable: true
+  });
+
+  this.styleAttr = {
+      'name':  'style'
+  };
+  this.addValueHandler();
+};
+
+
+// attr.style.value
+CSSStyleDeclaration.prototype.addValueHandler = function() {
+  if(Object.getOwnPropertyDescriptor(this.styleAttr, 'value')) {
+    return;
+  }
+
+  Object.defineProperty(this.styleAttr, 'value', {
+    get:          this.getStyleValue.bind(this),
+    set:          this.setStyleValue.bind(this),
+    enumerable:   true,
+    configurable: true
+  });
+};
+CSSStyleDeclaration.prototype.getStyleAttr = function() {
+  return this.styleAttr;
+};
+
+CSSStyleDeclaration.prototype.setStyleAttr = function(newStyleAttr) {
+  console.log(newStyleAttr);
+  this.setStyleValue(this.styleAttr.value); // must before applying value handler!
+
+  this.styleAttr = newStyleAttr;
+  this.addValueHandler();
+  this.hasSynced = false;
+};
+
+CSSStyleDeclaration.prototype.getStyleValue = function() {
+  this.loadCssText();
+  if(this.hasParseError) {
+    // in case of a parse error, pass through original styles
+    return this.styleValue;
+  }
+  return this.getCssText();
+};
+
+CSSStyleDeclaration.prototype.setStyleValue = function(val) {
+  this.properties.clear(); // reset all existing properties
+  this.styleValue = val;
+  this.hasSynced  = false;
+};
+
+
+CSSStyleDeclaration.prototype.loadCssText = function() {
+  if(this.hasSynced) {
     return;
   }
-  var inlineCssStr = this.parentNode.attr('style').value;
-  var cssoDeclarations = csstree.parse(inlineCssStr, {context: 'declarationList', parseValue: false});
+  this.hasSynced = true; // must be set at beginning!
+
+  if(!this.styleValue || this.styleValue.length == 0) {
+    return;
+  }
+  var inlineCssStr = this.styleValue;
+
+  var cssoDeclarations = {};
+  try {
+    cssoDeclarations = csstree.parse(inlineCssStr, {context: 'declarationList', parseValue: false});
+  } catch(parseError) {
+    this.hasParseError = true;
+    return;
+  }
+
+  var self = this;
   cssoDeclarations.children.each(function(cssoDeclaration) {
     var styleDeclaration = csstools.cssoToStyleDeclaration(cssoDeclaration);
     self.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
   });
 };
 
-
 CSSStyleDeclaration.prototype.getCssText = function() {
   var cssText = [];
   this.properties.forEach(function(property, propertyName) {
@@ -36,6 +118,7 @@ CSSStyleDeclaration.prototype.getCssText = function() {
   return cssText.join(';');
 };
 
+
 CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
   var property = this.properties.get(propertyName);
   return property ? property.priority : '';
@@ -56,9 +139,14 @@ CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
 };
 
 CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
+  if(this.hasSynced) {
+    console.log('(Internal)' + propertyName);
+  }
   if(!propertyName) {
     return false;
   }
+  this.hasStyle();
+  this.loadCssText();
 
   var property = { // always overwrites
     value:    value,
@@ -71,6 +159,7 @@ CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priori
   return this.properties.get(propertyName);
 };
 
+
 // Extra function for retrieving all style properties
 CSSStyleDeclaration.prototype.getProperties = function() {
   return this.properties;
diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 056894427..a148cc494 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -18,8 +18,6 @@ var JSAPI = module.exports = function(data, parentNode) {
             value: parentNode
         });
     }
-
-    this.style = new CSSStyleDeclaration(this);
 };
 
 /**
@@ -132,10 +130,6 @@ JSAPI.prototype.renameElem = function(name) {
  */
  JSAPI.prototype.hasAttr = function(name, val) {
 
-    if(name === 'style' && this.style && this.style.length > 0) {
-      return true;
-    }
-
     if (!this.attrs || !Object.keys(this.attrs).length) return false;
 
     if (!arguments.length) return !!this.attrs;
@@ -156,10 +150,6 @@ JSAPI.prototype.renameElem = function(name) {
  */
  JSAPI.prototype.hasAttrLocal = function(localName, val) {
 
-    if(localName === 'style' && this.style && this.style.length > 0) {
-        return true;
-    }
-
     if (!this.attrs || !Object.keys(this.attrs).length) return false;
 
     if (!arguments.length) return !!this.attrs;
@@ -205,17 +195,6 @@ JSAPI.prototype.renameElem = function(name) {
 
     if (!this.hasAttr() || !arguments.length) return undefined;
 
-    if(name === 'style' && this.style && this.style.length > 0) {
-      if(this.attrs.style) { // existing style attribute
-        this.attrs.style.value = this.style.getCssText();
-        return this.attrs.style;
-      }
-      return { // "virtual" style attribute
-        name: 'style',
-        value: this.style.getCssText()
-      };
-    }
-
     if (val !== undefined) return this.hasAttr(name, val) ? this.attrs[name] : undefined;
 
     return this.attrs[name];
@@ -237,9 +216,6 @@ JSAPI.prototype.renameElem = function(name) {
     if (val != null) {
         return elem ? elem.hasAttr(name, val) : false;
     } else if (elem && elem.hasAttr(name)) {
-        if(name === 'style' && this.style && this.style.length > 0) {
-            return this.attr('style');
-        }
         return elem.attrs[name].value;
     }
 
@@ -262,10 +238,6 @@ JSAPI.prototype.renameElem = function(name) {
 
     if (!recursive && val && this.attrs[name].value !== val) return false;
 
-    if(name === 'style' && this.style && this.style.length > 0) {
-      delete this.style;
-    }
-
     delete this.attrs[name];
 
     if (!Object.keys(this.attrs).length) delete this.attrs;
@@ -291,8 +263,9 @@ JSAPI.prototype.renameElem = function(name) {
     this.attrs = this.attrs || {};
     this.attrs[attr.name] = attr;
 
-    if(attr.name === 'style' && this.style && this.style.length > 0) {
-      this.style.update();
+    this.style = new CSSStyleDeclaration(this);
+    if(attr.name === 'style') {
+        this.style.hasStyle();
     }
 
     return this.attrs[attr.name];
@@ -311,16 +284,9 @@ JSAPI.prototype.renameElem = function(name) {
     if (!this.hasAttr()) return false;
 
     for (var name in this.attrs) {
-      if(name === 'style') {
-        continue; // handled below
-      }
         callback.call(context, this.attrs[name]);
     }
 
-    if(this.style && this.style.length > 0) {
-      callback.call(context, this.attr('style'));
-    }
-
     return true;
 
 };
@@ -336,10 +302,6 @@ JSAPI.prototype.renameElem = function(name) {
 
     if (!this.hasAttr()) return false;
 
-    if(this.style && this.style.length > 0) {
-      if (callback.call(context, this.attr('style'))) return true;
-    }
-
     for (var name in this.attrs) {
         if (callback.call(context, this.attrs[name])) return true;
     }
diff --git a/lib/svgo/svg2js.js b/lib/svgo/svg2js.js
index 2c36900c3..e4cea9b75 100644
--- a/lib/svgo/svg2js.js
+++ b/lib/svgo/svg2js.js
@@ -2,6 +2,7 @@
 
 var SAX = require('sax'),
     JSAPI = require('./jsAPI.js'),
+    CSSStyleDeclaration = require('./css-style-declaration'),
     entityDeclaration = /<!ENTITY\s+(\S+)\s+(?:'([^\']+)'|"([^\"]+)")\s*>/g;
 
 var config = {
@@ -91,7 +92,14 @@ module.exports = function(data, callback) {
         if (Object.keys(data.attributes).length) {
             elem.attrs = {};
 
+            elem.style = new CSSStyleDeclaration(elem);
+
             for (var name in data.attributes) {
+
+              if(name === 'style') {
+                  elem.style.hasStyle();
+              }
+
                 elem.attrs[name] = {
                     name: name,
                     value: data.attributes[name].value,

From 25fd3acfb242d6616073724e951486e5c3fb0e19 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 03:43:44 +0100
Subject: [PATCH 132/162] Adjust test to slightly different styles output
 format.

---
 test/plugins/inlineStyles.09.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
index e68247449..13a3a9668 100644
--- a/test/plugins/inlineStyles.09.svg
+++ b/test/plugins/inlineStyles.09.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:yellow!important"/>
+    <rect width="100" height="100" class="blue red" style="fill:yellow !important"/>
 </svg>
\ No newline at end of file

From 907bef203a6772c273d9462ee01ef01877c8b2da Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 03:44:29 +0100
Subject: [PATCH 133/162] Clean up debug code.

---
 lib/svgo/css-style-declaration.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index ad91255a0..7a4214757 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -59,7 +59,6 @@ CSSStyleDeclaration.prototype.getStyleAttr = function() {
 };
 
 CSSStyleDeclaration.prototype.setStyleAttr = function(newStyleAttr) {
-  console.log(newStyleAttr);
   this.setStyleValue(this.styleAttr.value); // must before applying value handler!
 
   this.styleAttr = newStyleAttr;
@@ -139,9 +138,6 @@ CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
 };
 
 CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
-  if(this.hasSynced) {
-    console.log('(Internal)' + propertyName);
-  }
   if(!propertyName) {
     return false;
   }

From 3d2450c17e3b1f806973fbb44499070866b2266b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 03:46:34 +0100
Subject: [PATCH 134/162] Use proposed code for pseudo selector children array.

---
 lib/css-tools.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 8f674511b..5b6285432 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -59,13 +59,11 @@ function filterByMqs(selectors, useMqs) {
 
 function filterByPseudos(selectors, usePseudos) {
   return selectors.filter(function(selector) {
-    var pseudoNodes = [];
-    for(var pseudo of selector.pseudos) {
-      pseudoNodes.push(pseudo.item.data);
-    }
     var pseudoSelectorsStr = csstree.translate({
       type: 'Selector',
-      children: new List().fromArray(pseudoNodes)
+      children: new List().fromArray(selector.pseudos.map(function(pseudo) {
+        return pseudo.item.data;
+      }))
     });
     return usePseudos.indexOf(pseudoSelectorsStr) > -1;
   });

From 4f47d7dc4c72da5e5fa72111468d5b357b7dfd7e Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 03:59:19 +0100
Subject: [PATCH 135/162] Improve cache validations.

---
 lib/svgo/css-style-declaration.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 7a4214757..1871b695d 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -119,30 +119,34 @@ CSSStyleDeclaration.prototype.getCssText = function() {
 
 
 CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
+  this.loadCssText();
   var property = this.properties.get(propertyName);
   return property ? property.priority : '';
 };
 
 CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
+  this.loadCssText();
   var property = this.properties.get(propertyName);
   return property ? property.value : null;
 };
 
 CSSStyleDeclaration.prototype.item = function(index) {
+  this.loadCssText();
   return Array.from(this.properties.keys())[index];
 };
 
 CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
+  this.hasStyle();
   this.properties.delete(propertyName);
   this.length = this.properties.size;
 };
 
+
 CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
   if(!propertyName) {
     return false;
   }
   this.hasStyle();
-  this.loadCssText();
 
   var property = { // always overwrites
     value:    value,

From b92236d66ed3cba7848337bca9a3b01155db52a4 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 04:03:07 +0100
Subject: [PATCH 136/162] Remove unnecessary map get(...).

---
 lib/svgo/css-style-declaration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 1871b695d..13f35c729 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -156,7 +156,7 @@ CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priori
   this.properties.set(propertyName, property);
   this.length = this.properties.size;
 
-  return this.properties.get(propertyName);
+  return property;
 };
 
 

From 2d91c97983136f7402c2e1ed910304bc675bcabe Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 04:06:20 +0100
Subject: [PATCH 137/162] Improve getCssText().

---
 lib/svgo/css-style-declaration.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 13f35c729..714453b08 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -67,11 +67,6 @@ CSSStyleDeclaration.prototype.setStyleAttr = function(newStyleAttr) {
 };
 
 CSSStyleDeclaration.prototype.getStyleValue = function() {
-  this.loadCssText();
-  if(this.hasParseError) {
-    // in case of a parse error, pass through original styles
-    return this.styleValue;
-  }
   return this.getCssText();
 };
 
@@ -109,6 +104,12 @@ CSSStyleDeclaration.prototype.loadCssText = function() {
 };
 
 CSSStyleDeclaration.prototype.getCssText = function() {
+  this.loadCssText();
+  if(this.hasParseError) {
+    // in case of a parse error, pass through original styles
+    return this.styleValue;
+  }
+
   var cssText = [];
   this.properties.forEach(function(property, propertyName) {
     var strImportant = property.priority === 'important' ? '!important' : '';

From 13a81ecbbbe4960414bcc7761676d6ae5628e70b Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 22:42:49 +0100
Subject: [PATCH 138/162] Fix style caching. Add name, value, property
 trimming.

---
 lib/svgo/css-style-declaration.js | 71 +++++++++++++------------------
 1 file changed, 29 insertions(+), 42 deletions(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 714453b08..3b9c90f70 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -11,21 +11,22 @@ var CSSStyleDeclaration = function(node) {
 
   this.styleAttr     = null;
   this.styleValue    = null;
+
   this.hasParseError = false;
 };
 
 CSSStyleDeclaration.prototype.hasStyle = function() {
+  this.styleAttr = { // empty style attr
+      'name':  'style',
+      'value': null
+  };
+
   this.addStyleHandler();
 };
 
 
-
-
 // attr.style
 CSSStyleDeclaration.prototype.addStyleHandler = function() {
-  if(Object.getOwnPropertyDescriptor(this.parentNode.attrs, 'style')) {
-    return;
-  }
 
   Object.defineProperty(this.parentNode.attrs, 'style', {
     get:          this.getStyleAttr.bind(this),
@@ -34,18 +35,11 @@ CSSStyleDeclaration.prototype.addStyleHandler = function() {
     configurable: true
   });
 
-  this.styleAttr = {
-      'name':  'style'
-  };
-  this.addValueHandler();
+  this.addStyleValueHandler();
 };
 
-
 // attr.style.value
-CSSStyleDeclaration.prototype.addValueHandler = function() {
-  if(Object.getOwnPropertyDescriptor(this.styleAttr, 'value')) {
-    return;
-  }
+CSSStyleDeclaration.prototype.addStyleValueHandler = function() {
 
   Object.defineProperty(this.styleAttr, 'value', {
     get:          this.getStyleValue.bind(this),
@@ -54,26 +48,27 @@ CSSStyleDeclaration.prototype.addValueHandler = function() {
     configurable: true
   });
 };
+
 CSSStyleDeclaration.prototype.getStyleAttr = function() {
   return this.styleAttr;
 };
 
 CSSStyleDeclaration.prototype.setStyleAttr = function(newStyleAttr) {
-  this.setStyleValue(this.styleAttr.value); // must before applying value handler!
+  this.setStyleValue(newStyleAttr.value); // must before applying value handler!
 
   this.styleAttr = newStyleAttr;
-  this.addValueHandler();
-  this.hasSynced = false;
+  this.addStyleValueHandler();
+  this.hasSynced = false; // raw css changed
 };
 
 CSSStyleDeclaration.prototype.getStyleValue = function() {
   return this.getCssText();
 };
 
-CSSStyleDeclaration.prototype.setStyleValue = function(val) {
+CSSStyleDeclaration.prototype.setStyleValue = function(newValue) {
   this.properties.clear(); // reset all existing properties
-  this.styleValue = val;
-  this.hasSynced  = false;
+  this.styleValue = newValue;
+  this.hasSynced  = false; // raw css changed
 };
 
 
@@ -81,7 +76,7 @@ CSSStyleDeclaration.prototype.loadCssText = function() {
   if(this.hasSynced) {
     return;
   }
-  this.hasSynced = true; // must be set at beginning!
+  this.hasSynced = true; // must be set here to prevent loop in setProperty(...)
 
   if(!this.styleValue || this.styleValue.length == 0) {
     return;
@@ -104,58 +99,49 @@ CSSStyleDeclaration.prototype.loadCssText = function() {
 };
 
 CSSStyleDeclaration.prototype.getCssText = function() {
-  this.loadCssText();
+  var properties = this.getProperties();
+
   if(this.hasParseError) {
     // in case of a parse error, pass through original styles
     return this.styleValue;
   }
 
   var cssText = [];
-  this.properties.forEach(function(property, propertyName) {
+  properties.forEach(function(property, propertyName) {
     var strImportant = property.priority === 'important' ? '!important' : '';
     cssText.push(propertyName.trim() + ':' + property.value.trim() + strImportant);
   });
   return cssText.join(';');
 };
 
-
 CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
-  this.loadCssText();
-  var property = this.properties.get(propertyName);
+  var property = this.getProperties().get(propertyName.trim());
   return property ? property.priority : '';
 };
 
 CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
-  this.loadCssText();
-  var property = this.properties.get(propertyName);
+  var property = this.getProperties().get(propertyName.trim());
   return property ? property.value : null;
 };
 
 CSSStyleDeclaration.prototype.item = function(index) {
-  this.loadCssText();
-  return Array.from(this.properties.keys())[index];
+  return Array.from(this.getProperties().keys())[index];
 };
 
+
 CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
   this.hasStyle();
-  this.properties.delete(propertyName);
-  this.length = this.properties.size;
+  this.getProperties().delete(propertyName.trim());
 };
 
-
 CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
-  if(!propertyName) {
-    return false;
-  }
   this.hasStyle();
 
-  var property = { // always overwrites
-    value:    value,
-    priority: priority
+  var property = {
+    value:       value.trim(),
+    priority: priority.trim()
   };
-
-  this.properties.set(propertyName, property);
-  this.length = this.properties.size;
+  this.getProperties().set(propertyName.trim(), property);
 
   return property;
 };
@@ -163,6 +149,7 @@ CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priori
 
 // Extra function for retrieving all style properties
 CSSStyleDeclaration.prototype.getProperties = function() {
+  this.loadCssText();
   return this.properties;
 };
 

From 4f409728e9eb99693eea7e2731975b854182ca75 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 22:43:08 +0100
Subject: [PATCH 139/162] Adjust tests to different style output.

---
 test/plugins/inlineStyles.09.svg       | 2 +-
 test/plugins/removeStyleElement.01.svg | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
index 13a3a9668..e68247449 100644
--- a/test/plugins/inlineStyles.09.svg
+++ b/test/plugins/inlineStyles.09.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:yellow !important"/>
+    <rect width="100" height="100" class="blue red" style="fill:yellow!important"/>
 </svg>
\ No newline at end of file
diff --git a/test/plugins/removeStyleElement.01.svg b/test/plugins/removeStyleElement.01.svg
index 2f3c52f88..c3d415091 100644
--- a/test/plugins/removeStyleElement.01.svg
+++ b/test/plugins/removeStyleElement.01.svg
@@ -11,6 +11,6 @@
 @@@
 
 <?xml version="1.0" encoding="utf-16"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100" xml:space="preserve">
     <circle class="st0" cx="50" cy="50" r="50"/>
 </svg>
\ No newline at end of file

From bb01e68c643b1c0215d83ec0c8c2fd146779becd Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 22:45:48 +0100
Subject: [PATCH 140/162] Use strict comparisons.

---
 lib/css-tools.js                  | 4 ++--
 lib/svgo/css-style-declaration.js | 2 +-
 plugins/inlineStyles.js           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 5b6285432..571fd6af5 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -26,8 +26,8 @@ function flattenToSelectors(cssAst) {
         };
 
         selectorNode.children.each(function(selectorChildNode, selectorChildItem, selectorChildList) {
-            if(selectorChildNode.type == 'PseudoClassSelector' || 
-               selectorChildNode.type == 'PseudoElementSelector') {
+            if(selectorChildNode.type === 'PseudoClassSelector' || 
+               selectorChildNode.type === 'PseudoElementSelector') {
                 selector.pseudos.push({ item: selectorChildItem, list: selectorChildList });
             }
         });
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 3b9c90f70..90eccd92d 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -78,7 +78,7 @@ CSSStyleDeclaration.prototype.loadCssText = function() {
   }
   this.hasSynced = true; // must be set here to prevent loop in setProperty(...)
 
-  if(!this.styleValue || this.styleValue.length == 0) {
+  if(!this.styleValue || this.styleValue.length === 0) {
     return;
   }
   var inlineCssStr = this.styleValue;
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 973adb68e..c0f03819b 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -95,7 +95,7 @@ exports.fn = function(document, opts) {
     try {
         selectedEls = document.querySelectorAll(selectorStr);
     } catch(e) {
-        if(e.constructor == SyntaxError) {
+        if(e.constructor === SyntaxError) {
             console.warn('Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped.');
             continue;
         }

From cd1712120cbda1451e43a01f1a881e06c05b1b13 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 23:06:10 +0100
Subject: [PATCH 141/162] Improve warnings.

---
 lib/svgo/css-style-declaration.js | 74 +++++++++++++++++++++++--------
 plugins/inlineStyles.js           |  2 +-
 2 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 90eccd92d..949760945 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -3,18 +3,20 @@
 var csstree  = require('css-tree'),
     csstools = require('../css-tools');
 
+
 var CSSStyleDeclaration = function(node) {
   this.parentNode = node;
 
   this.properties = new Map();
   this.hasSynced  = false;
 
-  this.styleAttr     = null;
-  this.styleValue    = null;
+  this.styleAttr  = null;
+  this.styleValue = null;
 
-  this.hasParseError = false;
+  this.parseError = false;
 };
 
+
 CSSStyleDeclaration.prototype.hasStyle = function() {
   this.styleAttr = { // empty style attr
       'name':  'style',
@@ -25,7 +27,10 @@ CSSStyleDeclaration.prototype.hasStyle = function() {
 };
 
 
+
+
 // attr.style
+
 CSSStyleDeclaration.prototype.addStyleHandler = function() {
 
   Object.defineProperty(this.parentNode.attrs, 'style', {
@@ -39,6 +44,7 @@ CSSStyleDeclaration.prototype.addStyleHandler = function() {
 };
 
 // attr.style.value
+
 CSSStyleDeclaration.prototype.addStyleValueHandler = function() {
 
   Object.defineProperty(this.styleAttr, 'value', {
@@ -72,7 +78,9 @@ CSSStyleDeclaration.prototype.setStyleValue = function(newValue) {
 };
 
 
-CSSStyleDeclaration.prototype.loadCssText = function() {
+
+
+CSSStyleDeclaration.prototype._loadCssText = function() {
   if(this.hasSynced) {
     return;
   }
@@ -87,9 +95,10 @@ CSSStyleDeclaration.prototype.loadCssText = function() {
   try {
     cssoDeclarations = csstree.parse(inlineCssStr, {context: 'declarationList', parseValue: false});
   } catch(parseError) {
-    this.hasParseError = true;
+    this.parseError = parseError;
     return;
   }
+  this.parseError = false;
 
   var self = this;
   cssoDeclarations.children.each(function(cssoDeclaration) {
@@ -98,10 +107,13 @@ CSSStyleDeclaration.prototype.loadCssText = function() {
   });
 };
 
+
+// only reads from properties
+
 CSSStyleDeclaration.prototype.getCssText = function() {
   var properties = this.getProperties();
 
-  if(this.hasParseError) {
+  if(this.parseError) {
     // in case of a parse error, pass through original styles
     return this.styleValue;
   }
@@ -114,44 +126,70 @@ CSSStyleDeclaration.prototype.getCssText = function() {
   return cssText.join(';');
 };
 
-CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
+CSSStyleDeclaration.prototype._handleParseError = function() {
+  if(this.parseError) {
+    console.warn("Warning: Parse error when parsing inline styles, style properties of this element cannot be used. The raw styles can still be get/set using .attr('style').value. Error details: " + this.parseError);
+  }
+};
+
+
+CSSStyleDeclaration.prototype._getProperty = function(propertyName) {
+  var properties = this.getProperties();
+  this._handleParseError();
+
   var property = this.getProperties().get(propertyName.trim());
+  return property;
+};
+
+CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
+  var property = this._getProperty(propertyName);
   return property ? property.priority : '';
 };
 
 CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
-  var property = this.getProperties().get(propertyName.trim());
+  var property = this._getProperty(propertyName);
   return property ? property.value : null;
 };
 
 CSSStyleDeclaration.prototype.item = function(index) {
-  return Array.from(this.getProperties().keys())[index];
+  var properties = this.getProperties();
+  this._handleParseError();
+
+  return Array.from(properties.keys())[index];
+};
+
+// Extra function for retrieving all style properties
+CSSStyleDeclaration.prototype.getProperties = function() {
+  this._loadCssText();
+  return this.properties;
 };
 
 
+// writes to properties
+
 CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
   this.hasStyle();
-  this.getProperties().delete(propertyName.trim());
+
+  var properties = this.getProperties();
+  this._handleParseError();
+
+  properties.delete(propertyName.trim());
 };
 
 CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
   this.hasStyle();
 
+  var properties = this.getProperties();
+  this._handleParseError();
+
   var property = {
     value:       value.trim(),
     priority: priority.trim()
   };
-  this.getProperties().set(propertyName.trim(), property);
+  properties.set(propertyName.trim(), property);
 
   return property;
 };
 
 
-// Extra function for retrieving all style properties
-CSSStyleDeclaration.prototype.getProperties = function() {
-  this.loadCssText();
-  return this.properties;
-};
-
-
 module.exports = CSSStyleDeclaration;
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index c0f03819b..2c0a6e558 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -96,7 +96,7 @@ exports.fn = function(document, opts) {
         selectedEls = document.querySelectorAll(selectorStr);
     } catch(e) {
         if(e.constructor === SyntaxError) {
-            console.warn('Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped.');
+            console.warn('Warning: Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped.');
             continue;
         }
         throw e;

From ecad2d7579a278c4d4ad757f2e6d7a68caa14e55 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 20 Mar 2017 23:11:08 +0100
Subject: [PATCH 142/162] Improve exception handling. Fix jshint error.

---
 lib/svgo/css-style-declaration.js |  4 ++--
 plugins/inlineStyles.js           | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 949760945..5bafc9775 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -128,7 +128,7 @@ CSSStyleDeclaration.prototype.getCssText = function() {
 
 CSSStyleDeclaration.prototype._handleParseError = function() {
   if(this.parseError) {
-    console.warn("Warning: Parse error when parsing inline styles, style properties of this element cannot be used. The raw styles can still be get/set using .attr('style').value. Error details: " + this.parseError);
+    console.warn('Warning: Parse error when parsing inline styles, style properties of this element cannot be used. The raw styles can still be get/set using .attr(\'style\').value. Error details: ' + this.parseError);
   }
 };
 
@@ -137,7 +137,7 @@ CSSStyleDeclaration.prototype._getProperty = function(propertyName) {
   var properties = this.getProperties();
   this._handleParseError();
 
-  var property = this.getProperties().get(propertyName.trim());
+  var property = properties.get(propertyName.trim());
   return property;
 };
 
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 2c0a6e558..e28736957 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -62,7 +62,14 @@ exports.fn = function(document, opts) {
     var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];
 
     // collect <style/>s and their css ast
-    var cssAst = csstree.parse(cssStr, {parseValue: false, parseCustomProperty: false});
+    var cssAst = {};
+    try {
+        cssAst = csstree.parse(cssStr, {parseValue: false, parseCustomProperty: false});
+    } catch(parseError) {
+        console.warn('Warning: Parse error of styles of <style/> element, skipped. Error details: ' + parseError);
+        continue;
+    }
+
     styles.push({
       styleEl: styleEl,
       cssAst:  cssAst
@@ -94,12 +101,12 @@ exports.fn = function(document, opts) {
 
     try {
         selectedEls = document.querySelectorAll(selectorStr);
-    } catch(e) {
-        if(e.constructor === SyntaxError) {
-            console.warn('Warning: Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped.');
+    } catch(selectError) {
+        if(selectError.constructor === SyntaxError) {
+            console.warn('Warning: Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped. Error details: ' + selectError);
             continue;
         }
-        throw e;
+        throw selectError;
     }
 
     if(selectedEls === null) {

From eb9de31c3aa62b8d709a504cae68f1443d3cc36f Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 21 Mar 2017 16:06:48 +0100
Subject: [PATCH 143/162] Remove now unneeded object.assign shim.

---
 lib/svgo/css-select-adapter.js | 1 -
 package.json                   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/lib/svgo/css-select-adapter.js b/lib/svgo/css-select-adapter.js
index 6f7c990dd..54604a775 100644
--- a/lib/svgo/css-select-adapter.js
+++ b/lib/svgo/css-select-adapter.js
@@ -1,7 +1,6 @@
 'use strict';
 
 var baseCssAdapter = require('css-select-base-adapter');
-require('object.assign').shim(); // for node v0.1x support
 
 /**
   * DOMUtils API for SVGO AST (used by css-select)
diff --git a/package.json b/package.json
index 93f45de70..c6ccd9c46 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,6 @@
     "csso": "^3.0.1",
     "js-yaml": "~3.7.0",
     "mkdirp": "~0.5.1",
-    "object.assign": "^4.0.4",
     "sax": "~1.2.1",
     "stable": "^0.1.5",
     "whet.extend": "~0.9.9"

From 0ae071e8b1fd145efd768f1280dcdd3b561ac125 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 22 Mar 2017 18:01:28 +0100
Subject: [PATCH 144/162] Update inlineStyles.js

Fix plugin documentation.
---
 plugins/inlineStyles.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index e28736957..c3dbaa741 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -28,13 +28,13 @@ var csstree  = require('css-tree'),
   *     clean up matched selectors,
   *     leave selectors that hadn't matched
   *
-  *   useMqs (default: ['screen'])
-  *     what mediaqueries to be used,
-  *     non-mediaquery styles are always used
+  *   useMqs (default: ['', 'screen'])
+  *     what media queries to be used
+  *     empty string element for styles outside media queries
   *
-  *   usePseudos (default: [])
-  *     what pseudo-classes/-elements to be used,
-  *     non-pseudo-class/-element styles are always used
+  *   usePseudos (default: [''])
+  *     what pseudo-classes/-elements to be used
+  *     empty string element for all non-pseudo-classes and/or -elements
   *
   * @param {Object} document document element
   * @param {Object} opts plugin params

From 33129732261f01cd150f7d22168ce74e1d3f543d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Wed, 22 Mar 2017 18:34:05 +0100
Subject: [PATCH 145/162] Clean up superfluous code from last merge.

---
 lib/svgo/jsAPI.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 049369ab8..df171d522 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -1,7 +1,6 @@
 'use strict';
 
-var EXTEND    = require('whet.extend'),
-    cssSelect = require('css-select'),
+var cssSelect = require('css-select'),
     CSSStyleDeclaration = require('./css-style-declaration');
 
 var svgoCssSelectAdapter = require('./css-select-adapter');

From 82c277eb6390c7d4d156825cb6cf41626b225c2a Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 23 Mar 2017 15:39:39 +0100
Subject: [PATCH 146/162] Fix arguments.

---
 lib/svgo/jsAPI.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index df171d522..35329f48a 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -342,6 +342,6 @@ JSAPI.prototype.renameElem = function(name) {
  */
  JSAPI.prototype.matches = function(selector) {
 
-   return cssSelect.is(selector, this, cssSelectOpts);
+   return cssSelect.is(this, selector, cssSelectOpts);
 
 };

From a3f17d994fa08063e92f3bed3f899ec145268773 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 23 Mar 2017 18:12:07 +0100
Subject: [PATCH 147/162] Add jsdocs. Add documentation to README about the new
 style related APIs. Let removeProperty return the value of removed property.

---
 docs/how-it-works/en.md           | 53 +++++++++++++++++++++++++++++++
 lib/svgo/css-style-declaration.js | 45 +++++++++++++++++++++++++-
 lib/svgo/jsAPI.js                 |  6 ++--
 3 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/docs/how-it-works/en.md b/docs/how-it-works/en.md
index b03759e24..8a53f6952 100644
--- a/docs/how-it-works/en.md
+++ b/docs/how-it-works/en.md
@@ -199,6 +199,59 @@ And of course, writing plugins would not have been so cool without some sugar AP
   * @param {Object} [context] callback context
   * @return {Boolean} false if there are no any attributes
 
+
+##### querySelectorAll(selectors)
+  * Evaluates a string of css selectors against the element and returns matched elements
+  * @param {String} selectors css selector(s) string
+  * @return {Array} null if no elements matched
+
+##### querySelector(selectors)
+  * Evaluates a string of css selectors against the element and returns only the first matched element
+  * @param {String} selectors css selector(s) string
+  * @return {Array} null if no element matched
+
+##### matches(selector)
+  * Tests if a selector matches a given element
+  * @param {String} selector css selector string
+  * @return {Boolean} true if element would be selected by selector string, false if it does not
+
+
+##### style.getCssText()
+  * Gets the textual representation of the declaration block (equivalent to .cssText attribute).
+  * @return {String} Textual representation of the declaration block (empty string for no properties)
+
+##### style.getPropertyPriority(propertyName)
+  * Returns the optional priority, "important".
+  * @param {String} propertyName representing the property name to be checked.
+  * @return {String} priority that represents the priority (e.g. "important") if one exists. If none exists, returns the empty string.
+
+##### style.getPropertyValue(propertyName)
+  * Returns the property value given a property name.
+  * @param {String} propertyName representing the property name to be checked.
+  * @return {String} value containing the value of the property. If not set, returns the empty string.
+
+##### style.item(index)
+  * Returns a property name.
+  * @param {Number} index of the node to be fetched. The index is zero-based.
+  * @return {String} propertyName that is the name of the CSS property at the specified index.
+
+##### style.getProperties()
+  * Returns all properties of the node.
+  * @return {Map} properties that is a Map with propertyName as key and property (propertyValue + propertyPriority) as value.
+
+##### style.removeProperty(propertyName)
+  * Removes a property from the CSS declaration block.
+  * @param {String} propertyName representing the property name to be removed.
+  * @return {String} oldValue equal to the value of the CSS property before it was removed.
+
+##### style.setProperty(propertyName, value, priority)
+  * Modifies an existing CSS property or creates a new CSS property in the declaration block.
+  * @param {String} propertyName representing the CSS property name to be modified.
+  * @param {String} [value] containing the new property value. If not specified, treated as the empty string. value must not contain "!important" -- that should be set using the priority parameter.
+  * @param {String} [priority] allowing the "important" CSS priority to be set. If not specified, treated as the empty string.
+  * @return {undefined}
+
+
 #### 3.3 tests
 
 There is nothing easier than testing your plugin:
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 5bafc9775..ae0fa199a 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -110,6 +110,11 @@ CSSStyleDeclaration.prototype._loadCssText = function() {
 
 // only reads from properties
 
+/**
+ * Gets the textual representation of the declaration block (equivalent to .cssText attribute).
+ *
+ * @return {String} Textual representation of the declaration block (empty string for no properties)
+ */
 CSSStyleDeclaration.prototype.getCssText = function() {
   var properties = this.getProperties();
 
@@ -141,16 +146,34 @@ CSSStyleDeclaration.prototype._getProperty = function(propertyName) {
   return property;
 };
 
+/**
+ * Returns the optional priority, "important".
+ *
+ * @param {String} propertyName representing the property name to be checked.
+ * @return {String} priority that represents the priority (e.g. "important") if one exists. If none exists, returns the empty string.
+ */
 CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
   var property = this._getProperty(propertyName);
   return property ? property.priority : '';
 };
 
+/**
+ * Returns the property value given a property name.
+ *
+ * @param {String} propertyName representing the property name to be checked.
+ * @return {String} value containing the value of the property. If not set, returns the empty string.
+ */
 CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
   var property = this._getProperty(propertyName);
   return property ? property.value : null;
 };
 
+/**
+ * Returns a property name.
+ *
+ * @param {Number} index of the node to be fetched. The index is zero-based.
+ * @return {String} propertyName that is the name of the CSS property at the specified index.
+ */
 CSSStyleDeclaration.prototype.item = function(index) {
   var properties = this.getProperties();
   this._handleParseError();
@@ -158,7 +181,11 @@ CSSStyleDeclaration.prototype.item = function(index) {
   return Array.from(properties.keys())[index];
 };
 
-// Extra function for retrieving all style properties
+/**
+ * Returns all properties of the node.
+ *
+ * @return {Map} properties that is a Map with propertyName as key and property (propertyValue + propertyPriority) as value.
+ */
 CSSStyleDeclaration.prototype.getProperties = function() {
   this._loadCssText();
   return this.properties;
@@ -167,15 +194,31 @@ CSSStyleDeclaration.prototype.getProperties = function() {
 
 // writes to properties
 
+/**
+ * Removes a property from the CSS declaration block.
+ *
+ * @param {String} propertyName representing the property name to be removed.
+ * @return {String} oldValue equal to the value of the CSS property before it was removed.
+ */
 CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
   this.hasStyle();
 
   var properties = this.getProperties();
   this._handleParseError();
 
+  var oldValue = this.getPropertyValue(propertyName);
   properties.delete(propertyName.trim());
+  return oldValue;
 };
 
+/**
+ * Modifies an existing CSS property or creates a new CSS property in the declaration block.
+ *
+ * @param {String} propertyName representing the CSS property name to be modified.
+ * @param {String} [value] containing the new property value. If not specified, treated as the empty string. value must not contain "!important" -- that should be set using the priority parameter.
+ * @param {String} [priority] allowing the "important" CSS priority to be set. If not specified, treated as the empty string.
+ * @return {undefined}
+ */
 CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
   this.hasStyle();
 
diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 35329f48a..378891996 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -309,7 +309,7 @@ JSAPI.prototype.renameElem = function(name) {
 };
 
 /**
- * Evaluates a string of css selectors against the element and returns matched elements
+ * Evaluates a string of css selectors against the element and returns matched elements.
  *
  * @param {String} selectors css selector(s) string
  * @return {Array} null if no elements matched
@@ -323,7 +323,7 @@ JSAPI.prototype.renameElem = function(name) {
 };
 
 /**
- * Evaluates a string of css selectors against the element and returns only the first matched element
+ * Evaluates a string of css selectors against the element and returns only the first matched element.
  *
  * @param {String} selectors css selector(s) string
  * @return {Array} null if no element matched
@@ -335,7 +335,7 @@ JSAPI.prototype.renameElem = function(name) {
 };
 
 /**
- * Tests if a selector matches a given element
+ * Tests if a selector matches a given element.
  *
  * @param {String} selector css selector string
  * @return {Boolean} true if element would be selected by selector string, false if it does not

From e6dbda6ed5f2bba727102217e16152a2e7a9d362 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 23 Mar 2017 18:52:10 +0100
Subject: [PATCH 148/162] Add + improve jdoc. Add further documentation to
 README. Improve argument/variable name.

---
 docs/how-it-works/en.md           | 71 +++++++++++++++++++++++++------
 lib/css-tools.js                  | 68 +++++++++++++++++++++++++----
 lib/svgo/css-style-declaration.js | 14 +++---
 lib/svgo/jsAPI.js                 | 12 +++---
 4 files changed, 131 insertions(+), 34 deletions(-)

diff --git a/docs/how-it-works/en.md b/docs/how-it-works/en.md
index 8a53f6952..87313ee00 100644
--- a/docs/how-it-works/en.md
+++ b/docs/how-it-works/en.md
@@ -201,57 +201,102 @@ And of course, writing plugins would not have been so cool without some sugar AP
 
 
 ##### querySelectorAll(selectors)
-  * Evaluates a string of css selectors against the element and returns matched elements
-  * @param {String} selectors css selector(s) string
+  * Evaluate a string of CSS selectors against the element and returns matched elements
+  * @param {String} selectors CSS selector(s) string
   * @return {Array} null if no elements matched
 
 ##### querySelector(selectors)
-  * Evaluates a string of css selectors against the element and returns only the first matched element
-  * @param {String} selectors css selector(s) string
+  * Evaluate a string of CSS selectors against the element and returns only the first matched element
+  * @param {String} selectors CSS selector(s) string
   * @return {Array} null if no element matched
 
 ##### matches(selector)
-  * Tests if a selector matches a given element
-  * @param {String} selector css selector string
+  * Test if a selector matches a given element
+  * @param {String} selector CSS selector string
   * @return {Boolean} true if element would be selected by selector string, false if it does not
 
 
 ##### style.getCssText()
-  * Gets the textual representation of the declaration block (equivalent to .cssText attribute).
+  * Get the textual representation of the declaration block (equivalent to .cssText attribute).
   * @return {String} Textual representation of the declaration block (empty string for no properties)
 
 ##### style.getPropertyPriority(propertyName)
-  * Returns the optional priority, "important".
+  * Return the optional priority, "important".
   * @param {String} propertyName representing the property name to be checked.
   * @return {String} priority that represents the priority (e.g. "important") if one exists. If none exists, returns the empty string.
 
 ##### style.getPropertyValue(propertyName)
-  * Returns the property value given a property name.
+  * Return the property value given a property name.
   * @param {String} propertyName representing the property name to be checked.
   * @return {String} value containing the value of the property. If not set, returns the empty string.
 
 ##### style.item(index)
-  * Returns a property name.
+  * Return a property name.
   * @param {Number} index of the node to be fetched. The index is zero-based.
   * @return {String} propertyName that is the name of the CSS property at the specified index.
 
 ##### style.getProperties()
-  * Returns all properties of the node.
+  * Return all properties of the node.
   * @return {Map} properties that is a Map with propertyName as key and property (propertyValue + propertyPriority) as value.
 
 ##### style.removeProperty(propertyName)
-  * Removes a property from the CSS declaration block.
+  * Remove a property from the CSS declaration block.
   * @param {String} propertyName representing the property name to be removed.
   * @return {String} oldValue equal to the value of the CSS property before it was removed.
 
 ##### style.setProperty(propertyName, value, priority)
-  * Modifies an existing CSS property or creates a new CSS property in the declaration block.
+  * Modify an existing CSS property or creates a new CSS property in the declaration block.
   * @param {String} propertyName representing the CSS property name to be modified.
   * @param {String} [value] containing the new property value. If not specified, treated as the empty string. value must not contain "!important" -- that should be set using the priority parameter.
   * @param {String} [priority] allowing the "important" CSS priority to be set. If not specified, treated as the empty string.
   * @return {undefined}
 
 
+##### css-tools.flattenToSelectors(cssAst)
+  * Flatten a CSS AST to a selectors list.
+  * @param {Object} CSS AST to flatten
+  * @return {Array} selectors
+
+##### css-tools.filterByMqs(selectors, useMqs)
+  * Filter selectors by Media Query.
+  * @param {Array} Selectors to filter
+  * @param {Array} Strings of media queries that should pass (<name> <expression>)
+  * @return {Array} Filtered selectors that match the passed media queries
+
+##### css-tools.filterByPseudos(selectors, useMqs)
+  * Filter selectors by the pseudo-elements and/or -classes they contain.
+  * @param {Array} Selectors to filter
+  * @param {Array} Strings of single or sequence of pseudo-elements and/or -classes that should pass
+  * @return {Array} Filtered selectors that match the passed pseudo-elements and/or -classes
+
+##### css-tools.cleanPseudos(selectors)
+  * Remove pseudo-elements and/or -classes from the selectors for proper matching.
+  * @param {Array} Selectors to clean
+  * @return {Array} Selectors without pseudo-elements and/or -classes
+
+##### css-tools.compareSpecificity(aSpecificity, bSpecificity)
+  * Compare two selector specificities.
+  * @param {Array} Specificity of selector A
+  * @param {Array} Specificity of selector B
+  * @return {Number} Score of selector specificity A compared to selector specificity B
+
+##### css-tools.compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode)
+  * Compare two simple selectors.
+  * @param {Object} Simple selector A
+  * @param {Object} Simple selector B
+  * @return {Number} Score of selector A compared to selector B
+
+##### css-tools.sortSelectors(selectors)
+  * Sort selectors stably by their specificity.
+  * @param {Array} Selectors to be sorted
+  * @return {Array} Stable sorted selectors
+
+##### css-tools.cssoToStyleDeclaration(cssoDeclaration)
+  * Convert a CSSO AST style declaration to CSSStyleDeclaration property.
+  * @param {Object} CSSO style declaration
+  * @return {Object} CSSStyleDeclaration property
+
+
 #### 3.3 tests
 
 There is nothing easier than testing your plugin:
diff --git a/lib/css-tools.js b/lib/css-tools.js
index 571fd6af5..ba18dbbd4 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -6,6 +6,12 @@ var csstree     = require('css-tree'),
     List        = require('css-tree/lib/utils/list');
 
 
+/**
+ * Flatten a CSS AST to a selectors list.
+ *
+ * @param {Object} cssAst CSSO AST to flatten
+ * @return {Array} selectors
+ */
 function flattenToSelectors(cssAst) {
   var selectors   = [];
 
@@ -39,7 +45,13 @@ function flattenToSelectors(cssAst) {
   return selectors;
 }
 
-
+/**
+ * Filter selectors by Media Query.
+ *
+ * @param {Array} selectors to filter
+ * @param {Array} useMqs Array with strings of media queries that should pass (<name> <expression>)
+ * @return {Array} Filtered selectors that match the passed media queries
+ */
 function filterByMqs(selectors, useMqs) {
   return selectors.filter(function(selector) {
     if(selector.atrule === null) {
@@ -57,6 +69,13 @@ function filterByMqs(selectors, useMqs) {
   });
 }
 
+/**
+ * Filter selectors by the pseudo-elements and/or -classes they contain.
+ *
+ * @param {Array} selectors to filter
+ * @param {Array} usePseudos Array with strings of single or sequence of pseudo-elements and/or -classes that should pass
+ * @return {Array} Filtered selectors that match the passed pseudo-elements and/or -classes
+ */
 function filterByPseudos(selectors, usePseudos) {
   return selectors.filter(function(selector) {
     var pseudoSelectorsStr = csstree.translate({
@@ -69,6 +88,12 @@ function filterByPseudos(selectors, usePseudos) {
   });
 }
 
+/**
+ * Remove pseudo-elements and/or -classes from the selectors for proper matching.
+ *
+ * @param {Array} selectors to clean
+ * @return {Array} Selectors without pseudo-elements and/or -classes
+ */
 function cleanPseudos(selectors) {
   selectors.forEach(function(selector) {
     selector.pseudos.forEach(function(pseudo) {
@@ -78,7 +103,14 @@ function cleanPseudos(selectors) {
 }
 
 
-// extracted from https://github.com/keeganstreet/specificity/blob/master/specificity.js#L211
+/**
+ * Compares two selector specificities.
+ * extracted from https://github.com/keeganstreet/specificity/blob/master/specificity.js#L211
+ *
+ * @param {Array} aSpecificity Specificity of selector A
+ * @param {Array} bSpecificity Specificity of selector B
+ * @return {Number} Score of selector specificity A compared to selector specificity B
+ */
 function compareSpecificity(aSpecificity, bSpecificity) {
   for (var i = 0; i < 4; i += 1) {
     if (aSpecificity[i] < bSpecificity[i]) {
@@ -91,6 +123,14 @@ function compareSpecificity(aSpecificity, bSpecificity) {
   return 0;
 }
 
+
+/**
+ * Compare two simple selectors.
+ *
+ * @param {Object} aSimpleSelectorNode Simple selector A
+ * @param {Object} bSimpleSelectorNode Simple selector B
+ * @return {Number} Score of selector A compared to selector B
+ */
 function compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode) {
   var aSpecificity = specificity(aSimpleSelectorNode),
       bSpecificity = specificity(bSimpleSelectorNode);
@@ -101,16 +141,28 @@ function _bySelectorSpecificity(selectorA, selectorB) {
   return compareSimpleSelectorNode(selectorA.item.data, selectorB.item.data);
 }
 
+
+/**
+ * Sort selectors stably by their specificity.
+ *
+ * @param {Array} selectors to be sorted
+ * @return {Array} Stable sorted selectors
+ */
 function sortSelectors(selectors) {
   return stable(selectors, _bySelectorSpecificity);
 }
 
 
-// csso declaration to style declaration
-function cssoToStyleDeclaration(declaration) {
-  var propertyName     = declaration.property,
-      propertyValue    = csstree.translate(declaration.value),
-      propertyPriority = (declaration.important ? 'important' : '');
+/**
+ * Convert a CSSO AST style declaration to CSSStyleDeclaration property.
+ *
+ * @param {Object} cssoDeclaration CSSO style declaration
+ * @return {Object} CSSStyleDeclaration property
+ */
+function cssoToStyleDeclaration(cssoDeclaration) {
+  var propertyName     = cssoDeclaration.property,
+      propertyValue    = csstree.translate(cssoDeclaration.value),
+      propertyPriority = (cssoDeclaration.important ? 'important' : '');
   return { name: propertyName, value: propertyValue, priority: propertyPriority };
 }
 
@@ -126,4 +178,4 @@ module.exports.compareSimpleSelectorNode = compareSimpleSelectorNode;
 
 module.exports.sortSelectors             = sortSelectors;
 
-module.exports.cssoToStyleDeclaration               = cssoToStyleDeclaration;
+module.exports.cssoToStyleDeclaration    = cssoToStyleDeclaration;
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index ae0fa199a..6f1f7d912 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -111,7 +111,7 @@ CSSStyleDeclaration.prototype._loadCssText = function() {
 // only reads from properties
 
 /**
- * Gets the textual representation of the declaration block (equivalent to .cssText attribute).
+ * Get the textual representation of the declaration block (equivalent to .cssText attribute).
  *
  * @return {String} Textual representation of the declaration block (empty string for no properties)
  */
@@ -147,7 +147,7 @@ CSSStyleDeclaration.prototype._getProperty = function(propertyName) {
 };
 
 /**
- * Returns the optional priority, "important".
+ * Return the optional priority, "important".
  *
  * @param {String} propertyName representing the property name to be checked.
  * @return {String} priority that represents the priority (e.g. "important") if one exists. If none exists, returns the empty string.
@@ -158,7 +158,7 @@ CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
 };
 
 /**
- * Returns the property value given a property name.
+ * Return the property value given a property name.
  *
  * @param {String} propertyName representing the property name to be checked.
  * @return {String} value containing the value of the property. If not set, returns the empty string.
@@ -169,7 +169,7 @@ CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
 };
 
 /**
- * Returns a property name.
+ * Return a property name.
  *
  * @param {Number} index of the node to be fetched. The index is zero-based.
  * @return {String} propertyName that is the name of the CSS property at the specified index.
@@ -182,7 +182,7 @@ CSSStyleDeclaration.prototype.item = function(index) {
 };
 
 /**
- * Returns all properties of the node.
+ * Return all properties of the node.
  *
  * @return {Map} properties that is a Map with propertyName as key and property (propertyValue + propertyPriority) as value.
  */
@@ -195,7 +195,7 @@ CSSStyleDeclaration.prototype.getProperties = function() {
 // writes to properties
 
 /**
- * Removes a property from the CSS declaration block.
+ * Remove a property from the CSS declaration block.
  *
  * @param {String} propertyName representing the property name to be removed.
  * @return {String} oldValue equal to the value of the CSS property before it was removed.
@@ -212,7 +212,7 @@ CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
 };
 
 /**
- * Modifies an existing CSS property or creates a new CSS property in the declaration block.
+ * Modify an existing CSS property or creates a new CSS property in the declaration block.
  *
  * @param {String} propertyName representing the CSS property name to be modified.
  * @param {String} [value] containing the new property value. If not specified, treated as the empty string. value must not contain "!important" -- that should be set using the priority parameter.
diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 378891996..6d11c2aca 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -309,9 +309,9 @@ JSAPI.prototype.renameElem = function(name) {
 };
 
 /**
- * Evaluates a string of css selectors against the element and returns matched elements.
+ * Evaluate a string of CSS selectors against the element and returns matched elements.
  *
- * @param {String} selectors css selector(s) string
+ * @param {String} selectors CSS selector(s) string
  * @return {Array} null if no elements matched
  */
  JSAPI.prototype.querySelectorAll = function(selectors) {
@@ -323,9 +323,9 @@ JSAPI.prototype.renameElem = function(name) {
 };
 
 /**
- * Evaluates a string of css selectors against the element and returns only the first matched element.
+ * Evaluate a string of CSS selectors against the element and returns only the first matched element.
  *
- * @param {String} selectors css selector(s) string
+ * @param {String} selectors CSS selector(s) string
  * @return {Array} null if no element matched
  */
  JSAPI.prototype.querySelector = function(selectors) {
@@ -335,9 +335,9 @@ JSAPI.prototype.renameElem = function(name) {
 };
 
 /**
- * Tests if a selector matches a given element.
+ * Test if a selector matches a given element.
  *
- * @param {String} selector css selector string
+ * @param {String} selector CSS selector string
  * @return {Boolean} true if element would be selected by selector string, false if it does not
  */
  JSAPI.prototype.matches = function(selector) {

From 9792063a3c1206f2b7f94e7e2b07494350681c63 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 3 Apr 2017 14:16:22 +0200
Subject: [PATCH 149/162] Add newline to end of file.

---
 test/plugins/inlineStyles.03.svg | 2 +-
 test/plugins/inlineStyles.06.svg | 2 +-
 test/plugins/inlineStyles.07.svg | 2 +-
 test/plugins/inlineStyles.08.svg | 2 +-
 test/plugins/inlineStyles.09.svg | 2 +-
 test/plugins/inlineStyles.12.svg | 2 +-
 test/plugins/inlineStyles.13.svg | 2 +-
 test/plugins/inlineStyles.14.svg | 2 +-
 test/plugins/inlineStyles.15.svg | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index 4b0f1e1e9..73237bdac 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -20,4 +20,4 @@
 <!--for https://github.com/svg/svgo/pull/592#issuecomment-266327016-->
     <path class="cls-7" style="cls-7-and-8:1;only-cls-7:1"/>
     <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8" style="cls-7-and-8:1"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
index a6c53be18..af23bc0b9 100644
--- a/test/plugins/inlineStyles.06.svg
+++ b/test/plugins/inlineStyles.06.svg
@@ -20,4 +20,4 @@
 
 @@@
 
-{"onlyMatchedOnce":false}
\ No newline at end of file
+{"onlyMatchedOnce":false}
diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
index 1692710d5..200296025 100644
--- a/test/plugins/inlineStyles.07.svg
+++ b/test/plugins/inlineStyles.07.svg
@@ -14,4 +14,4 @@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <rect width="100" height="100" class="blue red" style="fill:red!important"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/test/plugins/inlineStyles.08.svg b/test/plugins/inlineStyles.08.svg
index 468904edf..cd350b06b 100644
--- a/test/plugins/inlineStyles.08.svg
+++ b/test/plugins/inlineStyles.08.svg
@@ -14,4 +14,4 @@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <rect width="100" height="100" class="blue red" style="fill:red!important"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
index e68247449..3c08fd5cd 100644
--- a/test/plugins/inlineStyles.09.svg
+++ b/test/plugins/inlineStyles.09.svg
@@ -14,4 +14,4 @@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <rect width="100" height="100" class="blue red" style="fill:yellow!important"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/test/plugins/inlineStyles.12.svg b/test/plugins/inlineStyles.12.svg
index 8bcd74f25..f5eeeca6d 100644
--- a/test/plugins/inlineStyles.12.svg
+++ b/test/plugins/inlineStyles.12.svg
@@ -13,4 +13,4 @@
 
 @@@
 
-{"usePseudos":[":hover"]}
\ No newline at end of file
+{"usePseudos":[":hover"]}
diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
index f0930aacc..eed4a93f2 100644
--- a/test/plugins/inlineStyles.13.svg
+++ b/test/plugins/inlineStyles.13.svg
@@ -65,4 +65,4 @@
         </style>
     </defs>
     <rect width="100" height="100" class="blue" style="fill:blue"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/test/plugins/inlineStyles.14.svg b/test/plugins/inlineStyles.14.svg
index f02354955..7cccb017f 100644
--- a/test/plugins/inlineStyles.14.svg
+++ b/test/plugins/inlineStyles.14.svg
@@ -22,4 +22,4 @@
 
 @@@
 
-{"useMqs": ["media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)"]}
\ No newline at end of file
+{"useMqs": ["media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)"]}
diff --git a/test/plugins/inlineStyles.15.svg b/test/plugins/inlineStyles.15.svg
index 70fe4cf32..d6121007a 100644
--- a/test/plugins/inlineStyles.15.svg
+++ b/test/plugins/inlineStyles.15.svg
@@ -64,4 +64,4 @@ html /deep/ core-icon[size=""] { position: relative; }
     <g id="airplanemode-on">
         <path d="M10.2,9"/>
     </g>
-</svg>
\ No newline at end of file
+</svg>

From 751dad01120fcb786b7979f5b27d8db13a7ea642 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 3 Apr 2017 14:42:43 +0200
Subject: [PATCH 150/162] Lock css-tree package version.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1b6b557b3..c220ec97f 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "colors": "~1.1.2",
     "css-select": "^1.3.0-rc0",
     "css-select-base-adapter": "^0.1.0",
-    "css-tree": "github:csstree/csstree",
+    "css-tree": "github:csstree/csstree#e9c024b02a38d98c9eb886526709e54655eee2e1",
     "csso": "^3.0.1",
     "js-yaml": "~3.7.0",
     "mkdirp": "~0.5.1",

From d212cee82c3d4728be0237bb8901945e96ba16de Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 3 Apr 2017 14:43:08 +0200
Subject: [PATCH 151/162] Fix indents/formatting.

---
 lib/css-tools.js                  | 165 +++++++++--------
 lib/svgo/css-select-adapter.js    |  80 ++++-----
 lib/svgo/css-style-declaration.js | 203 ++++++++++-----------
 lib/svgo/svg2js.js                |   2 +-
 plugins/inlineStyles.js           | 287 +++++++++++++++---------------
 test/plugins/inlineStyles.03.svg  |  24 +--
 test/plugins/inlineStyles.05.svg  |   4 +-
 test/plugins/inlineStyles.06.svg  |   4 +-
 test/plugins/inlineStyles.07.svg  |   4 +-
 test/plugins/inlineStyles.08.svg  |   4 +-
 test/plugins/inlineStyles.09.svg  |   4 +-
 test/plugins/inlineStyles.13.svg  |  84 ++++-----
 test/plugins/inlineStyles.14.svg  |  22 +--
 test/plugins/inlineStyles.15.svg  | 100 +++++------
 14 files changed, 500 insertions(+), 487 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index ba18dbbd4..9589b6955 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -1,9 +1,9 @@
 'use strict';
 
-var csstree     = require('css-tree'),
-    stable      = require('stable'),
+var csstree = require('css-tree'),
+    stable = require('stable'),
     specificity = require('csso/lib/restructure/prepare/specificity'),
-    List        = require('css-tree/lib/utils/list');
+    List = require('css-tree/lib/utils/list');
 
 
 /**
@@ -13,36 +13,39 @@ var csstree     = require('css-tree'),
  * @return {Array} selectors
  */
 function flattenToSelectors(cssAst) {
-  var selectors   = [];
-
-  csstree.walkRules(cssAst, function(node) {
-    if (node.type !== 'Rule') {
-        return;
-    }
-
-    var atrule = this.atrule;
-    var rule   = node;
-
-    node.selector.children.each(function(selectorNode, selectorItem) {
-        var selector = {
-            item:    selectorItem,
-            atrule:  atrule,
-            rule:    rule,
-            pseudos: []
-        };
-
-        selectorNode.children.each(function(selectorChildNode, selectorChildItem, selectorChildList) {
-            if(selectorChildNode.type === 'PseudoClassSelector' || 
-               selectorChildNode.type === 'PseudoElementSelector') {
-                selector.pseudos.push({ item: selectorChildItem, list: selectorChildList });
-            }
+    var selectors = [];
+
+    csstree.walkRules(cssAst, function(node) {
+        if (node.type !== 'Rule') {
+            return;
+        }
+
+        var atrule = this.atrule;
+        var rule = node;
+
+        node.selector.children.each(function(selectorNode, selectorItem) {
+            var selector = {
+                item: selectorItem,
+                atrule: atrule,
+                rule: rule,
+                pseudos: []
+            };
+
+            selectorNode.children.each(function(selectorChildNode, selectorChildItem, selectorChildList) {
+                if (selectorChildNode.type === 'PseudoClassSelector' ||
+                    selectorChildNode.type === 'PseudoElementSelector') {
+                    selector.pseudos.push({
+                        item: selectorChildItem,
+                        list: selectorChildList
+                    });
+                }
+            });
+
+            selectors.push(selector);
         });
-
-        selectors.push(selector);
     });
-});
 
-  return selectors;
+    return selectors;
 }
 
 /**
@@ -53,20 +56,20 @@ function flattenToSelectors(cssAst) {
  * @return {Array} Filtered selectors that match the passed media queries
  */
 function filterByMqs(selectors, useMqs) {
-  return selectors.filter(function(selector) {
-    if(selector.atrule === null) {
-      return useMqs.indexOf('') > -1;
-    }
-
-    var mqName = selector.atrule.name;
-    var mqStr  = mqName;
-    if(selector.atrule.expression.type === 'MediaQueryList') {
-      var mqExpr = csstree.translate(selector.atrule.expression);
-          mqStr  = [mqName, mqExpr].join(' ');
-    }
-
-    return useMqs.indexOf(mqStr) > -1;
-  });
+    return selectors.filter(function(selector) {
+        if (selector.atrule === null) {
+            return useMqs.indexOf('') > -1;
+        }
+
+        var mqName = selector.atrule.name;
+        var mqStr = mqName;
+        if (selector.atrule.expression.type === 'MediaQueryList') {
+            var mqExpr = csstree.translate(selector.atrule.expression);
+            mqStr = [mqName, mqExpr].join(' ');
+        }
+
+        return useMqs.indexOf(mqStr) > -1;
+    });
 }
 
 /**
@@ -77,15 +80,15 @@ function filterByMqs(selectors, useMqs) {
  * @return {Array} Filtered selectors that match the passed pseudo-elements and/or -classes
  */
 function filterByPseudos(selectors, usePseudos) {
-  return selectors.filter(function(selector) {
-    var pseudoSelectorsStr = csstree.translate({
-      type: 'Selector',
-      children: new List().fromArray(selector.pseudos.map(function(pseudo) {
-        return pseudo.item.data;
-      }))
+    return selectors.filter(function(selector) {
+        var pseudoSelectorsStr = csstree.translate({
+            type: 'Selector',
+            children: new List().fromArray(selector.pseudos.map(function(pseudo) {
+                return pseudo.item.data;
+            }))
+        });
+        return usePseudos.indexOf(pseudoSelectorsStr) > -1;
     });
-    return usePseudos.indexOf(pseudoSelectorsStr) > -1;
-  });
 }
 
 /**
@@ -95,11 +98,11 @@ function filterByPseudos(selectors, usePseudos) {
  * @return {Array} Selectors without pseudo-elements and/or -classes
  */
 function cleanPseudos(selectors) {
-  selectors.forEach(function(selector) {
-    selector.pseudos.forEach(function(pseudo) {
-        pseudo.list.remove(pseudo.item);
+    selectors.forEach(function(selector) {
+        selector.pseudos.forEach(function(pseudo) {
+            pseudo.list.remove(pseudo.item);
+        });
     });
-  });
 }
 
 
@@ -112,15 +115,15 @@ function cleanPseudos(selectors) {
  * @return {Number} Score of selector specificity A compared to selector specificity B
  */
 function compareSpecificity(aSpecificity, bSpecificity) {
-  for (var i = 0; i < 4; i += 1) {
-    if (aSpecificity[i] < bSpecificity[i]) {
-      return -1;
-    } else if (aSpecificity[i] > bSpecificity[i]) {
-      return 1;
+    for (var i = 0; i < 4; i += 1) {
+        if (aSpecificity[i] < bSpecificity[i]) {
+            return -1;
+        } else if (aSpecificity[i] > bSpecificity[i]) {
+            return 1;
+        }
     }
-  }
 
-  return 0;
+    return 0;
 }
 
 
@@ -132,13 +135,13 @@ function compareSpecificity(aSpecificity, bSpecificity) {
  * @return {Number} Score of selector A compared to selector B
  */
 function compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode) {
-  var aSpecificity = specificity(aSimpleSelectorNode),
-      bSpecificity = specificity(bSimpleSelectorNode);
-  return compareSpecificity(aSpecificity, bSpecificity);
+    var aSpecificity = specificity(aSimpleSelectorNode),
+        bSpecificity = specificity(bSimpleSelectorNode);
+    return compareSpecificity(aSpecificity, bSpecificity);
 }
 
 function _bySelectorSpecificity(selectorA, selectorB) {
-  return compareSimpleSelectorNode(selectorA.item.data, selectorB.item.data);
+    return compareSimpleSelectorNode(selectorA.item.data, selectorB.item.data);
 }
 
 
@@ -149,7 +152,7 @@ function _bySelectorSpecificity(selectorA, selectorB) {
  * @return {Array} Stable sorted selectors
  */
 function sortSelectors(selectors) {
-  return stable(selectors, _bySelectorSpecificity);
+    return stable(selectors, _bySelectorSpecificity);
 }
 
 
@@ -160,22 +163,26 @@ function sortSelectors(selectors) {
  * @return {Object} CSSStyleDeclaration property
  */
 function cssoToStyleDeclaration(cssoDeclaration) {
-  var propertyName     = cssoDeclaration.property,
-      propertyValue    = csstree.translate(cssoDeclaration.value),
-      propertyPriority = (cssoDeclaration.important ? 'important' : '');
-  return { name: propertyName, value: propertyValue, priority: propertyPriority };
+    var propertyName = cssoDeclaration.property,
+        propertyValue = csstree.translate(cssoDeclaration.value),
+        propertyPriority = (cssoDeclaration.important ? 'important' : '');
+    return {
+        name: propertyName,
+        value: propertyValue,
+        priority: propertyPriority
+    };
 }
 
 
-module.exports.flattenToSelectors        = flattenToSelectors;
+module.exports.flattenToSelectors = flattenToSelectors;
 
-module.exports.filterByMqs               = filterByMqs;
-module.exports.filterByPseudos           = filterByPseudos;
-module.exports.cleanPseudos              = cleanPseudos;
+module.exports.filterByMqs = filterByMqs;
+module.exports.filterByPseudos = filterByPseudos;
+module.exports.cleanPseudos = cleanPseudos;
 
-module.exports.compareSpecificity        = compareSpecificity;
+module.exports.compareSpecificity = compareSpecificity;
 module.exports.compareSimpleSelectorNode = compareSimpleSelectorNode;
 
-module.exports.sortSelectors             = sortSelectors;
+module.exports.sortSelectors = sortSelectors;
 
-module.exports.cssoToStyleDeclaration    = cssoToStyleDeclaration;
+module.exports.cssoToStyleDeclaration = cssoToStyleDeclaration;
diff --git a/lib/svgo/css-select-adapter.js b/lib/svgo/css-select-adapter.js
index 54604a775..c37678cbf 100644
--- a/lib/svgo/css-select-adapter.js
+++ b/lib/svgo/css-select-adapter.js
@@ -3,48 +3,48 @@
 var baseCssAdapter = require('css-select-base-adapter');
 
 /**
-  * DOMUtils API for SVGO AST (used by css-select)
-  */
+ * DOMUtils API for SVGO AST (used by css-select)
+ */
 var svgoCssSelectAdapterMin = {
 
-  // is the node a tag?
-  // isTag: ( node:Node ) => isTag:Boolean
-  isTag: function(node) {
-    return node.isElem();
-  },
-
-  // get the parent of the node
-  // getParent: ( node:Node ) => parentNode:Node
-  // returns null when no parent exists
-  getParent: function(node) {
-    return node.parentNode || null;
-  },
-
-  // get the node's children
-  // getChildren: ( node:Node ) => children:[Node]
-  getChildren: function(node) {
-    return node.content || [];
-  },
-
-  // get the name of the tag
-  // getName: ( elem:ElementNode ) => tagName:String
-  getName: function(elemAst) {
-    return elemAst.elem;
-  },
-
-  // get the text content of the node, and its children if it has any
-  // getText: ( node:Node ) => text:String
-  // returns empty string when there is no text
-  getText: function(node) {
-    return node.content[0].text || node.content[0].cdata || '';
-  },
-
-  // get the attribute value
-  // getAttributeValue: ( elem:ElementNode, name:String ) => value:String
-  // returns null when attribute doesn't exist
-  getAttributeValue: function(elem, name) {
-    return elem.hasAttr(name) ? elem.attr(name).value : null;
-  }
+    // is the node a tag?
+    // isTag: ( node:Node ) => isTag:Boolean
+    isTag: function(node) {
+        return node.isElem();
+    },
+
+    // get the parent of the node
+    // getParent: ( node:Node ) => parentNode:Node
+    // returns null when no parent exists
+    getParent: function(node) {
+        return node.parentNode || null;
+    },
+
+    // get the node's children
+    // getChildren: ( node:Node ) => children:[Node]
+    getChildren: function(node) {
+        return node.content || [];
+    },
+
+    // get the name of the tag
+    // getName: ( elem:ElementNode ) => tagName:String
+    getName: function(elemAst) {
+        return elemAst.elem;
+    },
+
+    // get the text content of the node, and its children if it has any
+    // getText: ( node:Node ) => text:String
+    // returns empty string when there is no text
+    getText: function(node) {
+        return node.content[0].text || node.content[0].cdata || '';
+    },
+
+    // get the attribute value
+    // getAttributeValue: ( elem:ElementNode, name:String ) => value:String
+    // returns null when attribute doesn't exist
+    getAttributeValue: function(elem, name) {
+        return elem.hasAttr(name) ? elem.attr(name).value : null;
+    }
 };
 
 // use base adapter for default implementation
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 6f1f7d912..aaa814089 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -1,29 +1,29 @@
 'use strict';
 
-var csstree  = require('css-tree'),
+var csstree = require('css-tree'),
     csstools = require('../css-tools');
 
 
 var CSSStyleDeclaration = function(node) {
-  this.parentNode = node;
+    this.parentNode = node;
 
-  this.properties = new Map();
-  this.hasSynced  = false;
+    this.properties = new Map();
+    this.hasSynced = false;
 
-  this.styleAttr  = null;
-  this.styleValue = null;
+    this.styleAttr = null;
+    this.styleValue = null;
 
-  this.parseError = false;
+    this.parseError = false;
 };
 
 
 CSSStyleDeclaration.prototype.hasStyle = function() {
-  this.styleAttr = { // empty style attr
-      'name':  'style',
-      'value': null
-  };
+    this.styleAttr = { // empty style attr
+        'name': 'style',
+        'value': null
+    };
 
-  this.addStyleHandler();
+    this.addStyleHandler();
 };
 
 
@@ -33,78 +33,81 @@ CSSStyleDeclaration.prototype.hasStyle = function() {
 
 CSSStyleDeclaration.prototype.addStyleHandler = function() {
 
-  Object.defineProperty(this.parentNode.attrs, 'style', {
-    get:          this.getStyleAttr.bind(this),
-    set:          this.setStyleAttr.bind(this),
-    enumerable:   true,
-    configurable: true
-  });
+    Object.defineProperty(this.parentNode.attrs, 'style', {
+        get: this.getStyleAttr.bind(this),
+        set: this.setStyleAttr.bind(this),
+        enumerable: true,
+        configurable: true
+    });
 
-  this.addStyleValueHandler();
+    this.addStyleValueHandler();
 };
 
 // attr.style.value
 
 CSSStyleDeclaration.prototype.addStyleValueHandler = function() {
 
-  Object.defineProperty(this.styleAttr, 'value', {
-    get:          this.getStyleValue.bind(this),
-    set:          this.setStyleValue.bind(this),
-    enumerable:   true,
-    configurable: true
-  });
+    Object.defineProperty(this.styleAttr, 'value', {
+        get: this.getStyleValue.bind(this),
+        set: this.setStyleValue.bind(this),
+        enumerable: true,
+        configurable: true
+    });
 };
 
 CSSStyleDeclaration.prototype.getStyleAttr = function() {
-  return this.styleAttr;
+    return this.styleAttr;
 };
 
 CSSStyleDeclaration.prototype.setStyleAttr = function(newStyleAttr) {
-  this.setStyleValue(newStyleAttr.value); // must before applying value handler!
+    this.setStyleValue(newStyleAttr.value); // must before applying value handler!
 
-  this.styleAttr = newStyleAttr;
-  this.addStyleValueHandler();
-  this.hasSynced = false; // raw css changed
+    this.styleAttr = newStyleAttr;
+    this.addStyleValueHandler();
+    this.hasSynced = false; // raw css changed
 };
 
 CSSStyleDeclaration.prototype.getStyleValue = function() {
-  return this.getCssText();
+    return this.getCssText();
 };
 
 CSSStyleDeclaration.prototype.setStyleValue = function(newValue) {
-  this.properties.clear(); // reset all existing properties
-  this.styleValue = newValue;
-  this.hasSynced  = false; // raw css changed
+    this.properties.clear(); // reset all existing properties
+    this.styleValue = newValue;
+    this.hasSynced = false; // raw css changed
 };
 
 
 
 
 CSSStyleDeclaration.prototype._loadCssText = function() {
-  if(this.hasSynced) {
-    return;
-  }
-  this.hasSynced = true; // must be set here to prevent loop in setProperty(...)
-
-  if(!this.styleValue || this.styleValue.length === 0) {
-    return;
-  }
-  var inlineCssStr = this.styleValue;
-
-  var cssoDeclarations = {};
-  try {
-    cssoDeclarations = csstree.parse(inlineCssStr, {context: 'declarationList', parseValue: false});
-  } catch(parseError) {
-    this.parseError = parseError;
-    return;
-  }
-  this.parseError = false;
-
-  var self = this;
-  cssoDeclarations.children.each(function(cssoDeclaration) {
-    var styleDeclaration = csstools.cssoToStyleDeclaration(cssoDeclaration);
-    self.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
-  });
+    if (this.hasSynced) {
+        return;
+    }
+    this.hasSynced = true; // must be set here to prevent loop in setProperty(...)
+
+    if (!this.styleValue || this.styleValue.length === 0) {
+        return;
+    }
+    var inlineCssStr = this.styleValue;
+
+    var cssoDeclarations = {};
+    try {
+        cssoDeclarations = csstree.parse(inlineCssStr, {
+            context: 'declarationList',
+            parseValue: false
+        });
+    } catch (parseError) {
+        this.parseError = parseError;
+        return;
+    }
+    this.parseError = false;
+
+    var self = this;
+    cssoDeclarations.children.each(function(cssoDeclaration) {
+        var styleDeclaration = csstools.cssoToStyleDeclaration(cssoDeclaration);
+        self.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
+    });
 };
 
 
@@ -116,34 +119,34 @@ CSSStyleDeclaration.prototype._loadCssText = function() {
  * @return {String} Textual representation of the declaration block (empty string for no properties)
  */
 CSSStyleDeclaration.prototype.getCssText = function() {
-  var properties = this.getProperties();
+    var properties = this.getProperties();
 
-  if(this.parseError) {
-    // in case of a parse error, pass through original styles
-    return this.styleValue;
-  }
+    if (this.parseError) {
+        // in case of a parse error, pass through original styles
+        return this.styleValue;
+    }
 
-  var cssText = [];
-  properties.forEach(function(property, propertyName) {
-    var strImportant = property.priority === 'important' ? '!important' : '';
-    cssText.push(propertyName.trim() + ':' + property.value.trim() + strImportant);
-  });
-  return cssText.join(';');
+    var cssText = [];
+    properties.forEach(function(property, propertyName) {
+        var strImportant = property.priority === 'important' ? '!important' : '';
+        cssText.push(propertyName.trim() + ':' + property.value.trim() + strImportant);
+    });
+    return cssText.join(';');
 };
 
 CSSStyleDeclaration.prototype._handleParseError = function() {
-  if(this.parseError) {
-    console.warn('Warning: Parse error when parsing inline styles, style properties of this element cannot be used. The raw styles can still be get/set using .attr(\'style\').value. Error details: ' + this.parseError);
-  }
+    if (this.parseError) {
+        console.warn('Warning: Parse error when parsing inline styles, style properties of this element cannot be used. The raw styles can still be get/set using .attr(\'style\').value. Error details: ' + this.parseError);
+    }
 };
 
 
 CSSStyleDeclaration.prototype._getProperty = function(propertyName) {
-  var properties = this.getProperties();
-  this._handleParseError();
+    var properties = this.getProperties();
+    this._handleParseError();
 
-  var property = properties.get(propertyName.trim());
-  return property;
+    var property = properties.get(propertyName.trim());
+    return property;
 };
 
 /**
@@ -153,8 +156,8 @@ CSSStyleDeclaration.prototype._getProperty = function(propertyName) {
  * @return {String} priority that represents the priority (e.g. "important") if one exists. If none exists, returns the empty string.
  */
 CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
-  var property = this._getProperty(propertyName);
-  return property ? property.priority : '';
+    var property = this._getProperty(propertyName);
+    return property ? property.priority : '';
 };
 
 /**
@@ -164,8 +167,8 @@ CSSStyleDeclaration.prototype.getPropertyPriority = function(propertyName) {
  * @return {String} value containing the value of the property. If not set, returns the empty string.
  */
 CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
-  var property = this._getProperty(propertyName);
-  return property ? property.value : null;
+    var property = this._getProperty(propertyName);
+    return property ? property.value : null;
 };
 
 /**
@@ -175,10 +178,10 @@ CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
  * @return {String} propertyName that is the name of the CSS property at the specified index.
  */
 CSSStyleDeclaration.prototype.item = function(index) {
-  var properties = this.getProperties();
-  this._handleParseError();
+    var properties = this.getProperties();
+    this._handleParseError();
 
-  return Array.from(properties.keys())[index];
+    return Array.from(properties.keys())[index];
 };
 
 /**
@@ -187,8 +190,8 @@ CSSStyleDeclaration.prototype.item = function(index) {
  * @return {Map} properties that is a Map with propertyName as key and property (propertyValue + propertyPriority) as value.
  */
 CSSStyleDeclaration.prototype.getProperties = function() {
-  this._loadCssText();
-  return this.properties;
+    this._loadCssText();
+    return this.properties;
 };
 
 
@@ -201,14 +204,14 @@ CSSStyleDeclaration.prototype.getProperties = function() {
  * @return {String} oldValue equal to the value of the CSS property before it was removed.
  */
 CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
-  this.hasStyle();
+    this.hasStyle();
 
-  var properties = this.getProperties();
-  this._handleParseError();
+    var properties = this.getProperties();
+    this._handleParseError();
 
-  var oldValue = this.getPropertyValue(propertyName);
-  properties.delete(propertyName.trim());
-  return oldValue;
+    var oldValue = this.getPropertyValue(propertyName);
+    properties.delete(propertyName.trim());
+    return oldValue;
 };
 
 /**
@@ -220,18 +223,18 @@ CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
  * @return {undefined}
  */
 CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
-  this.hasStyle();
+    this.hasStyle();
 
-  var properties = this.getProperties();
-  this._handleParseError();
+    var properties = this.getProperties();
+    this._handleParseError();
 
-  var property = {
-    value:       value.trim(),
-    priority: priority.trim()
-  };
-  properties.set(propertyName.trim(), property);
+    var property = {
+        value: value.trim(),
+        priority: priority.trim()
+    };
+    properties.set(propertyName.trim(), property);
 
-  return property;
+    return property;
 };
 
 
diff --git a/lib/svgo/svg2js.js b/lib/svgo/svg2js.js
index e4cea9b75..385c55d16 100644
--- a/lib/svgo/svg2js.js
+++ b/lib/svgo/svg2js.js
@@ -96,7 +96,7 @@ module.exports = function(data, callback) {
 
             for (var name in data.attributes) {
 
-              if(name === 'style') {
+              if (name === 'style') {
                   elem.style.hasStyle();
               }
 
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index c3dbaa741..1fe6ba880 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -1,189 +1,192 @@
 'use strict';
 
-exports.type   = 'full';
+exports.type = 'full';
 
 exports.active = true;
 
 exports.params = {
-  onlyMatchedOnce:        true,
-  removeMatchedSelectors: true,
-  useMqs:                 ['', 'screen'],
-  usePseudos:             ['']
+    onlyMatchedOnce: true,
+    removeMatchedSelectors: true,
+    useMqs: ['', 'screen'],
+    usePseudos: ['']
 };
 
 exports.description = 'inline styles (additional options)';
 
 
-var csstree  = require('css-tree'),
+var csstree = require('css-tree'),
     cssTools = require('../lib/css-tools');
 
 /**
-  * Moves + merges styles from style elements to element styles
-  *
-  * Options
-  *   onlyMatchedOnce (default: true)
-  *     inline only selectors that match once
-  *
-  *   removeMatchedSelectors (default: true)
-  *     clean up matched selectors,
-  *     leave selectors that hadn't matched
-  *
-  *   useMqs (default: ['', 'screen'])
-  *     what media queries to be used
-  *     empty string element for styles outside media queries
-  *
-  *   usePseudos (default: [''])
-  *     what pseudo-classes/-elements to be used
-  *     empty string element for all non-pseudo-classes and/or -elements
-  *
-  * @param {Object} document document element
-  * @param {Object} opts plugin params
-  *
-  * @author strarsis <strarsis@gmail.com>
-  */
+ * Moves + merges styles from style elements to element styles
+ *
+ * Options
+ *   onlyMatchedOnce (default: true)
+ *     inline only selectors that match once
+ *
+ *   removeMatchedSelectors (default: true)
+ *     clean up matched selectors,
+ *     leave selectors that hadn't matched
+ *
+ *   useMqs (default: ['', 'screen'])
+ *     what media queries to be used
+ *     empty string element for styles outside media queries
+ *
+ *   usePseudos (default: [''])
+ *     what pseudo-classes/-elements to be used
+ *     empty string element for all non-pseudo-classes and/or -elements
+ *
+ * @param {Object} document document element
+ * @param {Object} opts plugin params
+ *
+ * @author strarsis <strarsis@gmail.com>
+ */
 exports.fn = function(document, opts) {
 
-  // collect <style/>s
-  var styleEls  = document.querySelectorAll('style');
+    // collect <style/>s
+    var styleEls = document.querySelectorAll('style');
 
-  //no <styles/>s, nothing to do
-  if(styleEls === null) {
-    return document;
-  }
+    //no <styles/>s, nothing to do
+    if (styleEls === null) {
+        return document;
+    }
 
-  var styles    = [],
-      selectors = [];
+    var styles = [],
+        selectors = [];
 
-  for(var styleEl of styleEls) {
-    if(styleEl.isEmpty()) {
-      // skip empty <style/>s
-      continue;
-    }
-    var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];
-
-    // collect <style/>s and their css ast
-    var cssAst = {};
-    try {
-        cssAst = csstree.parse(cssStr, {parseValue: false, parseCustomProperty: false});
-    } catch(parseError) {
-        console.warn('Warning: Parse error of styles of <style/> element, skipped. Error details: ' + parseError);
-        continue;
-    }
+    for (var styleEl of styleEls) {
+        if (styleEl.isEmpty()) {
+            // skip empty <style/>s
+            continue;
+        }
+        var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];
+
+        // collect <style/>s and their css ast
+        var cssAst = {};
+        try {
+            cssAst = csstree.parse(cssStr, {
+                parseValue: false,
+                parseCustomProperty: false
+            });
+        } catch (parseError) {
+            console.warn('Warning: Parse error of styles of <style/> element, skipped. Error details: ' + parseError);
+            continue;
+        }
+
+        styles.push({
+            styleEl: styleEl,
+            cssAst: cssAst
+        });
 
-    styles.push({
-      styleEl: styleEl,
-      cssAst:  cssAst
-    });
+        selectors = selectors.concat(cssTools.flattenToSelectors(cssAst));
+    }
 
-    selectors = selectors.concat(cssTools.flattenToSelectors(cssAst));
-  }
 
+    // filter for mediaqueries to be used or without any mediaquery
+    var selectorsMq = cssTools.filterByMqs(selectors, opts.useMqs);
 
-  // filter for mediaqueries to be used or without any mediaquery
-  var selectorsMq = cssTools.filterByMqs(selectors, opts.useMqs);
 
+    // filter for pseudo elements to be used
+    var selectorsPseudo = cssTools.filterByPseudos(selectorsMq, opts.usePseudos);
 
-  // filter for pseudo elements to be used
-  var selectorsPseudo = cssTools.filterByPseudos(selectorsMq, opts.usePseudos);
+    // remove PseudoClass from its SimpleSelector for proper matching
+    cssTools.cleanPseudos(selectorsPseudo);
 
-  // remove PseudoClass from its SimpleSelector for proper matching
-  cssTools.cleanPseudos(selectorsPseudo);
 
+    // stable sort selectors
+    var sortedSelectors = cssTools.sortSelectors(selectorsPseudo).reverse();
 
-  // stable sort selectors
-  var sortedSelectors = cssTools.sortSelectors(selectorsPseudo).reverse();
 
+    // apply <style/> styles to matched elements
+    for (var selector of sortedSelectors) {
+        var selectorStr = csstree.translate(selector.item.data),
+            selectedEls = null;
 
-  // apply <style/> styles to matched elements
-  for(var selector of sortedSelectors) {
-    var selectorStr = csstree.translate(selector.item.data),
-        selectedEls = null;
+        try {
+            selectedEls = document.querySelectorAll(selectorStr);
+        } catch (selectError) {
+            if (selectError.constructor === SyntaxError) {
+                console.warn('Warning: Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped. Error details: ' + selectError);
+                continue;
+            }
+            throw selectError;
+        }
 
-    try {
-        selectedEls = document.querySelectorAll(selectorStr);
-    } catch(selectError) {
-        if(selectError.constructor === SyntaxError) {
-            console.warn('Warning: Syntax error when trying to select \n\n' + selectorStr + '\n\n, skipped. Error details: ' + selectError);
+        if (selectedEls === null) {
+            // nothing selected
             continue;
         }
-        throw selectError;
-    }
 
-    if(selectedEls === null) {
-      // nothing selected
-      continue;
-    }
+        if (opts.onlyMatchedOnce && selectedEls !== null && selectedEls.length > 1) {
+            // skip selectors that match more than once if option onlyMatchedOnce is enabled
+            continue;
+        }
 
-    if(opts.onlyMatchedOnce && selectedEls !== null && selectedEls.length > 1) {
-      // skip selectors that match more than once if option onlyMatchedOnce is enabled
-      continue;
-    }
+        // apply <style/> to matched elements
+        for (var selectedEl of selectedEls) {
 
-    // apply <style/> to matched elements
-    for(var selectedEl of selectedEls) {
+            if (selector.rule === null) {
+                continue;
+            }
 
-      if(selector.rule === null) {
-        continue;
-      }
+            // merge declarations
+            csstree.walkDeclarations(selector.rule, function(styleCssoDeclaration) {
+                var styleDeclaration = cssTools.cssoToStyleDeclaration(styleCssoDeclaration);
+                if (selectedEl.style.getPropertyValue(styleDeclaration.name) !== null &&
+                    selectedEl.style.getPropertyPriority(styleDeclaration.name) >= styleDeclaration.priority) {
+                    return;
+                }
+                selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
+            });
 
-      // merge declarations
-      csstree.walkDeclarations(selector.rule, function(styleCssoDeclaration) {
-        var styleDeclaration = cssTools.cssoToStyleDeclaration(styleCssoDeclaration);
-        if(selectedEl.style.getPropertyValue(styleDeclaration.name)    !== null &&
-           selectedEl.style.getPropertyPriority(styleDeclaration.name) >=  styleDeclaration.priority) {
-          return;
         }
-        selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
-      });
 
+        if (opts.removeMatchedSelectors && selectedEls !== null && selectedEls.length > 0) {
+            // clean up matching simple selectors if option removeMatchedSelectors is enabled
+            selector.rule.selector.children.remove(selector.item);
+        }
     }
 
-    if(opts.removeMatchedSelectors && selectedEls !== null && selectedEls.length > 0) {
-      // clean up matching simple selectors if option removeMatchedSelectors is enabled
-      selector.rule.selector.children.remove(selector.item);
-    }
-  }
-
-
-  for(var style of styles) {
-    csstree.walkRules(style.cssAst, function(node, item, list) {
-      // clean up <style/> atrules without any rulesets left
-      if(node.type === 'Atrule' &&
-         // only Atrules containing rulesets
-         node.block !== null &&
-         node.block.children.isEmpty()) {
-        list.remove(item);
-        return;
-      }
-
-      // clean up <style/> rulesets without any css selectors left
-      if(node.type === 'Rule' &&
-         node.selector.children.isEmpty()) {
-          list.remove(item);
-      }
-    });
-
-
-    if(style.cssAst.children.isEmpty()){
-      // clean up now emtpy <style/>s
-      var styleParentEl = style.styleEl.parentNode;
-      styleParentEl.spliceContent(styleParentEl.content.indexOf(style.styleEl), 1);
-
-      if(styleParentEl.elem === 'defs' &&
-         styleParentEl.content.length === 0) {
-        // also clean up now empty <def/>s
-        var defsParentEl = styleParentEl.parentNode;
-        defsParentEl.spliceContent(defsParentEl.content.indexOf(styleParentEl), 1);
-      }
-
-      continue;
-    }
 
+    for (var style of styles) {
+        csstree.walkRules(style.cssAst, function(node, item, list) {
+            // clean up <style/> atrules without any rulesets left
+            if (node.type === 'Atrule' &&
+                // only Atrules containing rulesets
+                node.block !== null &&
+                node.block.children.isEmpty()) {
+                list.remove(item);
+                return;
+            }
+
+            // clean up <style/> rulesets without any css selectors left
+            if (node.type === 'Rule' &&
+                node.selector.children.isEmpty()) {
+                list.remove(item);
+            }
+        });
+
+
+        if (style.cssAst.children.isEmpty()) {
+            // clean up now emtpy <style/>s
+            var styleParentEl = style.styleEl.parentNode;
+            styleParentEl.spliceContent(styleParentEl.content.indexOf(style.styleEl), 1);
+
+            if (styleParentEl.elem === 'defs' &&
+                styleParentEl.content.length === 0) {
+                // also clean up now empty <def/>s
+                var defsParentEl = styleParentEl.parentNode;
+                defsParentEl.spliceContent(defsParentEl.content.indexOf(styleParentEl), 1);
+            }
+
+            continue;
+        }
 
-    // update existing, left over <style>s
-    style.styleEl.content[0].text = csstree.translate(style.cssAst);
-  }
+
+        // update existing, left over <style>s
+        style.styleEl.content[0].text = csstree.translate(style.cssAst);
+    }
 
 
-  return document;
+    return document;
 };
diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index 73237bdac..2ddadafa7 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -1,17 +1,17 @@
 <svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
-  <!-- for https://github.com/svg/svgo/pull/592#issuecomment-266327016 -->
-  <style>
-    .cls-7 {
-      only-cls-7: 1;
-    }
-    .cls-7,
-    .cls-8 {
-      cls-7-and-8: 1;
-    }
-  </style>
+<!-- for https://github.com/svg/svgo/pull/592#issuecomment-266327016 -->
+    <style>
+        .cls-7 {
+            only-cls-7: 1;
+        }
+        .cls-7,
+        .cls-8 {
+            cls-7-and-8: 1;
+        }
+    </style>
 
-  <path class="cls-7"/>
-  <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8"/>
+    <path class="cls-7"/>
+    <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8"/>
 </svg>
 
 @@@
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
index e099fdc57..1b0458b81 100644
--- a/test/plugins/inlineStyles.05.svg
+++ b/test/plugins/inlineStyles.05.svg
@@ -1,10 +1,10 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
         .st1 {
-          fill: red;
+            fill: red;
         }
         .st0 {
-          color: blue;
+            color: blue;
         }
     </style>
     <rect width="100" height="100" class="st0 st1" style="color:yellow"/>
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
index af23bc0b9..385054644 100644
--- a/test/plugins/inlineStyles.06.svg
+++ b/test/plugins/inlineStyles.06.svg
@@ -1,10 +1,10 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
         .red {
-          fill: red;
+            fill: red;
         }
         .blue {
-          fill: blue;
+            fill: blue;
         }
     </style>
     <rect width="100" height="100" class="red blue"/>
diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
index 200296025..5fb70c63e 100644
--- a/test/plugins/inlineStyles.07.svg
+++ b/test/plugins/inlineStyles.07.svg
@@ -1,10 +1,10 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
         .red {
-          fill: red !important;
+            fill: red !important;
         }
         .blue {
-          fill: blue;
+            fill: blue;
         }
     </style>
     <rect width="100" height="100" class="blue red"/>
diff --git a/test/plugins/inlineStyles.08.svg b/test/plugins/inlineStyles.08.svg
index cd350b06b..a76bcb6a1 100644
--- a/test/plugins/inlineStyles.08.svg
+++ b/test/plugins/inlineStyles.08.svg
@@ -1,10 +1,10 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
         .red {
-          fill: red !important;
+            fill: red !important;
         }
         .blue {
-          fill: blue;
+            fill: blue;
         }
     </style>
     <rect width="100" height="100" class="blue red" style="fill:yellow"/>
diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
index 3c08fd5cd..62fb82aa7 100644
--- a/test/plugins/inlineStyles.09.svg
+++ b/test/plugins/inlineStyles.09.svg
@@ -1,10 +1,10 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <style>
         .red {
-          fill: red !important;
+            fill: red !important;
         }
         .blue {
-          fill: blue;
+            fill: blue;
         }
     </style>
     <rect width="100" height="100" class="blue red" style="fill:yellow !important"/>
diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
index eed4a93f2..362b000c4 100644
--- a/test/plugins/inlineStyles.13.svg
+++ b/test/plugins/inlineStyles.13.svg
@@ -1,59 +1,59 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
-  <defs>
-    <style>
+    <defs>
+        <style>
 
-      /* Simple Atrules */
-      @charset 'UTF-8';
+            /* Simple Atrules */
+            @charset 'UTF-8';
 
-      @namespace svg url(http://www.w3.org/2000/svg);
+            @namespace svg url(http://www.w3.org/2000/svg);
 
-      @import url('https://fonts.googleapis.com/css?family=Roboto');
+            @import url('https://fonts.googleapis.com/css?family=Roboto');
 
-      /* Atrules with block */
-      @font-face {
-        font-family: SomeFont;
-        src: local("Some Font"),
-        local("SomeFont"),
-        url(SomeFont.ttf);
-        font-weight: bold;
-      }
+            /* Atrules with block */
+            @font-face {
+                font-family: SomeFont;
+                src: local("Some Font"),
+                local("SomeFont"),
+                url(SomeFont.ttf);
+                font-weight: bold;
+            }
 
-      @viewport {
-        zoom: 0.8;
-        min-zoom: 0.4;
-        max-zoom: 0.9;
-      }
+            @viewport {
+                    zoom: 0.8;
+                min-zoom: 0.4;
+                max-zoom: 0.9;
+            }
 
-      @keyframes identifier {
-          0% { top:  0; }
-         50% { top: 30px; left: 20px; }
-         50% { top: 10px; }
-        100% { top:  0; }
-      }
+            @keyframes identifier {
+                  0% { top:  0; }
+                 50% { top: 30px; left: 20px; }
+                 50% { top: 10px; }
+                100% { top:  0; }
+            }
 
 
-      /* Nested rules */
-      @page :first {
-        margin: 1in;
-      }
+            /* Nested rules */
+            @page :first {
+                margin: 1in;
+            }
 
-      @supports (display: flex) {
-        .module { display: flex; }
-      }
+            @supports (display: flex) {
+                .module { display: flex; }
+            }
 
-      @document url('http://example.com/test.html') {
-        rect {
-          stroke: red;
-        }
-      }
+            @document url('http://example.com/test.html') {
+                rect {
+                    stroke: red;
+                }
+            }
 
 
-      .blue {
-        fill: blue;
-      }
+            .blue {
+                fill: blue;
+            }
     </style>
-  </defs>
-  <rect width="100" height="100" class="blue"/>
+    </defs>
+    <rect width="100" height="100" class="blue"/>
 </svg>
 
 @@@
diff --git a/test/plugins/inlineStyles.14.svg b/test/plugins/inlineStyles.14.svg
index 7cccb017f..dc1596048 100644
--- a/test/plugins/inlineStyles.14.svg
+++ b/test/plugins/inlineStyles.14.svg
@@ -1,17 +1,17 @@
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
-  <defs>
-    <style>
-      @media only screen 
-        and (min-device-width: 320px) 
-        and (max-device-width: 480px)
-        and (-webkit-min-device-pixel-ratio: 2) {
+    <defs>
+        <style>
+            @media only screen
+            and (min-device-width: 320px)
+            and (max-device-width: 480px)
+            and (-webkit-min-device-pixel-ratio: 2) {
 
-          .blue { fill: blue; }
+                .blue { fill: blue; }
 
-      }
-    </style>
-  </defs>
-  <rect width="100" height="100" class="blue"/>
+            }
+        </style>
+    </defs>
+    <rect width="100" height="100" class="blue"/>
 </svg>
 
 @@@
diff --git a/test/plugins/inlineStyles.15.svg b/test/plugins/inlineStyles.15.svg
index d6121007a..eb9dabfc3 100644
--- a/test/plugins/inlineStyles.15.svg
+++ b/test/plugins/inlineStyles.15.svg
@@ -1,55 +1,55 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<defs xmlns="http://www.w3.org/1999/xhtml">
-<style type="text/css">
-html /deep/ [layout][horizontal], html /deep/ [layout][vertical] { display: flex; }
-html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] { display: inline-flex; }
-html /deep/ [layout][horizontal] { flex-direction: row; }
-html /deep/ [layout][horizontal][reverse] { flex-direction: row-reverse; }
-html /deep/ [layout][vertical] { flex-direction: column; }
-html /deep/ [layout][vertical][reverse] { flex-direction: column-reverse; }
-html /deep/ [layout][wrap] { flex-wrap: wrap; }
-html /deep/ [layout][wrap-reverse] { flex-wrap: wrap-reverse; }
-html /deep/ [flex] { flex: 1 1 0px; }
-html /deep/ [flex][auto] { flex: 1 1 auto; }
-html /deep/ [flex][none] { flex: 0 0 auto; }
-html /deep/ [flex][one] { flex: 1 1 0px; }
-html /deep/ [flex][two] { flex: 2 1 0px; }
-html /deep/ [flex][three] { flex: 3 1 0px; }
-html /deep/ [flex][four] { flex: 4 1 0px; }
-html /deep/ [flex][five] { flex: 5 1 0px; }
-html /deep/ [flex][six] { flex: 6 1 0px; }
-html /deep/ [flex][seven] { flex: 7 1 0px; }
-html /deep/ [flex][eight] { flex: 8 1 0px; }
-html /deep/ [flex][nine] { flex: 9 1 0px; }
-html /deep/ [flex][ten] { flex: 10 1 0px; }
-html /deep/ [flex][eleven] { flex: 11 1 0px; }
-html /deep/ [flex][twelve] { flex: 12 1 0px; }
-html /deep/ [layout][start] { align-items: flex-start; }
-html /deep/ [layout][center] { align-items: center; }
-html /deep/ [layout][end] { align-items: flex-end; }
-html /deep/ [layout][start-justified] { justify-content: flex-start; }
-html /deep/ [layout][center-justified] { justify-content: center; }
-html /deep/ [layout][end-justified] { justify-content: flex-end; }
-html /deep/ [layout][around-justified] { justify-content: space-around; }
-html /deep/ [layout][justified] { justify-content: space-between; }
-html /deep/ [self-start] { align-self: flex-start; }
-html /deep/ [self-center] { align-self: center; }
-html /deep/ [self-end] { align-self: flex-end; }
-html /deep/ [self-stretch] { align-self: stretch; }
-html /deep/ [block] { display: block; }
-html /deep/ [hidden] { display: none !important; }
-html /deep/ [relative] { position: relative; }
-html /deep/ [fit] { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
-body[fullbleed] { margin: 0px; height: 100vh; }
-html /deep/ [segment], html /deep/ segment { display: block; position: relative; box-sizing: border-box; margin: 1em 0.5em; padding: 1em; -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: white; }
-html /deep/ core-icon { display: inline-block; vertical-align: middle; background-repeat: no-repeat; }
-html /deep/ core-icon[size=""] { position: relative; }
-</style>
-</defs>
-<g id="airplanemode-on">
-<path d="M10.2,9"/>
-</g>
+    <defs xmlns="http://www.w3.org/1999/xhtml">
+        <style type="text/css">
+            html /deep/ [layout][horizontal], html /deep/ [layout][vertical] { display: flex; }
+            html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] { display: inline-flex; }
+            html /deep/ [layout][horizontal] { flex-direction: row; }
+            html /deep/ [layout][horizontal][reverse] { flex-direction: row-reverse; }
+            html /deep/ [layout][vertical] { flex-direction: column; }
+            html /deep/ [layout][vertical][reverse] { flex-direction: column-reverse; }
+            html /deep/ [layout][wrap] { flex-wrap: wrap; }
+            html /deep/ [layout][wrap-reverse] { flex-wrap: wrap-reverse; }
+            html /deep/ [flex] { flex: 1 1 0px; }
+            html /deep/ [flex][auto] { flex: 1 1 auto; }
+            html /deep/ [flex][none] { flex: 0 0 auto; }
+            html /deep/ [flex][one] { flex: 1 1 0px; }
+            html /deep/ [flex][two] { flex: 2 1 0px; }
+            html /deep/ [flex][three] { flex: 3 1 0px; }
+            html /deep/ [flex][four] { flex: 4 1 0px; }
+            html /deep/ [flex][five] { flex: 5 1 0px; }
+            html /deep/ [flex][six] { flex: 6 1 0px; }
+            html /deep/ [flex][seven] { flex: 7 1 0px; }
+            html /deep/ [flex][eight] { flex: 8 1 0px; }
+            html /deep/ [flex][nine] { flex: 9 1 0px; }
+            html /deep/ [flex][ten] { flex: 10 1 0px; }
+            html /deep/ [flex][eleven] { flex: 11 1 0px; }
+            html /deep/ [flex][twelve] { flex: 12 1 0px; }
+            html /deep/ [layout][start] { align-items: flex-start; }
+            html /deep/ [layout][center] { align-items: center; }
+            html /deep/ [layout][end] { align-items: flex-end; }
+            html /deep/ [layout][start-justified] { justify-content: flex-start; }
+            html /deep/ [layout][center-justified] { justify-content: center; }
+            html /deep/ [layout][end-justified] { justify-content: flex-end; }
+            html /deep/ [layout][around-justified] { justify-content: space-around; }
+            html /deep/ [layout][justified] { justify-content: space-between; }
+            html /deep/ [self-start] { align-self: flex-start; }
+            html /deep/ [self-center] { align-self: center; }
+            html /deep/ [self-end] { align-self: flex-end; }
+            html /deep/ [self-stretch] { align-self: stretch; }
+            html /deep/ [block] { display: block; }
+            html /deep/ [hidden] { display: none !important; }
+            html /deep/ [relative] { position: relative; }
+            html /deep/ [fit] { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
+            body[fullbleed] { margin: 0px; height: 100vh; }
+            html /deep/ [segment], html /deep/ segment { display: block; position: relative; box-sizing: border-box; margin: 1em 0.5em; padding: 1em; -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: white; }
+            html /deep/ core-icon { display: inline-block; vertical-align: middle; background-repeat: no-repeat; }
+            html /deep/ core-icon[size=""] { position: relative; }
+        </style>
+    </defs>
+    <g id="airplanemode-on">
+        <path d="M10.2,9"/>
+    </g>
 </svg>
 
 @@@

From baa1ffe45b7fd5618ed1fc5a0ee1899b3879375d Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 3 Apr 2017 23:27:17 +0200
Subject: [PATCH 152/162] Improve require of csstree List.

---
 lib/css-tools.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 9589b6955..58d65e12f 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -1,9 +1,9 @@
 'use strict';
 
-var csstree = require('css-tree'),
-    stable = require('stable'),
-    specificity = require('csso/lib/restructure/prepare/specificity'),
-    List = require('css-tree/lib/utils/list');
+var csstree     = require('css-tree'),
+    List        = csstree.List,
+    stable      = require('stable'),
+    specificity = require('csso/lib/restructure/prepare/specificity');
 
 
 /**

From d909bb5b974bf755dc3c6e87f557814756ffc326 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 3 Apr 2017 23:27:38 +0200
Subject: [PATCH 153/162] Use css-tree npm release.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c220ec97f..02cc8c3ea 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "colors": "~1.1.2",
     "css-select": "^1.3.0-rc0",
     "css-select-base-adapter": "^0.1.0",
-    "css-tree": "github:csstree/csstree#e9c024b02a38d98c9eb886526709e54655eee2e1",
+    "css-tree": "^1.0.0-alpha18",
     "csso": "^3.0.1",
     "js-yaml": "~3.7.0",
     "mkdirp": "~0.5.1",

From ec35e2287d2f8819dd0b6fa8a94e473d95118bbf Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 4 Apr 2017 00:04:48 +0200
Subject: [PATCH 154/162] Clean up csso prefixes. Replace csso with css-tree
 where AST is used.

---
 docs/how-it-works/en.md           |  6 +++---
 lib/css-tools.js                  | 16 ++++++++--------
 lib/svgo/css-style-declaration.js |  8 ++++----
 plugins/inlineStyles.js           |  4 ++--
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/how-it-works/en.md b/docs/how-it-works/en.md
index 87313ee00..4b5782dd4 100644
--- a/docs/how-it-works/en.md
+++ b/docs/how-it-works/en.md
@@ -291,9 +291,9 @@ And of course, writing plugins would not have been so cool without some sugar AP
   * @param {Array} Selectors to be sorted
   * @return {Array} Stable sorted selectors
 
-##### css-tools.cssoToStyleDeclaration(cssoDeclaration)
-  * Convert a CSSO AST style declaration to CSSStyleDeclaration property.
-  * @param {Object} CSSO style declaration
+##### css-tools.csstreeToStyleDeclaration(declaration)
+  * Convert a css-tree AST style declaration to CSSStyleDeclaration property.
+  * @param {Object} css-tree style declaration
   * @return {Object} CSSStyleDeclaration property
 
 
diff --git a/lib/css-tools.js b/lib/css-tools.js
index 58d65e12f..09a2b4d43 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -9,7 +9,7 @@ var csstree     = require('css-tree'),
 /**
  * Flatten a CSS AST to a selectors list.
  *
- * @param {Object} cssAst CSSO AST to flatten
+ * @param {Object} cssAst css-tree AST to flatten
  * @return {Array} selectors
  */
 function flattenToSelectors(cssAst) {
@@ -157,15 +157,15 @@ function sortSelectors(selectors) {
 
 
 /**
- * Convert a CSSO AST style declaration to CSSStyleDeclaration property.
+ * Convert a css-tree AST style declaration to CSSStyleDeclaration property.
  *
- * @param {Object} cssoDeclaration CSSO style declaration
+ * @param {Object} declaration css-tree style declaration
  * @return {Object} CSSStyleDeclaration property
  */
-function cssoToStyleDeclaration(cssoDeclaration) {
-    var propertyName = cssoDeclaration.property,
-        propertyValue = csstree.translate(cssoDeclaration.value),
-        propertyPriority = (cssoDeclaration.important ? 'important' : '');
+function csstreeToStyleDeclaration(declaration) {
+    var propertyName = declaration.property,
+        propertyValue = csstree.translate(declaration.value),
+        propertyPriority = (declaration.important ? 'important' : '');
     return {
         name: propertyName,
         value: propertyValue,
@@ -185,4 +185,4 @@ module.exports.compareSimpleSelectorNode = compareSimpleSelectorNode;
 
 module.exports.sortSelectors = sortSelectors;
 
-module.exports.cssoToStyleDeclaration = cssoToStyleDeclaration;
+module.exports.csstreeToStyleDeclaration = csstreeToStyleDeclaration;
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index aaa814089..aa1688a8a 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -91,9 +91,9 @@ CSSStyleDeclaration.prototype._loadCssText = function() {
     }
     var inlineCssStr = this.styleValue;
 
-    var cssoDeclarations = {};
+    var declarations = {};
     try {
-        cssoDeclarations = csstree.parse(inlineCssStr, {
+        declarations = csstree.parse(inlineCssStr, {
             context: 'declarationList',
             parseValue: false
         });
@@ -104,8 +104,8 @@ CSSStyleDeclaration.prototype._loadCssText = function() {
     this.parseError = false;
 
     var self = this;
-    cssoDeclarations.children.each(function(cssoDeclaration) {
-        var styleDeclaration = csstools.cssoToStyleDeclaration(cssoDeclaration);
+    declarations.children.each(function(declaration) {
+        var styleDeclaration = csstools.csstreeToStyleDeclaration(declaration);
         self.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
     });
 };
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 1fe6ba880..ff79fa0d7 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -130,8 +130,8 @@ exports.fn = function(document, opts) {
             }
 
             // merge declarations
-            csstree.walkDeclarations(selector.rule, function(styleCssoDeclaration) {
-                var styleDeclaration = cssTools.cssoToStyleDeclaration(styleCssoDeclaration);
+            csstree.walkDeclarations(selector.rule, function(styleCsstreeDeclaration) {
+                var styleDeclaration = cssTools.csstreeToStyleDeclaration(styleCsstreeDeclaration);
                 if (selectedEl.style.getPropertyValue(styleDeclaration.name) !== null &&
                     selectedEl.style.getPropertyPriority(styleDeclaration.name) >= styleDeclaration.priority) {
                     return;

From 1bc554233d78af2d9f4d337c5e8de8195b4a9cab Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 4 Apr 2017 01:11:48 +0200
Subject: [PATCH 155/162] Pin css-tree to alpha18.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 02cc8c3ea..0967c78ad 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "colors": "~1.1.2",
     "css-select": "^1.3.0-rc0",
     "css-select-base-adapter": "^0.1.0",
-    "css-tree": "^1.0.0-alpha18",
+    "css-tree": "1.0.0-alpha18",
     "csso": "^3.0.1",
     "js-yaml": "~3.7.0",
     "mkdirp": "~0.5.1",

From 64106c297b099b28706279729a783c05b47503c7 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Tue, 4 Apr 2017 15:54:50 +0200
Subject: [PATCH 156/162] Adjust test to style output format.

---
 test/plugins/removeScriptElement.01.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/plugins/removeScriptElement.01.svg b/test/plugins/removeScriptElement.01.svg
index b3655db01..e242aa520 100644
--- a/test/plugins/removeScriptElement.01.svg
+++ b/test/plugins/removeScriptElement.01.svg
@@ -7,6 +7,6 @@
 @@@
 
 <?xml version="1.0" encoding="utf-16"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100" xml:space="preserve">
     <circle class="st0" cx="50" cy="50" r="50"/>
 </svg>

From f45c1f3e57c06954d5dadbb61e9d5d032e3e8961 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 14 Apr 2017 07:19:53 +0200
Subject: [PATCH 157/162] Add some css-style-declaration integration
 improvements.

---
 lib/svgo/jsAPI.js  | 6 ++----
 lib/svgo/svg2js.js | 8 ++++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index 6d11c2aca..c97f89522 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -1,7 +1,6 @@
 'use strict';
 
-var cssSelect = require('css-select'),
-    CSSStyleDeclaration = require('./css-style-declaration');
+var cssSelect = require('css-select');
 
 var svgoCssSelectAdapter = require('./css-select-adapter');
 var cssSelectOpts = {
@@ -261,8 +260,7 @@ JSAPI.prototype.renameElem = function(name) {
     this.attrs = this.attrs || {};
     this.attrs[attr.name] = attr;
 
-    this.style = new CSSStyleDeclaration(this);
-    if(attr.name === 'style') {
+    if(attr.name === 'style') { // newly added style attribute
         this.style.hasStyle();
     }
 
diff --git a/lib/svgo/svg2js.js b/lib/svgo/svg2js.js
index 385c55d16..84892749e 100644
--- a/lib/svgo/svg2js.js
+++ b/lib/svgo/svg2js.js
@@ -88,17 +88,17 @@ module.exports = function(data, callback) {
             prefix: data.prefix,
             local: data.local
         };
+        elem.style = new CSSStyleDeclaration(elem);
 
         if (Object.keys(data.attributes).length) {
             elem.attrs = {};
 
-            elem.style = new CSSStyleDeclaration(elem);
 
             for (var name in data.attributes) {
 
-              if (name === 'style') {
-                  elem.style.hasStyle();
-              }
+                if (name === 'style') { // has style attribute
+                    elem.style.hasStyle();
+                }
 
                 elem.attrs[name] = {
                     name: name,

From ec6ac966a68edaaebbac8d37011ac2deb822bea4 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Mon, 17 Apr 2017 08:28:37 +0200
Subject: [PATCH 158/162] Improve handling of indexOf boolean.

---
 lib/css-tools.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 09a2b4d43..ba212b2e0 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -58,7 +58,7 @@ function flattenToSelectors(cssAst) {
 function filterByMqs(selectors, useMqs) {
     return selectors.filter(function(selector) {
         if (selector.atrule === null) {
-            return useMqs.indexOf('') > -1;
+            return ~useMqs.indexOf('');
         }
 
         var mqName = selector.atrule.name;
@@ -68,7 +68,7 @@ function filterByMqs(selectors, useMqs) {
             mqStr = [mqName, mqExpr].join(' ');
         }
 
-        return useMqs.indexOf(mqStr) > -1;
+        return ~useMqs.indexOf(mqStr);
     });
 }
 
@@ -87,7 +87,7 @@ function filterByPseudos(selectors, usePseudos) {
                 return pseudo.item.data;
             }))
         });
-        return usePseudos.indexOf(pseudoSelectorsStr) > -1;
+        return ~usePseudos.indexOf(pseudoSelectorsStr);
     });
 }
 

From a8237a1c79f4a22505c9ecde6191cc712704e4de Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Thu, 20 Apr 2017 18:50:29 +0200
Subject: [PATCH 159/162] Add csstools methods for better getting/setting CSS
 strings of style elements.

---
 docs/how-it-works/en.md | 10 ++++++++++
 lib/css-tools.js        | 33 +++++++++++++++++++++++++++++++++
 plugins/inlineStyles.js |  4 ++--
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/docs/how-it-works/en.md b/docs/how-it-works/en.md
index 4b5782dd4..14f473168 100644
--- a/docs/how-it-works/en.md
+++ b/docs/how-it-works/en.md
@@ -296,6 +296,16 @@ And of course, writing plugins would not have been so cool without some sugar AP
   * @param {Object} css-tree style declaration
   * @return {Object} CSSStyleDeclaration property
 
+##### css-tools.getCssStr(elem)
+  * Gets the CSS string of a style element
+  * @param {Object} element style element
+  * @return {String|Array} CSS string or empty array if no styles are set
+
+##### css-tools.csstreeToStyleDeclaration(elem, css)
+  * @param {Object} element style element
+  * @param {String} CSS string to be set
+  * @return {Object} reference to field with CSS
+
 
 #### 3.3 tests
 
diff --git a/lib/css-tools.js b/lib/css-tools.js
index ba212b2e0..0e1afcfd7 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -174,6 +174,36 @@ function csstreeToStyleDeclaration(declaration) {
 }
 
 
+/**
+ * Gets the CSS string of a style element
+ *
+ * @param {Object} element style element
+ * @return {String|Array} CSS string or empty array if no styles are set
+ */
+function getCssStr(elem) {
+    return elem.content[0].text || elem.content[0].cdata || [];
+}
+
+/**
+ * Sets the CSS string of a style element
+ *
+ * @param {Object} element style element
+ * @param {String} CSS string to be set
+ * @return {Object} reference to field with CSS
+ */
+function setCssStr(elem, css) {
+    // in case of cdata field
+    if(elem.content[0].cdata) {
+        elem.content[0].cdata = css;
+        return elem.content[0].cdata;
+    }
+
+    // in case of text field + if nothing was set yet
+    elem.content[0].text  = css;
+    return elem.content[0].text;
+}
+
+
 module.exports.flattenToSelectors = flattenToSelectors;
 
 module.exports.filterByMqs = filterByMqs;
@@ -186,3 +216,6 @@ module.exports.compareSimpleSelectorNode = compareSimpleSelectorNode;
 module.exports.sortSelectors = sortSelectors;
 
 module.exports.csstreeToStyleDeclaration = csstreeToStyleDeclaration;
+
+module.exports.getCssStr = getCssStr;
+module.exports.setCssStr = setCssStr;
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index ff79fa0d7..06dc1a249 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -59,7 +59,7 @@ exports.fn = function(document, opts) {
             // skip empty <style/>s
             continue;
         }
-        var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];
+        var cssStr = cssTools.getCssStr(styleEl);
 
         // collect <style/>s and their css ast
         var cssAst = {};
@@ -184,7 +184,7 @@ exports.fn = function(document, opts) {
 
 
         // update existing, left over <style>s
-        style.styleEl.content[0].text = csstree.translate(style.cssAst);
+        cssTools.setCssStr(style.styleEl, csstree.translate(style.cssAst));
     }
 
 

From 912dd0898c8e176028e8d533b32be902c6dfc851 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 8 Sep 2017 16:11:56 +0200
Subject: [PATCH 160/162] Add clean up for class + ID attributes, adjust tests.
 Add css class list API. Improve code.

---
 lib/svgo/css-class-list.js        | 116 ++++++++++++++++++++++++++++++
 lib/svgo/css-style-declaration.js |  16 +++++
 lib/svgo/jsAPI.js                 |   4 ++
 lib/svgo/svg2js.js                |   6 ++
 package.json                      |   7 +-
 plugins/inlineStyles.js           |  58 +++++++++++++--
 test/plugins/inlineStyles.02.svg  |   2 +-
 test/plugins/inlineStyles.03.svg  |   7 +-
 test/plugins/inlineStyles.04.svg  |   2 +-
 test/plugins/inlineStyles.05.svg  |   2 +-
 test/plugins/inlineStyles.06.svg  |   4 +-
 test/plugins/inlineStyles.07.svg  |   2 +-
 test/plugins/inlineStyles.08.svg  |   2 +-
 test/plugins/inlineStyles.09.svg  |   2 +-
 test/plugins/inlineStyles.10.svg  |   2 +-
 test/plugins/inlineStyles.11.svg  |   2 +-
 test/plugins/inlineStyles.12.svg  |   2 +-
 test/plugins/inlineStyles.13.svg  |   2 +-
 test/plugins/inlineStyles.14.svg  |   2 +-
 test/plugins/inlineStyles.16.svg  |  40 +++++++++++
 20 files changed, 252 insertions(+), 28 deletions(-)
 create mode 100644 lib/svgo/css-class-list.js
 create mode 100644 test/plugins/inlineStyles.16.svg

diff --git a/lib/svgo/css-class-list.js b/lib/svgo/css-class-list.js
new file mode 100644
index 000000000..28e5816a2
--- /dev/null
+++ b/lib/svgo/css-class-list.js
@@ -0,0 +1,116 @@
+'use strict';
+
+var values = require('object.values');
+if (!Object.values) {
+    values.shim();
+}
+
+
+var CSSClassList = function(node) {
+    this.parentNode = node;
+    this.classNames = new Set();
+    this.classAttr = null;
+    //this.classValue = null;
+};
+
+
+CSSClassList.prototype.hasClass = function() {
+    this.classAttr = { // empty class attr
+        'name': 'class',
+        'value': null
+    };
+
+    this.addClassHandler();
+};
+
+
+// attr.class
+
+CSSClassList.prototype.addClassHandler = function() {
+
+    Object.defineProperty(this.parentNode.attrs, 'class', {
+        get: this.getClassAttr.bind(this),
+        set: this.setClassAttr.bind(this),
+        enumerable: true,
+        configurable: true
+    });
+
+    this.addClassValueHandler();
+};
+
+// attr.class.value
+
+CSSClassList.prototype.addClassValueHandler = function() {
+
+    Object.defineProperty(this.classAttr, 'value', {
+        get: this.getClassValue.bind(this),
+        set: this.setClassValue.bind(this),
+        enumerable: true,
+        configurable: true
+    });
+};
+
+CSSClassList.prototype.getClassAttr = function() {
+    return this.classAttr;
+};
+
+CSSClassList.prototype.setClassAttr = function(newClassAttr) {
+    this.setClassValue(newClassAttr.value); // must before applying value handler!
+
+    this.classAttr = newClassAttr;
+    this.addClassValueHandler();
+};
+
+CSSClassList.prototype.getClassValue = function() {
+    var arrClassNames = Array.from(this.classNames);
+    return arrClassNames.join(' ');
+};
+
+CSSClassList.prototype.setClassValue = function(newValue) {
+    if(typeof newValue === 'undefined') {
+      this.classNames.clear();
+      return;
+    }
+    var arrClassNames = newValue.split(' ');
+    this.classNames = new Set(arrClassNames);
+};
+
+
+CSSClassList.prototype.add = function(/* variadic */) {
+    this.hasClass();
+    Object.values(arguments).forEach(this._addSingle.bind(this));
+};
+
+CSSClassList.prototype._addSingle = function(className) {
+    this.classNames.add(className);
+};
+
+
+CSSClassList.prototype.remove = function(/* variadic */) {
+    this.hasClass();
+    Object.values(arguments).forEach(this._removeSingle.bind(this));
+};
+
+CSSClassList.prototype._removeSingle = function(className) {
+    this.classNames.delete(className);
+};
+
+
+CSSClassList.prototype.item = function(index) {
+    var arrClassNames = Array.from(this.classNames);
+    return arrClassNames[index];
+};
+
+CSSClassList.prototype.toggle = function(className, force) {
+    if(this.contains(className) || force === false) {
+        this.classNames.delete(className);
+    }
+    this.classNames.add(className);
+};
+
+CSSClassList.prototype.contains = function(className) {
+    return this.classNames.has(className);
+};
+
+
+module.exports = CSSClassList;
\ No newline at end of file
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index aa1688a8a..43527fd10 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -142,6 +142,10 @@ CSSStyleDeclaration.prototype._handleParseError = function() {
 
 
 CSSStyleDeclaration.prototype._getProperty = function(propertyName) {
+    if(typeof propertyName === 'undefined') {
+        throw Error('1 argument required, but only 0 present.');
+    }
+
     var properties = this.getProperties();
     this._handleParseError();
 
@@ -178,6 +182,10 @@ CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName) {
  * @return {String} propertyName that is the name of the CSS property at the specified index.
  */
 CSSStyleDeclaration.prototype.item = function(index) {
+    if(typeof index === 'undefined') {
+        throw Error('1 argument required, but only 0 present.');
+    }
+
     var properties = this.getProperties();
     this._handleParseError();
 
@@ -204,6 +212,10 @@ CSSStyleDeclaration.prototype.getProperties = function() {
  * @return {String} oldValue equal to the value of the CSS property before it was removed.
  */
 CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
+    if(typeof propertyName === 'undefined') {
+        throw Error('1 argument required, but only 0 present.');
+    }
+
     this.hasStyle();
 
     var properties = this.getProperties();
@@ -223,6 +235,10 @@ CSSStyleDeclaration.prototype.removeProperty = function(propertyName) {
  * @return {undefined}
  */
 CSSStyleDeclaration.prototype.setProperty = function(propertyName, value, priority) {
+    if(typeof propertyName === 'undefined') {
+        throw Error('propertyName argument required, but only not present.');
+    }
+
     this.hasStyle();
 
     var properties = this.getProperties();
diff --git a/lib/svgo/jsAPI.js b/lib/svgo/jsAPI.js
index c97f89522..db966ee5b 100644
--- a/lib/svgo/jsAPI.js
+++ b/lib/svgo/jsAPI.js
@@ -260,6 +260,10 @@ JSAPI.prototype.renameElem = function(name) {
     this.attrs = this.attrs || {};
     this.attrs[attr.name] = attr;
 
+    if(attr.name === 'class') { // newly added class attribute
+        this.class.hasClass();
+    }
+
     if(attr.name === 'style') { // newly added style attribute
         this.style.hasStyle();
     }
diff --git a/lib/svgo/svg2js.js b/lib/svgo/svg2js.js
index 84892749e..690e96e8a 100644
--- a/lib/svgo/svg2js.js
+++ b/lib/svgo/svg2js.js
@@ -2,6 +2,7 @@
 
 var SAX = require('sax'),
     JSAPI = require('./jsAPI.js'),
+    CSSClassList = require('./css-class-list'),
     CSSStyleDeclaration = require('./css-style-declaration'),
     entityDeclaration = /<!ENTITY\s+(\S+)\s+(?:'([^\']+)'|"([^\"]+)")\s*>/g;
 
@@ -88,6 +89,7 @@ module.exports = function(data, callback) {
             prefix: data.prefix,
             local: data.local
         };
+        elem.class = new CSSClassList(elem);
         elem.style = new CSSStyleDeclaration(elem);
 
         if (Object.keys(data.attributes).length) {
@@ -96,6 +98,10 @@ module.exports = function(data, callback) {
 
             for (var name in data.attributes) {
 
+                if (name === 'class') { // has class attribute
+                    elem.class.hasClass();
+                }
+
                 if (name === 'style') { // has style attribute
                     elem.style.hasStyle();
                 }
diff --git a/package.json b/package.json
index 8e0ec6996..5d554a567 100644
--- a/package.json
+++ b/package.json
@@ -56,18 +56,19 @@
     "csso": "^3.0.1",
     "js-yaml": "~3.7.0",
     "mkdirp": "~0.5.1",
+    "object.values": "^1.0.4",
     "sax": "~1.2.1",
     "stable": "^0.1.5",
     "whet.extend": "~0.9.9"
   },
   "devDependencies": {
+    "coveralls": "~2.11.14",
     "fs-extra": "~4.0.1",
-    "mocha": "~3.2.0",
-    "should": "11.2.0",
     "istanbul": "~0.4.5",
+    "mocha": "~3.2.0",
     "mocha-istanbul": "~0.3.0",
     "mock-stdin": "~0.3.1",
-    "coveralls": "~2.11.14"
+    "should": "11.2.0"
   },
   "engines": {
     "node": ">=4.0.0"
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index 06dc1a249..13d9c6161 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -97,8 +97,11 @@ exports.fn = function(document, opts) {
     var sortedSelectors = cssTools.sortSelectors(selectorsPseudo).reverse();
 
 
-    // apply <style/> styles to matched elements
-    for (var selector of sortedSelectors) {
+    var selector,
+        selectedEl;
+
+    // match selectors
+    for (selector of sortedSelectors) {
         var selectorStr = csstree.translate(selector.item.data),
             selectedEls = null;
 
@@ -117,20 +120,34 @@ exports.fn = function(document, opts) {
             continue;
         }
 
-        if (opts.onlyMatchedOnce && selectedEls !== null && selectedEls.length > 1) {
+        selector.selectedEls = selectedEls;
+    }
+
+
+    // apply <style/> styles to matched elements
+    for (selector of sortedSelectors) {
+        if(!selector.selectedEls) {
+            continue;
+        }
+
+        if (opts.onlyMatchedOnce && selector.selectedEls !== null && selector.selectedEls.length > 1) {
             // skip selectors that match more than once if option onlyMatchedOnce is enabled
             continue;
         }
 
         // apply <style/> to matched elements
-        for (var selectedEl of selectedEls) {
-
+        for (selectedEl of selector.selectedEls) {
             if (selector.rule === null) {
                 continue;
             }
 
             // merge declarations
             csstree.walkDeclarations(selector.rule, function(styleCsstreeDeclaration) {
+
+                // existing inline styles have higher priority
+                // no inline styles, external styles,                                    external styles used
+                // inline styles,    external styles same   priority as inline styles,   inline   styles used
+                // inline styles,    external styles higher priority than inline styles, external styles used
                 var styleDeclaration = cssTools.csstreeToStyleDeclaration(styleCsstreeDeclaration);
                 if (selectedEl.style.getPropertyValue(styleDeclaration.name) !== null &&
                     selectedEl.style.getPropertyPriority(styleDeclaration.name) >= styleDeclaration.priority) {
@@ -138,16 +155,43 @@ exports.fn = function(document, opts) {
                 }
                 selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
             });
-
         }
 
-        if (opts.removeMatchedSelectors && selectedEls !== null && selectedEls.length > 0) {
+        if (opts.removeMatchedSelectors && selector.selectedEls !== null && selector.selectedEls.length > 0) {
             // clean up matching simple selectors if option removeMatchedSelectors is enabled
             selector.rule.selector.children.remove(selector.item);
         }
     }
 
 
+    if (opts.removeMatchedSelectors) {
+        // clean up matched class + ID attribute values
+        for (selector of sortedSelectors) {
+            if(!selector.selectedEls) {
+                continue;
+            }
+
+            for (selectedEl of selector.selectedEls) {
+                // class
+                var firstSubSelector = selector.item.data.children.first();
+                if(firstSubSelector.type === 'ClassSelector') {
+                    selectedEl.class.remove(firstSubSelector.name);
+                }
+                // clean up now empty class attributes
+                if(typeof selectedEl.class.item(0) === 'undefined') {
+                    selectedEl.removeAttr('class');
+                }
+
+                // ID
+                if(firstSubSelector.type === 'IdSelector') {
+                    selectedEl.removeAttr('id', firstSubSelector.name);
+                }
+            }
+        }
+    }
+
+
+    // clean up elements
     for (var style of styles) {
         csstree.walkRules(style.cssAst, function(node, item, list) {
             // clean up <style/> atrules without any rulesets left
diff --git a/test/plugins/inlineStyles.02.svg b/test/plugins/inlineStyles.02.svg
index 045d01b80..e7f2794cd 100644
--- a/test/plugins/inlineStyles.02.svg
+++ b/test/plugins/inlineStyles.02.svg
@@ -8,5 +8,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill:blue"/>
+    <rect width="100" height="100" style="fill:blue"/>
 </svg>
diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index 2ddadafa7..0335fca93 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -4,20 +4,17 @@
         .cls-7 {
             only-cls-7: 1;
         }
-        .cls-7,
-        .cls-8 {
+        .cls-7 {
             cls-7-and-8: 1;
         }
     </style>
 
     <path class="cls-7"/>
-    <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8"/>
 </svg>
 
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
 <!--for https://github.com/svg/svgo/pull/592#issuecomment-266327016-->
-    <path class="cls-7" style="cls-7-and-8:1;only-cls-7:1"/>
-    <path d="M172.44 18.6c6.51-4.94 13 3.16 13 3.16l-14.57 10.09s-7.02-6.77 1.57-13.25z" class="cls-8" style="cls-7-and-8:1"/>
+    <path style="cls-7-and-8:1;only-cls-7:1"/>
 </svg>
diff --git a/test/plugins/inlineStyles.04.svg b/test/plugins/inlineStyles.04.svg
index 3602750f4..a4ba6dc72 100644
--- a/test/plugins/inlineStyles.04.svg
+++ b/test/plugins/inlineStyles.04.svg
@@ -9,5 +9,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0 st1" style="fill:red"/>
+    <rect width="100" height="100" style="fill:red"/>
 </svg>
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
index 1b0458b81..1d8f86040 100644
--- a/test/plugins/inlineStyles.05.svg
+++ b/test/plugins/inlineStyles.05.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0 st1" style="color:yellow;fill:red"/>
+    <rect width="100" height="100" style="color:yellow;fill:red"/>
 </svg>
diff --git a/test/plugins/inlineStyles.06.svg b/test/plugins/inlineStyles.06.svg
index 385054644..3490e8618 100644
--- a/test/plugins/inlineStyles.06.svg
+++ b/test/plugins/inlineStyles.06.svg
@@ -14,8 +14,8 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="red blue" style="fill:blue"/>
-    <rect width="100" height="100" class="blue red" style="fill:blue"/>
+    <rect width="100" height="100" style="fill:blue"/>
+    <rect width="100" height="100" style="fill:blue"/>
 </svg>
 
 @@@
diff --git a/test/plugins/inlineStyles.07.svg b/test/plugins/inlineStyles.07.svg
index 5fb70c63e..a2f2f40cb 100644
--- a/test/plugins/inlineStyles.07.svg
+++ b/test/plugins/inlineStyles.07.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:red!important"/>
+    <rect width="100" height="100" style="fill:red!important"/>
 </svg>
diff --git a/test/plugins/inlineStyles.08.svg b/test/plugins/inlineStyles.08.svg
index a76bcb6a1..3224d0e9f 100644
--- a/test/plugins/inlineStyles.08.svg
+++ b/test/plugins/inlineStyles.08.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:red!important"/>
+    <rect width="100" height="100" style="fill:red!important"/>
 </svg>
diff --git a/test/plugins/inlineStyles.09.svg b/test/plugins/inlineStyles.09.svg
index 62fb82aa7..025064b50 100644
--- a/test/plugins/inlineStyles.09.svg
+++ b/test/plugins/inlineStyles.09.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="blue red" style="fill:yellow!important"/>
+    <rect width="100" height="100" style="fill:yellow!important"/>
 </svg>
diff --git a/test/plugins/inlineStyles.10.svg b/test/plugins/inlineStyles.10.svg
index f0cbd1dc4..a555dcec8 100644
--- a/test/plugins/inlineStyles.10.svg
+++ b/test/plugins/inlineStyles.10.svg
@@ -10,5 +10,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="fill:blue"/>
+    <rect width="100" height="100" style="fill:blue"/>
 </svg>
diff --git a/test/plugins/inlineStyles.11.svg b/test/plugins/inlineStyles.11.svg
index e7b75eea2..2ce5a9e1a 100644
--- a/test/plugins/inlineStyles.11.svg
+++ b/test/plugins/inlineStyles.11.svg
@@ -12,5 +12,5 @@
     <style>
         .st0:hover{stroke:red}
     </style>
-    <rect width="100" height="100" class="st0" style="fill:blue"/>
+    <rect width="100" height="100" style="fill:blue"/>
 </svg>
diff --git a/test/plugins/inlineStyles.12.svg b/test/plugins/inlineStyles.12.svg
index f5eeeca6d..0b7312b0a 100644
--- a/test/plugins/inlineStyles.12.svg
+++ b/test/plugins/inlineStyles.12.svg
@@ -8,7 +8,7 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" class="st0" style="stroke:red"/>
+    <rect width="100" height="100" style="stroke:red"/>
 </svg>
 
 @@@
diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
index 362b000c4..5c7b39616 100644
--- a/test/plugins/inlineStyles.13.svg
+++ b/test/plugins/inlineStyles.13.svg
@@ -64,5 +64,5 @@
             @charset &apos;UTF-8&apos;;@namespace svg url(http://www.w3.org/2000/svg);@import url(&apos;https://fonts.googleapis.com/css?family=Roboto&apos;);@font-face{font-family: SomeFont;src: local(&quot;Some Font&quot;), local(&quot;SomeFont&quot;), url(SomeFont.ttf);font-weight: bold}@viewport{zoom: 0.8;min-zoom: 0.4;max-zoom: 0.9}@keyframes identifier{0%{top: 0}50%{top: 30px;left: 20px}50%{top: 10px}100%{top: 0}}@page :first{margin: 1in}@supports (display: flex){.module{display: flex}}@document url(&apos;http://example.com/test.html&apos;){rect{stroke: red}}
         </style>
     </defs>
-    <rect width="100" height="100" class="blue" style="fill:blue"/>
+    <rect width="100" height="100" style="fill:blue"/>
 </svg>
diff --git a/test/plugins/inlineStyles.14.svg b/test/plugins/inlineStyles.14.svg
index dc1596048..74e17a55f 100644
--- a/test/plugins/inlineStyles.14.svg
+++ b/test/plugins/inlineStyles.14.svg
@@ -17,7 +17,7 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.285 81.285">
-    <rect width="100" height="100" class="blue" style="fill:blue"/>
+    <rect width="100" height="100" style="fill:blue"/>
 </svg>
 
 @@@
diff --git a/test/plugins/inlineStyles.16.svg b/test/plugins/inlineStyles.16.svg
new file mode 100644
index 000000000..bdcb1ad5a
--- /dev/null
+++ b/test/plugins/inlineStyles.16.svg
@@ -0,0 +1,40 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222 57.28">
+    <defs>
+        <style>
+            #id0 {
+                stroke: red;
+            }
+
+            .cls-1 {
+                fill: #37d0cd;
+            }
+
+            .cls-2{
+                fill: #fff;
+            }
+        </style>
+    </defs>
+    <title>button</title>
+    <rect id="id0" class="cls-1" width="222" height="57.28" rx="28.64" ry="28.64"/>
+    <path class="cls-2" d="M312.75,168.66A2.15,2.15,0,0,1,311.2,165L316,160l-4.8-5a2.15,2.15,0,1,1,3.1-3l6.21,6.49a2.15,2.15,0,0,1,0,3L314.31,168a2.14,2.14,0,0,1-1.56.67Zm0,0" transform="translate(-119 -131.36)"/>
+    <circle class="cls-2" cx="33.5" cy="27.25" r="2.94"/>
+    <circle class="cls-2" cx="162.5" cy="158.61" r="2.94" transform="translate(-181.03 61.15) rotate(-52.89)"/>
+    <circle class="cls-2" cx="172.5" cy="158.61" r="2.94" transform="translate(-157.03 -75.67) rotate(-16.55)"/>
+</svg>
+
+@@@
+
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222 57.28">
+    <title>
+        button
+    </title>
+    <rect width="222" height="57.28" rx="28.64" ry="28.64" style="stroke:red;fill:#37d0cd"/>
+    <path d="M312.75,168.66A2.15,2.15,0,0,1,311.2,165L316,160l-4.8-5a2.15,2.15,0,1,1,3.1-3l6.21,6.49a2.15,2.15,0,0,1,0,3L314.31,168a2.14,2.14,0,0,1-1.56.67Zm0,0" transform="translate(-119 -131.36)" style="fill:#fff"/>
+    <circle cx="33.5" cy="27.25" r="2.94" style="fill:#fff"/>
+    <circle cx="162.5" cy="158.61" r="2.94" transform="translate(-181.03 61.15) rotate(-52.89)" style="fill:#fff"/>
+    <circle cx="172.5" cy="158.61" r="2.94" transform="translate(-157.03 -75.67) rotate(-16.55)" style="fill:#fff"/>
+</svg>
+
+@@@
+
+{"onlyMatchedOnce":false}

From 165fec488b1412038d7b8413f0e28baee01e4341 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 8 Sep 2017 16:31:07 +0200
Subject: [PATCH 161/162] Fix test 03.

---
 test/plugins/inlineStyles.03.svg | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index 0335fca93..32f554268 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -4,7 +4,8 @@
         .cls-7 {
             only-cls-7: 1;
         }
-        .cls-7 {
+        .cls-7,
+        .cls-8 {
             cls-7-and-8: 1;
         }
     </style>
@@ -16,5 +17,8 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" id="dark" viewBox="0 0 258.12 225.88">
 <!--for https://github.com/svg/svgo/pull/592#issuecomment-266327016-->
+    <style>
+        .cls-8{cls-7-and-8: 1}
+    </style>
     <path style="cls-7-and-8:1;only-cls-7:1"/>
 </svg>

From 43dae25d0991dc01209a7236f6bb866cd099d14e Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Fri, 8 Sep 2017 17:14:13 +0200
Subject: [PATCH 162/162] Update css-tree to alpha22.

---
 lib/css-tools.js | 3 ++-
 package.json     | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 0e1afcfd7..e054f6bb2 100644
--- a/lib/css-tools.js
+++ b/lib/css-tools.js
@@ -63,7 +63,8 @@ function filterByMqs(selectors, useMqs) {
 
         var mqName = selector.atrule.name;
         var mqStr = mqName;
-        if (selector.atrule.expression.type === 'MediaQueryList') {
+        if (selector.atrule.expression &&
+            selector.atrule.expression.children.first().type === 'MediaQueryList') {
             var mqExpr = csstree.translate(selector.atrule.expression);
             mqStr = [mqName, mqExpr].join(' ');
         }
diff --git a/package.json b/package.json
index 5d554a567..a975ea1af 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "colors": "~1.1.2",
     "css-select": "^1.3.0-rc0",
     "css-select-base-adapter": "^0.1.0",
-    "css-tree": "1.0.0-alpha18",
+    "css-tree": "1.0.0-alpha22",
     "csso": "^3.0.1",
     "js-yaml": "~3.7.0",
     "mkdirp": "~0.5.1",