stylis - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5

CHANGELOG.md

@@ -0,5 +1,11 @@
+## 0.6.5 (December 06, 2016)
+
+- improvements to handling of line comments
+- improvements to parsing performance
+
 ## 0.6.4 (December 05, 2016)
 
-- improvements to parsing, do away with the little regex that was used.
+- improvements to parsing, do away with the little regex that was used
 - handle edge cases with `@keyframes` nested in `@root` block
+- support complete prefix support in `@keyframes` and `@root` blocks
 
@@ -6,0 +12,0 @@ ## 0.6.3 (December 04, 2016)

package.json

@@ -5,3 +5,3 @@ {
 	"description": "stylis is a small css compiler",
-	"version": "0.6.4",
+	"version": "0.6.5",
 	"homepage": "https://github.com/thysultan/stylis.js",
@@ -8,0 +8,0 @@ "license": "MIT",

README.md

@@ -17,9 +17,9 @@ # Stylis
 
-```css
-@root {
-	body {
-		background: yellow;
-	}
-}
+```scss
 
+font-size: 2em;
+font-family: sans-serif;
+
+// a line comment
+
 .name {
@@ -29,2 +29,8 @@ transform: rotate(30deg);
 
+@root {
+    body {
+        background: yellow;
+    }
+}
+
 span, h1 {
@@ -62,4 +68,5 @@ color:red;
 ```css
-body {
-    background: yellow;
+#user {
+	font-size: 2em;
+	font-family: sans-serif;
 }
@@ -72,2 +79,5 @@ #user .name {
 }
+body {
+    background: yellow;
+}
 #user span,
@@ -167,3 +177,3 @@ #user h1 {
 ```html
-<script src=https://unpkg.com/stylis@0.6.4/stylis.min.js></script>
+<script src=https://unpkg.com/stylis@0.6.5/stylis.min.js></script>
 ```
@@ -187,3 +197,4 @@
 
-// namespaceAnimations and namespaceKeyframes allow you to prevent keyframes and animations
+// namespaceAnimations and namespaceKeyframes allow 
+// you to prevent keyframes and animations
 // from being namespaced
@@ -190,0 +201,0 @@ ```

stylis.js

@@ -33,21 +33,23 @@ /*!
      * @param  {string}  styles
-     * @param  {boolean} namespaceAnimations
-     * @param  {boolean} namespaceKeyframes
+     * @param  {boolean} nsAnimations
+     * @param  {boolean} nsKeyframes
      * @return {string}
      */
-    function stylis (selector, styles, namespaceAnimations, namespaceKeyframes) {
+    function stylis (selector, styles, nsAnimations, nsKeyframes) {
         var prefix = '';
-        var id = '';
-        var type = selector.charCodeAt(0);
+        var id     = '';
+        var type   = selector.charCodeAt(0);
 
         // [
         if (type === 91) {
+            // `[data-id=namespace]` -> ['data-id', 'namespace']
             var attr = selector.substring(1, selector.length-1).split('=');
+            // re-build and extract namespace/id
             prefix = '['+ attr[0] + '=' + (id = attr[1]) +']';
         }
-        // `>` or `#` or `.`
-        else if (type === 62 || type === 35 || type === 46) {
+        // `#` or `.` or `>`
+        else if (type === 35 || type === 46 || type === 62) {
             id = (prefix = selector).substring(1);
         }
-        // i.e section 
+        // element selector
         else {
@@ -57,16 +59,17 @@ id = prefix = selector;
 
-        var keyframeId  = (namespaceAnimations === void 0 || namespaceAnimations === true ) ? id : '';
-        var animationId = (namespaceKeyframes === void 0 || namespaceKeyframes === true ) ? id : '';
+        var keyframeNs  = (nsAnimations === void 0 || nsAnimations === true ) ? id : '';
+        var animationNs = (nsKeyframes === void 0 || nsKeyframes === true ) ? id : '';
 
-        var output = '';
-        var line   = '';
-        var blob   = '';
+        var output  = '';
+        var line    = '';
+        var blob    = '';
 
-        var len = styles.length;
-        var i   = 0;
+        var len     = styles.length;
 
-        var flat    = 1;
+        var i       = 0;
         var special = 0;
         var type    = 0;
-        var closing = 0;
+        var close   = 0;
+        var flat    = 1; 
+        var comment = 0;
 
@@ -77,9 +80,9 @@ // parse + compile
 
-            // {, }, ; characters
-            if (code === 123 || code  === 125 || code === 59) {
+            // {, }, ; characters, parse line by line
+            if (code === 123 || code === 125 || code === 59) {
                 line += styles[i];
-                
+
                 var first = line.charCodeAt(0);
 
-                // only trim when the first character is ` `
+                // only trim when the first character is a space ` `
                 if (first === 32) { 
@@ -97,16 +100,6 @@ first = (line = line.trim()).charCodeAt(0);
 
-                // /, / line comment
-                if (first === 47 && second === 47) {
-                    line = code === 125 ? '}' : '';
-                }
                 // @, special block
-                else if (first === 64) {
+                if (first === 64) {
                     // exit flat css context with the first block context
-                    if (flat === 1) {
-                        flat = 0;
-                        
-                        if (output.length !== 0) {
-                            output = prefix + '{' + output + '}'
-                        }
-                    }
+                    flat === 1 && (flat = 0, output.length !== 0 && (output = prefix + '{' + output + '}'));
 
@@ -118,4 +111,4 @@ // @keyframe/@root, `k` or @root, `r` character
                         if (second === 107) {
-                            line = line.substring(0, 11) + keyframeId + line.substring(11);
-                            blob = line.substring(1);
+                            blob = line.substring(1, 11) + keyframeNs + line.substring(11);
+                            line = '@-webkit-'+blob;
                             type = 1;
@@ -135,3 +128,3 @@ } else {
                         for (var j = 0, length = anims.length; j < length; j++) {
-                            build += (j === 0 ? '' : ',') + animationId + anims[j].trim();
+                            build += (j === 0 ? '' : ',') + animationNs + anims[j].trim();
                         }
@@ -155,7 +148,7 @@
                     // hyphens: h, y, p
-                    // user-select: u, s, r, s
+                    // user-select: u, s, e
                     else if (
                         (first === 116 && second === 114 && third === 97) ||
                         (first === 104 && second === 121 && third === 112) ||
-                        (first === 117 && second === 115 && third === 101 && line.charCodeAt(5) === 115)
+                        (first === 117 && second === 115 && third === 101)
                     ) {
@@ -169,57 +162,36 @@ // vendor prefix
                             // vendor prefix
-                            line = 'display:-webkit-flex; display:flex;'
+                            line = 'display:-webkit-flex; display:flex;';
                         }
                     }
-                    // selector declaration
+                    // { character, selector declaration
                     else if (code === 123) {
                         // exit flat css context with the first block context
-                        if (flat === 1) {
-                            flat = 0;
-                            
-                            if (output.length !== 0) {
-                                output = prefix + '{' + output + '}'
-                            }
-                        }
+                        flat === 1 && (flat = 0, output.length !== 0 && (output = prefix + '{' + output + '}'));
 
                         if (special === 0) {
                             var split = line.split(',');
-                            var _line = '';
+                            var build = '';
 
-                            // iterate through characters and prefix multiple selectors with namesapces
-                            // i.e h1, h2, h3 --> [namespace] h1, [namespace] h1, ....
+                            // prefix multiple selectors with namesapces
+                            // @example h1, h2, h3 --> [namespace] h1, [namespace] h1, ....
                             for (var j = 0, length = split.length; j < length; j++) {
                                 var selector = split[j];
-                                var _first = selector.charCodeAt(0);
-                                var affix = '';
+                                var firstChar = selector.charCodeAt(0);
 
-                                // trim if first character is a space
-                                if (_first === 32) {
-                                    _first = (selector = selector.trim()).charCodeAt(0);
+                                // ` `, trim if first char is space
+                                if (firstChar === 32) {
+                                    firstChar = (selector = selector.trim()).charCodeAt(0);
                                 }
 
-                                // first selector
-                                if (j === 0) {
-                                    // :, &, { characters
-                                    if (_first === 58 || _first === 38 || _first === 123) {
-                                        affix = prefix;
-                                    } else {
-                                        affix = prefix + ' ';
-                                    }
+                                // &
+                                if (firstChar === 38) {
+                                    selector = prefix + selector.substring(1);
                                 } else {
-                                    // ` `, &
-                                    affix = ',' + prefix + (_first !== 32 && _first !== 38 ? ' ' : '');
+                                    selector = prefix + (firstChar === 58 ? '' : ' ') + selector;
                                 }
 
-                                if (_first === 123) {
-                                    // { character
-                                    _line += affix + selector;
-                                } else if (_first === 38) {
-                                    // & character
-                                    _line += affix + selector.substring(1);
-                                } else {
-                                    _line += affix + selector;
-                                }
+                                build += j === 0 ? selector : ',' + selector;
                             }
 
-                            line = _line;
+                            line = build;
                         }
@@ -229,12 +201,12 @@ }
                     // @root/@keyframes
-                    if (special > 0) {
+                    if (special !== 0) {
                         // find the closing tag
                         if (code === 125) {
-                            closing++;
-                        } else if (code === 123 && closing !== 0) {
-                            closing--;
+                            close++;
+                        } else if (code === 123 && close !== 0) {
+                            close--;
                         }
 
                         // closing tag
-                        if (closing === 2) {
+                        if (close === 2) {
                             // @root
@@ -247,3 +219,3 @@ if (type === 0) {
                                 // vendor prefix
-                                line = '}@-webkit-'+blob+'}@-moz-'+blob+'}';
+                                line = '}@-moz-'+blob+'}@'+blob+'}';
                                 // reset blob
@@ -255,3 +227,3 @@ blob = '';
                             type = 0;
-                            closing = special > 1 ? 1 : 0;
+                            close = special > 1 ? 1 : 0;
                             special--;
@@ -267,8 +239,17 @@ }
                 output += line;
-                line = '';
-            } 
-            // not `\t`, `\r`, `\n` characters
-            else if (code !== 9 && code !== 13 && code !== 10) {
-                line += styles[i];
+                line    = '';
+                comment = 0;
             }
+            // build line by line
+            else {
+                // \r, \n, remove line comments
+                if (comment === 1 && (code === 13 || code === 10)) {
+                    line = '';
+                }
+                // not `\t`, `\r`, `\n` characters
+                else if (code !== 9 && code !== 13 && code !== 10) {
+                    code === 47 && comment === 0 && (comment = 1);
+                    line += styles[i];
+                }
+            }
 
@@ -279,3 +260,3 @@ // next character
 
-        return flat && output.length !== 0 ? prefix+'{'+output+'}' : output;
+        return flat === 1 && output.length !== 0 ? prefix+'{'+output+'}' : output;
     }
@@ -282,0 +263,0 @@

stylis.min.js

@@ -1,1 +0,1 @@
-!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(global):"function"==typeof define&&define.amd?define(e(window)):window.stylis=e(window)}(function(e){"use strict";function t(e,t,i,r){var n="",o="",s=e.charCodeAt(0);if(91===s){var d=e.substring(1,e.length-1).split("=");n="["+d[0]+"="+(o=d[1])+"]"}else o=62===s||35===s||46===s?(n=e).substring(1):n=e;for(var f=void 0===i||i===!0?o:"",l=void 0===r||r===!0?o:"",a="",h="",u="",c=t.length,g=0,b=1,m=0,s=0,v=0;g<c;){var w=t.charCodeAt(g);if(123===w||125===w||59===w){h+=t[g];var A=h.charCodeAt(0);32===A&&(A=(h=h.trim()).charCodeAt(0));var C=h.charCodeAt(1)||0;if(47===A&&42===C&&(A=(h=h.substring(h.indexOf("*/")+2)).charCodeAt(0),C=h.charCodeAt(1)||0),47===A&&47===C)h=125===w?"}":"";else if(64===A)1===b&&(b=0,0!==a.length&&(a=n+"{"+a+"}")),107!==C&&114!==C||(m++,107===C?(h=h.substring(0,11)+f+h.substring(11),u=h.substring(1),s=1):h="");else{var p=h.charCodeAt(2)||0;if(97===A&&110===C&&105===p){for(var x=h.substring(10).split(","),y="animation:",k=0,z=x.length;k<z;k++)y+=(0===k?"":",")+l+x[k].trim();h="-webkit-"+y+"-moz-"+y+y}else if(97===A&&112===C&&112===p||102===A&&108===C&&101===p||111===A&&114===C&&100===p)h="-webkit-"+h+"-moz-"+h+h;else if(116===A&&114===C&&97===p||104===A&&121===C&&112===p||117===A&&115===C&&101===p&&115===h.charCodeAt(5))h="-webkit-"+h+"-moz-"+h+"-ms-"+h+h;else if(100===A&&105===C&&115===p)h.indexOf("flex")>-1&&(h="display:-webkit-flex; display:flex;");else if(123===w&&(1===b&&(b=0,0!==a.length&&(a=n+"{"+a+"}")),0===m)){for(var O=h.split(","),j="",k=0,z=O.length;k<z;k++){var e=O[k],q=e.charCodeAt(0),B="";32===q&&(q=(e=e.trim()).charCodeAt(0)),B=0===k?58===q||38===q||123===q?n:n+" ":","+n+(32!==q&&38!==q?" ":""),j+=123===q?B+e:38===q?B+e.substring(1):B+e}h=j}m>0&&(125===w?v++:123===w&&0!==v&&v--,2===v?(0===s?h="":(h="}@-webkit-"+u+"}@-moz-"+u+"}",u=""),s=0,v=m>1?1:0,m--):1===s&&(u+=h))}a+=h,h=""}else 9!==w&&13!==w&&10!==w&&(h+=t[g]);g++}return b&&0!==a.length?n+"{"+a+"}":a}return t});
+!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(global):"function"==typeof define&&define.amd?define(e(window)):window.stylis=e(window)}(function(e){"use strict";function t(e,t,i,r){var n="",o="",s=e.charCodeAt(0);if(91===s){var d=e.substring(1,e.length-1).split("=");n="["+d[0]+"="+(o=d[1])+"]"}else o=35===s||46===s||62===s?(n=e).substring(1):n=e;for(var f=void 0===i||i===!0?o:"",l=void 0===r||r===!0?o:"",a="",h="",u="",c=t.length,g=0,b=0,s=0,m=0,v=1,w=0;g<c;){var p=t.charCodeAt(g);if(123===p||125===p||59===p){h+=t[g];var A=h.charCodeAt(0);32===A&&(A=(h=h.trim()).charCodeAt(0));var C=h.charCodeAt(1)||0;if(47===A&&42===C&&(A=(h=h.substring(h.indexOf("*/")+2)).charCodeAt(0),C=h.charCodeAt(1)||0),64===A)1===v&&(v=0,0!==a.length&&(a=n+"{"+a+"}")),107!==C&&114!==C||(b++,107===C?(u=h.substring(1,11)+f+h.substring(11),h="@-webkit-"+u,s=1):h="");else{var x=h.charCodeAt(2)||0;if(97===A&&110===C&&105===x){for(var y=h.substring(10).split(","),k="animation:",z=0,O=y.length;z<O;z++)k+=(0===z?"":",")+l+y[z].trim();h="-webkit-"+k+"-moz-"+k+k}else if(97===A&&112===C&&112===x||102===A&&108===C&&101===x||111===A&&114===C&&100===x)h="-webkit-"+h+"-moz-"+h+h;else if(116===A&&114===C&&97===x||104===A&&121===C&&112===x||117===A&&115===C&&101===x)h="-webkit-"+h+"-moz-"+h+"-ms-"+h+h;else if(100===A&&105===C&&115===x)h.indexOf("flex")>-1&&(h="display:-webkit-flex; display:flex;");else if(123===p&&(1===v&&(v=0,0!==a.length&&(a=n+"{"+a+"}")),0===b)){for(var j=h.split(","),k="",z=0,O=j.length;z<O;z++){var e=j[z],q=e.charCodeAt(0);32===q&&(q=(e=e.trim()).charCodeAt(0)),e=38===q?n+e.substring(1):n+(58===q?"":" ")+e,k+=0===z?e:","+e}h=k}0!==b&&(125===p?m++:123===p&&0!==m&&m--,2===m?(0===s?h="":(h="}@-moz-"+u+"}@"+u+"}",u=""),s=0,m=b>1?1:0,b--):1===s&&(u+=h))}a+=h,h="",w=0}else 1!==w||13!==p&&10!==p?9!==p&&13!==p&&10!==p&&(47===p&&0===w&&(w=1),h+=t[g]):h="";g++}return 1===v&&0!==a.length?n+"{"+a+"}":a}return t});

No alert changes

Improved metrics

Number of lines in readme file

281

increased by4.07%

Worsened metrics

Total package byte prevSize

19353

decreased by-3.11%

Lines of code

219

decreased by-7.2%

No dependency changes