initial support for sourcemaps generation

lib/style-transform.js

@@ -1,17 +1,17 @@
-// based on Stylis (MIT) 
+// based on Stylis (MIT)
 // modified by Guillermo Rauch to add support for custom
 // attributes instead of custom selector prefix
 /*!
  *
- *          __        ___     
+ *          __        ___
  *    _____/ /___  __/ (_)____
  *   / ___/ __/ / / / / / ___/
- *  (__  ) /_/ /_/ / / (__  ) 
- * /____/\__/\__, /_/_/____/  
- *          /____/            
- * 
+ *  (__  ) /_/ /_/ / / (__  )
+ * /____/\__/\__, /_/_/____/
+ *          /____/
+ *
  * stylis is a small css compiler
- * 
+ *
  * @licence MIT
  */
 (function (factory) {
@@ -36,23 +36,39 @@
      * css compiler
      *
      * @example compiler('.class1', 'css...', false);
-     * 
+     *
      * @param  {string}  id to use for data attributes
      * @param  {string}  styles
      * @return {string}
      */
-    function stylis (id, styles) {
+    function stylis (id, styles, generator, start, fileName) {
         var suffix = '[data-jsx="' + id +'"]';
         var output = '';
         var line = '';
 
         var len = styles.length;
         var i = 0;
+        var lineNumber = start ? start.line : 0;
+        var columnNumber = start ? start.column : 0;
+
+        generator && generator.addMapping({
+          generated: {
+            line: 1,
+            column: 0
+          },
+          source: fileName,
+          original: start
+        })
 
         // parse + compile
         while (i < len) {
             var code = styles.charCodeAt(i);
 
+            if (code === 10) {
+              lineNumber++;
+              columnNumber = 0;
+            }
+
             // {, }, ; characters
             if (code === 123 || code  === 125 || code === 59) {
                 line += styles[i];
@@ -75,6 +91,7 @@
                     // @keyframe/@root, `k` or @root, `r` character
                     if (second === 107 || second === 114) {
                         i++;
+                        columnNumber++;
 
                         if (second == 107) {
                             // @keyframes
@@ -88,7 +105,12 @@
 
                         while (i < len) {
                             var char = styles[i++];
+                            columnNumber++;
                             var _code = char.charCodeAt(0);
+                            if (_code === 10) {
+                              lineNumber++;
+                              columnNumber = 0;
+                            }
 
                             // not `\t`, `\r`, `\n` characters
                             if (_code !== 9 && _code !== 13 && _code !== 10) {
@@ -98,12 +120,12 @@
                                     if (close === 1) {
                                         break;
                                     }
-                                    // current block tag is close tag 
+                                    // current block tag is close tag
                                     else {
                                         close = 1;
                                     }
                                 }
-                                // { character 
+                                // { character
                                 else if (_code === 123) {
                                     // current block tag is open
                                     close = 0;
@@ -115,7 +137,7 @@
 
                         // vendor prefix transform properties within keyframes and @root blocks
                         line = line.replace(regSpaces, '').replace(regPrefix, '-webkit-$1-moz-$1-ms-$1$1');
-                        
+
                         if (second === 107) {
                             // vendor prefix keyframes blocks
                             line = '@-webkit-'+line+'}'+'@-moz-'+line+'}@'+line+'}';
@@ -150,7 +172,7 @@
                         // vendor prefix
                         line = '-webkit-' + line + '-moz-' + line + line;
                     }
-                    // transforms & transitions: t, r, a 
+                    // transforms & transitions: t, r, a
                     // hyphens: h, y, p
                     // user-select: u, s, r, s
                     else if (
@@ -275,16 +297,29 @@
                     }
                 }
 
+                generator && generator.addMapping({
+                    generated: {
+                      line: 1,
+                      column: output.length
+                    },
+                    source: fileName,
+                    original: {
+                        line: lineNumber,
+                        column: columnNumber
+                    }
+                })
+
                 output += line;
                 line = '';
-            } 
+            }
             // not `\t`, `\r`, `\n` characters
             else if (code !== 9 && code !== 13 && code !== 10) {
                 line += styles[i];
             }
 
             // next character
-            i++; 
+            i++;
+            columnNumber++;
         }
 
         return output;

package.json

@@ -15,7 +15,9 @@
   ],
   "dependencies": {
     "babel-plugin-syntax-jsx": "^6.18.0",
+    "convert-source-map": "^1.3.0",
     "object.entries": "^1.0.4",
+    "source-map": "^0.5.6",
     "string-hash": "^1.1.1"
   },
   "devDependencies": {

src/babel.js

@@ -1,6 +1,8 @@
 // Packages
 import jsx from 'babel-plugin-syntax-jsx'
 import hash from 'string-hash'
+import {SourceMapGenerator} from 'source-map'
+import convert from 'convert-source-map'
 
 // Ours
 import transform from '../lib/style-transform'
@@ -110,7 +112,8 @@ export default function ({types: t}) {
 
                 state.styles.push([
                   styleId,
-                  styleText
+                  styleText,
+                  expression.loc
                 ])
               }
 
@@ -126,20 +129,43 @@ export default function ({types: t}) {
 
             if (el.name && el.name.name === 'style') {
               // we replace styles with the function call
-              const [id, css] = state.styles.shift()
+              const [id, css, loc] = state.styles.shift()
 
               const skipTransform = el.attributes.some(attr => (
                 attr.name.name === GLOBAL_ATTRIBUTE
               ))
 
+              const useSourceMaps = Boolean(state.file.opts.sourceMaps)
+              let transformedCss = css
+
+              if (!skipTransform) {
+                if (useSourceMaps) {
+                  const filename = state.file.opts.sourceFileName
+                  const generator = new SourceMapGenerator({
+                    file: filename,
+                    sourceRoot: state.file.opts.sourceRoot
+                  })
+                  generator.setSourceContent(filename, state.file.code)
+                  transformedCss = [
+                    transform(id, css, generator, loc.start, filename),
+                    convert
+                      .fromObject(generator)
+                      .toComment({multiline: true}),
+                    `/*@ sourceURL=${filename} */`
+                  ].join('\n')
+                } else {
+                  transformedCss = transform(id, css)
+                }
+              }
+
               path.replaceWith(
                 t.JSXElement(
                   t.JSXOpeningElement(
                     t.JSXIdentifier(STYLE_COMPONENT),
                     [
                       t.JSXAttribute(
                         t.JSXIdentifier(STYLE_COMPONENT_CSS),
-                        t.JSXExpressionContainer(t.stringLiteral(skipTransform ? css : transform(id, css)))
+                        t.JSXExpressionContainer(t.stringLiteral(transformedCss))
                       )
                     ],
                     true

test/fixtures/class.out.js

@@ -39,7 +39,7 @@ var _class = function () {
           "test"
         ),
         React.createElement(_style2.default, {
-          css: "p[data-jsx=\"1891769468\"] {color: red;}",
+          css: "p[data-jsx=\"1891769468\"] {color: red;}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsYXNzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1vQixBQUNQLDBCQUNVLFdBQ1oiLCJmaWxlIjoiY2xhc3MuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCBjbGFzcyB7XG5cbiAgcmVuZGVyICgpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAgPHA+dGVzdDwvcD5cbiAgICAgICAgPHN0eWxlIGpzeD57YFxuICAgICAgICAgIHAge1xuICAgICAgICAgICAgY29sb3I6IHJlZDtcbiAgICAgICAgICB9XG4gICAgICAgIGB9PC9zdHlsZT5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxuXG59XG4iXX0= */\n/*@ sourceURL=class.js */",
           "data-jsx": "1891769468"
         })
       );

test/fixtures/stateless.out.js

@@ -38,7 +38,7 @@ exports.default = function () {
       'woot'
     ),
     React.createElement(_style2.default, {
-      css: 'p[data-jsx="188072295"] {color: red }',
+      css: 'p[data-jsx="188072295"] {color: red }\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YXRlbGVzcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLZ0IsQUFBRSx5QkFBYSIsImZpbGUiOiJzdGF0ZWxlc3MuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxkaXY+XG4gICAgPHA+dGVzdDwvcD5cbiAgICA8cD53b290PC9wPlxuICAgIDxwPndvb3Q8L3A+XG4gICAgPHN0eWxlIGpzeD57J3AgeyBjb2xvcjogcmVkIH0nfTwvc3R5bGU+XG4gIDwvZGl2PlxuKVxuIl19 */\n/*@ sourceURL=stateless.js */',
       'data-jsx': '188072295'
     })
   );

test/fixtures/whitespace.out.js

@@ -38,7 +38,7 @@ exports.default = function () {
       'woot'
     ),
     React.createElement(_style2.default, {
-      css: 'p[data-jsx="188072295"] {color: red }',
+      css: 'p[data-jsx="188072295"] {color: red }\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndoaXRlc3BhY2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT1EsQUFBRSx5QkFBYSIsImZpbGUiOiJ3aGl0ZXNwYWNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8ZGl2PlxuICAgIDxwPnRlc3Q8L3A+XG4gICAgPHA+d29vdDwvcD5cbiAgICA8cD53b290PC9wPlxuICAgIDxzdHlsZSBqc3g+XG4gICAgICB7XG4gICAgICAgICdwIHsgY29sb3I6IHJlZCB9J1xuICAgICAgfVxuICAgIDwvc3R5bGU+XG4gIDwvZGl2PlxuKVxuXG4iXX0= */\n/*@ sourceURL=whitespace.js */',
       'data-jsx': '188072295'
     })
   );

test/index.js

@@ -12,6 +12,7 @@ import read from './_read'
 const transform = file => (
   new Promise((resolve, reject) => {
     transformFile(path.resolve(__dirname, file), {
+      sourceMap: true,
       plugins: [
         'transform-runtime',
         plugin