Comparing version 1.0.3 to 1.1.0
@@ -189,3 +189,5 @@ (function (global, factory) { | ||
// to diff future dynamic style with those | ||
renderer.renderRule(rule, {}); | ||
if (Object.keys(props).length > 0) { | ||
renderer.renderRule(rule, {}); | ||
} | ||
} | ||
@@ -500,2 +502,9 @@ | ||
// enhance renderer with passed set of enhancers | ||
if (config.enhancers) { | ||
config.enhancers.forEach(function (enhancer) { | ||
return renderer = enhancer(renderer); | ||
}); | ||
} | ||
return renderer; | ||
@@ -502,0 +511,0 @@ } |
@@ -1,1 +0,1 @@ | ||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):e.Fela=r()}(this,function(){"use strict";function e(e,r){return r={exports:{}},e(r,r.exports),r.exports}function r(e){var r=0,n=0,t=void 0,i=e.length;if(0===i)return"";for(;n<i;++n)t=e.charCodeAt(n),r=(r<<5)-r+t,r|=0;return"-"+r.toString(36)}function n(e){return Object.keys(e).sort().reduce(function(r,n){return r+n+e[n]},"")}function t(e){return Object.keys(l).reduce(function(r,n){return e.indexOf(n)>-1&&(r=l[n]),r},void 0)}function i(e){return Object.keys(e).reduce(function(r,n){return r.length>0&&(r+=";"),r+=p(n)+":"+e[n]},"")}function o(e,r){var n=arguments.length<=2||void 0===arguments[2]?[""]:arguments[2],t=Object.keys(e).reduce(function(r,n){return r+n+"{"+i(e[n])+"}"},"");return n.reduce(function(e,n){return e+"@"+n+"keyframes "+r+"{"+t+"}"},"")}function f(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],f={listeners:[],keyframePrefixes:e.keyframePrefixes||["-webkit-","-moz-"],plugins:e.plugins||[],clear:function(){f.fontFaces="",f.keyframes="",f.statics="",f.rules="",f.mediaRules={},f.rendered={},f.base={},f.ids=[],f._emitChange()},renderRule:function(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];f.ids.indexOf(e)<0&&(f.ids.push(e),f.renderRule(e,{}));var n=f.ids.indexOf(e),t="c"+n+f._generatePropsReference(r);if(!f.rendered.hasOwnProperty(t)){var i=f._diffStyle(e(r),f.base[n]);if(Object.keys(i).length>0){var o=f._processStyle(i,{type:"rule",className:t,id:n,props:r,rule:e});f._renderStyle(t,o),f.rendered[t]=f._didChange,f._didChange&&(f._didChange=!1,f._emitChange())}else f.rendered[t]=!1;t==="c"+n&&(f.base[n]=e(r))}var u="c"+n;return f.rendered[t]?t!==u?u+" "+t:t:u},renderKeyframe:function(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];f.ids.indexOf(e)<0&&f.ids.push(e);var n=f._generatePropsReference(r),t="k"+f.ids.indexOf(e)+n;if(!f.rendered.hasOwnProperty(t)){var i=f._processStyle(e(r),{type:"keyframe",keyframe:e,props:r,animationName:t,id:f.ids.indexOf(e)}),u=o(i,t,f.keyframePrefixes);f.rendered[t]=!0,f.keyframes+=u,f._emitChange()}return t},renderFont:function(e,r){var n=arguments.length<=2||void 0===arguments[2]?{}:arguments[2];return f.rendered.hasOwnProperty(e)||!function(){var o={fontFamily:"'"+e+"'",src:r.map(function(e){return"url('"+e+"') format('"+t(e)+"')"}).join(",")},u=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(n).filter(function(e){return u.indexOf(e)>-1}).forEach(function(e){return o[e]=n[e]});var s="@font-face{"+i(o)+"}";f.rendered[e]=!0,f.fontFaces+=s,f._emitChange()}(),e},renderStatic:function(e,r){var t="string"==typeof e?e:r+n(e);if(!f.rendered.hasOwnProperty(t)){if("string"==typeof e)f.statics+=e.replace(/\s{2,}/g,"");else{var o=f._processStyle(e,{selector:r,type:"static"});f.statics+=r+"{"+i(o)+"}"}f.rendered[t]=!0,f._emitChange()}},renderToString:function(){var e=f.fontFaces+f.statics+f.rules;for(var r in f.mediaRules)e+="@media "+r+"{"+f.mediaRules[r]+"}";return e+f.keyframes},subscribe:function(e){return f.listeners.push(e),{unsubscribe:function(){return f.listeners.splice(f.listeners.indexOf(e),1)}}},_emitChange:function(){var e=f.renderToString();f.listeners.forEach(function(r){return r(e)})},_generatePropsReference:function(e){return r(n(e))},_processStyle:function(e,r){return f.plugins.reduce(function(e,n){return n(e,r)},e)},_diffStyle:function(e){var r=this,n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return Object.keys(e).reduce(function(t,i){var o=e[i];if(o instanceof Object&&!Array.isArray(o)){var f=r._diffStyle(o,n[i]);Object.keys(f).length>0&&(t[i]=f)}else if(void 0!==o&&!n.hasOwnProperty(i)||n[i]!==o){if("string"==typeof o&&o.indexOf("undefined")>-1)return t;t[i]=o}return t},{})},_renderStyle:function(e,r){var n=arguments.length<=2||void 0===arguments[2]?"":arguments[2],t=arguments.length<=3||void 0===arguments[3]?"":arguments[3],o=Object.keys(r).reduce(function(i,o){var u=r[o];if(u instanceof Object&&!Array.isArray(u)){if(":"===o.charAt(0))f._renderStyle(e,u,n+o,t);else if("@media"===o.substr(0,6)){var s=o.slice(6).trim(),a=t.length>0?t+" and "+s:s;f._renderStyle(e,u,n,a)}}else i[o]=u;return i},{});if(Object.keys(o).length>0){var u="."+e+n+"{"+i(o)+"}";f._didChange=!0,t.length>0?(f.mediaRules.hasOwnProperty(t)||(f.mediaRules[t]=""),f.mediaRules[t]+=u):f.rules+=u}}};return f.keyframePrefixes.push(""),f.clear(),f}function u(e){for(var r=arguments.length,n=Array(r>1?r-1:0),t=1;t<r;t++)n[t-1]=arguments[t];return n.reduce(function(e,r){for(var n in r){var t=r[n];e[n]instanceof Object&&t instanceof Object?e[n]=u({},e[n],t):e[n]=t}return e},e)}function s(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];return function(e){return r.reduce(function(r,n){return u(r,n(e))},{})}}function a(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];return function(e){return function(){return r.reduce(function(e,r){return r(e)},e.apply(void 0,arguments))}}}function c(e,r){if(!r||r.nodeType!==v)throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");r.setAttribute("data-fela-stylesheet",""),e.subscribe(function(e){return r.textContent=e});var n=e.renderToString();r.textContent!==n&&(r.textContent=n)}var d={};d["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},d["extends"]=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e};var l={".woff":"woff",".eof":"eof",".ttf":"truetype",".svg":"svg"},y=e(function(e){function r(e){return e.replace(n,"-$&").toLowerCase().replace(t,"-ms-")}var n=/[A-Z]/g,t=/^ms-/;e.exports=r}),p=y&&"object"==typeof y&&"default"in y?y["default"]:y,v=1,h={createRenderer:f,combineRules:s,enhance:a,render:c};return h}); | ||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):e.Fela=r()}(this,function(){"use strict";function e(e,r){return r={exports:{}},e(r,r.exports),r.exports}function r(e){var r=0,n=0,t=void 0,i=e.length;if(0===i)return"";for(;n<i;++n)t=e.charCodeAt(n),r=(r<<5)-r+t,r|=0;return"-"+r.toString(36)}function n(e){return Object.keys(e).sort().reduce(function(r,n){return r+n+e[n]},"")}function t(e){return Object.keys(l).reduce(function(r,n){return e.indexOf(n)>-1&&(r=l[n]),r},void 0)}function i(e){return Object.keys(e).reduce(function(r,n){return r.length>0&&(r+=";"),r+=p(n)+":"+e[n]},"")}function o(e,r){var n=arguments.length<=2||void 0===arguments[2]?[""]:arguments[2],t=Object.keys(e).reduce(function(r,n){return r+n+"{"+i(e[n])+"}"},"");return n.reduce(function(e,n){return e+"@"+n+"keyframes "+r+"{"+t+"}"},"")}function f(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],f={listeners:[],keyframePrefixes:e.keyframePrefixes||["-webkit-","-moz-"],plugins:e.plugins||[],clear:function(){f.fontFaces="",f.keyframes="",f.statics="",f.rules="",f.mediaRules={},f.rendered={},f.base={},f.ids=[],f._emitChange()},renderRule:function(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];f.ids.indexOf(e)<0&&(f.ids.push(e),Object.keys(r).length>0&&f.renderRule(e,{}));var n=f.ids.indexOf(e),t="c"+n+f._generatePropsReference(r);if(!f.rendered.hasOwnProperty(t)){var i=f._diffStyle(e(r),f.base[n]);if(Object.keys(i).length>0){var o=f._processStyle(i,{type:"rule",className:t,id:n,props:r,rule:e});f._renderStyle(t,o),f.rendered[t]=f._didChange,f._didChange&&(f._didChange=!1,f._emitChange())}else f.rendered[t]=!1;t==="c"+n&&(f.base[n]=e(r))}var u="c"+n;return f.rendered[t]?t!==u?u+" "+t:t:u},renderKeyframe:function(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];f.ids.indexOf(e)<0&&f.ids.push(e);var n=f._generatePropsReference(r),t="k"+f.ids.indexOf(e)+n;if(!f.rendered.hasOwnProperty(t)){var i=f._processStyle(e(r),{type:"keyframe",keyframe:e,props:r,animationName:t,id:f.ids.indexOf(e)}),u=o(i,t,f.keyframePrefixes);f.rendered[t]=!0,f.keyframes+=u,f._emitChange()}return t},renderFont:function(e,r){var n=arguments.length<=2||void 0===arguments[2]?{}:arguments[2];return f.rendered.hasOwnProperty(e)||!function(){var o={fontFamily:"'"+e+"'",src:r.map(function(e){return"url('"+e+"') format('"+t(e)+"')"}).join(",")},u=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(n).filter(function(e){return u.indexOf(e)>-1}).forEach(function(e){return o[e]=n[e]});var s="@font-face{"+i(o)+"}";f.rendered[e]=!0,f.fontFaces+=s,f._emitChange()}(),e},renderStatic:function(e,r){var t="string"==typeof e?e:r+n(e);if(!f.rendered.hasOwnProperty(t)){if("string"==typeof e)f.statics+=e.replace(/\s{2,}/g,"");else{var o=f._processStyle(e,{selector:r,type:"static"});f.statics+=r+"{"+i(o)+"}"}f.rendered[t]=!0,f._emitChange()}},renderToString:function(){var e=f.fontFaces+f.statics+f.rules;for(var r in f.mediaRules)e+="@media "+r+"{"+f.mediaRules[r]+"}";return e+f.keyframes},subscribe:function(e){return f.listeners.push(e),{unsubscribe:function(){return f.listeners.splice(f.listeners.indexOf(e),1)}}},_emitChange:function(){var e=f.renderToString();f.listeners.forEach(function(r){return r(e)})},_generatePropsReference:function(e){return r(n(e))},_processStyle:function(e,r){return f.plugins.reduce(function(e,n){return n(e,r)},e)},_diffStyle:function(e){var r=this,n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return Object.keys(e).reduce(function(t,i){var o=e[i];if(o instanceof Object&&!Array.isArray(o)){var f=r._diffStyle(o,n[i]);Object.keys(f).length>0&&(t[i]=f)}else if(void 0!==o&&!n.hasOwnProperty(i)||n[i]!==o){if("string"==typeof o&&o.indexOf("undefined")>-1)return t;t[i]=o}return t},{})},_renderStyle:function(e,r){var n=arguments.length<=2||void 0===arguments[2]?"":arguments[2],t=arguments.length<=3||void 0===arguments[3]?"":arguments[3],o=Object.keys(r).reduce(function(i,o){var u=r[o];if(u instanceof Object&&!Array.isArray(u)){if(":"===o.charAt(0))f._renderStyle(e,u,n+o,t);else if("@media"===o.substr(0,6)){var s=o.slice(6).trim(),a=t.length>0?t+" and "+s:s;f._renderStyle(e,u,n,a)}}else i[o]=u;return i},{});if(Object.keys(o).length>0){var u="."+e+n+"{"+i(o)+"}";f._didChange=!0,t.length>0?(f.mediaRules.hasOwnProperty(t)||(f.mediaRules[t]=""),f.mediaRules[t]+=u):f.rules+=u}}};return f.keyframePrefixes.push(""),f.clear(),e.enhancers&&e.enhancers.forEach(function(e){return f=e(f)}),f}function u(e){for(var r=arguments.length,n=Array(r>1?r-1:0),t=1;t<r;t++)n[t-1]=arguments[t];return n.reduce(function(e,r){for(var n in r){var t=r[n];e[n]instanceof Object&&t instanceof Object?e[n]=u({},e[n],t):e[n]=t}return e},e)}function s(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];return function(e){return r.reduce(function(r,n){return u(r,n(e))},{})}}function a(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];return function(e){return function(){return r.reduce(function(e,r){return r(e)},e.apply(void 0,arguments))}}}function c(e,r){if(!r||r.nodeType!==h)throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");r.setAttribute("data-fela-stylesheet",""),e.subscribe(function(e){return r.textContent=e});var n=e.renderToString();r.textContent!==n&&(r.textContent=n)}var d={};d.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},d.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e};var l={".woff":"woff",".eof":"eof",".ttf":"truetype",".svg":"svg"},y=e(function(e){function r(e){return e.replace(n,"-$&").toLowerCase().replace(t,"-ms-")}var n=/[A-Z]/g,t=/^ms-/;e.exports=r}),p=y&&"object"==typeof y&&"default"in y?y.default:y,h=1,v={createRenderer:f,combineRules:s,enhance:a,render:c};return v}); |
@@ -73,3 +73,5 @@ 'use strict'; | ||
// to diff future dynamic style with those | ||
renderer.renderRule(rule, {}); | ||
if (Object.keys(props).length > 0) { | ||
renderer.renderRule(rule, {}); | ||
} | ||
} | ||
@@ -384,4 +386,11 @@ | ||
// enhance renderer with passed set of enhancers | ||
if (config.enhancers) { | ||
config.enhancers.forEach(function (enhancer) { | ||
return renderer = enhancer(renderer); | ||
}); | ||
} | ||
return renderer; | ||
} | ||
module.exports = exports['default']; |
@@ -21,22 +21,16 @@ 'use strict'; | ||
exports.default = function () { | ||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; | ||
return function (renderer) { | ||
// DOM Renderer | ||
if (renderer.hasOwnProperty('mountNode')) { | ||
renderer.subscribe(function (css) { | ||
renderer.mountNode.textContent = (0, _cssbeautify2.default)(css, _extends({}, defaultOptions, options)); | ||
}); | ||
function beautifier(renderer, options) { | ||
var existingRenderToString = renderer.renderToString.bind(renderer); | ||
return renderer; | ||
} | ||
renderer.renderToString = function () { | ||
var css = existingRenderToString(); | ||
return (0, _cssbeautify2.default)(css, _extends({}, defaultOptions, options)); | ||
}; | ||
// Server Renderer | ||
var existingRenderToString = renderer.renderToString.bind(renderer); | ||
renderer.renderToString = function () { | ||
var css = existingRenderToString(); | ||
return (0, _cssbeautify2.default)(css, _extends({}, defaultOptions, options)); | ||
}; | ||
return renderer; | ||
} | ||
return renderer; | ||
exports.default = function (options) { | ||
return function (renderer) { | ||
return beautifier(renderer, options); | ||
}; | ||
@@ -43,0 +37,0 @@ }; |
@@ -8,20 +8,23 @@ 'use strict'; | ||
exports.default = function () { | ||
return function (renderer) { | ||
var existingRenderRule = renderer.renderRule.bind(renderer); | ||
function perf(renderer) { | ||
var existingRenderRule = renderer.renderRule.bind(renderer); | ||
renderer.renderRule = function (rule, props) { | ||
var timerCounter = ++counter; | ||
renderer.renderRule = function (rule, props) { | ||
var timerCounter = '[' + ++counter + ']'; | ||
console.time('[' + timerCounter + '] Elapsed time'); // eslint-disable-line | ||
var className = existingRenderRule(rule, props); | ||
console.timeEnd('[' + timerCounter + '] Elapsed time'); // eslint-disable-line | ||
console.time(timerCounter); // eslint-disable-line | ||
var className = existingRenderRule(rule, props); | ||
console.log(timerCounter + ' ' + rule.name, props); // eslint-disable-line | ||
console.timeEnd(timerCounter); // eslint-disable-line | ||
return className; | ||
}; | ||
return className; | ||
}; | ||
return renderer; | ||
}; | ||
return renderer; | ||
} | ||
exports.default = function () { | ||
return perf; | ||
}; | ||
module.exports = exports['default']; |
@@ -9,24 +9,61 @@ 'use strict'; | ||
function validator(style, options) { | ||
var logInvalid = options.logInvalid; | ||
var deleteInvalid = options.deleteInvalid; | ||
function validateStyleObject(style, logInvalid, deleteInvalid) { | ||
Object.keys(style).forEach(function (property) { | ||
var value = style[property]; | ||
if (value === undefined || typeof value === 'string' && value.indexOf('undefined') > -1) { | ||
if (deleteInvalid) { | ||
delete style[property]; | ||
if (value instanceof Object && !Array.isArray(value)) { | ||
if (property.indexOf(':') === 0 || property.substr(0, 6) === '@media') { | ||
validateStyleObject(value, logInvalid, deleteInvalid); | ||
} else { | ||
if (deleteInvalid) { | ||
delete style[property]; | ||
} | ||
if (logInvalid) { | ||
console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid nested property. Only use nested `@media` queries or `:` pseudo classes. Maybe you forgot to add a plugin that resolves `' + property + '`.', { // eslint-disable-line | ||
property: property, | ||
value: value | ||
}); | ||
} | ||
} | ||
if (logInvalid) { | ||
console.log((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid Property', { // eslint-disable-line | ||
property: property, | ||
value: value | ||
}); | ||
} | ||
} else if (value instanceof Object && !Array.isArray(value)) { | ||
style[property] = validator(value, options); | ||
} | ||
}); | ||
} | ||
function validator(style, meta, options) { | ||
var logInvalid = options.logInvalid; | ||
var deleteInvalid = options.deleteInvalid; | ||
if (meta.type === 'keyframe') { | ||
Object.keys(style).forEach(function (percentage) { | ||
var percentageValue = parseFloat(percentage); | ||
var value = style[percentage]; | ||
if (value instanceof Object === false) { | ||
if (logInvalid) { | ||
console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid keyframe value. An object was expected.', { // eslint-disable-line | ||
percentage: percentage, | ||
style: value | ||
}); | ||
} | ||
if (deleteInvalid) { | ||
delete style[percentage]; | ||
} | ||
} else { | ||
// check for invalid percentage values, it only allows from, to or 0% - 100% | ||
if (!percentage.match(/from|to|%/) || percentage.indexOf('%') > -1 && (percentageValue < 0 || percentageValue > 100)) { | ||
if (logInvalid) { | ||
console.error((deleteInvalid ? '[Deleted] ' : ' ') + 'Invalid keyframe property. Expected either `to`, `from` or a percentage value between 0 and 100.', { // eslint-disable-line | ||
percentage: percentage, | ||
style: value | ||
}); | ||
} | ||
if (deleteInvalid) { | ||
delete style[percentage]; | ||
} | ||
} | ||
} | ||
}); | ||
} else if (meta.type === 'rule') { | ||
validateStyleObject(style, logInvalid, deleteInvalid); | ||
} | ||
return style; | ||
@@ -38,4 +75,4 @@ } | ||
exports.default = function (options) { | ||
return function (style) { | ||
return validator(style, _extends({}, defaultOptions, options)); | ||
return function (style, meta) { | ||
return validator(style, meta, _extends({}, defaultOptions, options)); | ||
}; | ||
@@ -42,0 +79,0 @@ }; |
{ | ||
"name": "fela", | ||
"version": "1.0.3", | ||
"version": "1.1.0", | ||
"description": "Fast & Dynamic Styling in JavaScript", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
Sorry, the diff of this file is not supported yet
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
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
94215
32
1435