Upgrade css-tree from alpha25 to alpha.28

API changed walkFoo(ast, fun) to walk(ast,{visit: 'Rule',enter: fun)
csstree.translate renamed to csstree.generate
csstree.generate throws an error on invalid style where translate silently ignored it - update style processing to catch and ignore instead
Updated tests - csstree now omits more whitespace

lib/css-tools.js

@@ -15,7 +15,7 @@ var csstree     = require('css-tree'),
 function flattenToSelectors(cssAst) {
     var selectors = [];
 
-    csstree.walkRules(cssAst, function(node) {
+    csstree.walk(cssAst, {visit: 'Rule', enter: function(node) {
         if (node.type !== 'Rule') {
             return;
         }
@@ -43,7 +43,7 @@ function flattenToSelectors(cssAst) {
 
             selectors.push(selector);
         });
-    });
+    }});
 
     return selectors;
 }
@@ -65,7 +65,7 @@ function filterByMqs(selectors, useMqs) {
         var mqStr = mqName;
         if (selector.atrule.expression &&
             selector.atrule.expression.children.first().type === 'MediaQueryList') {
-            var mqExpr = csstree.translate(selector.atrule.expression);
+            var mqExpr = csstree.generate(selector.atrule.expression);
             mqStr = [mqName, mqExpr].join(' ');
         }
 
@@ -82,7 +82,7 @@ function filterByMqs(selectors, useMqs) {
  */
 function filterByPseudos(selectors, usePseudos) {
     return selectors.filter(function(selector) {
-        var pseudoSelectorsStr = csstree.translate({
+        var pseudoSelectorsStr = csstree.generate({
             type: 'Selector',
             children: new List().fromArray(selector.pseudos.map(function(pseudo) {
                 return pseudo.item.data;
@@ -165,7 +165,7 @@ function sortSelectors(selectors) {
  */
 function csstreeToStyleDeclaration(declaration) {
     var propertyName = declaration.property,
-        propertyValue = csstree.translate(declaration.value),
+        propertyValue = csstree.generate(declaration.value),
         propertyPriority = (declaration.important ? 'important' : '');
     return {
         name: propertyName,

lib/svgo/css-style-declaration.js

@@ -127,8 +127,14 @@ CSSStyleDeclaration.prototype._loadCssText = function() {
 
     var self = this;
     declarations.children.each(function(declaration) {
-        var styleDeclaration = csstools.csstreeToStyleDeclaration(declaration);
-        self.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
+        try {
+          var styleDeclaration = csstools.csstreeToStyleDeclaration(declaration);
+          self.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
+        } catch(styleError) {
+            if(styleError.message !== 'Unknown node type: undefined') {
+                self.parseError = styleError;
+            }
+        }
     });
 };
 

package.json

@@ -53,7 +53,7 @@
     "colors": "~1.1.2",
     "css-select": "~1.3.0-rc0",
     "css-select-base-adapter": "~0.1.0",
-    "css-tree": "1.0.0-alpha25",
+    "css-tree": "1.0.0-alpha.28",
     "css-url-regex": "^1.1.0",
     "csso": "^3.5.0",
     "js-yaml": "~3.10.0",

plugins/inlineStyles.js

@@ -103,7 +103,7 @@ exports.fn = function(document, opts) {
 
     // match selectors
     for (selector of sortedSelectors) {
-        var selectorStr = csstree.translate(selector.item.data),
+        var selectorStr = csstree.generate(selector.item.data),
             selectedEls = null;
 
         try {
@@ -143,7 +143,7 @@ exports.fn = function(document, opts) {
             }
 
             // merge declarations
-            csstree.walkDeclarations(selector.rule, function(styleCsstreeDeclaration) {
+            csstree.walk(selector.rule, {visit: 'Declaration', enter: function(styleCsstreeDeclaration) {
 
                 // existing inline styles have higher priority
                 // no inline styles, external styles,                                    external styles used
@@ -155,7 +155,7 @@ exports.fn = function(document, opts) {
                     return;
                 }
                 selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
-            });
+            }});
         }
 
         if (opts.removeMatchedSelectors && selector.selectedEls !== null && selector.selectedEls.length > 0) {
@@ -202,7 +202,7 @@ exports.fn = function(document, opts) {
 
     // clean up now empty elements
     for (var style of styles) {
-        csstree.walkRules(style.cssAst, function(node, item, list) {
+        csstree.walk(style.cssAst, {visit: 'Rule', enter: function(node, item, list) {
             // clean up <style/> atrules without any rulesets left
             if (node.type === 'Atrule' &&
                 // only Atrules containing rulesets
@@ -217,7 +217,7 @@ exports.fn = function(document, opts) {
                 node.prelude.children.isEmpty()) {
                 list.remove(item);
             }
-        });
+        }});
 
 
         if (style.cssAst.children.isEmpty()) {
@@ -237,7 +237,7 @@ exports.fn = function(document, opts) {
 
 
         // update existing, left over <style>s
-        cssTools.setCssStr(style.styleEl, csstree.translate(style.cssAst));
+        cssTools.setCssStr(style.styleEl, csstree.generate(style.cssAst));
     }
 
 

plugins/prefixIds.js

@@ -194,7 +194,7 @@ exports.fn = function(node, opts, extra) {
         });
 
         // update <style>s
-        node.content[0].text = csstree.translate(cssAst);
+        node.content[0].text = csstree.generate(cssAst);
         return node;
     }
 

test/plugins/inlineStyles.03.svg

@@ -18,7 +18,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-->
     <style>
-        .cls-8{cls-7-and-8: 1}
+        .cls-8{cls-7-and-8:1}
     </style>
     <path style="cls-7-and-8:1;only-cls-7:1"/>
 </svg>

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" style="fill:blue"/>

test/plugins/inlineStyles.14.svg

@@ -19,7 +19,7 @@
 <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}}
+            @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"/>

test/plugins/inlineStyles.15.svg

@@ -58,7 +58,7 @@
 <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">

test/plugins/inlineStyles.19.svg

@@ -36,7 +36,7 @@
 <svg id="icon_time" data-name="icon time" xmlns="http://www.w3.org/2000/svg" width="51" height="51" viewBox="0 0 51 51">
     <defs>
         <style>
-            .cls-2,.cls-3{fill: #f5f5f5;stroke: gray}.cls-2{stroke-width: 1px}.cls-2{fill-rule: evenodd}.cls-3{stroke-width: 2px}
+            .cls-2,.cls-3{fill:#f5f5f5;stroke:gray}.cls-2{stroke-width:1px}.cls-2{fill-rule:evenodd}.cls-3{stroke-width:2px}
         </style>
     </defs>
     <circle cx="25.5" cy="25.5" r="25" style="stroke-width:1px;fill:#f5f5f5;stroke:gray"/>