Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
stylis - npm Package Compare versions
Comparing version 0.7.1 to 0.8.0
@@ -0,1 +1,8 @@ | ||
| ## 0.8.0 (December 19, 2016) | ||
| - add nested support `h1 { color: red; &:hover { color: blue; } }` | ||
| - add support for flat css in @media block | ||
| - improve flat css support | ||
| - patch `//` line comments | ||
| ## 0.7.0 (December 12, 2016) | ||
@@ -2,0 +9,0 @@ |
@@ -5,3 +5,3 @@ { | ||
| "description": "stylis is a small css compiler", | ||
| "version": "0.7.1", | ||
| "version": "0.8.0", | ||
| "homepage": "https://github.com/thysultan/stylis.js", | ||
@@ -8,0 +8,0 @@ "license": "MIT", |
@@ -7,3 +7,3 @@ # Stylis | ||
| - ~1Kb minified+gzipped | ||
| - ~2kb minified | ||
| - ~3kb minified | ||
@@ -72,4 +72,24 @@ Stylis is a small css compiler that turns this | ||
| @media (max-width: 600px) { | ||
| & { appearance: none; } | ||
| display: block; | ||
| &, h1 { | ||
| appearance: none; | ||
| } | ||
| } | ||
| // nested | ||
| h1 { | ||
| color: red; | ||
| h2 { | ||
| display: block; | ||
| h3, &:hover { | ||
| color: blue; | ||
| } | ||
| } | ||
| font-size: 12px; | ||
| } | ||
| ``` | ||
@@ -151,3 +171,3 @@ | ||
| @media (max-width: 600px) { | ||
| #user { | ||
| #user, #user h1 { | ||
| -webkit-appearance: none; | ||
@@ -157,3 +177,21 @@ -moz-appearance: none; | ||
| } | ||
| #user { | ||
| display: block; | ||
| } | ||
| } | ||
| h1 { | ||
| color: red; | ||
| font-size: 12px; | ||
| } | ||
| h1 h2 { | ||
| display: block; | ||
| } | ||
| h1 h2 h3, | ||
| h1 h2 h2:hover { | ||
| color: blue; | ||
| } | ||
| ``` | ||
@@ -184,3 +222,3 @@ | ||
| ```html | ||
| <script src=https://unpkg.com/stylis@0.7.1/stylis.min.js></script> | ||
| <script src=https://unpkg.com/stylis@0.8.0/stylis.min.js></script> | ||
| ``` | ||
@@ -187,0 +225,0 @@ |
250
stylis.js
| /*! | ||
| * | ||
| * __ ___ | ||
@@ -42,6 +41,6 @@ * _____/ /___ __/ (_)____ | ||
| // [ | ||
| // [ attr selector | ||
| if (type === 91) { | ||
| // `[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); | ||
@@ -55,6 +54,5 @@ | ||
| // re-build and extract namespace/id | ||
| prefix = '['+ attr[0] + '=\'' + id +'\']'; | ||
| } | ||
| // `#` or `.` or `>` | ||
| // `#` `.` `>` id class and descendant selectors | ||
| else if (type === 35 || type === 46 || type === 62) { | ||
@@ -74,2 +72,4 @@ id = (prefix = selector).substring(1); | ||
| var blob = ''; | ||
| var prev = ''; | ||
| var flat = ''; | ||
@@ -82,4 +82,4 @@ var len = styles.length; | ||
| var close = 0; | ||
| var flat = 1; | ||
| var comment = 0; | ||
| var depth = 0; | ||
@@ -101,2 +101,3 @@ // parse + compile | ||
| // default to 0 instead of NaN if there is no second character | ||
| var second = line.charCodeAt(1) || 0; | ||
@@ -106,2 +107,3 @@ | ||
| if (first === 47 && second === 42) { | ||
| // travel to end of comment and update first and second characters | ||
| first = (line = line.substring(line.indexOf('*/')+2)).charCodeAt(0); | ||
@@ -111,11 +113,11 @@ second = line.charCodeAt(1) || 0; | ||
| // ignore line comments | ||
| if (comment === 1) { | ||
| line = ''; comment = 0; | ||
| } | ||
| // @, special block | ||
| if (first === 64) { | ||
| // exit flat css context with the first block context | ||
| flat === 1 && (flat = 0, output.length !== 0 && (output = prefix + ' {'+output+'}')); | ||
| else if (first === 64) { | ||
| // @keyframe/@global, `k` or @global, `g` character | ||
| if (second === 107 || second === 103) { | ||
| special++; | ||
| // k, @keyframes | ||
| if (second === 107) { | ||
@@ -125,7 +127,16 @@ blob = line.substring(1, 11) + keyframeNs + line.substring(11); | ||
| type = 1; | ||
| } else { | ||
| } | ||
| // g, @global | ||
| else { | ||
| line = ''; | ||
| } | ||
| } | ||
| } else { | ||
| // @media `m` character | ||
| else if (second === 109) { | ||
| type = 2; | ||
| } | ||
| special++; | ||
| } | ||
| else { | ||
| var third = line.charCodeAt(2) || 0; | ||
@@ -182,87 +193,147 @@ | ||
| else if (code === 123) { | ||
| // exit flat css context with the first block context | ||
| flat === 1 && (flat = 0, output.length !== 0 && (output = prefix + ' {'+output+'}')); | ||
| depth++; | ||
| if (special === 0) { | ||
| var split = line.split(','); | ||
| var build = ''; | ||
| // nested selector | ||
| if (depth === 2) { | ||
| // discard first character { | ||
| i++; | ||
| // 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 firstChar = selector.charCodeAt(0); | ||
| // inner content of block | ||
| var inner = ''; | ||
| var nestSel = line.substring(0, line.length-1).split(','); | ||
| var prevSel = prev.substring(0, prev.length-1).split(','); | ||
| // ` `, trim if first char is space | ||
| if (firstChar === 32) { | ||
| firstChar = (selector = selector.trim()).charCodeAt(0); | ||
| // keep track of opening `{` and `}` occurrences | ||
| var counter = 1; | ||
| // travel to the end of the block | ||
| while (i < len) { | ||
| var char = styles.charCodeAt(i); | ||
| // {, }, nested blocks may have nested blocks | ||
| char === 123 ? counter++ : char === 125 && counter--; | ||
| // break when the has ended | ||
| if (counter === 0) break; | ||
| // build content of nested block | ||
| inner += styles[i++]; | ||
| } | ||
| // [, [title="a,b,..."] | ||
| if (firstChar === 91) { | ||
| for (var k = j+1, l = length-j; k < l; k++) { | ||
| var broken = (selector += ',' + split[k]).trim(); | ||
| // handle multiple selectors: h1, h2 { div, h4 {} } should generate | ||
| // -> h1 div, h2 div, h2 h4, h2 div {} | ||
| for (var j = 0, length = prevSel.length; j < length; j++) { | ||
| // extract value, prep index for reuse | ||
| var val = prevSel[j]; prevSel[j] = ''; | ||
| // since there can also be multiple nested selectors | ||
| for (var k = 0, l = nestSel.length; k < l; k++) { | ||
| prevSel[j] += ( | ||
| (val.replace(prefix, '').trim() + ' ' + nestSel[k].trim()).trim() + | ||
| (k === l-1 ? '' : ',') | ||
| ); | ||
| } | ||
| } | ||
| // ] | ||
| if (broken.charCodeAt(broken.length-1) === 93) { | ||
| length -= k; | ||
| split.splice(j, k); | ||
| break; | ||
| // create block and update styles length | ||
| len += (styles += (prevSel.join(',') + '{' + inner + '}').replace(/&| +&/g, '')).length; | ||
| // clear current line, to avoid add block elements to the normal flow | ||
| line = ''; | ||
| // decreament depth | ||
| depth--; | ||
| } | ||
| // top-level selector | ||
| else { | ||
| var split = line.split(','); | ||
| var build = ''; | ||
| // 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 firstChar = selector.charCodeAt(0); | ||
| // ` `, trim if first char is space | ||
| if (firstChar === 32) { | ||
| firstChar = (selector = selector.trim()).charCodeAt(0); | ||
| } | ||
| // [, [title="a,b,..."] | ||
| if (firstChar === 91) { | ||
| for (var k = j+1, l = length-j; k < l; k++) { | ||
| var broken = (selector += ',' + split[k]).trim(); | ||
| // ] | ||
| if (broken.charCodeAt(broken.length-1) === 93) { | ||
| length -= k; | ||
| split.splice(j, k); | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // & | ||
| if (firstChar === 38) { | ||
| selector = prefix + selector.substring(1); | ||
| } | ||
| // : | ||
| else if (firstChar === 58) { | ||
| var secondChar = selector.charCodeAt(1); | ||
| // & | ||
| if (firstChar === 38) { | ||
| // before: & { | ||
| selector = prefix + selector.substring(1); | ||
| // after: ${prefix} { | ||
| } | ||
| // : | ||
| else if (firstChar === 58) { | ||
| var secondChar = selector.charCodeAt(1); | ||
| // :host | ||
| if (secondChar === 104) { | ||
| 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 | ||
| if (secondChar === 104) { | ||
| var nextChar = (selector = selector.substring(5)).charCodeAt(0); | ||
| // :host(selector) | ||
| if (nextChar === 40) { | ||
| // before: `(selector)` | ||
| selector = prefix + selector.substring(1).replace(')', ''); | ||
| // after: ${prefx} selector { | ||
| } | ||
| // :host-context(selector) | ||
| else if (nextChar === 45) { | ||
| // before: `-context(selector)` | ||
| selector = selector.substring(9, selector.indexOf(')')) + ' ' + prefix + ' {'; | ||
| // after: selector ${prefix} { | ||
| } | ||
| // :host | ||
| else { | ||
| selector = prefix + selector; | ||
| } | ||
| } | ||
| // :host | ||
| // :global(selector) | ||
| else if (secondChar === 103) { | ||
| // before: `:global(selector)` | ||
| selector = selector.substring(8).replace(')', ''); | ||
| // after: selector | ||
| } | ||
| // :hover, :active, :focus, etc... | ||
| else { | ||
| selector = prefix + selector; | ||
| // :, insure `div:hover` does not end up as `div :hover` | ||
| selector = prefix + (firstChar === 58 ? '' : ' ') + selector; | ||
| } | ||
| } | ||
| // :global() | ||
| else if (secondChar === 103) { | ||
| selector = selector.substring(8).replace(')', ''); | ||
| } | ||
| // :hover, :active, :focus, etc... | ||
| else { | ||
| // :, insure `div:hover` does not end up as `div :hover` | ||
| selector = prefix + (firstChar === 58 ? '' : ' ') + selector; | ||
| } | ||
| // if first selector do not prefix with `,` | ||
| build += j === 0 ? selector : ',' + selector; | ||
| } | ||
| else { | ||
| selector = prefix + (firstChar === 58 ? '' : ' ') + selector; | ||
| } | ||
| build += j === 0 ? selector : ',' + selector; | ||
| prev = line = build; | ||
| } | ||
| line = build; | ||
| } | ||
| } | ||
| // } character | ||
| else if (code === 125 && depth !== 0) { | ||
| depth--; | ||
| } | ||
| // @global/@keyframes | ||
| if (special !== 0) { | ||
| // find the closing tag | ||
| if (code === 125) { | ||
| close++; | ||
| } else if (code === 123 && close !== 0) { | ||
| close--; | ||
| } | ||
| code === 125 ? close++ : (code === 123 && close !== 0 && close--); | ||
@@ -276,3 +347,3 @@ // closing tag | ||
| // @keyframes | ||
| else { | ||
| else if (type === 1) { | ||
| // vendor prefix | ||
@@ -283,7 +354,11 @@ line = '}@'+blob+'}'; | ||
| } | ||
| // @media | ||
| else if (type === 2) { | ||
| blob.length !== 0 && (line = prefix + ' {'+blob+'}' + line); | ||
| // reset blob | ||
| blob = ''; | ||
| } | ||
| // reset flags | ||
| type = 0; | ||
| close = special > 1 ? 1 : 0; | ||
| special--; | ||
| type = 0; close--; special--; | ||
| } | ||
@@ -294,12 +369,19 @@ // @keyframes | ||
| } | ||
| // @media flat context | ||
| else if (type === 2 && depth === 0 && code !== 125) { | ||
| blob += line; line = ''; | ||
| } | ||
| } | ||
| // flat context | ||
| else if (depth === 0 && code !== 125) { | ||
| flat += line; line = ''; | ||
| } | ||
| } | ||
| output += line; | ||
| line = ''; | ||
| comment = 0; | ||
| // add line to output, reset line buffer and comment signal | ||
| output += line; line = ''; comment = 0; | ||
| } | ||
| // build line by line | ||
| else { | ||
| // \r, \n, remove line comments | ||
| // \r, \n, ignore line comments | ||
| if (comment === 1 && (code === 13 || code === 10)) { | ||
@@ -310,3 +392,6 @@ line = ''; | ||
| else if (code !== 9 && code !== 13 && code !== 10) { | ||
| // / line comment signal | ||
| code === 47 && comment === 0 && (comment = 1); | ||
| // build line buffer | ||
| line += styles[i]; | ||
@@ -320,3 +405,4 @@ } | ||
| return flat === 1 && output.length !== 0 ? prefix+' {'+output+'}' : output; | ||
| // if there is flat css, append | ||
| return output + (flat.length === 0 ? '' : prefix + ' {' + flat + '}'); | ||
| } | ||
@@ -323,0 +409,0 @@ |
@@ -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 s="",n="",o=e.charCodeAt(0)||0;if(91===o){var a=e.substring(1,e.length-1).split("="),l=(n=a[1]).charCodeAt(0);34!==l&&39!==l||(n=n.substring(1,n.length-1)),s="["+a[0]+"='"+n+"']"}else n=35===o||46===o||62===o?(s=e).substring(1):s=e;for(var f=void 0===i||i===!0?n:"",d=void 0===r||r===!0?n:"",c="",h="",b="",g=t.length,u=0,v=0,o=0,A=0,C=1,p=0;u<g;){var w=t.charCodeAt(u);if(123===w||125===w||59===w){h+=t[u];var m=h.charCodeAt(0);32===m&&(m=(h=h.trim()).charCodeAt(0));var k=h.charCodeAt(1)||0;if(47===m&&42===k&&(m=(h=h.substring(h.indexOf("*/")+2)).charCodeAt(0),k=h.charCodeAt(1)||0),64===m)1===C&&(C=0,0!==c.length&&(c=s+" {"+c+"}")),107!==k&&103!==k||(v++,107===k?(b=h.substring(1,11)+f+h.substring(11),h="@-webkit-"+b,o=1):h="");else{var x=h.charCodeAt(2)||0;if(97===m&&110===k&&105===x){for(var y=h.substring(10).split(","),O="animation:",z=0,j=y.length;z<j;z++)O+=(0===z?"":",")+d+y[z].trim();h="-webkit-"+O+O}else if(97===m&&112===k&&112===x)h="-webkit-"+h+"-moz-"+h+h;else if(104===m&&121===k&&112===x||117===m&&115===k&&101===x)h="-webkit-"+h+"-moz-"+h+"-ms-"+h+h;else if(102===m&&108===k&&101===x||111===m&&114===k&&100===x)h="-webkit-"+h+h;else if(116===m&&114===k&&97===x)h="-webkit-"+h+(102===h.charCodeAt(5)?"-ms-"+h:"")+h;else if(100===m&&105===k&&115===x)h.indexOf("flex")>-1&&(h="display:-webkit-flex; display:flex;");else if(123===w&&(1===C&&(C=0,0!==c.length&&(c=s+" {"+c+"}")),0===v)){for(var q=h.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)),91===B)for(var D=z+1,E=j-z;D<E;D++){var F=(e+=","+q[D]).trim();if(93===F.charCodeAt(F.length-1)){j-=D,q.splice(z,D);break}}if(38===B)e=s+e.substring(1);else if(58===B){var G=e.charCodeAt(1);if(104===G){var H=(e=e.substring(5)).charCodeAt(0);e=40===H?s+e.substring(1).replace(")",""):45===H?e.substring(9,e.indexOf(")"))+" "+s+" {":s+e}else e=103===G?e.substring(8).replace(")",""):s+(58===B?"":" ")+e}else e=s+(58===B?"":" ")+e;O+=0===z?e:","+e}h=O}0!==v&&(125===w?A++:123===w&&0!==A&&A--,2===A?(0===o?h="":(h="}@"+b+"}",b=""),o=0,A=v>1?1:0,v--):1===o&&(b+=h))}c+=h,h="",p=0}else 1!==p||13!==w&&10!==w?9!==w&&13!==w&&10!==w&&(47===w&&0===p&&(p=1),h+=t[u]):h="";u++}return 1===C&&0!==c.length?s+" {"+c+"}":c}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="",l=e.charCodeAt(0)||0;if(91===l){var a=e.substring(1,e.length-1).split("="),o=(n=a[1]).charCodeAt(0);34!==o&&39!==o||(n=n.substring(1,n.length-1)),s="["+a[0]+"='"+n+"']"}else n=35===l||46===l||62===l?(s=e).substring(1):s=e;for(var f=void 0===i||i===!0?n:"",d=void 0===r||r===!0?n:"",g="",h="",c="",b="",u="",v=t.length,p=0,A=0,l=0,C=0,m=0,w=0;p<v;){var k=t.charCodeAt(p);if(123===k||125===k||59===k){h+=t[p];var x=h.charCodeAt(0);32===x&&(x=(h=h.trim()).charCodeAt(0));var y=h.charCodeAt(1)||0;if(47===x&&42===y&&(x=(h=h.substring(h.indexOf("*/")+2)).charCodeAt(0),y=h.charCodeAt(1)||0),1===m)h="",m=0;else if(64===x)107===y||103===y?107===y?(c=h.substring(1,11)+f+h.substring(11),h="@-webkit-"+c,l=1):h="":109===y&&(l=2),A++;else{var O=h.charCodeAt(2)||0;if(97===x&&110===y&&105===O){for(var j=h.substring(10).split(","),z="animation:",q=0,B=j.length;q<B;q++)z+=(0===q?"":",")+d+j[q].trim();h="-webkit-"+z+z}else if(97===x&&112===y&&112===O)h="-webkit-"+h+"-moz-"+h+h;else if(104===x&&121===y&&112===O||117===x&&115===y&&101===O)h="-webkit-"+h+"-moz-"+h+"-ms-"+h+h;else if(102===x&&108===y&&101===O||111===x&&114===y&&100===O)h="-webkit-"+h+h;else if(116===x&&114===y&&97===O)h="-webkit-"+h+(102===h.charCodeAt(5)?"-ms-"+h:"")+h;else if(100===x&&105===y&&115===O)h.indexOf("flex")>-1&&(h="display:-webkit-flex; display:flex;");else if(123===k){if(w++,0===A)if(2===w){p++;for(var D="",E=h.substring(0,h.length-1).split(","),F=b.substring(0,b.length-1).split(","),G=1;p<v;){var o=t.charCodeAt(p);if(123===o?G++:125===o&&G--,0===G)break;D+=t[p++]}for(var q=0,B=F.length;q<B;q++){var H=F[q];F[q]="";for(var I=0,J=E.length;I<J;I++)F[q]+=(H.replace(s,"").trim()+" "+E[I].trim()).trim()+(I===J-1?"":",")}v+=(t+=(F.join(",")+"{"+D+"}").replace(/&| +&/g,"")).length,h="",w--}else{for(var K=h.split(","),z="",q=0,B=K.length;q<B;q++){var e=K[q],L=e.charCodeAt(0);if(32===L&&(L=(e=e.trim()).charCodeAt(0)),91===L)for(var I=q+1,J=B-q;I<J;I++){var M=(e+=","+K[I]).trim();if(93===M.charCodeAt(M.length-1)){B-=I,K.splice(q,I);break}}if(38===L)e=s+e.substring(1);else if(58===L){var N=e.charCodeAt(1);if(104===N){var P=(e=e.substring(5)).charCodeAt(0);e=40===P?s+e.substring(1).replace(")",""):45===P?e.substring(9,e.indexOf(")"))+" "+s+" {":s+e}else e=103===N?e.substring(8).replace(")",""):s+(58===L?"":" ")+e}else e=s+(58===L?"":" ")+e;z+=0===q?e:","+e}b=h=z}}else 125===k&&0!==w&&w--;0!==A?(125===k?C++:123===k&&0!==C&&C--,2===C?(0===l?h="":1===l?(h="}@"+c+"}",c=""):2===l&&(0!==c.length&&(h=s+" {"+c+"}"+h),c=""),l=0,C--,A--):1===l?c+=h:2===l&&0===w&&125!==k&&(c+=h,h="")):0===w&&125!==k&&(u+=h,h="")}g+=h,h="",m=0}else 1!==m||13!==k&&10!==k?9!==k&&13!==k&&10!==k&&(47===k&&0===m&&(m=1),h+=t[p]):h="";p++}return g+(0===u.length?"":s+" {"+u+"}")}return t}); |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by26.11%
29254
- Lines of code
- increased by29.04%
351
- Number of lines in readme file
- increased by13.19%
326
No dependency changes