feat: 🎸 improve source maps, make work with jsx and sheet

Author: streamich

.storybook/sourcemaps.stories.js

@@ -5,17 +5,58 @@ const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../index');
 const {addon} = require('../addon/rule');
 const {addon: addonSourcemaps} = require('../addon/sourcemaps');
+const {addon: addonSheet} = require('../addon/sheet');
+const {addon: addonCache} = require('../addon/cache');
+const {addon: addonJsx} = require('../addon/jsx');
+const {addon: addonStyle} = require('../addon/style');
+const {addon: addonStyled} = require('../addon/styled');
 
-const nano = create();
+const nano = create({
+  h
+});
 addon(nano);
+addonSheet(nano);
+addonCache(nano);
+addonJsx(nano);
+addonStyle(nano);
+addonStyled(nano);
 addonSourcemaps(nano);
-const {rule} = nano;
+const {rule, sheet, jsx, styled} = nano;
 
 const className1 = rule({
   border: '1px solid red'
 }, 'RedBorder');
 
+const styles1 = sheet({
+  wrapper: {
+    border: '1px solid red',
+  },
+  button: {
+    color: 'green',
+    background: 'black',
+  }
+});
+
+const Button = jsx('button', {
+  border: '1px solid black',
+  background: 'black',
+  color: 'white',
+});
+
+const Button2 = styled.button({
+  border: '1px solid black',
+  background: 'black',
+  color: 'red',
+});
+
 storiesOf('Addons/sourcemaps', module)
   .add('Default', () =>
     h('div', {className: className1}, 'Hello world')
   )
+  .add('sheet', () =>
+    h('div', {className: styles1.wrapper},
+      h('button', {className: styles1.button}, 'Click me!')
+    )
+  )
+  .add('jsx', () => h(Button, {}, 'Click me!'))
+  .add('styled', () => h(Button2, {}, 'Click me!'))

addon/jsx.js

@@ -15,6 +15,11 @@ exports.addon = function (renderer) {
         var className;
         var isElement = typeof fn === 'string';
 
+        // In dev mode emit CSS immediately so correct sourcemaps can be generated.
+        if (process.env.NODE_ENV !== 'production') {
+            className = renderer.rule(styles, block);
+        }
+
         var Component = function (props) {
             if (!className) {
                 className = renderer.rule(styles, block);

addon/sheet.js

@@ -15,18 +15,23 @@ exports.addon = function (renderer) {
         var onElementModifier = function (elementModifier) {
             var styles = map[elementModifier];
 
-            Object.defineProperty(result, elementModifier, {
-                configurable: true,
-                get: function () {
-                    var classNames = renderer.rule(styles, block + '-' + elementModifier);
-
-                    Object.defineProperty(result, elementModifier, {
-                        value: classNames
-                    });
-
-                    return classNames;
-                },
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                // In dev mode emit CSS immediately to generate sourcemaps.
+                result[elementModifier] = renderer.rule(styles, block + '-' + elementModifier);
+            } else {
+                Object.defineProperty(result, elementModifier, {
+                    configurable: true,
+                    get: function () {
+                        var classNames = renderer.rule(styles, block + '-' + elementModifier);
+
+                        Object.defineProperty(result, elementModifier, {
+                            value: classNames
+                        });
+
+                        return classNames;
+                    },
+                });
+            }
         };
 
         for (var elementModifier in map) {

addon/sourcemaps.js

@@ -3,7 +3,25 @@
 var StackTrace = require('stacktrace-js');
 var SourcemapCodec = require('sourcemap-codec');
 
+function findStackframe (frames) {
+    for (var i = 4; i < frames.length; i++) {
+        if (!frames[i].fileName.match(/addon\/[^.]+\.js/)) {
+            return frames[i];
+        }
+    }
+}
+
 exports.addon = function (renderer) {
+    if (process.env.NODE_ENV === 'production') {
+        // eslint-disable-next-line no-console
+        console.log(
+            'nano-css sourcemaps addon should be installed only in development mode. ' +
+            'Use (process.env.NODE !== "production") to check if you are in development mode.'
+        );
+
+        return;
+    }
+
     var queue = [];
     var timeout = null;
     var sourceCache = {};
@@ -40,27 +58,21 @@ exports.addon = function (renderer) {
         var css = rules.join('\n') + '\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64 + ' */';
         var style = document.createElement('style');
 
+        style.setAttribute('data-sourcemaps', '');
         style.appendChild(document.createTextNode(css));
         document.head.appendChild(style);
     }
 
     function enqueue (rawCss) {
         StackTrace.get({sourceCache: sourceCache})
             .then(function (stackframes) {
-                var frame = stackframes[4];
+                var frame = findStackframe(stackframes);
 
                 if (!frame) {
                     return;
                 }
 
-                var pos = rawCss.indexOf('{');
-
-                if (pos < 1) return;
-
-                var selector = rawCss.substr(0, pos).trim();
-
                 queue.push({
-                    selector: selector,
                     rule: rawCss,
                     fileName: frame.fileName,
                     lineNumber: frame.lineNumber,