Repository: svg/svgo (js)

Issue:
v1.0.0 regression: "TypeError: Object.defineProperty called on non-object" on certain SVGs
Take this SVG for example:

![](https://rawgit.com/zmwangx/f1e79da72dcc724108840b7d53c158af/raw/36eb4004156a52cdc5cc40005bcf13f6c0000eb9/sample.svg)

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <foreignObject width="100%" height="100%">
    <style>div { color: red; }</style>
    <body xmlns="http://www.w3.org/1999/xhtml"><div>hello, world</div></body>
  </foreignObject>
</svg>
```

This looks like valid SVG to my eyes; it displays fine, and svgo v0.7.2 handles it just fine. However, with svgo v1.0.0:

```console
$ svgo sample.svg
TypeError: Object.defineProperty called on non-object
    at Function.defineProperty (<anonymous>)
    at CSSStyleDeclaration.addStyleHandler (/usr/local/lib/node_modules/svgo/lib/svgo/css-style-declaration.js:36:12)
    at CSSStyleDeclaration.hasStyle (/usr/local/lib/node_modules/svgo/lib/svgo/css-style-declaration.js:26:10)
    at CSSStyleDeclaration.setProperty (/usr/local/lib/node_modules/svgo/lib/svgo/css-style-declaration.js:242:10)
    at Object.fn (/usr/local/lib/node_modules/svgo/plugins/inlineStyles.js:156:34)
    at Object.<anonymous> (/usr/local/lib/node_modules/svgo/node_modules/css-tree/lib/walker/create.js:133:26)
    at List.each (/usr/local/lib/node_modules/svgo/node_modules/css-tree/lib/utils/list.js:143:12)
    at Object.walkDeclarations (/usr/local/lib/node_modules/svgo/node_modules/css-tree/lib/walker/create.js:131:27)
    at Object.walkDeclarations (/usr/local/lib/node_modules/svgo/node_modules/css-tree/lib/walker/create.js:124:34)
    at Object.walkDeclarations (/usr/local/lib/node_modules/svgo/node_modules/css-tree/lib/walker/create.js:285:30)
```

Pull request:
Fix #820
Fixes issue https://github.com/svg/svgo/issues/820.

Patch:
diff --git a/lib/svgo/css-style-declaration.js b/lib/svgo/css-style-declaration.js
index 43527fd..5b2300b 100644
--- a/lib/svgo/css-style-declaration.js
+++ b/lib/svgo/css-style-declaration.js
@@ -18,11 +18,6 @@ var CSSStyleDeclaration = function(node) {
 
 
 CSSStyleDeclaration.prototype.hasStyle = function() {
-    this.styleAttr = { // empty style attr
-        'name': 'style',
-        'value': null
-    };
-
     this.addStyleHandler();
 };
 
@@ -33,6 +28,11 @@ CSSStyleDeclaration.prototype.hasStyle = function() {
 
 CSSStyleDeclaration.prototype.addStyleHandler = function() {
 
+    this.styleAttr = { // empty style attr
+        'name': 'style',
+        'value': null
+    };
+
     Object.defineProperty(this.parentNode.attrs, 'style', {
         get: this.getStyleAttr.bind(this),
         set: this.setStyleAttr.bind(this),
diff --git a/lib/svgo/svg2js.js b/lib/svgo/svg2js.js
index 0f74594..6bba13e 100644
--- a/lib/svgo/svg2js.js
+++ b/lib/svgo/svg2js.js
@@ -87,15 +87,14 @@ module.exports = function(data, callback) {
         var elem = {
             elem: data.name,
             prefix: data.prefix,
-            local: data.local
+            local: data.local,
+            attrs: {}
         };
+
         elem.class = new CSSClassList(elem);
         elem.style = new CSSStyleDeclaration(elem);
 
         if (Object.keys(data.attributes).length) {
-            elem.attrs = {};
-
-
             for (var name in data.attributes) {
 
                 if (name === 'class') { // has class attribute


Test patch:
diff --git a/test/plugins/inlineStyles.17.svg b/test/plugins/inlineStyles.17.svg
new file mode 100644
index 0000000..e5bce9c
--- /dev/null
+++ b/test/plugins/inlineStyles.17.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+  <foreignObject width="100%" height="100%">
+    <style>div { color: red; }</style>
+    <body xmlns="http://www.w3.org/1999/xhtml"><div>hello, world</div></body>
+  </foreignObject>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+    <foreignObject width="100%" height="100%">
+        <body xmlns="http://www.w3.org/1999/xhtml">
+            <div style="color:red">
+                hello, world
+            </div>
+        </body>
+    </foreignObject>
+</svg>