stylis - npm Package Compare versions

Comparing version 0.6.6 to 0.6.7

package.json

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

README.md

@@ -6,4 +6,4 @@ # Stylis
 
-- ~900bytes minified+gzipped
-- ~1kb minified
+- ~1020bytes minified+gzipped
+- ~2kb minified
 
@@ -23,2 +23,14 @@ Stylis is a small css compiler that turns this
 
+:host {
+    color: red;
+}
+
+:host(.fancy) {
+    color: red;
+}
+
+:host-context(body) {
+    color: red;
+}
+
 // a line comment
@@ -72,5 +84,13 @@
 }
+#user {
+    color: red;
+}
+#user.fancy {
+    color: red;
+}
+body #user {
+    color: red;
+}
 #user .name {
     -webkit-transform: rotate(30deg);
-    -moz-transform: rotate(30deg);
     -ms-transform: rotate(30deg);
@@ -100,3 +120,2 @@ transform: rotate(30deg);
     -webkit-animation: userslidein 3s ease infinite;
-    -moz-animation: userslidein 3s ease infinite;
     animation: userslidein 3s ease infinite;
@@ -106,3 +125,2 @@ }
     -webkit-animation: userslidein 3s ease infinite;
-    -moz-animation: userslidein 3s ease infinite;
     animation: userslidein 3s ease infinite;
@@ -113,3 +131,3 @@ }
         -webkit-transform: translate(10px);
-        -moz-transform: translate(10px);
+        -ms-transform: translate(10px);
         transform: translate(10px);
@@ -119,22 +137,10 @@ }
         -webkit-transform: translate(200px);
-        -moz-transform: translate(200px);
+        -ms-transform: translate(200px);
         transform: translate(200px);
     }
 }
-@-moz-keyframes userslidein {
-    from {
-        -webkit-transform: translate(10px);
-        -moz-transform: translate(10px);
-        transform: translate(10px);
-    }
-    to {
-        -webkit-transform: translate(200px);
-        -moz-transform: translate(200px);
-        transform: translate(200px);
-    }
-}
 @keyframes userslidein {
     from {
         -webkit-transform: translate(10px);
-        -moz-transform: translate(10px);
+        -ms-transform: translate(10px);
         transform: translate(10px);
@@ -144,3 +150,3 @@ }
         -webkit-transform: translate(200px);
-        -moz-transform: translate(200px);
+        -ms-transform: translate(200px);
         transform: translate(200px);
@@ -181,3 +187,3 @@ }
 ```html
-<script src=https://unpkg.com/stylis@0.6.6/stylis.min.js></script>
+<script src=https://unpkg.com/stylis@0.6.7/stylis.min.js></script>
 ```
@@ -184,0 +190,0 @@

stylis.js

@@ -40,3 +40,3 @@ /*!
         var id     = '';
-        var type   = selector.charCodeAt(0);
+        var type   = selector.charCodeAt(0) || 0;
 
@@ -46,5 +46,13 @@ // [
             // `[data-id=namespace]` -> ['data-id', 'namespace']
-            var attr = selector.substring(1, selector.length-1).split('=');
+            var attr = selector.substring(1, selector.length-1).split('=');            
+            var char = (id = attr[1]).charCodeAt(0);
+
+            // [data-id="namespace"]/[data-id='namespace']
+            // --> "namespace"/'namspace' -> namespace
+            if (char === 34 || char === 39) {
+                id = id.substring(1, id.length-1);
+            }
+
             // re-build and extract namespace/id
-            prefix = '['+ attr[0] + '=' + (id = attr[1]) +']';
+            prefix = '['+ attr[0] + '=\'' + id +'\']';
         }
@@ -102,3 +110,3 @@ // `#` or `.` or `>`
                     // exit flat css context with the first block context
-                    flat === 1 && (flat = 0, output.length !== 0 && (output = prefix + '{' + output + '}'));
+                    flat === 1 && (flat = 0, output.length !== 0 && (output = prefix + ' {'+output+'}'));
 
@@ -170,3 +178,3 @@ // @keyframe/@root, `k` or @root, `r` character
                         // exit flat css context with the first block context
-                        flat === 1 && (flat = 0, output.length !== 0 && (output = prefix + '{' + output + '}'));
+                        flat === 1 && (flat = 0, output.length !== 0 && (output = prefix + ' {'+output+'}'));
 
@@ -191,3 +199,21 @@ if (special === 0) {
                                     selector = prefix + selector.substring(1);
-                                } else {
+                                }
+                                // :host 
+                                else if (firstChar === 58) {
+                                    var nextChar = (selector = selector.substring(5)).charCodeAt(0);
+                                    
+                                    // :host(selector)                                                    
+                                    if (nextChar === 40) {
+                                        selector = prefix + selector.substring(1).replace(')', '');
+                                    } 
+                                    // :host-context(selector)
+                                    else if (nextChar === 45) {
+                                        selector = selector.substring(9, selector.indexOf(')')) + ' ' + prefix + ' {';
+                                    }
+                                    // :host
+                                    else {
+                                        selector = prefix + selector;
+                                    }
+                                  }
+                                else {
                                     selector = prefix + (firstChar === 58 ? '' : ' ') + selector;
@@ -259,3 +285,3 @@ }
 
-        return flat === 1 && output.length !== 0 ? prefix+'{'+output+'}' : output;
+        return flat === 1 && output.length !== 0 ? prefix+' {'+output+'}' : output;
     }
@@ -262,0 +288,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="",s="",o=e.charCodeAt(0);if(91===o){var f=e.substring(1,e.length-1).split("=");n="["+f[0]+"="+(s=f[1])+"]"}else s=35===o||46===o||62===o?(n=e).substring(1):n=e;for(var l=void 0===i||i===!0?s:"",d=void 0===r||r===!0?s:"",a="",h="",c="",u=t.length,b=0,g=0,o=0,w=0,v=1,m=0;b<u;){var A=t.charCodeAt(b);if(123===A||125===A||59===A){h+=t[b];var C=h.charCodeAt(0);32===C&&(C=(h=h.trim()).charCodeAt(0));var p=h.charCodeAt(1)||0;if(47===C&&42===p&&(C=(h=h.substring(h.indexOf("*/")+2)).charCodeAt(0),p=h.charCodeAt(1)||0),64===C)1===v&&(v=0,0!==a.length&&(a=n+"{"+a+"}")),107!==p&&114!==p||(g++,107===p?(c=h.substring(1,11)+l+h.substring(11),h="@-webkit-"+c,o=1):h="");else{var k=h.charCodeAt(2)||0;if(97===C&&110===p&&105===k){for(var x=h.substring(10).split(","),y="animation:",z=0,O=x.length;z<O;z++)y+=(0===z?"":",")+d+x[z].trim();h="-webkit-"+y+y}else if(97===C&&112===p&&112===k)h="-webkit-"+h+"-moz-"+h+h;else if(104===C&&121===p&&112===k||117===C&&115===p&&101===k)h="-webkit-"+h+"-moz-"+h+"-ms-"+h+h;else if(102===C&&108===p&&101===k||111===C&&114===p&&100===k)h="-webkit-"+h+h;else if(116===C&&114===p&&97===k)h="-webkit-"+h+(102===h.charCodeAt(5)?"-ms-"+h:"")+h;else if(100===C&&105===p&&115===k)h.indexOf("flex")>-1&&(h="display:-webkit-flex; display:flex;");else if(123===A&&(1===v&&(v=0,0!==a.length&&(a=n+"{"+a+"}")),0===g)){for(var j=h.split(","),y="",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,y+=0===z?e:","+e}h=y}0!==g&&(125===A?w++:123===A&&0!==w&&w--,2===w?(0===o?h="":(h="}@"+c+"}",c=""),o=0,w=g>1?1:0,g--):1===o&&(c+=h))}a+=h,h="",m=0}else 1!==m||13!==A&&10!==A?9!==A&&13!==A&&10!==A&&(47===A&&0===m&&(m=1),h+=t[b]):h="";b++}return 1===v&&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 s="",n="",o=e.charCodeAt(0)||0;if(91===o){var l=e.substring(1,e.length-1).split("="),f=(n=l[1]).charCodeAt(0);34!==f&&39!==f||(n=n.substring(1,n.length-1)),s="["+l[0]+"='"+n+"']"}else n=35===o||46===o||62===o?(s=e).substring(1):s=e;for(var a=void 0===i||i===!0?n:"",d=void 0===r||r===!0?n:"",h="",u="",b="",c=t.length,g=0,v=0,o=0,w=0,A=1,C=0;g<c;){var m=t.charCodeAt(g);if(123===m||125===m||59===m){u+=t[g];var p=u.charCodeAt(0);32===p&&(p=(u=u.trim()).charCodeAt(0));var x=u.charCodeAt(1)||0;if(47===p&&42===x&&(p=(u=u.substring(u.indexOf("*/")+2)).charCodeAt(0),x=u.charCodeAt(1)||0),64===p)1===A&&(A=0,0!==h.length&&(h=s+" {"+h+"}")),107!==x&&114!==x||(v++,107===x?(b=u.substring(1,11)+a+u.substring(11),u="@-webkit-"+b,o=1):u="");else{var k=u.charCodeAt(2)||0;if(97===p&&110===x&&105===k){for(var y=u.substring(10).split(","),O="animation:",z=0,j=y.length;z<j;z++)O+=(0===z?"":",")+d+y[z].trim();u="-webkit-"+O+O}else if(97===p&&112===x&&112===k)u="-webkit-"+u+"-moz-"+u+u;else if(104===p&&121===x&&112===k||117===p&&115===x&&101===k)u="-webkit-"+u+"-moz-"+u+"-ms-"+u+u;else if(102===p&&108===x&&101===k||111===p&&114===x&&100===k)u="-webkit-"+u+u;else if(116===p&&114===x&&97===k)u="-webkit-"+u+(102===u.charCodeAt(5)?"-ms-"+u:"")+u;else if(100===p&&105===x&&115===k)u.indexOf("flex")>-1&&(u="display:-webkit-flex; display:flex;");else if(123===m&&(1===A&&(A=0,0!==h.length&&(h=s+" {"+h+"}")),0===v)){for(var q=u.split(","),O="",z=0,j=q.length;z<j;z++){var e=q[z],B=e.charCodeAt(0);if(32===B&&(B=(e=e.trim()).charCodeAt(0)),38===B)e=s+e.substring(1);else if(58===B){var D=(e=e.substring(5)).charCodeAt(0);e=40===D?s+e.substring(1).replace(")",""):45===D?e.substring(9,e.indexOf(")"))+" "+s+" {":s+e}else e=s+(58===B?"":" ")+e;O+=0===z?e:","+e}u=O}0!==v&&(125===m?w++:123===m&&0!==w&&w--,2===w?(0===o?u="":(u="}@"+b+"}",b=""),o=0,w=v>1?1:0,v--):1===o&&(b+=u))}h+=u,u="",C=0}else 1!==C||13!==m&&10!==m?9!==m&&13!==m&&10!==m&&(47===m&&0===C&&(C=1),u+=t[g]):u="";g++}return 1===A&&0!==h.length?s+" {"+h+"}":h}return t});

No alert changes

Improved metrics

Total package byte prevSize

21180

increased by6.83%

Lines of code

248

increased by10.22%

Number of lines in readme file

287

increased by2.14%

No dependency changes