feat: 🎸 pretty-print CSS in DEV mode

Author: streamich

addon/__tests__/amp.server.test.js

@@ -4,7 +4,8 @@
 
 var env = require('./env');
 var create = require('../../index').create;
-var addonAmp= require('../../addon/amp').addon;
+var addonAmp = require('../../addon/amp').addon;
+var isProd = process.env.NODE_ENV === 'production';
 
 function createNano (config, addonConfig) {
     var nano = create(config);
@@ -30,28 +31,30 @@ describe('amp', function () {
             color: 'red'
         });
 
-        expect(nano.raw.replace(/ /g, '')).toBe('.foo{color:red;}.bar{color:red;}');
+        expect(nano.raw.replace(/[\s\n]+/g, '')).toBe('.foo{color:red;}.bar{color:red;}');
     });
 
-    it('caps at limit', function () {
-        var nano = createNano({}, {
-            limit: 40
-        });
-
-        nano.put('.foo', {
-            color: 'red'
-        });
-
-        nano.put('.bar', {
-            color: 'red'
-        });
-
-        nano.put('.baz', {
-            color: 'red'
-        });
-
-        expect(nano.raw.replace(/ /g, '')).toBe('.foo{color:red;}.bar{color:red;}');
-    });
+    if (isProd) {
+        it('caps at limit', function () {
+            var nano = createNano({}, {
+                limit: 40
+            });
+            
+            nano.put('.foo', {
+                color: 'red'
+            });
+            
+            nano.put('.bar', {
+                color: 'red'
+            });
+            
+            nano.put('.baz', {
+                color: 'red'
+            });
+            
+            expect(nano.raw.replace(/[\s\n]+/g, '')).toBe('.foo{color:red;}.bar{color:red;}');
+        });
+    }
 
     it('warns on !important', function () {
         var nano = createNano();
@@ -211,12 +214,10 @@ describe('amp', function () {
             color: 'blue'
         });
 
-        var length = nano.raw.length;
-
         nano.put('.bar', {
             behavior: 'something'
         });
 
-        expect(nano.raw.length).toBe(length);
+        expect(nano.raw.indexOf('behavior')).toBe(-1);
     });
 });

addon/__tests__/index.test.js

@@ -90,7 +90,7 @@ describe('nano-css', function () {
             }
 
             if (env.isServer) {
-                expect(nano.raw).toBe('.foo{color:red;}');
+                expect(nano.raw.replace(/[\s\n]+/g, '')).toBe('.foo{color:red;}');
             }
         });
 
@@ -163,7 +163,9 @@ describe('nano-css', function () {
             }
 
             if (env.isServer) {
-                expect(renderer.raw).toBe('.foo .bar .baz .bazooka{color:red;}');
+                expect(renderer.raw.indexOf('.foo .bar .baz .bazooka') > -1).toBe(true);
+                expect(renderer.raw.indexOf('color') > -1).toBe(true);
+                expect(renderer.raw.indexOf('red') > -1).toBe(true);
             }
         });
 
@@ -224,10 +226,10 @@ describe('nano-css', function () {
             });
 
             expect(nano.putRaw).toHaveBeenCalledTimes(1);
-            expect(nano.putRaw.mock.calls[0][0].replace(/ /g, '')).toBe('@mediascreen{.global{color:green;}}');
+            expect(nano.putRaw.mock.calls[0][0].replace(/[\s\n]+/g, '')).toBe('@mediascreen{.global{color:green;}}');
         });
 
-        it('supports @media queries - 2', function () {
+        it('supports @media queries - 3', function () {
             var nano = create();
 
             if (env.isClient) {
@@ -248,7 +250,7 @@ describe('nano-css', function () {
             }
 
             if (env.isServer) {
-                expect(nano.raw).toBe('@media screen{.parent .foo{color:red;}}');
+                expect(nano.raw.replace(/[\s\n]+/g, '')).toBe('@mediascreen{.parent.foo{color:red;}}');
             }
         });
     });

addon/__tests__/limit.server.dev.test.js

@@ -29,7 +29,7 @@ describe('limit', function () {
             color: 'red'
         });
 
-        expect(nano.raw.replace(/ /g, '')).toBe('.foo{color:red;}.bar{color:red;}.baz{color:red;}');
+        expect(nano.raw.replace(/[\s\n]+/g, '')).toBe('.foo{color:red;}.bar{color:red;}.baz{color:red;}');
     });
 
     it('caps at limit', function () {
@@ -48,7 +48,7 @@ describe('limit', function () {
         nano.put('.baz', {
             color: 'red'
         });
-
-        expect(nano.raw.replace(/ /g, '')).toBe('.foo{color:red;}.bar{color:red;}');
+console.log(nano.raw);
+        expect(nano.raw.replace(/[\s\n]+/g, '')).toBe('.foo{color:red;}.bar{color:red;}');
     });
 });

addon/__tests__/limit.server.test.js

@@ -15,7 +15,7 @@ exports.addon = function (renderer) {
         var onElementModifier = function (elementModifier) {
             var styles = map[elementModifier];
 
-            if (process.env.NODE_ENV !== 'production') {
+            if ((process.env.NODE_ENV !== 'production') && renderer.sourcemaps) {
                 // In dev mode emit CSS immediately to generate sourcemaps.
                 result[elementModifier] = renderer.rule(styles, block + '-' + elementModifier);
             } else {

addon/sheet.js

@@ -91,4 +91,6 @@ exports.addon = function (renderer) {
         enqueue(rawCSS);
         putRaw.apply(null, arguments);
     };
+
+    renderer.sourcemaps = true;
 };

addon/sourcemaps.js

@@ -104,12 +104,20 @@ exports.create = function (config) {
             if ((value instanceof Object) && !(value instanceof Array)) {
                 postponed.push(prop);
             } else {
-                str += renderer.decl(prop, value, selector, atrule);
+                if ((process.env.NODE_ENV !== 'production') && !renderer.sourcemaps) {
+                    str += '    ' + renderer.decl(prop, value, selector, atrule) + '\n';
+                } else {
+                    str += renderer.decl(prop, value, selector, atrule);
+                }
             }
         }
 
         if (str) {
-            str = selector + '{' + str + '}';
+            if ((process.env.NODE_ENV !== 'production') && !renderer.sourcemaps) {
+                str = '\n' + selector + ' {\n' + str + '}\n';
+            } else {
+                str = selector + '{' + str + '}';
+            }
             renderer.putRaw(atrule ? atrule + '{' + str + '}' : str);
         }