Handle style tags and style properties correctly

Author: jhamlet

package.json

@@ -2,7 +2,7 @@
     "name": "svg-react-loader",
     "fullname": "SVG to React Loader",
     "description": "A Webpack Loader to turn SVGs into React Components",
-    "version": "0.1.5",
+    "version": "0.2.0",
     "keywords": [
         "webpack",
         "loader",
@@ -18,17 +18,18 @@
         "loader-utils": "0.x"
     },
     "devDependencies": {
-        "babel-loader": "5.x",
-        "babel-core":   "5.x",
-        "react":        ">=0.12",
-        "webpack":      "1.x",
-        "mocha":        "2.x",
-        "should":       "6.x",
-        "del":          "*",
-        "gulp":         "3.x",
-        "gulp-util":    "*",
-        "gulp-ejs":     "*",
-        "gulp-concat":  "*"
+        "babel-loader":        "5.x",
+        "babel-core":          "5.x",
+        "react":               ">=0.12",
+        "webpack":             "1.x",
+        "webpack-dev-server":  "1.x",
+        "mocha":               "2.x",
+        "should":              "6.x",
+        "del":                 "*",
+        "gulp":                "3.x",
+        "gulp-util":           "*",
+        "gulp-ejs":            "*",
+        "gulp-concat":         "*"
     },
     "peerDependencies": {
         "babel-core":   "5.x",

test/build.js

@@ -1,5 +1,5 @@
 var React = require('react');
-var MashUp = require('./svg/mashup.svg');
+var Styles = require('./svg/styles.svg');
 
-React.render(<MashUp />, document.getElementById('content'));
+React.render(<Styles />, document.getElementById('content'));
 

test/svg/styles.svg

@@ -1,4 +1,5 @@
 /*globals describe, it*/
+var react  = require('react');
 var loader = require('svg-react-loader');
 var babel  = require('babel-core');
 var fs     = require('fs');
@@ -53,4 +54,30 @@ describe('something', function () {
             // resourceQuery: '?tag=foo&attrs={foo: \'bar\'}'
         });
     });
+
+    it.only('should handle styles', function (done) {
+        var filename = './svg/styles.svg';
+
+        invoke(read(filename), {
+            callback: function (error, result) {
+                if (error) {
+                    throw error;
+                }
+
+                var src = babel.transform(result).code;
+                console.log(src);
+                fs.writeFileSync(__dirname + '/temp', src);
+                var el = react.createElement(require(__dirname + '/temp'));
+                var html = react.renderToStaticMarkup(el);
+
+                // var el = react.createElement('style');
+                // var html = react.renderToStaticMarkup(el);
+
+                console.log(html);
+                fs.unlink(__dirname + '/temp');
+                done();
+            },
+            resourcePath: filename
+        });
+    });
 });

test/test-test.js

@@ -7,17 +7,39 @@ var XML_TEXT_NODE_KEY = '_';
 var NS_SEPARATOR      = ':';
 var DATA_ATTR_KEY     = 'data-svgreactloader';
 var XML_NAMESPACE_KEY = 'xmlns';
+var TEXT_REGEX        = /(["'])/g;
 
 var XML_NAMESPACES = {
     svg: 'http://www.w3.org/2000/svg',
     xlink: 'http://www.w3.org/1999/xlink'
 };
 
+var STYLE_ATTR_KEY = 'style';
+
 var RESERVED_KEYS = {
     'class': 'className',
     'for': 'htmlFor'
 };
 
+/**
+ * @param {Object[]} nodes
+ */
+function sanitizeStyleNodes (nodes) {
+    nodes.
+        forEach(function (node, idx, context) {
+            var isText = typeof node === 'string';
+            var src = isText ? node : node[XML_TEXT_NODE_KEY];
+            var text = '{`' + src.replace(TEXT_REGEX, "\\$1") + '`}';
+
+            if (isText) {
+                context[idx] = text;
+            }
+            else {
+                node[XML_TEXT_NODE_KEY] = text;
+            }
+        });
+}
+
 /**
  * Remove any non-jsx xml attributes from the given node and any of its child
  * nodes. Return the original node sanitized.
@@ -42,7 +64,7 @@ module.exports = function sanitize (xmlNode, namespaces) {
                     var hasSep = !!~i;
                     var ns     = hasSep && key.slice(0, i);
                     var attr   = hasSep ? key.slice(i + 1) : key;
-                    var value  = xmlNode.$[key];
+                    var value  = xmlNode[XML_ATTR_KEY][key];
                     var nsKey  = hasSep ? ns : attr;
 
                     if (nsKey === XML_NAMESPACE_KEY && !hasSep) {
@@ -54,7 +76,7 @@ module.exports = function sanitize (xmlNode, namespaces) {
 
                     nsKey = nsKey === XML_NAMESPACE_KEY ? 'xml' : nsKey;
 
-                    if (ns && attr) {
+                    if (ns && attr || attr === STYLE_ATTR_KEY) {
                         acc[DATA_ATTR_KEY] = acc[DATA_ATTR_KEY] || [];
                         acc[DATA_ATTR_KEY].push([namespaces[nsKey], attr, value]);
                     }
@@ -69,7 +91,12 @@ module.exports = function sanitize (xmlNode, namespaces) {
 
         keys(omit(xmlNode, [XML_ATTR_KEY, XML_TEXT_NODE_KEY])).
             forEach(function (key) {
-                sanitize(xmlNode[key], namespaces);
+                if (key === 'style') {
+                    sanitizeStyleNodes(xmlNode[key]);
+                }
+                else {
+                    sanitize(xmlNode[key], namespaces);
+                }
             });
 
         if (xmlNode[XML_ATTR_KEY] && xmlNode[XML_ATTR_KEY][DATA_ATTR_KEY]) {

utility/sanitize.js

@@ -10,5 +10,9 @@ module.exports = {
             { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
             { test: /\.svg$/, loader: 'babel!svg-react' }
         ]
+    },
+
+    devServer: {
+        contentBase: './'
     }
 };