stylis - npm Package Compare versions

Comparing version 0.6.3 to 0.6.4

CHANGELOG.md

@@ -1,7 +0,12 @@
-## 0.6.2 (December 04, 2016)
+## 0.6.4 (December 05, 2016)
 
+- improvements to parsing, do away with the little regex that was used.
+- handle edge cases with `@keyframes` nested in `@root` block
+
+## 0.6.3 (December 04, 2016)
+
 - patch `h1, &:before{}` pseudo selectors in multiple selectors
 
-## 0.6.1 (December 04, 2016)
+## 0.6.2 (December 04, 2016)
 
 - patch flat css `stylis('#id', 'color:red;')` to act as a block `stylis('#id', '&{color:red;}')`

package.json

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

README.md

@@ -163,3 +163,3 @@ # Stylis
 ```html
-<script src=https://unpkg.com/stylis@0.6.3/stylis.min.js></script>
+<script src=https://unpkg.com/stylis@0.6.4/stylis.min.js></script>
 ```
@@ -166,0 +166,0 @@

stylis.js

@@ -26,9 +26,2 @@ /*!
 
-    // regular expressions
-    var regPrefixKey = /@(keyframes +.*?}$)/g;
-    var regPrefix    = /((?:transform|appearance):.*?;)/g;
-    var regSpaces    = /  +/g;
-    var regAnimation = /(,|:) +/g;
-
-
     /**
@@ -64,11 +57,16 @@ * css compiler
 
+        var keyframeId  = (namespaceAnimations === void 0 || namespaceAnimations === true ) ? id : '';
+        var animationId = (namespaceKeyframes === void 0 || namespaceKeyframes === true ) ? id : '';
+
         var output = '';
-        var line = '';
+        var line   = '';
+        var blob   = '';
 
-        var keyframeId = (namespaceAnimations === void 0 || namespaceAnimations === true ) ? id : '';
-        var animationId = (namespaceKeyframes === void 0 || namespaceKeyframes === true ) ? id : '';
+        var len = styles.length;
+        var i   = 0;
 
-        var len  = styles.length;
-        var i    = 0;
-        var flat = true;
+        var flat    = 1;
+        var special = 0;
+        var type    = 0;
+        var closing = 0;
 
@@ -86,69 +84,42 @@ // parse + compile
                 // only trim when the first character is ` `
-                if (first === 32) { first = (line = line.trim()).charCodeAt(0); }
+                if (first === 32) { 
+                    first = (line = line.trim()).charCodeAt(0); 
+                }
 
-                // / character, line comment
-                if (first === 47) {
+                var second = line.charCodeAt(1) || 0;
+
+                // /, *, block comment
+                if (first === 47 && second === 42) {
+                    first = (line = line.substring(line.indexOf('*/')+2)).charCodeAt(0);
+                    second = line.charCodeAt(1) || 0;
+                }
+
+                // /, / line comment
+                if (first === 47 && second === 47) {
                     line = code === 125 ? '}' : '';
                 }
-                // @ character, special block
+                // @, special block
                 else if (first === 64) {
-                    // exit flat context
-                    if (flat) { flat = false; }
+                    // exit flat css context with the first block context
+                    if (flat === 1) {
+                        flat = 0;
+                        
+                        if (output.length !== 0) {
+                            output = prefix + '{' + output + '}'
+                        }
+                    }
 
-                    var second = line.charCodeAt(1) || 0;
-
                     // @keyframe/@root, `k` or @root, `r` character
                     if (second === 107 || second === 114) {
-                        i++;
+                        special++;
 
-                        if (second == 107) {
-                            // @keyframes
-                            line = line.substring(1, 11) + keyframeId + line.substring(11);
+                        if (second === 107) {
+                            line = line.substring(0, 11) + keyframeId + line.substring(11);
+                            blob = line.substring(1);
+                            type = 1;
                         } else {
-                            // @root
                             line = '';
                         }
-
-                        var close = 0;
-
-                        while (i < len) {
-                            var char = styles[i++];
-                            var _code = char.charCodeAt(0);
-
-                            // not `\t`, `\r`, `\n` characters
-                            if (_code !== 9 && _code !== 13 && _code !== 10) {
-                                // } character
-                                if (_code === 125) {
-                                    // previous block tag is close
-                                    if (close === 1) {
-                                        break;
-                                    }
-                                    // current block tag is close tag 
-                                    else {
-                                        close = 1;
-                                    }
-                                }
-                                // { character 
-                                else if (_code === 123) {
-                                    // current block tag is open
-                                    close = 0;
-                                }
-
-                                line += char;
-                            }
-                        }
-
-                        // 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+'}';
-                        } else {
-                            // vendor prefix keyframes in @root block
-                            line = line.replace(regPrefixKey, '@-webkit-$1}@-moz-$1}@$1}');
-                        }
                     }
                 } else {
-                    var second = line.charCodeAt(1) || 0;
                     var third = line.charCodeAt(2) || 0;
@@ -158,10 +129,11 @@
                     if (first === 97 && second === 110 && third === 105) {
-                        // remove space after `,` and `:` then split line
-                        var split = line.replace(regAnimation, '$1').split(':');
+                        var anims = line.substring(10).split(',');
+                        var build = 'animation:';
 
-                        // build line
-                        line = split[0] + ':' + animationId + (split[1].split(',')).join(','+animationId);
+                        for (var j = 0, length = anims.length; j < length; j++) {
+                            build += (j === 0 ? '' : ',') + animationId + anims[j].trim();
+                        }
 
                         // vendor prefix
-                        line = '-webkit-' + line + '-moz-' + line + line;
+                        line = '-webkit-' + build + '-moz-' + build + build;
                     }
@@ -200,50 +172,86 @@ // appearance: a, p, p
                         // exit flat css context with the first block context
-                        if (flat) {
-                            flat = false;
-
+                        if (flat === 1) {
+                            flat = 0;
+                            
                             if (output.length !== 0) {
-                                output = prefix + '{' + output + '}';
+                                output = prefix + '{' + output + '}'
                             }
                         }
 
-                        var split = line.split(',');
-                        var _line = '';
+                        if (special === 0) {
+                            var split = line.split(',');
+                            var _line = '';
 
-                        // iterate through characters and prefix multiple selectors with namesapces
-                        // i.e 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 = '';
+                            // iterate through characters and prefix multiple selectors with namesapces
+                            // i.e 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 = '';
 
-                            // trim if first character is a space
-                            if (_first === 32) {
-                                _first = (selector = selector.trim()).charCodeAt(0);
-                            }
+                                // trim if first character is a space
+                                if (_first === 32) {
+                                    _first = (selector = selector.trim()).charCodeAt(0);
+                                }
 
-                            // first selector
-                            if (j === 0) {
-                                // :, &, { characters
-                                if (_first === 58 || _first === 38 || _first === 123) {
-                                    affix = prefix;
+                                // first selector
+                                if (j === 0) {
+                                    // :, &, { characters
+                                    if (_first === 58 || _first === 38 || _first === 123) {
+                                        affix = prefix;
+                                    } else {
+                                        affix = prefix + ' ';
+                                    }
                                 } else {
-                                    affix = prefix + ' ';
+                                    // ` `, &
+                                    affix = ',' + prefix + (_first !== 32 && _first !== 38 ? ' ' : '');
                                 }
-                            } else {
-                                // ` `, &
-                                affix = ',' + prefix + (_first !== 32 && _first !== 38 ? ' ' : '');
+
+                                if (_first === 123) {
+                                    // { character
+                                    _line += affix + selector;
+                                } else if (_first === 38) {
+                                    // & character
+                                    _line += affix + selector.substring(1);
+                                } else {
+                                    _line += affix + selector;
+                                }
                             }
 
-                            if (_first === 123) {
-                                // { character
-                                _line += affix + selector;
-                            } else if (_first === 38) {
-                                // & character
-                                _line += affix + selector.substring(1);
-                            } else {
-                                _line += affix + selector;
+                            line = _line;
+                        }
+                    }
+
+                    // @root/@keyframes
+                    if (special > 0) {
+                        // find the closing tag
+                        if (code === 125) {
+                            closing++;
+                        } else if (code === 123 && closing !== 0) {
+                            closing--;
+                        }
+
+                        // closing tag
+                        if (closing === 2) {
+                            // @root
+                            if (type === 0) {
+                                line = '';
                             }
+                            // @keyframes 
+                            else {
+                                // vendor prefix
+                                line = '}@-webkit-'+blob+'}@-moz-'+blob+'}';
+                                // reset blob
+                                blob = '';
+                            }
+
+                            // reset flags
+                            type = 0;
+                            closing = special > 1 ? 1 : 0;
+                            special--;
                         }
-
-                        line = _line;
+                        // @keyframes 
+                        else if (type === 1) {
+                            blob += line;
+                        }
                     }
@@ -250,0 +258,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 i(e,i,s,f){var l="",n="",d=e.charCodeAt(0);if(91===d){var c=e.substring(1,e.length-1).split("=");l="["+c[0]+"="+(n=c[1])+"]"}else n=62===d||35===d||46===d?(l=e).substring(1):l=e;for(var p="",h="",b=void 0===s||s===!0?n:"",g=void 0===f||f===!0?n:"",m=i.length,u=0,v=!0;u<m;){var w=i.charCodeAt(u);if(123===w||125===w||59===w){h+=i[u];var A=h.charCodeAt(0);if(32===A&&(A=(h=h.trim()).charCodeAt(0)),47===A)h=125===w?"}":"";else if(64===A){v&&(v=!1);var C=h.charCodeAt(1)||0;if(107===C||114===C){u++,h=107==C?h.substring(1,11)+b+h.substring(11):"";for(var k=0;u<m;){var $=i[u++],y=$.charCodeAt(0);if(9!==y&&13!==y&&10!==y){if(125===y){if(1===k)break;k=1}else 123===y&&(k=0);h+=$}}h=h.replace(o,"").replace(t,"-webkit-$1-moz-$1-ms-$1$1"),h=107===C?"@-webkit-"+h+"}@-moz-"+h+"}@"+h+"}":h.replace(r,"@-webkit-$1}@-moz-$1}@$1}")}}else{var C=h.charCodeAt(1)||0,x=h.charCodeAt(2)||0;if(97===A&&110===C&&105===x){var z=h.replace(a,"$1").split(":");h=z[0]+":"+g+z[1].split(",").join(","+g),h="-webkit-"+h+"-moz-"+h+h}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&&115===h.charCodeAt(5))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===w){v&&(v=!1,0!==p.length&&(p=l+"{"+p+"}"));for(var z=h.split(","),j="",O=0,q=z.length;O<q;O++){var e=z[O],B=e.charCodeAt(0),D="";32===B&&(B=(e=e.trim()).charCodeAt(0)),D=0===O?58===B||38===B||123===B?l:l+" ":","+l+(32!==B&&38!==B?" ":""),j+=123===B?D+e:38===B?D+e.substring(1):D+e}h=j}}p+=h,h=""}else 9!==w&&13!==w&&10!==w&&(h+=i[u]);u++}return v&&0!==p.length?l+"{"+p+"}":p}var r=/@(keyframes +.*?}$)/g,t=/((?:transform|appearance):.*?;)/g,o=/  +/g,a=/(,|:) +/g;return i});
+!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});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19975

increased by0.93%

Lines of code

236

increased by4.42%

No dependency changes