Comparing version 0.13.2 to 0.13.3
{ | ||
"name": "radium", | ||
"version": "0.13.2", | ||
"version": "0.13.3", | ||
"homepage": "https://github.com/FormidableLabs/radium", | ||
@@ -5,0 +5,0 @@ "description": "A set of tools to manage inline styles on React elements", |
# Radium Changelog | ||
## 0.13.3 (July 13, 2015) | ||
### Bug Fixes | ||
- Fix hotloading component methods, #255, thanks @bobbyrenwick | ||
- Add displayName to shorthand warning, #253, thanks @bobbyrenwick | ||
- Warn and ignore null/undefined values, #250, thanks @AnSavvides | ||
- Don't warn when mixing border & borderRadius, and more shorthand warning updates, #246, thanks @nathanfriemel | ||
- Remove react from peerDependencies so Radium can be used with the 0.14 beta, #242, thanks @dariocravero | ||
- Fix transfering defaultProps and friends in IE <11, #241, thanks @bobbyrenwick | ||
- Don't alias matchMedia, fixes IE <11 bug, #238 | ||
- Stop mutating style state, #237 | ||
### Misc | ||
- Migrate tests to Karma, #240, thanks @exogen | ||
## 0.13.2 (June 25, 2015) | ||
@@ -4,0 +21,0 @@ |
@@ -64,6 +64,6 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
}; | ||
module.exports.Style = __webpack_require__(12); | ||
module.exports.getState = __webpack_require__(5); | ||
module.exports.keyframes = __webpack_require__(14); | ||
module.exports.Config = __webpack_require__(9); | ||
module.exports.Style = __webpack_require__(11); | ||
module.exports.getState = __webpack_require__(7); | ||
module.exports.keyframes = __webpack_require__(13); | ||
module.exports.Config = __webpack_require__(4); | ||
@@ -74,3 +74,3 @@ /***/ }, | ||
/* @flow */ | ||
/* WEBPACK VAR INJECTION */(function(process) {/* @flow */ | ||
@@ -87,3 +87,3 @@ 'use strict'; | ||
var resolveStyles = __webpack_require__(2); | ||
var resolveStyles = __webpack_require__(3); | ||
@@ -133,2 +133,24 @@ var enhanceWithRadium = function enhanceWithRadium(ComposedComponent) { | ||
// Class inheritance uses Object.create and because of __proto__ issues | ||
// with IE <10 any static properties of the superclass aren't inherited and | ||
// so need to be manually populated | ||
// See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below- | ||
var staticKeys = ['defaultProps', 'propTypes', 'contextTypes', 'childContextTypes']; | ||
staticKeys.forEach(function (key) { | ||
if (ComposedComponent.hasOwnProperty(key)) { | ||
RadiumEnhancer[key] = ComposedComponent[key]; | ||
} | ||
}); | ||
if (process.env.NODE_ENV !== 'production') { | ||
// This fixes React Hot Loader by exposing the original components top level | ||
// prototype methods on the Radium enhanced prototype as discussed in #219. | ||
Object.keys(ComposedComponent.prototype).forEach(function (key) { | ||
if (!RadiumEnhancer.prototype.hasOwnProperty(key)) { | ||
RadiumEnhancer.prototype[key] = ComposedComponent.prototype[key]; | ||
} | ||
}); | ||
} | ||
RadiumEnhancer.displayName = 'Radium(' + displayName + ')'; | ||
@@ -140,5 +162,107 @@ | ||
module.exports = enhanceWithRadium; | ||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2))) | ||
/***/ }, | ||
/* 2 */ | ||
/***/ function(module, exports) { | ||
// shim for using process in browser | ||
'use strict'; | ||
var process = module.exports = {}; | ||
var queue = []; | ||
var draining = false; | ||
var currentQueue; | ||
var queueIndex = -1; | ||
function cleanUpNextTick() { | ||
draining = false; | ||
if (currentQueue.length) { | ||
queue = currentQueue.concat(queue); | ||
} else { | ||
queueIndex = -1; | ||
} | ||
if (queue.length) { | ||
drainQueue(); | ||
} | ||
} | ||
function drainQueue() { | ||
if (draining) { | ||
return; | ||
} | ||
var timeout = setTimeout(cleanUpNextTick); | ||
draining = true; | ||
var len = queue.length; | ||
while (len) { | ||
currentQueue = queue; | ||
queue = []; | ||
while (++queueIndex < len) { | ||
currentQueue[queueIndex].run(); | ||
} | ||
queueIndex = -1; | ||
len = queue.length; | ||
} | ||
currentQueue = null; | ||
draining = false; | ||
clearTimeout(timeout); | ||
} | ||
process.nextTick = function (fun) { | ||
var args = new Array(arguments.length - 1); | ||
if (arguments.length > 1) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
args[i - 1] = arguments[i]; | ||
} | ||
} | ||
queue.push(new Item(fun, args)); | ||
if (queue.length === 1 && !draining) { | ||
setTimeout(drainQueue, 0); | ||
} | ||
}; | ||
// v8 likes predictible objects | ||
function Item(fun, array) { | ||
this.fun = fun; | ||
this.array = array; | ||
} | ||
Item.prototype.run = function () { | ||
this.fun.apply(null, this.array); | ||
}; | ||
process.title = 'browser'; | ||
process.browser = true; | ||
process.env = {}; | ||
process.argv = []; | ||
process.version = ''; // empty string to avoid regexp issues | ||
process.versions = {}; | ||
function noop() {} | ||
process.on = noop; | ||
process.addListener = noop; | ||
process.once = noop; | ||
process.off = noop; | ||
process.removeListener = noop; | ||
process.removeAllListeners = noop; | ||
process.emit = noop; | ||
process.binding = function (name) { | ||
throw new Error('process.binding is not supported'); | ||
}; | ||
// TODO(shtylman) | ||
process.cwd = function () { | ||
return '/'; | ||
}; | ||
process.chdir = function (dir) { | ||
throw new Error('process.chdir is not supported'); | ||
}; | ||
process.umask = function () { | ||
return 0; | ||
}; | ||
/***/ }, | ||
/* 3 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
@@ -150,10 +274,11 @@ | ||
var MouseUpListener = __webpack_require__(4); | ||
var getState = __webpack_require__(5); | ||
var Prefixer = __webpack_require__(6); | ||
var Config = __webpack_require__(9); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
var ExecutionEnvironment = __webpack_require__(7); | ||
var MouseUpListener = __webpack_require__(6); | ||
var getState = __webpack_require__(7); | ||
var Prefixer = __webpack_require__(8); | ||
var Config = __webpack_require__(4); | ||
var ExecutionEnvironment = __webpack_require__(5); | ||
var React = __webpack_require__(10); | ||
var objectAssign = __webpack_require__(11); | ||
@@ -180,6 +305,8 @@ // babel-eslint 3.1.7 fails here for some reason, error: | ||
var _setStyleState = function _setStyleState(component, key, newState) { | ||
var existing = component.state && component.state._radiumStyleState || {}; | ||
var state = { _radiumStyleState: objectAssign({}, existing) }; | ||
state._radiumStyleState[key] = state._radiumStyleState[key] || {}; | ||
objectAssign(state._radiumStyleState[key], newState); | ||
var existing = component._lastRadiumState || component.state && component.state._radiumStyleState || {}; | ||
var state = { _radiumStyleState: _extends({}, existing) }; | ||
state._radiumStyleState[key] = _extends({}, state._radiumStyleState[key], newState); | ||
component._lastRadiumState = state; | ||
component.setState(state); | ||
@@ -333,3 +460,14 @@ }; | ||
var shorthandProps = ['background', 'border', 'borderBottom', 'borderColor', 'borderLeft', 'borderRadius', 'borderRight', 'borderStyle', 'borderTop', 'borderWidth', 'font', 'listStyle', 'margin', 'padding', 'transform', 'transition']; | ||
var shorthandPropertyExpansions = { | ||
'background': ['backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundRepeatX', 'backgroundRepeatY', 'backgroundSize'], | ||
'border': ['borderBottom', 'borderBottomColor', 'borderBottomStyle', 'borderBottomWidth', 'borderColor', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopStyle', 'borderTopWidth', 'borderWidth'], | ||
'borderImage': ['borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth'], | ||
'borderRadius': ['borderBottomLeftRadius', 'borderBottomRightRadius', 'borderTopLeftRadius', 'borderTopRightRadius'], | ||
'font': ['fontFamily', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantLigatures', 'fontWeight', 'lineHeight'], | ||
'listStyle': ['listStyleImage', 'listStylePosition', 'listStyleType'], | ||
'margin': ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'], | ||
'padding': ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'], | ||
'transform': ['transformOrigin', 'transformStyle'], | ||
'transition': ['transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction'] | ||
}; | ||
@@ -341,9 +479,9 @@ var checkProps = function checkProps(s) { | ||
var keys = Object.keys(s); | ||
shorthandProps.forEach(function (shorthand) { | ||
if (s[shorthand] && keys.some(function (k) { | ||
return k !== shorthand && k.indexOf(shorthand) === 0; | ||
var styleKeys = Object.keys(s); | ||
styleKeys.forEach(function (styleKey) { | ||
if (shorthandPropertyExpansions[styleKey] && shorthandPropertyExpansions[styleKey].some(function (sp) { | ||
return styleKeys.indexOf(sp) !== -1; | ||
})) { | ||
/* eslint-disable no-console */ | ||
console.warn('Radium: property "' + shorthand + '" in style object', style, ': do not mix longhand and ' + 'shorthand properties in the same style object. See ' + 'https://github.com/FormidableLabs/radium/issues/95 for more ' + 'information.'); | ||
console.warn('Radium: property "' + styleKey + '" in style object', style, ': do not mix longhand and ' + 'shorthand properties in the same style object. Check the render ' + 'method of ' + component.constructor.displayName + '.', 'See https://github.com/FormidableLabs/radium/issues/95 for more ' + 'information.'); | ||
/* eslint-enable no-console */ | ||
@@ -353,3 +491,3 @@ } | ||
keys.forEach(function (k) { | ||
styleKeys.forEach(function (k) { | ||
return checkProps(s[k]); | ||
@@ -464,107 +602,74 @@ }); | ||
module.exports = resolveStyles; | ||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(3))) | ||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2))) | ||
/***/ }, | ||
/* 3 */ | ||
/***/ function(module, exports) { | ||
/* 4 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
// shim for using process in browser | ||
/* @flow */ | ||
'use strict'; | ||
var process = module.exports = {}; | ||
var queue = []; | ||
var draining = false; | ||
var currentQueue; | ||
var queueIndex = -1; | ||
var ExecutionEnvironment = __webpack_require__(5); | ||
function cleanUpNextTick() { | ||
draining = false; | ||
if (currentQueue.length) { | ||
queue = currentQueue.concat(queue); | ||
} else { | ||
queueIndex = -1; | ||
} | ||
if (queue.length) { | ||
drainQueue(); | ||
} | ||
} | ||
var _matchMediaFunction = ExecutionEnvironment.canUseDOM && window && window.matchMedia && function (mediaQueryString) { | ||
return window.matchMedia(mediaQueryString); | ||
}; | ||
function drainQueue() { | ||
if (draining) { | ||
return; | ||
} | ||
var timeout = setTimeout(cleanUpNextTick); | ||
draining = true; | ||
module.exports = { | ||
canMatchMedia: function canMatchMedia() { | ||
return typeof _matchMediaFunction === 'function'; | ||
}, | ||
var len = queue.length; | ||
while (len) { | ||
currentQueue = queue; | ||
queue = []; | ||
while (++queueIndex < len) { | ||
currentQueue[queueIndex].run(); | ||
} | ||
queueIndex = -1; | ||
len = queue.length; | ||
} | ||
currentQueue = null; | ||
draining = false; | ||
clearTimeout(timeout); | ||
} | ||
matchMedia: function matchMedia(query) { | ||
return _matchMediaFunction(query); | ||
}, | ||
process.nextTick = function (fun) { | ||
var args = new Array(arguments.length - 1); | ||
if (arguments.length > 1) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
args[i - 1] = arguments[i]; | ||
} | ||
} | ||
queue.push(new Item(fun, args)); | ||
if (queue.length === 1 && !draining) { | ||
setTimeout(drainQueue, 0); | ||
} | ||
setMatchMedia: function setMatchMedia(nextMatchMediaFunction) { | ||
_matchMediaFunction = nextMatchMediaFunction; | ||
} | ||
}; | ||
// v8 likes predictible objects | ||
function Item(fun, array) { | ||
this.fun = fun; | ||
this.array = array; | ||
} | ||
Item.prototype.run = function () { | ||
this.fun.apply(null, this.array); | ||
}; | ||
process.title = 'browser'; | ||
process.browser = true; | ||
process.env = {}; | ||
process.argv = []; | ||
process.version = ''; // empty string to avoid regexp issues | ||
process.versions = {}; | ||
/***/ }, | ||
/* 5 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
function noop() {} | ||
var __WEBPACK_AMD_DEFINE_RESULT__;/*! | ||
Copyright (c) 2015 Jed Watson. | ||
Based on code that is Copyright 2013-2015, Facebook, Inc. | ||
All rights reserved. | ||
*/ | ||
process.on = noop; | ||
process.addListener = noop; | ||
process.once = noop; | ||
process.off = noop; | ||
process.removeListener = noop; | ||
process.removeAllListeners = noop; | ||
process.emit = noop; | ||
'use strict'; | ||
process.binding = function (name) { | ||
throw new Error('process.binding is not supported'); | ||
}; | ||
(function () { | ||
'use strict'; | ||
// TODO(shtylman) | ||
process.cwd = function () { | ||
return '/'; | ||
}; | ||
process.chdir = function (dir) { | ||
throw new Error('process.chdir is not supported'); | ||
}; | ||
process.umask = function () { | ||
return 0; | ||
}; | ||
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); | ||
var ExecutionEnvironment = { | ||
canUseDOM: canUseDOM, | ||
canUseWorkers: typeof Worker !== 'undefined', | ||
canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent), | ||
canUseViewport: canUseDOM && !!window.screen | ||
}; | ||
if (true) { | ||
!(__WEBPACK_AMD_DEFINE_RESULT__ = function () { | ||
return ExecutionEnvironment; | ||
}.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); | ||
} else if (typeof module !== 'undefined' && module.exports) { | ||
module.exports = ExecutionEnvironment; | ||
} else { | ||
window.ExecutionEnvironment = ExecutionEnvironment; | ||
} | ||
})(); | ||
/***/ }, | ||
/* 4 */ | ||
/* 6 */ | ||
/***/ function(module, exports) { | ||
@@ -613,3 +718,3 @@ | ||
/***/ }, | ||
/* 5 */ | ||
/* 7 */ | ||
/***/ function(module, exports) { | ||
@@ -636,3 +741,3 @@ | ||
/***/ }, | ||
/* 6 */ | ||
/* 8 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
@@ -647,4 +752,4 @@ | ||
var ExecutionEnvironment = __webpack_require__(7); | ||
var arrayFind = __webpack_require__(8); | ||
var ExecutionEnvironment = __webpack_require__(5); | ||
var arrayFind = __webpack_require__(9); | ||
@@ -813,3 +918,11 @@ var infoByCssPrefix = { | ||
if (typeof value !== 'string') { | ||
value = value.toString(); | ||
if (value !== null && value !== undefined) { | ||
value = value.toString(); | ||
} else { | ||
/* eslint-disable no-console */ | ||
if (console && console.warn) { | ||
console.warn('CSS value is "' + value + '" for property "' + property + '"'); | ||
} | ||
return value; | ||
} | ||
} | ||
@@ -931,43 +1044,3 @@ | ||
/***/ }, | ||
/* 7 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
var __WEBPACK_AMD_DEFINE_RESULT__;/*! | ||
Copyright (c) 2015 Jed Watson. | ||
Based on code that is Copyright 2013-2015, Facebook, Inc. | ||
All rights reserved. | ||
*/ | ||
'use strict'; | ||
(function () { | ||
'use strict'; | ||
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); | ||
var ExecutionEnvironment = { | ||
canUseDOM: canUseDOM, | ||
canUseWorkers: typeof Worker !== 'undefined', | ||
canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent), | ||
canUseViewport: canUseDOM && !!window.screen | ||
}; | ||
if (true) { | ||
!(__WEBPACK_AMD_DEFINE_RESULT__ = function () { | ||
return ExecutionEnvironment; | ||
}.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); | ||
} else if (typeof module !== 'undefined' && module.exports) { | ||
module.exports = ExecutionEnvironment; | ||
} else { | ||
window.ExecutionEnvironment = ExecutionEnvironment; | ||
} | ||
})(); | ||
/***/ }, | ||
/* 8 */ | ||
/* 9 */ | ||
/***/ function(module, exports) { | ||
@@ -1000,28 +1073,2 @@ | ||
/***/ }, | ||
/* 9 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
/* @flow */ | ||
'use strict'; | ||
var ExecutionEnvironment = __webpack_require__(7); | ||
var _matchMediaFunction = ExecutionEnvironment.canUseDOM && window && window.matchMedia; | ||
module.exports = { | ||
canMatchMedia: function canMatchMedia() { | ||
return typeof _matchMediaFunction === 'function'; | ||
}, | ||
matchMedia: function matchMedia(query) { | ||
return _matchMediaFunction(query); | ||
}, | ||
setMatchMedia: function setMatchMedia(nextMatchMediaFunction) { | ||
_matchMediaFunction = nextMatchMediaFunction; | ||
} | ||
}; | ||
/***/ }, | ||
/* 10 */ | ||
@@ -1034,46 +1081,2 @@ /***/ function(module, exports) { | ||
/* 11 */ | ||
/***/ function(module, exports) { | ||
'use strict'; | ||
var propIsEnumerable = Object.prototype.propertyIsEnumerable; | ||
function ToObject(val) { | ||
if (val == null) { | ||
throw new TypeError('Object.assign cannot be called with null or undefined'); | ||
} | ||
return Object(val); | ||
} | ||
function ownEnumerableKeys(obj) { | ||
var keys = Object.getOwnPropertyNames(obj); | ||
if (Object.getOwnPropertySymbols) { | ||
keys = keys.concat(Object.getOwnPropertySymbols(obj)); | ||
} | ||
return keys.filter(function (key) { | ||
return propIsEnumerable.call(obj, key); | ||
}); | ||
} | ||
module.exports = Object.assign || function (target, source) { | ||
var from; | ||
var keys; | ||
var to = ToObject(target); | ||
for (var s = 1; s < arguments.length; s++) { | ||
from = arguments[s]; | ||
keys = ownEnumerableKeys(Object(from)); | ||
for (var i = 0; i < keys.length; i++) { | ||
to[keys[i]] = from[keys[i]]; | ||
} | ||
} | ||
return to; | ||
}; | ||
/***/ }, | ||
/* 12 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
@@ -1083,4 +1086,4 @@ | ||
var createMarkupForStyles = __webpack_require__(13); | ||
var Prefixer = __webpack_require__(6); | ||
var createMarkupForStyles = __webpack_require__(12); | ||
var Prefixer = __webpack_require__(8); | ||
@@ -1170,3 +1173,3 @@ var React = __webpack_require__(10); | ||
/***/ }, | ||
/* 13 */ | ||
/* 12 */ | ||
/***/ function(module, exports) { | ||
@@ -1188,3 +1191,3 @@ | ||
/***/ }, | ||
/* 14 */ | ||
/* 13 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
@@ -1196,6 +1199,6 @@ | ||
var createMarkupForStyles = __webpack_require__(13); | ||
var Prefixer = __webpack_require__(6); | ||
var createMarkupForStyles = __webpack_require__(12); | ||
var Prefixer = __webpack_require__(8); | ||
var ExecutionEnvironment = __webpack_require__(7); | ||
var ExecutionEnvironment = __webpack_require__(5); | ||
@@ -1202,0 +1205,0 @@ var isAnimationSupported = ExecutionEnvironment.canUseDOM && Prefixer.getPrefixedPropertyName('animation') !== false; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Radium=t(require("react")):e.Radium=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";var n=r(1);e.exports=function(e){return n(e)},e.exports.Style=r(11),e.exports.getState=r(4),e.exports.keyframes=r(13),e.exports.Config=r(8)},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)}var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=function(e,t,r){for(var n=!0;n;){var i=e,o=t,s=r;a=c=u=void 0,n=!1;var a=Object.getOwnPropertyDescriptor(i,o);if(void 0!==a){if("value"in a)return a.value;var u=a.get;return void 0===u?void 0:u.call(s)}var c=Object.getPrototypeOf(i);if(null===c)return void 0;e=c,t=o,r=s,n=!0}},a=r(2),u=function(e){var t=e.displayName||e.name||"Component",r=function(e){function t(){n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.state=this.state||{},this.state._radiumStyleState={}}return i(t,e),o(t,[{key:"render",value:function(){var e=s(Object.getPrototypeOf(t.prototype),"render",this).call(this);return a(this,e)}},{key:"componentWillUnmount",value:function(){s(Object.getPrototypeOf(t.prototype),"componentWillUnmount",this)&&s(Object.getPrototypeOf(t.prototype),"componentWillUnmount",this).call(this),this._radiumMouseUpListener&&this._radiumMouseUpListener.remove(),this._radiumMediaQueryListenersByQuery&&Object.keys(this._radiumMediaQueryListenersByQuery).forEach(function(e){this._radiumMediaQueryListenersByQuery[e].remove()},this)}}]),t}(e);return r.displayName="Radium("+t+")",r};e.exports=u},function(e,t,r){"use strict";var n=r(3),i=r(4),o=r(5),s=r(8),a=r(6),u=r(9),c=r(10),f={},l=function(e){return":"===e[0]||"@"===e[0]},p=function(e,t,r){return i(e.state,t,r)},d=function(e,t,r){var n=e.state&&e.state._radiumStyleState||{},i={_radiumStyleState:c({},n)};i._radiumStyleState[t]=i._radiumStyleState[t]||{},c(i._radiumStyleState[t],r),e.setState(i)},y=function b(e){var t={};return e.forEach(function(e){e&&"object"==typeof e&&!Array.isArray(e)&&Object.keys(e).forEach(function(r){l(r)&&t[r]?t[r]=b([t[r],e[r]]):t[r]=e[r]})}),t},v=function(e){Object.keys(e.state._radiumStyleState).forEach(function(t){p(e,t,":active")&&d(e,t,{":active":!1})})},m=function(e,t,r){var n={};n[t]=r.matches,d(e,"_all",n)},h=function(e,t){return s.canMatchMedia()?(Object.keys(t).filter(function(e){return"@"===e[0]}).map(function(r){var n=t[r];r=r.replace("@media ","");var i=f[r];if(i||(f[r]=i=s.matchMedia(r)),e._radiumMediaQueryListenersByQuery||(e._radiumMediaQueryListenersByQuery={}),!e._radiumMediaQueryListenersByQuery[r]){var o=m.bind(null,e,r);i.addListener(o),e._radiumMediaQueryListenersByQuery[r]={remove:function(){i.removeListener(o)}}}i.matches&&(t=y([t,n]))}),t):t},x=function w(e,t,r){if(r=r||{},!t)return t;var i=null,s=t.props.children;if(s){var c=typeof s;if("string"===c||"number"===c)i=s;else if(1===u.Children.count(s)&&s.type){var f=u.Children.only(s);i=w(e,f,r)}else i=u.Children.map(s,function(t){return u.isValidElement(t)?w(e,t,r):t})}if(!u.isValidElement(t)||"string"!=typeof t.type)return s===i?t:u.cloneElement(t,t.props,i);var m=t.props,x=m.style,b={};Array.isArray(x)&&(x=y(x));if(!x||!Object.keys(x).some(l))return x?(b.style=o.getPrefixedStyle(x),u.cloneElement(t,b,i)):i?u.cloneElement(t,{},i):t;var j=t.ref||t.key,g=j||"main";if(r[g])throw new Error("Radium requires each element with interactive styles to have a unique key, set using either the ref or key prop. "+(j?'Key "'+j+'" is a duplicate.':"Multiple elements have no key specified."));r[g]=!0,x=h(e,x);var O={};if(Object.keys(x).forEach(function(e){l(e)||(O[e]=x[e])}),x[":hover"]||x[":active"]){var S=m.onMouseEnter;b.onMouseEnter=function(t){S&&S(t),d(e,g,{":hover":!0})};var P=m.onMouseLeave;b.onMouseLeave=function(t){P&&P(t),d(e,g,{":hover":!1})}}if(x[":active"]){var k=m.onMouseDown;b.onMouseDown=function(t){k&&k(t),e._lastMouseDown=Date.now(),d(e,g,{":active":!0})}}if(x[":focus"]){var M=m.onFocus;b.onFocus=function(t){M&&M(t),d(e,g,{":focus":!0})};var _=m.onBlur;b.onBlur=function(t){_&&_(t),d(e,g,{":focus":!1})}}var E=Object.keys(x).filter(function(t){return":active"===t&&p(e,g,":active")||":hover"===t&&p(e,g,":hover")||":focus"===t&&p(e,g,":focus")}).map(function(e){return x[e]});return E.length&&(O=y([O].concat(E))),x[":active"]&&!e._radiumMouseUpListener&&a.canUseEventListeners&&(e._radiumMouseUpListener=n.subscribe(v.bind(null,e))),b.style=o.getPrefixedStyle(O),u.cloneElement(t,b,i)};x.__clearStateForTests=function(){f={}},e.exports=x},function(e,t){"use strict";var r=[],n=!1,i=function(e){r.forEach(function(t){t(e)})},o=function(e){return-1===r.indexOf(e)&&r.push(e),n||(window.addEventListener("mouseup",i),n=!0),{remove:function(){var t=r.indexOf(e);r.splice(t,1),0===r.length&&n&&(window.removeEventListener("mouseup",i),n=!1)}}};e.exports={subscribe:o}},function(e,t){"use strict";var r=[":active",":focus",":hover"],n=function(e,t,n){if(t=t||"main",-1===r.indexOf(n))throw new Error("Radium.getState invalid value param: `"+n+"`");return!!(e&&e._radiumStyleState&&e._radiumStyleState[t]&&e._radiumStyleState[t][n])||!1};e.exports=n},function(e,t,r){"use strict";var n=r(6),i=r(7),o={"-moz-":{cssPrefix:"-moz-",jsPrefix:"Moz",alternativeProperties:{flex:[{css:"-moz-box-flex",js:"MozBoxFlex"}],order:[{css:"-moz-box-ordinal-group",js:"MozBoxOrdinalGroup"}]},alternativeValues:{display:{flex:["-moz-box"]}}},"-ms-":{cssPrefix:"-ms-",jsPrefix:"ms",alternativeValues:{display:{flex:["-ms-flexbox"],order:["-ms-flex-order"]}}},"-o-":{cssPrefix:"-o-",jsPrefix:"O"},"-webkit-":{cssPrefix:"-webkit-",jsPrefix:"Webkit",alternativeProperties:{flex:[{css:"-webkit-box-flex",js:"WebkitBoxFlex"}],order:[{css:"-webkit-box-ordinal-group",js:"WebkitBoxOrdinalGroup"}]},alternativeValues:{display:{flex:["-webkit-box"]}}}},s={boxFlex:!0,boxFlexGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,strokeDashoffset:!0,strokeOpacity:!0,strokeWidth:!0},a={},u={},c={},f={cssPrefix:"",jsPrefix:""};if(n.canUseDOM){a=document.createElement("p").style;var l=window.getComputedStyle(document.documentElement,""),p=Array.prototype.slice.call(l).join("").match(/-(moz|webkit|ms|o)-/),d=p&&p[0];f=o[d]||f}var y=/([a-z])?([A-Z])/g,v=function(e,t,r){return t+"-"+r.toLowerCase()},m=function(e){return e.replace(y,v)},h=function(e){if(u.hasOwnProperty(e))return u[e];var t={css:m(e),js:e,isDefaultForServer:!0},r=[{css:f.cssPrefix+m(e),js:f.jsPrefix+e[0].toUpperCase()+e.slice(1)},t];f.alternativeProperties&&f.alternativeProperties[e]&&(r=r.concat(f.alternativeProperties[e]));var n=i(r,function(e){return e.js in a?e:void 0})||!1;return u[e]=n},x=function(e,t){return 0===t||isNaN(t)||s[e]?t:t+"px"},b=function(e,t,r){if(!Array.isArray(t)){if(!isNaN(t))return x(r,t);if("string"!=typeof t&&(t=t.toString()),!isNaN(parseInt(t,10)))return t}var n=Array.isArray(t)?t.join(" || "):e+t;if(c.hasOwnProperty(n))return c[n];var o;Array.isArray(t)?(o=t.map(function(e){return x(r,e)}),o=o.concat(t.filter(function(e){return!isNaN(e)}).map(function(e){return f.cssPrefix+e}))):o=[t,f.cssPrefix+t],f.alternativeValues&&f.alternativeValues[r]&&f.alternativeValues[r][t]&&(o=o.concat(f.alternativeValues[r][t]));var s=i(o,function(t){return a[e]="",a[e]=t,!!a[e]});return s?c[n]=s:(c[n]=t,console&&console.warn&&console.warn('Unsupported CSS value "'+t+'" for property "'+e+'"')),c[n]},w=function(e,t){if(t=t||"js",!n.canUseDOM)return Object.keys(e).reduce(function(r,n){var i=e[n],o="css"===t?m(n):n,s=Array.isArray(i)?i[0]:i;return r[o]=s,r},{});var r={};return Object.keys(e).forEach(function(n){var i=e[n],o=h(n);if(o===!1)return void(console&&console.warn&&console.warn('Unsupported CSS property "'+n+'"'));var s=b(o.js,i,n);r[o[t]]=s}),r};e.exports={getPrefixedPropertyName:h,getPrefixedStyle:w,cssPrefix:f.cssPrefix,jsPrefix:f.jsPrefix}},function(e,t,r){var n;!function(){"use strict";var i=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:i,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:i&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:i&&!!window.screen};n=function(){return o}.call(t,r,t,e),!(void 0!==n&&(e.exports=n))}()},function(e,t){"use strict";function r(e,t,r){if("function"==typeof Array.prototype.find)return e.find(t,r);r=r||this;var n,i=e.length;if("function"!=typeof t)throw new TypeError(t+" is not a function");for(n=0;i>n;n++)if(t.call(r,e[n],n,e))return e[n]}e.exports=r},function(e,t,r){"use strict";var n=r(6),i=n.canUseDOM&&window&&window.matchMedia;e.exports={canMatchMedia:function(){return"function"==typeof i},matchMedia:function(e){return i(e)},setMatchMedia:function(e){i=e}}},function(t,r){t.exports=e},function(e,t){"use strict";function r(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function n(e){var t=Object.getOwnPropertyNames(e);return Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(e))),t.filter(function(t){return i.call(e,t)})}var i=Object.prototype.propertyIsEnumerable;e.exports=Object.assign||function(e,t){for(var i,o,s=r(e),a=1;a<arguments.length;a++){i=arguments[a],o=n(Object(i));for(var u=0;u<o.length;u++)s[o[u]]=i[o[u]]}return s}},function(e,t,r){"use strict";var n=r(12),i=r(5),o=r(9),s=function(e,t){if(e&&t){var r=i.getPrefixedStyle(t,"css"),o=n(r);return e+"{"+o+"}"}},a=o.createClass({displayName:"Style",propTypes:{rules:o.PropTypes.object,scopeSelector:o.PropTypes.string},getDefaultProps:function(){return{scopeSelector:""}},_buildStyles:function(e){var t=this;return Object.keys(e).reduce(function(r,n){var i=e[n];if("mediaQueries"===n)r+=t._buildMediaQueryString(i);else{var o=(t.props.scopeSelector?t.props.scopeSelector+" ":"")+n;r+=s(o,i)}return r},"")},_buildMediaQueryString:function(e){var t=this,r=this._getContextMediaQueries(),n="";return Object.keys(e).forEach(function(i){var o=r[i]?r[i]:i;n+="@media "+o+"{"+t._buildStyles(e[i])+"}"}),n},_getContextMediaQueries:function(){var e={};return this.context&&this.context.mediaQueries&&Object.keys(this.context.mediaQueries).forEach(function(t){e[t]=this.context.mediaQueries[t].media}.bind(this)),e},render:function(){if(!this.props.rules)return null;var e=this._buildStyles(this.props.rules);return o.createElement("style",{dangerouslySetInnerHTML:{__html:e}})}});e.exports=a},function(e,t){"use strict";var r=function(e,t){return t=t||"",Object.keys(e).map(function(r){return t+r+": "+e[r]+";"}).join("\n")};e.exports=r},function(e,t,r){"use strict";var n=r(12),i=r(5),o=r(6),s=o.canUseDOM&&i.getPrefixedPropertyName("animation")!==!1,a=1,u=null,c=null;s&&(u=document.createElement("style"),document.head.appendChild(u),c="keyframes",u.textContent="@keyframes {}",u.sheet.cssRules.length||(c=i.cssPrefix+"keyframes"));var f=function(e){var t="Animation"+a;if(a+=1,!s)return t;var r="@"+c+" "+t+" {\n"+Object.keys(e).map(function(t){var r=e[t],o=i.getPrefixedStyle(r,"css"),s=n(o," ");return" "+t+" {\n "+s+"\n }"}).join("\n")+"\n}\n";if(!u)throw new Error("keyframes not initialized properly");return u.sheet.insertRule(r,u.sheet.cssRules.length),t};e.exports=f}])}); | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Radium=t(require("react")):e.Radium=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";var n=r(1);e.exports=function(e){return n(e)},e.exports.Style=r(10),e.exports.getState=r(6),e.exports.keyframes=r(12),e.exports.Config=r(3)},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)}var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=function(e,t,r){for(var n=!0;n;){var i=e,o=t,s=r;a=c=u=void 0,n=!1;var a=Object.getOwnPropertyDescriptor(i,o);if(void 0!==a){if("value"in a)return a.value;var u=a.get;return void 0===u?void 0:u.call(s)}var c=Object.getPrototypeOf(i);if(null===c)return void 0;e=c,t=o,r=s,n=!0}},a=r(2),u=function(e){var t=e.displayName||e.name||"Component",r=function(e){function t(){n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.state=this.state||{},this.state._radiumStyleState={}}return i(t,e),o(t,[{key:"render",value:function(){var e=s(Object.getPrototypeOf(t.prototype),"render",this).call(this);return a(this,e)}},{key:"componentWillUnmount",value:function(){s(Object.getPrototypeOf(t.prototype),"componentWillUnmount",this)&&s(Object.getPrototypeOf(t.prototype),"componentWillUnmount",this).call(this),this._radiumMouseUpListener&&this._radiumMouseUpListener.remove(),this._radiumMediaQueryListenersByQuery&&Object.keys(this._radiumMediaQueryListenersByQuery).forEach(function(e){this._radiumMediaQueryListenersByQuery[e].remove()},this)}}]),t}(e),u=["defaultProps","propTypes","contextTypes","childContextTypes"];return u.forEach(function(t){e.hasOwnProperty(t)&&(r[t]=e[t])}),r.displayName="Radium("+t+")",r};e.exports=u},function(e,t,r){"use strict";var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i=r(5),o=r(6),s=r(7),a=r(3),u=r(4),c=r(9),f={},l=function(e){return":"===e[0]||"@"===e[0]},p=function(e,t,r){return o(e.state,t,r)},d=function(e,t,r){var i=e._lastRadiumState||e.state&&e.state._radiumStyleState||{},o={_radiumStyleState:n({},i)};o._radiumStyleState[t]=n({},o._radiumStyleState[t],r),e._lastRadiumState=o,e.setState(o)},y=function b(e){var t={};return e.forEach(function(e){e&&"object"==typeof e&&!Array.isArray(e)&&Object.keys(e).forEach(function(r){l(r)&&t[r]?t[r]=b([t[r],e[r]]):t[r]=e[r]})}),t},v=function(e){Object.keys(e.state._radiumStyleState).forEach(function(t){p(e,t,":active")&&d(e,t,{":active":!1})})},m=function(e,t,r){var n={};n[t]=r.matches,d(e,"_all",n)},h=function(e,t){return a.canMatchMedia()?(Object.keys(t).filter(function(e){return"@"===e[0]}).map(function(r){var n=t[r];r=r.replace("@media ","");var i=f[r];if(i||(f[r]=i=a.matchMedia(r)),e._radiumMediaQueryListenersByQuery||(e._radiumMediaQueryListenersByQuery={}),!e._radiumMediaQueryListenersByQuery[r]){var o=m.bind(null,e,r);i.addListener(o),e._radiumMediaQueryListenersByQuery[r]={remove:function(){i.removeListener(o)}}}i.matches&&(t=y([t,n]))}),t):t},x=function w(e,t,r){if(r=r||{},!t)return t;var n=null,o=t.props.children;if(o){var a=typeof o;if("string"===a||"number"===a)n=o;else if(1===c.Children.count(o)&&o.type){var f=c.Children.only(o);n=w(e,f,r)}else n=c.Children.map(o,function(t){return c.isValidElement(t)?w(e,t,r):t})}if(!c.isValidElement(t)||"string"!=typeof t.type)return o===n?t:c.cloneElement(t,t.props,n);var m=t.props,x=m.style,b={};Array.isArray(x)&&(x=y(x));if(!x||!Object.keys(x).some(l))return x?(b.style=s.getPrefixedStyle(x),c.cloneElement(t,b,n)):n?c.cloneElement(t,{},n):t;var S=t.ref||t.key,j=S||"main";if(r[j])throw new Error("Radium requires each element with interactive styles to have a unique key, set using either the ref or key prop. "+(S?'Key "'+S+'" is a duplicate.':"Multiple elements have no key specified."));r[j]=!0,x=h(e,x);var g={};if(Object.keys(x).forEach(function(e){l(e)||(g[e]=x[e])}),x[":hover"]||x[":active"]){var P=m.onMouseEnter;b.onMouseEnter=function(t){P&&P(t),d(e,j,{":hover":!0})};var O=m.onMouseLeave;b.onMouseLeave=function(t){O&&O(t),d(e,j,{":hover":!1})}}if(x[":active"]){var M=m.onMouseDown;b.onMouseDown=function(t){M&&M(t),e._lastMouseDown=Date.now(),d(e,j,{":active":!0})}}if(x[":focus"]){var k=m.onFocus;b.onFocus=function(t){k&&k(t),d(e,j,{":focus":!0})};var _=m.onBlur;b.onBlur=function(t){_&&_(t),d(e,j,{":focus":!1})}}var E=Object.keys(x).filter(function(t){return":active"===t&&p(e,j,":active")||":hover"===t&&p(e,j,":hover")||":focus"===t&&p(e,j,":focus")}).map(function(e){return x[e]});return E.length&&(g=y([g].concat(E))),x[":active"]&&!e._radiumMouseUpListener&&u.canUseEventListeners&&(e._radiumMouseUpListener=i.subscribe(v.bind(null,e))),b.style=s.getPrefixedStyle(g),c.cloneElement(t,b,n)};x.__clearStateForTests=function(){f={}},e.exports=x},function(e,t,r){"use strict";var n=r(4),i=n.canUseDOM&&window&&window.matchMedia&&function(e){return window.matchMedia(e)};e.exports={canMatchMedia:function(){return"function"==typeof i},matchMedia:function(e){return i(e)},setMatchMedia:function(e){i=e}}},function(e,t,r){var n;!function(){"use strict";var i=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:i,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:i&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:i&&!!window.screen};n=function(){return o}.call(t,r,t,e),!(void 0!==n&&(e.exports=n))}()},function(e,t){"use strict";var r=[],n=!1,i=function(e){r.forEach(function(t){t(e)})},o=function(e){return-1===r.indexOf(e)&&r.push(e),n||(window.addEventListener("mouseup",i),n=!0),{remove:function(){var t=r.indexOf(e);r.splice(t,1),0===r.length&&n&&(window.removeEventListener("mouseup",i),n=!1)}}};e.exports={subscribe:o}},function(e,t){"use strict";var r=[":active",":focus",":hover"],n=function(e,t,n){if(t=t||"main",-1===r.indexOf(n))throw new Error("Radium.getState invalid value param: `"+n+"`");return!!(e&&e._radiumStyleState&&e._radiumStyleState[t]&&e._radiumStyleState[t][n])||!1};e.exports=n},function(e,t,r){"use strict";var n=r(4),i=r(8),o={"-moz-":{cssPrefix:"-moz-",jsPrefix:"Moz",alternativeProperties:{flex:[{css:"-moz-box-flex",js:"MozBoxFlex"}],order:[{css:"-moz-box-ordinal-group",js:"MozBoxOrdinalGroup"}]},alternativeValues:{display:{flex:["-moz-box"]}}},"-ms-":{cssPrefix:"-ms-",jsPrefix:"ms",alternativeValues:{display:{flex:["-ms-flexbox"],order:["-ms-flex-order"]}}},"-o-":{cssPrefix:"-o-",jsPrefix:"O"},"-webkit-":{cssPrefix:"-webkit-",jsPrefix:"Webkit",alternativeProperties:{flex:[{css:"-webkit-box-flex",js:"WebkitBoxFlex"}],order:[{css:"-webkit-box-ordinal-group",js:"WebkitBoxOrdinalGroup"}]},alternativeValues:{display:{flex:["-webkit-box"]}}}},s={boxFlex:!0,boxFlexGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,strokeDashoffset:!0,strokeOpacity:!0,strokeWidth:!0},a={},u={},c={},f={cssPrefix:"",jsPrefix:""};if(n.canUseDOM){a=document.createElement("p").style;var l=window.getComputedStyle(document.documentElement,""),p=Array.prototype.slice.call(l).join("").match(/-(moz|webkit|ms|o)-/),d=p&&p[0];f=o[d]||f}var y=/([a-z])?([A-Z])/g,v=function(e,t,r){return t+"-"+r.toLowerCase()},m=function(e){return e.replace(y,v)},h=function(e){if(u.hasOwnProperty(e))return u[e];var t={css:m(e),js:e,isDefaultForServer:!0},r=[{css:f.cssPrefix+m(e),js:f.jsPrefix+e[0].toUpperCase()+e.slice(1)},t];f.alternativeProperties&&f.alternativeProperties[e]&&(r=r.concat(f.alternativeProperties[e]));var n=i(r,function(e){return e.js in a?e:void 0})||!1;return u[e]=n},x=function(e,t){return 0===t||isNaN(t)||s[e]?t:t+"px"},b=function(e,t,r){if(!Array.isArray(t)){if(!isNaN(t))return x(r,t);if("string"!=typeof t){if(null===t||void 0===t)return console&&console.warn&&console.warn('CSS value is "'+t+'" for property "'+e+'"'),t;t=t.toString()}if(!isNaN(parseInt(t,10)))return t}var n=Array.isArray(t)?t.join(" || "):e+t;if(c.hasOwnProperty(n))return c[n];var o;Array.isArray(t)?(o=t.map(function(e){return x(r,e)}),o=o.concat(t.filter(function(e){return!isNaN(e)}).map(function(e){return f.cssPrefix+e}))):o=[t,f.cssPrefix+t],f.alternativeValues&&f.alternativeValues[r]&&f.alternativeValues[r][t]&&(o=o.concat(f.alternativeValues[r][t]));var s=i(o,function(t){return a[e]="",a[e]=t,!!a[e]});return s?c[n]=s:(c[n]=t,console&&console.warn&&console.warn('Unsupported CSS value "'+t+'" for property "'+e+'"')),c[n]},w=function(e,t){if(t=t||"js",!n.canUseDOM)return Object.keys(e).reduce(function(r,n){var i=e[n],o="css"===t?m(n):n,s=Array.isArray(i)?i[0]:i;return r[o]=s,r},{});var r={};return Object.keys(e).forEach(function(n){var i=e[n],o=h(n);if(o===!1)return void(console&&console.warn&&console.warn('Unsupported CSS property "'+n+'"'));var s=b(o.js,i,n);r[o[t]]=s}),r};e.exports={getPrefixedPropertyName:h,getPrefixedStyle:w,cssPrefix:f.cssPrefix,jsPrefix:f.jsPrefix}},function(e,t){"use strict";function r(e,t,r){if("function"==typeof Array.prototype.find)return e.find(t,r);r=r||this;var n,i=e.length;if("function"!=typeof t)throw new TypeError(t+" is not a function");for(n=0;i>n;n++)if(t.call(r,e[n],n,e))return e[n]}e.exports=r},function(t,r){t.exports=e},function(e,t,r){"use strict";var n=r(11),i=r(7),o=r(9),s=function(e,t){if(e&&t){var r=i.getPrefixedStyle(t,"css"),o=n(r);return e+"{"+o+"}"}},a=o.createClass({displayName:"Style",propTypes:{rules:o.PropTypes.object,scopeSelector:o.PropTypes.string},getDefaultProps:function(){return{scopeSelector:""}},_buildStyles:function(e){var t=this;return Object.keys(e).reduce(function(r,n){var i=e[n];if("mediaQueries"===n)r+=t._buildMediaQueryString(i);else{var o=(t.props.scopeSelector?t.props.scopeSelector+" ":"")+n;r+=s(o,i)}return r},"")},_buildMediaQueryString:function(e){var t=this,r=this._getContextMediaQueries(),n="";return Object.keys(e).forEach(function(i){var o=r[i]?r[i]:i;n+="@media "+o+"{"+t._buildStyles(e[i])+"}"}),n},_getContextMediaQueries:function(){var e={};return this.context&&this.context.mediaQueries&&Object.keys(this.context.mediaQueries).forEach(function(t){e[t]=this.context.mediaQueries[t].media}.bind(this)),e},render:function(){if(!this.props.rules)return null;var e=this._buildStyles(this.props.rules);return o.createElement("style",{dangerouslySetInnerHTML:{__html:e}})}});e.exports=a},function(e,t){"use strict";var r=function(e,t){return t=t||"",Object.keys(e).map(function(r){return t+r+": "+e[r]+";"}).join("\n")};e.exports=r},function(e,t,r){"use strict";var n=r(11),i=r(7),o=r(4),s=o.canUseDOM&&i.getPrefixedPropertyName("animation")!==!1,a=1,u=null,c=null;s&&(u=document.createElement("style"),document.head.appendChild(u),c="keyframes",u.textContent="@keyframes {}",u.sheet.cssRules.length||(c=i.cssPrefix+"keyframes"));var f=function(e){var t="Animation"+a;if(a+=1,!s)return t;var r="@"+c+" "+t+" {\n"+Object.keys(e).map(function(t){var r=e[t],o=i.getPrefixedStyle(r,"css"),s=n(o," ");return" "+t+" {\n "+s+"\n }"}).join("\n")+"\n}\n";if(!u)throw new Error("keyframes not initialized properly");return u.sheet.insertRule(r,u.sheet.cssRules.length),t};e.exports=f}])}); |
@@ -1,2 +0,2 @@ | ||
# Comparision of CSS in JS Libraries for React | ||
# Comparison of CSS in JS Libraries for React | ||
@@ -3,0 +3,0 @@ Library | Syntax | Mechanism | Override mechanism | Compile-time step | Media Queries | Pseudo styles | CSS Syntax | Animations | ES6 Classes | Vendor Prefixes | Dynamic styles | Isomorphic (runs on server) |
@@ -7,3 +7,5 @@ /* @flow */ | ||
var _matchMediaFunction = ExecutionEnvironment.canUseDOM && window && window.matchMedia; | ||
var _matchMediaFunction = ExecutionEnvironment.canUseDOM && window && window.matchMedia && function (mediaQueryString) { | ||
return window.matchMedia(mediaQueryString); | ||
}; | ||
@@ -10,0 +12,0 @@ module.exports = { |
@@ -58,2 +58,24 @@ /* @flow */ | ||
// Class inheritance uses Object.create and because of __proto__ issues | ||
// with IE <10 any static properties of the superclass aren't inherited and | ||
// so need to be manually populated | ||
// See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below- | ||
var staticKeys = ['defaultProps', 'propTypes', 'contextTypes', 'childContextTypes']; | ||
staticKeys.forEach(function (key) { | ||
if (ComposedComponent.hasOwnProperty(key)) { | ||
RadiumEnhancer[key] = ComposedComponent[key]; | ||
} | ||
}); | ||
if (process.env.NODE_ENV !== 'production') { | ||
// This fixes React Hot Loader by exposing the original components top level | ||
// prototype methods on the Radium enhanced prototype as discussed in #219. | ||
Object.keys(ComposedComponent.prototype).forEach(function (key) { | ||
if (!RadiumEnhancer.prototype.hasOwnProperty(key)) { | ||
RadiumEnhancer.prototype[key] = ComposedComponent.prototype[key]; | ||
} | ||
}); | ||
} | ||
RadiumEnhancer.displayName = 'Radium(' + displayName + ')'; | ||
@@ -60,0 +82,0 @@ |
@@ -173,3 +173,11 @@ /** | ||
if (typeof value !== 'string') { | ||
value = value.toString(); | ||
if (value !== null && value !== undefined) { | ||
value = value.toString(); | ||
} else { | ||
/* eslint-disable no-console */ | ||
if (console && console.warn) { | ||
console.warn('CSS value is "' + value + '" for property "' + property + '"'); | ||
} | ||
return value; | ||
} | ||
} | ||
@@ -176,0 +184,0 @@ |
@@ -5,2 +5,4 @@ /* @flow */ | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
var MouseUpListener = require('./mouse-up-listener'); | ||
@@ -13,3 +15,2 @@ var getState = require('./get-state'); | ||
var React = require('react'); | ||
var objectAssign = require('object-assign'); | ||
@@ -36,6 +37,8 @@ // babel-eslint 3.1.7 fails here for some reason, error: | ||
var _setStyleState = function _setStyleState(component, key, newState) { | ||
var existing = component.state && component.state._radiumStyleState || {}; | ||
var state = { _radiumStyleState: objectAssign({}, existing) }; | ||
state._radiumStyleState[key] = state._radiumStyleState[key] || {}; | ||
objectAssign(state._radiumStyleState[key], newState); | ||
var existing = component._lastRadiumState || component.state && component.state._radiumStyleState || {}; | ||
var state = { _radiumStyleState: _extends({}, existing) }; | ||
state._radiumStyleState[key] = _extends({}, state._radiumStyleState[key], newState); | ||
component._lastRadiumState = state; | ||
component.setState(state); | ||
@@ -189,3 +192,14 @@ }; | ||
var shorthandProps = ['background', 'border', 'borderBottom', 'borderColor', 'borderLeft', 'borderRadius', 'borderRight', 'borderStyle', 'borderTop', 'borderWidth', 'font', 'listStyle', 'margin', 'padding', 'transform', 'transition']; | ||
var shorthandPropertyExpansions = { | ||
'background': ['backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundRepeatX', 'backgroundRepeatY', 'backgroundSize'], | ||
'border': ['borderBottom', 'borderBottomColor', 'borderBottomStyle', 'borderBottomWidth', 'borderColor', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopStyle', 'borderTopWidth', 'borderWidth'], | ||
'borderImage': ['borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth'], | ||
'borderRadius': ['borderBottomLeftRadius', 'borderBottomRightRadius', 'borderTopLeftRadius', 'borderTopRightRadius'], | ||
'font': ['fontFamily', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantLigatures', 'fontWeight', 'lineHeight'], | ||
'listStyle': ['listStyleImage', 'listStylePosition', 'listStyleType'], | ||
'margin': ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'], | ||
'padding': ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'], | ||
'transform': ['transformOrigin', 'transformStyle'], | ||
'transition': ['transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction'] | ||
}; | ||
@@ -197,9 +211,9 @@ var checkProps = function checkProps(s) { | ||
var keys = Object.keys(s); | ||
shorthandProps.forEach(function (shorthand) { | ||
if (s[shorthand] && keys.some(function (k) { | ||
return k !== shorthand && k.indexOf(shorthand) === 0; | ||
var styleKeys = Object.keys(s); | ||
styleKeys.forEach(function (styleKey) { | ||
if (shorthandPropertyExpansions[styleKey] && shorthandPropertyExpansions[styleKey].some(function (sp) { | ||
return styleKeys.indexOf(sp) !== -1; | ||
})) { | ||
/* eslint-disable no-console */ | ||
console.warn('Radium: property "' + shorthand + '" in style object', style, ': do not mix longhand and ' + 'shorthand properties in the same style object. See ' + 'https://github.com/FormidableLabs/radium/issues/95 for more ' + 'information.'); | ||
console.warn('Radium: property "' + styleKey + '" in style object', style, ': do not mix longhand and ' + 'shorthand properties in the same style object. Check the render ' + 'method of ' + component.constructor.displayName + '.', 'See https://github.com/FormidableLabs/radium/issues/95 for more ' + 'information.'); | ||
/* eslint-enable no-console */ | ||
@@ -209,3 +223,3 @@ } | ||
keys.forEach(function (k) { | ||
styleKeys.forEach(function (k) { | ||
return checkProps(s[k]); | ||
@@ -212,0 +226,0 @@ }); |
@@ -1,9 +0,6 @@ | ||
/* eslint-env jasmine */ | ||
/* global jest */ | ||
var resolveStyles = sinon.spy(require('resolve-styles.js')); | ||
var Enhancer = require('inject!enhancer.js')({ | ||
'./resolve-styles.js': resolveStyles | ||
}); | ||
jest.dontMock('../enhancer.js'); | ||
var resolveStyles = require('../resolve-styles.js'); | ||
var Enhancer = require('../enhancer.js'); | ||
var {Component} = require('react'); | ||
@@ -18,3 +15,3 @@ | ||
expect(instance.state).toEqual({_radiumStyleState: {}}); | ||
expect(instance.state).to.deep.equal({_radiumStyleState: {}}); | ||
}); | ||
@@ -34,3 +31,3 @@ | ||
expect(instance.state).toEqual( | ||
expect(instance.state).to.deep.equal( | ||
{foo: 'bar', _radiumStyleState: {}} | ||
@@ -50,7 +47,7 @@ ); | ||
expect(instance.props).toEqual({foo: 'bar'}); | ||
expect(instance.props).to.deep.equal({foo: 'bar'}); | ||
}); | ||
it('calls existing render function, then resolveStyles', () => { | ||
var renderMock = jest.genMockFunction(); | ||
var renderMock = sinon.spy(); | ||
class Composed extends Component { | ||
@@ -67,8 +64,8 @@ render () { | ||
expect(renderMock).toBeCalled(); | ||
expect(resolveStyles).toBeCalled(); | ||
expect(renderMock).to.have.been.called; | ||
expect(resolveStyles).to.have.been.called; | ||
}); | ||
it('calls existing constructor only once', () => { | ||
var constructorMock = jest.genMockFunction(); | ||
var constructorMock = sinon.spy(); | ||
class Composed extends Component { | ||
@@ -84,3 +81,3 @@ constructor () { | ||
expect(constructorMock.mock.calls.length).toBe(1); | ||
expect(constructorMock).to.have.been.calledOnce; | ||
}); | ||
@@ -94,7 +91,7 @@ | ||
expect(Enhanced.displayName).toContain(Composed.displayName); | ||
expect(Enhanced.displayName).to.contain(Composed.displayName); | ||
}); | ||
it('calls existing componentWillUnmount function', () => { | ||
var existingComponentWillUnmount = jest.genMockFunction(); | ||
var existingComponentWillUnmount = sinon.spy(); | ||
class Composed extends Component { | ||
@@ -110,7 +107,7 @@ componentWillUnmount () { | ||
expect(existingComponentWillUnmount).toBeCalled(); | ||
expect(existingComponentWillUnmount).to.have.been.called; | ||
}); | ||
it('removes mouse up listener on componentWillUnmount', () => { | ||
var removeMouseUpListener = jest.genMockFunction(); | ||
var removeMouseUpListener = sinon.spy(); | ||
class Composed extends Component { | ||
@@ -127,3 +124,3 @@ constructor () { | ||
expect(removeMouseUpListener).toBeCalled(); | ||
expect(removeMouseUpListener).to.have.been.called; | ||
}); | ||
@@ -133,5 +130,5 @@ | ||
var mediaQueryListenersByQuery = { | ||
'(min-width: 1000px)': { remove: jest.genMockFunction() }, | ||
'(max-width: 600px)': { remove: jest.genMockFunction() }, | ||
'(min-resolution: 2dppx)': { remove: jest.genMockFunction() } | ||
'(min-width: 1000px)': { remove: sinon.spy() }, | ||
'(max-width: 600px)': { remove: sinon.spy() }, | ||
'(min-resolution: 2dppx)': { remove: sinon.spy() } | ||
}; | ||
@@ -150,5 +147,5 @@ class Composed extends Component { | ||
Object.keys(mediaQueryListenersByQuery).forEach(function (key) { | ||
expect(mediaQueryListenersByQuery[key].remove).toBeCalled(); | ||
expect(mediaQueryListenersByQuery[key].remove).to.have.been.called; | ||
}); | ||
}); | ||
}); |
@@ -1,8 +0,3 @@ | ||
/* eslint-env jasmine */ | ||
/* global jest */ | ||
var getState = require('get-state.js'); | ||
jest.dontMock('../get-state.js'); | ||
var getState = require('../get-state.js'); | ||
describe('getState', function () { | ||
@@ -12,4 +7,4 @@ it('throws on unknown value', function () { | ||
getState({}, null, 'unknown'); | ||
}).toThrow(); | ||
}).to.throw(); | ||
}); | ||
}); |
@@ -1,12 +0,6 @@ | ||
/* eslint-env jasmine */ | ||
/* global jest */ | ||
jest.dontMock('../create-markup-for-styles.js'); | ||
jest.dontMock('../keyframes.js'); | ||
var originalDocumentCreateElement = document.createElement; | ||
var originalWindowGetComputedStyle = window.getComputedStyle; | ||
var styleElement; | ||
var exenv; | ||
describe('keyframes', () => { | ||
beforeEach(() => { | ||
@@ -16,3 +10,3 @@ styleElement = { | ||
sheet: { | ||
insertRule: jest.genMockFunction(), | ||
insertRule: sinon.spy(), | ||
cssRules: [] | ||
@@ -22,62 +16,76 @@ } | ||
document.createElement = jest.genMockFunction().mockImplementation(() => { | ||
sinon.stub(document, 'createElement', () => { | ||
return styleElement; | ||
}); | ||
document.head.appendChild = jest.genMockFunction(); | ||
sinon.stub(document.head, 'appendChild'); | ||
jest.setMock('exenv', { | ||
exenv = { | ||
canUseDOM: true, | ||
canUseEventListeners: true | ||
}); | ||
}; | ||
}); | ||
afterEach(() => { | ||
document.createElement = originalDocumentCreateElement; | ||
window.getComputedStyle = originalWindowGetComputedStyle; | ||
document.createElement.restore(); | ||
document.head.appendChild.restore(); | ||
}); | ||
it('doesn\'t touch the DOM if DOM not available', () => { | ||
jest.setMock('exenv', { | ||
exenv = { | ||
canUseDOM: false, | ||
canUseEventListeners: false | ||
}; | ||
var keyframes = require('inject?-./create-markup-for-styles!keyframes.js')({ | ||
'exenv': exenv, | ||
'./prefixer': require('__mocks__/prefixer.js') | ||
}); | ||
var keyframes = require('../keyframes.js'); | ||
expect(document.createElement).not.to.have.been.called; | ||
expect(document.head.appendChild).not.to.have.been.called; | ||
expect(document.createElement).not.toBeCalled(); | ||
expect(document.head.appendChild).not.toBeCalled(); | ||
var name = keyframes({}); | ||
expect(name.length).toBeGreaterThan(0); | ||
expect(name.length).to.be.greaterThan(0); | ||
}); | ||
it('doesn\'t touch the DOM if animation not supported (IE9)', () => { | ||
var Prefixer = require('../prefixer.js'); | ||
var Prefixer = require('__mocks__/prefixer.js'); | ||
Prefixer.__setNextPrefixedPropertyName(false); | ||
var keyframes = require('../keyframes.js'); | ||
var keyframes = require('inject?-./create-markup-for-styles!keyframes.js')({ | ||
'exenv': exenv, | ||
'./prefixer': Prefixer | ||
}); | ||
expect(document.createElement).not.toBeCalled(); | ||
expect(document.head.appendChild).not.toBeCalled(); | ||
expect(document.createElement).not.to.have.been.called; | ||
expect(document.head.appendChild).not.to.have.been.called; | ||
var name = keyframes({}); | ||
expect(name.length).toBeGreaterThan(0); | ||
expect(name.length).to.be.greaterThan(0); | ||
}); | ||
it('returns a name for the keyframes', () => { | ||
var keyframes = require('../keyframes.js'); | ||
var keyframes = require('inject?-./create-markup-for-styles!keyframes.js')({ | ||
'exenv': exenv, | ||
'./prefixer': require('__mocks__/prefixer.js') | ||
}); | ||
var name = keyframes({}); | ||
expect(name.length).toBeGreaterThan(0); | ||
expect(name.length).to.be.greaterThan(0); | ||
}); | ||
it('prefixes @keyframes if needed', () => { | ||
var keyframes = require('../keyframes.js'); | ||
var keyframes = require('inject?-./create-markup-for-styles!keyframes.js')({ | ||
'exenv': exenv, | ||
'./prefixer': require('__mocks__/prefixer.js') | ||
}); | ||
var name = keyframes({}); | ||
expect(styleElement.sheet.insertRule).lastCalledWith( | ||
expect(styleElement.sheet.insertRule.lastCall.args).to.deep.equal([ | ||
'@-webkit-keyframes ' + name + ' {\n\n}\n', | ||
0 | ||
); | ||
]); | ||
}); | ||
@@ -87,13 +95,19 @@ | ||
styleElement.sheet.cssRules = [{cssText: 'blah'}]; | ||
var keyframes = require('../keyframes.js'); | ||
var keyframes = require('inject?-./create-markup-for-styles!keyframes.js')({ | ||
'exenv': exenv, | ||
'./prefixer': require('__mocks__/prefixer.js') | ||
}); | ||
var name = keyframes({}); | ||
expect(styleElement.sheet.insertRule).lastCalledWith( | ||
expect(styleElement.sheet.insertRule.lastCall.args).to.deep.equal([ | ||
'@keyframes ' + name + ' {\n\n}\n', | ||
1 | ||
); | ||
]); | ||
}); | ||
it('serializes keyframes', () => { | ||
var keyframes = require('../keyframes.js'); | ||
var keyframes = require('inject?-./create-markup-for-styles!keyframes.js')({ | ||
'exenv': exenv, | ||
'./prefixer': require('__mocks__/prefixer.js') | ||
}); | ||
var name = keyframes({ | ||
@@ -108,3 +122,3 @@ from: { | ||
expect(styleElement.sheet.insertRule).lastCalledWith( | ||
expect(styleElement.sheet.insertRule.lastCall.args).to.deep.equal([ | ||
`@-webkit-keyframes ${name} { | ||
@@ -120,4 +134,4 @@ from { | ||
0 | ||
); | ||
]); | ||
}); | ||
}); |
@@ -1,9 +0,1 @@ | ||
/* eslint-env jasmine */ | ||
/* global jest */ | ||
jest.dontMock('../prefixer.js'); | ||
var originalDocumentCreateElement = document.createElement; | ||
var originalWindowGetComputedStyle = window.getComputedStyle; | ||
var browserPrefix = ''; | ||
@@ -13,2 +5,4 @@ var mockStyle = {}; | ||
describe('Prefixer', () => { | ||
var exenv; | ||
beforeEach(() => { | ||
@@ -18,18 +12,18 @@ browserPrefix = ''; | ||
document.createElement = jest.genMockFunction().mockImplementation(() => { | ||
sinon.stub(document, 'createElement', () => { | ||
return {style: mockStyle}; | ||
}); | ||
window.getComputedStyle = jest.genMockFunction().mockImplementation(() => { | ||
sinon.stub(window, 'getComputedStyle', () => { | ||
return [browserPrefix + 'transform']; | ||
}); | ||
jest.setMock('exenv', { | ||
exenv = { | ||
canUseDOM: true, | ||
canUseEventListeners: true | ||
}); | ||
}; | ||
}); | ||
afterEach(() => { | ||
document.createElement = originalDocumentCreateElement; | ||
window.getComputedStyle = originalWindowGetComputedStyle; | ||
document.createElement.restore(); | ||
window.getComputedStyle.restore(); | ||
}); | ||
@@ -39,5 +33,5 @@ | ||
browserPrefix = '-moz-'; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.cssPrefix).toBe('-moz-'); | ||
expect(Prefixer.jsPrefix).toBe('Moz'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.cssPrefix).to.equal('-moz-'); | ||
expect(Prefixer.jsPrefix).to.equal('Moz'); | ||
}); | ||
@@ -47,5 +41,5 @@ | ||
browserPrefix = '-ms-'; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.cssPrefix).toBe('-ms-'); | ||
expect(Prefixer.jsPrefix).toBe('ms'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.cssPrefix).to.equal('-ms-'); | ||
expect(Prefixer.jsPrefix).to.equal('ms'); | ||
}); | ||
@@ -55,5 +49,5 @@ | ||
browserPrefix = '-o-'; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.cssPrefix).toBe('-o-'); | ||
expect(Prefixer.jsPrefix).toBe('O'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.cssPrefix).to.equal('-o-'); | ||
expect(Prefixer.jsPrefix).to.equal('O'); | ||
}); | ||
@@ -63,21 +57,21 @@ | ||
browserPrefix = '-webkit-'; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.cssPrefix).toBe('-webkit-'); | ||
expect(Prefixer.jsPrefix).toBe('Webkit'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.cssPrefix).to.equal('-webkit-'); | ||
expect(Prefixer.jsPrefix).to.equal('Webkit'); | ||
}); | ||
it('doesn\'t detect prefix if in server', () => { | ||
jest.setMock('exenv', { | ||
exenv = { | ||
canUseDOM: false, | ||
canUseEventListeners: false | ||
}); | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
var result = Prefixer.getPrefixedStyle({display: 'flex'}); | ||
expect(result).toEqual({display: 'flex'}); | ||
expect(Prefixer.cssPrefix).toBe(''); | ||
expect(Prefixer.jsPrefix).toBe(''); | ||
expect(document.createElement).not.toBeCalled(); | ||
expect(window.getComputedStyle).not.toBeCalled(); | ||
expect(result).to.deep.equal({display: 'flex'}); | ||
expect(Prefixer.cssPrefix).to.equal(''); | ||
expect(Prefixer.jsPrefix).to.equal(''); | ||
expect(document.createElement).not.to.have.been.called; | ||
expect(window.getComputedStyle).not.to.have.been.called; | ||
}); | ||
@@ -88,4 +82,4 @@ | ||
mockStyle = { transform: '' }; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).toEqual({transform: 'foo'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).to.deep.equal({transform: 'foo'}); | ||
}); | ||
@@ -95,3 +89,3 @@ | ||
browserPrefix = '-webkit-'; | ||
var transformGetter = jest.genMockFunction().mockReturnValue('foo'); | ||
var transformGetter = sinon.stub().returns('foo'); | ||
mockStyle = { | ||
@@ -101,12 +95,12 @@ get transform () { return transformGetter(); }, | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
Prefixer.getPrefixedStyle({transform: 'foo'}); | ||
Prefixer.getPrefixedStyle({transform: 'foo'}); | ||
expect(transformGetter.mock.calls.length).toBe(1); | ||
expect(transformGetter).to.have.been.calledOnce; | ||
}); | ||
it('ignores property if not in style object', () => { | ||
var Prefixer = require('../prefixer.js'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
mockStyle = {}; | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).toEqual({}); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).to.deep.equal({}); | ||
}); | ||
@@ -117,4 +111,4 @@ | ||
mockStyle = { WebkitTransform: '' }; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).toEqual({WebkitTransform: 'foo'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).to.deep.equal({WebkitTransform: 'foo'}); | ||
}); | ||
@@ -125,4 +119,4 @@ | ||
mockStyle = { MozBoxFlex: '' }; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({flex: 1})).toEqual({MozBoxFlex: 1}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({flex: 1})).to.deep.equal({MozBoxFlex: 1}); | ||
}); | ||
@@ -136,4 +130,4 @@ | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).toEqual({WebkitTransform: 'foo'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).to.deep.equal({WebkitTransform: 'foo'}); | ||
}); | ||
@@ -144,4 +138,4 @@ | ||
mockStyle = { transform: '' }; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).toEqual({transform: 'foo'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).to.deep.equal({transform: 'foo'}); | ||
}); | ||
@@ -155,4 +149,4 @@ | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).toEqual({transform: 'foo'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({transform: 'foo'})).to.deep.equal({transform: 'foo'}); | ||
}); | ||
@@ -162,4 +156,4 @@ | ||
mockStyle = { lineHeight: '' }; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({lineHeight: 2})).toEqual({lineHeight: 2}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({lineHeight: 2})).to.deep.equal({lineHeight: 2}); | ||
}); | ||
@@ -169,6 +163,20 @@ | ||
mockStyle = { lineHeight: '' }; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({lineHeight: '2em'})).toEqual({lineHeight: '2em'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({lineHeight: '2em'})).to.deep.equal({lineHeight: '2em'}); | ||
}); | ||
it('ignores null values', () => { | ||
mockStyle = { lineHeight: '' }; | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({lineHeight: null})).to.deep.equal({lineHeight: null}); | ||
}); | ||
it('ignores undefined values', () => { | ||
mockStyle = { lineHeight: '' }; | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect( | ||
Prefixer.getPrefixedStyle({lineHeight: undefined})).to.deep.equal({lineHeight: undefined} | ||
); | ||
}); | ||
it('uses prefixed value if unprefixed setter fails and it works', () => { | ||
@@ -187,4 +195,4 @@ browserPrefix = '-webkit-'; | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({display: 'flex'})).toEqual({display: '-webkit-flex'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({display: 'flex'})).to.deep.equal({display: '-webkit-flex'}); | ||
}); | ||
@@ -205,4 +213,4 @@ | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({display: 'flex'})).toEqual({display: '-webkit-box'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({display: 'flex'})).to.deep.equal({display: '-webkit-box'}); | ||
}); | ||
@@ -223,6 +231,6 @@ | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect( | ||
Prefixer.getPrefixedStyle({color: ['rgba(255, 255, 255, .5)', '#fff']}) | ||
).toEqual({color: '#fff'}); | ||
).to.deep.equal({color: '#fff'}); | ||
}); | ||
@@ -232,9 +240,9 @@ | ||
mockStyle = {height: 'auto'}; | ||
var Prefixer = require('../prefixer.js'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect( | ||
Prefixer.getPrefixedStyle({height: [400, 'calc(100vh - 100px)']}) | ||
).toEqual({height: '400px'}); | ||
).to.deep.equal({height: '400px'}); | ||
expect( | ||
Prefixer.getPrefixedStyle({height: ['500px', 'calc(100vh - 100px)']}) | ||
).toEqual({height: '500px'}); | ||
).to.deep.equal({height: '500px'}); | ||
}); | ||
@@ -244,4 +252,4 @@ | ||
mockStyle = {height: 'auto'}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({height: 400})).toEqual({height: '400px'}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({height: 400})).to.deep.equal({height: '400px'}); | ||
}); | ||
@@ -251,4 +259,4 @@ | ||
mockStyle = {height: 'auto'}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({height: 0})).toEqual({height: 0}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({height: 0})).to.deep.equal({height: 0}); | ||
}); | ||
@@ -258,4 +266,4 @@ | ||
mockStyle = {zoom: '0'}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({zoom: 4})).toEqual({zoom: 4}); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({zoom: 4})).to.deep.equal({zoom: 4}); | ||
}); | ||
@@ -265,3 +273,3 @@ | ||
mockStyle = {color: 'inherit'}; | ||
var Prefixer = require('../prefixer.js'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
var colorHelper = { | ||
@@ -273,3 +281,3 @@ toString () { | ||
expect(Prefixer.getPrefixedStyle({color: colorHelper})) | ||
.toEqual({color: 'white'}); | ||
.to.deep.equal({color: 'white'}); | ||
}); | ||
@@ -281,4 +289,4 @@ | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({borderWidth: '1px'}, 'css')).toEqual( | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({borderWidth: '1px'}, 'css')).to.deep.equal( | ||
{'border-width': '1px'} | ||
@@ -289,9 +297,9 @@ ); | ||
it('uses dash-case if mode is css and in server', () => { | ||
jest.setMock('exenv', { | ||
exenv = { | ||
canUseDOM: false, | ||
canUseEventListeners: false | ||
}); | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({borderWidth: '1px'}, 'css')).toEqual( | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({borderWidth: '1px'}, 'css')).to.deep.equal( | ||
{'border-width': '1px'} | ||
@@ -302,11 +310,11 @@ ); | ||
it('uses first value in fallback array if in server', () => { | ||
jest.setMock('exenv', { | ||
exenv = { | ||
canUseDOM: false, | ||
canUseEventListeners: false | ||
}); | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect( | ||
Prefixer.getPrefixedStyle({color: ['rgba(255, 255, 255, .5)', '#fff']}) | ||
).toEqual({color: 'rgba(255, 255, 255, .5)'}); | ||
).to.deep.equal({color: 'rgba(255, 255, 255, .5)'}); | ||
}); | ||
@@ -319,4 +327,4 @@ | ||
}; | ||
var Prefixer = require('../prefixer.js'); | ||
expect(Prefixer.getPrefixedStyle({borderWidth: '1px'}, 'css')).toEqual( | ||
var Prefixer = require('inject!prefixer.js')({'exenv': exenv}); | ||
expect(Prefixer.getPrefixedStyle({borderWidth: '1px'}, 'css')).to.deep.equal( | ||
{'-webkit-border-width': '1px'} | ||
@@ -323,0 +331,0 @@ ); |
@@ -1,17 +0,13 @@ | ||
/* eslint-env jasmine */ | ||
/* global jest */ | ||
jest.dontMock('../get-state.js'); | ||
jest.dontMock('../resolve-styles.js'); | ||
jest.dontMock('../config.js'); | ||
var React = require('react'); | ||
var MouseUpListener = require('../mouse-up-listener.js'); | ||
var MouseUpListener = require('mouse-up-listener.js'); | ||
var objectAssign = require('object-assign'); | ||
var resolveStyles = require('../resolve-styles.js'); | ||
var Config = require('../config.js'); | ||
var resolveStyles = require('inject?-./get-state&-./config!resolve-styles.js')({ | ||
'exenv': require('__mocks__/exenv.js'), | ||
'./prefixer': require('__mocks__/prefixer.js') | ||
}); | ||
var Config = require('config.js'); | ||
var genComponent = function () { | ||
return { | ||
setState: jest.genMockFunction().mockImplementation(function (newState) { | ||
setState: sinon.spy(function (newState) { | ||
objectAssign(this.state, newState); | ||
@@ -52,3 +48,3 @@ }), | ||
beforeEach(function () { | ||
MouseUpListener.subscribe = jest.genMockFunction(); | ||
MouseUpListener.subscribe = sinon.spy(); | ||
}); | ||
@@ -70,4 +66,4 @@ | ||
expect(result).toBe(renderedElement); | ||
expect(result.props).toBe(renderedElement.props); | ||
expect(result).to.equal(renderedElement); | ||
expect(result.props).to.equal(renderedElement.props); | ||
}); | ||
@@ -81,3 +77,3 @@ | ||
expect(result.props.style).toBe(renderedElement.props.style); | ||
expect(result.props.style).to.deep.equal(renderedElement.props.style); | ||
}); | ||
@@ -96,3 +92,3 @@ | ||
var children = getChildrenArray(result.props.children); | ||
expect(children[0].props.style).toBe(style); | ||
expect(children[0].props.style).to.deep.equal(style); | ||
}); | ||
@@ -105,3 +101,3 @@ | ||
var result = resolveStyles(component, renderedElement); | ||
expect(result.props.children).toBe('Hello'); | ||
expect(result.props.children).to.equal('Hello'); | ||
}); | ||
@@ -114,3 +110,3 @@ | ||
var result = resolveStyles(component, renderedElement); | ||
expect(result.props.children).toBe(88347); | ||
expect(result.props.children).to.equal(88347); | ||
}); | ||
@@ -129,3 +125,3 @@ | ||
expect(children[0]).toBe(null); | ||
expect(children[0]).to.be.null; | ||
}); | ||
@@ -148,3 +144,3 @@ | ||
expect(result.props.style).toEqual({ | ||
expect(result.props.style).to.deep.equal({ | ||
background: 'white', | ||
@@ -171,3 +167,3 @@ color: 'blue' | ||
expect(result.props.style).toEqual({ | ||
expect(result.props.style).to.deep.equal({ | ||
background: 'white', | ||
@@ -189,3 +185,3 @@ color: 'blue' | ||
expect(result.props.style).toEqual({ | ||
expect(result.props.style).to.deep.equal({ | ||
background: 'blue' | ||
@@ -208,3 +204,3 @@ }); | ||
expect(result.props.style).toEqual({ | ||
expect(result.props.style).to.deep.equal({ | ||
background: 'white', | ||
@@ -227,3 +223,3 @@ color: 'blue' | ||
expect(result.props.style).toEqual({background: 'blue'}); | ||
expect(result.props.style).to.deep.equal({background: 'blue'}); | ||
}); | ||
@@ -239,5 +235,5 @@ | ||
expect(typeof result.props[onHandlerName]).toBe('function'); | ||
expect(typeof result.props[onHandlerName]).to.equal('function'); | ||
if (offHandlerName) { | ||
expect(typeof result.props[offHandlerName]).toBe('function'); | ||
expect(typeof result.props[offHandlerName]).to.equal('function'); | ||
} | ||
@@ -253,7 +249,7 @@ }); | ||
var result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('blue'); | ||
expect(result.props.style.background).to.equal('blue'); | ||
result.props[onHandlerName](); | ||
expect(component.setState).toBeCalled(); | ||
expect(component.setState).to.have.been.called; | ||
@@ -263,3 +259,3 @@ // Must create a new renderedElement each time, same as React, since | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('red'); | ||
expect(result.props.style.background).to.equal('red'); | ||
}); | ||
@@ -283,3 +279,3 @@ | ||
resolveStyles(component, renderedElement); | ||
}).toThrow(); | ||
}).to.throw(); | ||
}); | ||
@@ -301,3 +297,3 @@ | ||
resolveStyles(component, renderedElement); | ||
}).toThrow(); | ||
}).to.throw(); | ||
}); | ||
@@ -319,4 +315,4 @@ | ||
var children = getChildrenArray(result.props.children); | ||
expect(children[0].props.style).toEqual(null); | ||
expect(children[1].props.style.background).toEqual('blue'); | ||
expect(children[0].props.style).to.be.undefined; | ||
expect(children[1].props.style.background).to.equal('blue'); | ||
@@ -327,4 +323,4 @@ children[1].props[onHandlerName](); | ||
children = getChildrenArray(result.props.children); | ||
expect(children[0].props.style).toEqual(null); | ||
expect(children[1].props.style.background).toEqual('red'); | ||
expect(children[0].props.style).to.be.undefined; | ||
expect(children[1].props.style.background).to.equal('red'); | ||
}); | ||
@@ -346,4 +342,4 @@ | ||
var children = getChildrenArray(result.props.children); | ||
expect(children[0].props.style).toEqual(null); | ||
expect(children[1].props.style.background).toEqual('blue'); | ||
expect(children[0].props.style).to.be.undefined; | ||
expect(children[1].props.style.background).to.equal('blue'); | ||
@@ -354,4 +350,4 @@ children[1].props[onHandlerName](); | ||
children = getChildrenArray(result.props.children); | ||
expect(children[0].props.style).toEqual(null); | ||
expect(children[1].props.style.background).toEqual('red'); | ||
expect(children[0].props.style).to.be.undefined; | ||
expect(children[1].props.style.background).to.equal('red'); | ||
}); | ||
@@ -371,11 +367,34 @@ | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('red'); | ||
expect(result.props.style.background).to.equal('red'); | ||
result.props[offHandlerName](); | ||
expect(component.setState).toBeCalled(); | ||
expect(component.setState).to.have.been.called; | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('blue'); | ||
expect(result.props.style.background).to.equal('blue'); | ||
}); | ||
it('doesn\'t mutate state', function () { | ||
var component = genComponent(); | ||
var style = {background: 'blue'}; | ||
style[':' + pseudo] = {background: 'red'}; | ||
var renderedElement = <div style={style} />; | ||
var result = resolveStyles(component, renderedElement); | ||
// Capturing a reference to the existing state is enough, since Radium | ||
// MUST return a new copy for shouldComponentUpdate. | ||
var previousState = component.state._radiumStyleState; | ||
result.props[onHandlerName](); | ||
// If they are still equal here, that means we mutated the existing | ||
// state, which will break shouldComponentUpdate. | ||
expect(component.state._radiumStyleState).not.to.equal(previousState); | ||
result = resolveStyles(component, renderedElement); | ||
previousState = component.state._radiumStyleState; | ||
result.props[offHandlerName](); | ||
expect(component.state._radiumStyleState).not.to.equal(previousState); | ||
}); | ||
} | ||
@@ -385,3 +404,3 @@ | ||
var component = genComponent(); | ||
var originalOnHandler = jest.genMockFunction(); | ||
var originalOnHandler = sinon.spy(); | ||
@@ -398,6 +417,6 @@ var style = {background: 'blue'}; | ||
expect(originalOnHandler).toBeCalled(); | ||
expect(originalOnHandler).to.have.been.called; | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('red'); | ||
expect(result.props.style.background).to.equal('red'); | ||
}); | ||
@@ -408,3 +427,3 @@ | ||
var component = genComponent(); | ||
var originalOffHandler = jest.genMockFunction(); | ||
var originalOffHandler = sinon.spy(); | ||
@@ -423,6 +442,6 @@ var style = {background: 'blue'}; | ||
expect(originalOffHandler).toBeCalled(); | ||
expect(originalOffHandler).to.have.been.called; | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('blue'); | ||
expect(result.props.style.background).to.equal('blue'); | ||
}); | ||
@@ -450,3 +469,3 @@ } | ||
expect(MouseUpListener.subscribe).toBeCalled(); | ||
expect(MouseUpListener.subscribe).to.have.been.called; | ||
}); | ||
@@ -463,3 +482,3 @@ | ||
var result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('blue'); | ||
expect(result.props.style.background).to.equal('blue'); | ||
@@ -470,3 +489,3 @@ result.props.onMouseDown(); | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('red'); | ||
expect(result.props.style.background).to.equal('red'); | ||
}); | ||
@@ -487,9 +506,9 @@ | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('red'); | ||
expect(result.props.style.background).to.equal('red'); | ||
// tigger global mouseup handler | ||
MouseUpListener.subscribe.mock.calls[0][0](); | ||
MouseUpListener.subscribe.firstCall.args[0](); | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('blue'); | ||
expect(result.props.style.background).to.equal('blue'); | ||
}); | ||
@@ -510,7 +529,7 @@ | ||
// tigger global mouseup handler | ||
MouseUpListener.subscribe.mock.calls[0][0](); | ||
MouseUpListener.subscribe.mock.calls[0][0](); | ||
MouseUpListener.subscribe.firstCall.args[0](); | ||
MouseUpListener.subscribe.firstCall.args[0](); | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('blue'); | ||
expect(result.props.style.background).to.equal('blue'); | ||
}); | ||
@@ -524,3 +543,3 @@ | ||
}; | ||
var originalOnMouseDown = jest.genMockFunction(); | ||
var originalOnMouseDown = sinon.spy(); | ||
var renderedElement = ( | ||
@@ -537,6 +556,6 @@ <div | ||
expect(originalOnMouseDown).toBeCalled(); | ||
expect(originalOnMouseDown).to.have.been.called; | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('red'); | ||
expect(result.props.style.background).to.equal('red'); | ||
}); | ||
@@ -552,4 +571,4 @@ }); | ||
var component = genComponent(); | ||
var addListener = jest.genMockFunction(); | ||
var matchMedia = jest.genMockFunction().mockImplementation(function () { | ||
var addListener = sinon.spy(); | ||
var matchMedia = sinon.spy(function () { | ||
return {addListener: addListener}; | ||
@@ -566,4 +585,4 @@ }); | ||
resolveStyles(component, renderedElement); | ||
expect(matchMedia).lastCalledWith('(max-width: 400px)'); | ||
expect(addListener).lastCalledWith(jasmine.any('function')); | ||
expect(matchMedia.lastCall.args[0]).to.equal('(max-width: 400px)'); | ||
expect(addListener.lastCall.args[0]).to.be.a('function'); | ||
}); | ||
@@ -573,4 +592,4 @@ | ||
var component = genComponent(); | ||
var addListener = jest.genMockFunction(); | ||
var matchMedia = jest.genMockFunction().mockImplementation(function () { | ||
var addListener = sinon.spy(); | ||
var matchMedia = sinon.spy(function () { | ||
return {addListener: addListener}; | ||
@@ -589,4 +608,4 @@ }); | ||
expect(matchMedia.mock.calls.length).toBe(1); | ||
expect(addListener.mock.calls.length).toBe(1); | ||
expect(matchMedia).to.have.been.calledOnce; | ||
expect(addListener).to.have.been.calledOnce; | ||
}); | ||
@@ -597,4 +616,4 @@ | ||
var component2 = genComponent(); | ||
var addListener = jest.genMockFunction(); | ||
var matchMedia = jest.genMockFunction().mockImplementation(function () { | ||
var addListener = sinon.spy(); | ||
var matchMedia = sinon.spy(function () { | ||
return {addListener: addListener}; | ||
@@ -620,4 +639,4 @@ }); | ||
expect(matchMedia.mock.calls.length).toBe(1); | ||
expect(addListener.mock.calls.length).toBe(2); | ||
expect(matchMedia).to.have.been.calledOnce; | ||
expect(addListener).to.have.been.calledTwice; | ||
}); | ||
@@ -627,5 +646,5 @@ | ||
var component = genComponent(); | ||
var matchMedia = jest.genMockFunction().mockImplementation(function () { | ||
var matchMedia = sinon.spy(function () { | ||
return { | ||
addListener: jest.genMockFunction(), | ||
addListener: sinon.spy(), | ||
matches: true | ||
@@ -644,3 +663,3 @@ }; | ||
var result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('red'); | ||
expect(result.props.style.background).to.equal('red'); | ||
}); | ||
@@ -650,5 +669,5 @@ | ||
var component = genComponent(); | ||
var matchMedia = jest.genMockFunction().mockImplementation(function () { | ||
var matchMedia = sinon.spy(function () { | ||
return { | ||
addListener: jest.genMockFunction(), | ||
addListener: sinon.spy(), | ||
matches: true | ||
@@ -685,3 +704,3 @@ }; | ||
var result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('red'); | ||
expect(result.props.style.background).to.equal('red'); | ||
@@ -691,4 +710,4 @@ result.props.onMouseEnter(); | ||
result = resolveStyles(component, renderedElement); | ||
expect(result.props.style.background).toEqual('yellow'); | ||
expect(result.props.style.color).toEqual('white'); | ||
expect(result.props.style.background).to.equal('yellow'); | ||
expect(result.props.style.color).to.equal('white'); | ||
}); | ||
@@ -700,3 +719,3 @@ | ||
var listeners = []; | ||
var addListener = jest.genMockFunction().mockImplementation( | ||
var addListener = sinon.spy( | ||
function (listener) { | ||
@@ -707,3 +726,3 @@ listeners.push(listener); | ||
var mql = {addListener: addListener}; | ||
var matchMedia = jest.genMockFunction().mockImplementation(function () { | ||
var matchMedia = sinon.spy(function () { | ||
return mql; | ||
@@ -725,4 +744,4 @@ }); | ||
expect(component1.setState).toBeCalled(); | ||
expect(component2.setState).toBeCalled(); | ||
expect(component1.setState).to.have.been.called; | ||
expect(component2.setState).to.have.been.called; | ||
}); | ||
@@ -733,6 +752,6 @@ | ||
var mql = { | ||
addListener: jest.genMockFunction(), | ||
removeListener: jest.genMockFunction() | ||
addListener: sinon.spy(), | ||
removeListener: sinon.spy() | ||
}; | ||
var matchMedia = jest.genMockFunction().mockImplementation(function () { | ||
var matchMedia = sinon.spy(function () { | ||
return mql; | ||
@@ -757,3 +776,3 @@ }); | ||
expect(mql.removeListener).toBeCalled(); | ||
expect(mql.removeListener).to.have.been.called; | ||
}); | ||
@@ -796,3 +815,3 @@ }); | ||
expect(result.props.style.background).toBe( | ||
expect(result.props.style.background).to.equal( | ||
pseudoStyles[pseudoStyles.length - 1].style.background | ||
@@ -818,3 +837,3 @@ ); | ||
expect(React.Children.only(result.props.children)).toBeTruthy(); | ||
expect(React.Children.only(result.props.children)).to.be.ok; | ||
}); | ||
@@ -843,3 +862,3 @@ | ||
var children = getChildrenArray(result.props.children); | ||
expect(children[0].props.style).toBe(style); | ||
expect(children[0].props.style).to.deep.equal(style); | ||
}); | ||
@@ -863,3 +882,3 @@ | ||
var result = resolveStyles(component, renderedElement); | ||
expect(result.props.style).toEqual({ | ||
expect(result.props.style).to.deep.equal({ | ||
background: 'white', | ||
@@ -870,6 +889,6 @@ color: 'blue' | ||
var children = getChildrenArray(result.props.children); | ||
expect(children[0].props.style).toBe(style); | ||
expect(children[0].props.style).to.deep.equal(style); | ||
var componentChildren = getChildrenArray(children[0].props.children); | ||
expect(componentChildren[0].props.style).toEqual({ | ||
expect(componentChildren[0].props.style).to.deep.equal({ | ||
background: 'white', | ||
@@ -884,8 +903,7 @@ color: 'blue' | ||
beforeEach(function () { | ||
this.originalConsoleWarn = console.warn; | ||
console.warn = jest.genMockFunction(); | ||
sinon.stub(console, 'warn'); | ||
}); | ||
afterEach(function () { | ||
console.warn = this.originalConsoleWarn; | ||
console.warn.restore(); | ||
process.env.NODE_ENV = null; | ||
@@ -905,5 +923,5 @@ }); | ||
expect(console.warn).toBeCalled(); | ||
expect(console.warn.mock.calls[0][0].indexOf('border')) | ||
.toBeGreaterThan(0); | ||
expect(console.warn).to.have.been.called; | ||
expect(console.warn.firstCall.args[0].indexOf('border')) | ||
.to.be.greaterThan(0); | ||
}); | ||
@@ -924,8 +942,22 @@ | ||
expect(console.warn).toBeCalled(); | ||
expect(console.warn.mock.calls[0][0].indexOf('border')) | ||
.toBeGreaterThan(0); | ||
expect(console.warn).to.have.been.called; | ||
expect(console.warn.firstCall.args[0].indexOf('border')) | ||
.to.be.greaterThan(0); | ||
}); | ||
it('does not warn when mixing border and borderRadius', function () { | ||
var component = genComponent(); | ||
var renderedElement = ( | ||
<div style={{ | ||
border: '1px solid black', | ||
borderRadius: '5px' | ||
}} /> | ||
); | ||
resolveStyles(component, renderedElement); | ||
expect(console.warn).to.not.have.been.called; | ||
}); | ||
}); | ||
/* eslint-enable no-console */ | ||
}); |
@@ -7,3 +7,4 @@ /* @flow */ | ||
window && | ||
window.matchMedia; | ||
window.matchMedia && | ||
(mediaQueryString => window.matchMedia(mediaQueryString)); | ||
@@ -10,0 +11,0 @@ module.exports = { |
@@ -47,2 +47,29 @@ /* @flow */ | ||
// Class inheritance uses Object.create and because of __proto__ issues | ||
// with IE <10 any static properties of the superclass aren't inherited and | ||
// so need to be manually populated | ||
// See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below- | ||
var staticKeys = [ | ||
'defaultProps', | ||
'propTypes', | ||
'contextTypes', | ||
'childContextTypes' | ||
]; | ||
staticKeys.forEach((key) => { | ||
if (ComposedComponent.hasOwnProperty(key)) { | ||
RadiumEnhancer[key] = ComposedComponent[key]; | ||
} | ||
}); | ||
if (process.env.NODE_ENV !== 'production') { | ||
// This fixes React Hot Loader by exposing the original components top level | ||
// prototype methods on the Radium enhanced prototype as discussed in #219. | ||
Object.keys(ComposedComponent.prototype).forEach(key => { | ||
if (!RadiumEnhancer.prototype.hasOwnProperty(key)) { | ||
RadiumEnhancer.prototype[key] = ComposedComponent.prototype[key]; | ||
} | ||
}); | ||
} | ||
RadiumEnhancer.displayName = `Radium(${displayName})`; | ||
@@ -49,0 +76,0 @@ |
@@ -8,3 +8,3 @@ /* @flow */ | ||
elementKey: string, | ||
value: string, | ||
value: string | ||
): boolean { | ||
@@ -11,0 +11,0 @@ elementKey = elementKey || 'main'; |
@@ -30,3 +30,3 @@ /* @flow */ | ||
var keyframes = function ( | ||
keyframeRules: Object<string, Object<string, string|number>>, | ||
keyframeRules: Object<string, Object<string, string|number>> | ||
): string { | ||
@@ -33,0 +33,0 @@ var name = 'Animation' + animationIndex; |
@@ -187,3 +187,11 @@ /** | ||
if (typeof value !== 'string') { | ||
value = value.toString(); | ||
if (value !== null && value !== undefined) { | ||
value = value.toString(); | ||
} else { | ||
/* eslint-disable no-console */ | ||
if (console && console.warn) { | ||
console.warn('CSS value is "' + value + '" for property "' + property + '"'); | ||
} | ||
return value; | ||
} | ||
} | ||
@@ -190,0 +198,0 @@ |
@@ -10,3 +10,2 @@ /* @flow */ | ||
var React = require('react'); | ||
var objectAssign = require('object-assign'); | ||
@@ -33,6 +32,9 @@ // babel-eslint 3.1.7 fails here for some reason, error: | ||
var _setStyleState = function (component, key, newState) { | ||
var existing = component.state && component.state._radiumStyleState || {}; | ||
var state = { _radiumStyleState: objectAssign({}, existing) }; | ||
state._radiumStyleState[key] = state._radiumStyleState[key] || {}; | ||
objectAssign(state._radiumStyleState[key], newState); | ||
var existing = component._lastRadiumState || | ||
component.state && component.state._radiumStyleState || {}; | ||
var state = { _radiumStyleState: {...existing} }; | ||
state._radiumStyleState[key] = {...state._radiumStyleState[key], ...newState}; | ||
component._lastRadiumState = state; | ||
component.setState(state); | ||
@@ -193,7 +195,91 @@ }; | ||
var shorthandProps = [ | ||
'background', 'border', 'borderBottom', 'borderColor', 'borderLeft', | ||
'borderRadius', 'borderRight', 'borderStyle', 'borderTop', 'borderWidth', | ||
'font', 'listStyle', 'margin', 'padding', 'transform', 'transition' | ||
]; | ||
var shorthandPropertyExpansions = { | ||
'background': [ | ||
'backgroundAttachment', | ||
'backgroundBlendMode', | ||
'backgroundClip', | ||
'backgroundColor', | ||
'backgroundImage', | ||
'backgroundOrigin', | ||
'backgroundPosition', | ||
'backgroundPositionX', | ||
'backgroundPositionY', | ||
'backgroundRepeat', | ||
'backgroundRepeatX', | ||
'backgroundRepeatY', | ||
'backgroundSize' | ||
], | ||
'border': [ | ||
'borderBottom', | ||
'borderBottomColor', | ||
'borderBottomStyle', | ||
'borderBottomWidth', | ||
'borderColor', | ||
'borderLeft', | ||
'borderLeftColor', | ||
'borderLeftStyle', | ||
'borderLeftWidth', | ||
'borderRight', | ||
'borderRightColor', | ||
'borderRightStyle', | ||
'borderRightWidth', | ||
'borderStyle', | ||
'borderTop', | ||
'borderTopColor', | ||
'borderTopStyle', | ||
'borderTopWidth', | ||
'borderWidth' | ||
], | ||
'borderImage': [ | ||
'borderImageOutset', | ||
'borderImageRepeat', | ||
'borderImageSlice', | ||
'borderImageSource', | ||
'borderImageWidth' | ||
], | ||
'borderRadius': [ | ||
'borderBottomLeftRadius', | ||
'borderBottomRightRadius', | ||
'borderTopLeftRadius', | ||
'borderTopRightRadius' | ||
], | ||
'font': [ | ||
'fontFamily', | ||
'fontKerning', | ||
'fontSize', | ||
'fontStretch', | ||
'fontStyle', | ||
'fontVariant', | ||
'fontVariantLigatures', | ||
'fontWeight', | ||
'lineHeight' | ||
], | ||
'listStyle': [ | ||
'listStyleImage', | ||
'listStylePosition', | ||
'listStyleType' | ||
], | ||
'margin': [ | ||
'marginBottom', | ||
'marginLeft', | ||
'marginRight', | ||
'marginTop' | ||
], | ||
'padding': [ | ||
'paddingBottom', | ||
'paddingLeft', | ||
'paddingRight', | ||
'paddingTop' | ||
], | ||
'transform': [ | ||
'transformOrigin', | ||
'transformStyle' | ||
], | ||
'transition': [ | ||
'transitionDelay', | ||
'transitionDuration', | ||
'transitionProperty', | ||
'transitionTimingFunction' | ||
] | ||
}; | ||
@@ -205,15 +291,16 @@ var checkProps = s => { | ||
var keys = Object.keys(s); | ||
shorthandProps.forEach(shorthand => { | ||
var styleKeys = Object.keys(s); | ||
styleKeys.forEach(styleKey => { | ||
if ( | ||
s[shorthand] && | ||
keys.some(k => k !== shorthand && k.indexOf(shorthand) === 0) | ||
shorthandPropertyExpansions[styleKey] && | ||
shorthandPropertyExpansions[styleKey].some(sp => styleKeys.indexOf(sp) !== -1) | ||
) { | ||
/* eslint-disable no-console */ | ||
console.warn( | ||
'Radium: property "' + shorthand + '" in style object', | ||
'Radium: property "' + styleKey + '" in style object', | ||
style, | ||
': do not mix longhand and ' + | ||
'shorthand properties in the same style object. See ' + | ||
'https://github.com/FormidableLabs/radium/issues/95 for more ' + | ||
'shorthand properties in the same style object. Check the render ' + | ||
'method of ' + component.constructor.displayName + '.', | ||
'See https://github.com/FormidableLabs/radium/issues/95 for more ' + | ||
'information.' | ||
@@ -225,3 +312,3 @@ ); | ||
keys.forEach(k => checkProps(s[k])); | ||
styleKeys.forEach(k => checkProps(s[k])); | ||
}; | ||
@@ -228,0 +315,0 @@ checkProps(style); |
{ | ||
"name": "radium", | ||
"version": "0.13.2", | ||
"version": "0.13.3", | ||
"description": "A set of tools to manage inline styles on React elements", | ||
@@ -23,13 +23,9 @@ "main": "lib/index.js", | ||
"prepublish": "npm run lib", | ||
"test": "jest", | ||
"test-coverage": "npm run babel && jest --config jest/coverage-config.json" | ||
"test": "karma start", | ||
"test-coverage": "karma start karma.conf.coverage.js" | ||
}, | ||
"license": "MIT", | ||
"peerDependencies": { | ||
"react": ">=0.12.0 <0.14.0" | ||
}, | ||
"dependencies": { | ||
"array-find": "^1.0.0", | ||
"exenv": "^1.2.0", | ||
"object-assign": "^3.0.0", | ||
"babel": "^5.5.8", | ||
@@ -42,24 +38,28 @@ "babel-core": "^5.5.8", | ||
"babel-loader": "^5.1.4", | ||
"chai": "^3.0.0", | ||
"coveralls": "^2.11.2", | ||
"eslint": "^0.22.1", | ||
"eslint-plugin-react": "^2.5.1", | ||
"jest-cli": "^0.4.12", | ||
"inject-loader": "^2.0.0", | ||
"isparta-loader": "^0.2.0", | ||
"karma": "^0.12.37", | ||
"karma-babel-preprocessor": "^5.2.1", | ||
"karma-coverage": "^0.4.2", | ||
"karma-mocha": "^0.2.0", | ||
"karma-mocha-reporter": "^1.0.2", | ||
"karma-phantomjs-launcher": "^0.2.0", | ||
"karma-phantomjs-shim": "^1.0.0", | ||
"karma-sinon-chai": "^1.0.0", | ||
"karma-webpack": "^1.5.1", | ||
"lodash": "^3.9.3", | ||
"mocha": "^2.2.5", | ||
"node-libs-browser": "^0.5.2", | ||
"phantomjs": "^1.9.17", | ||
"object-assign": "^3.0.0", | ||
"react": ">=0.13.3", | ||
"sinon": "^1.15.3", | ||
"sinon-chai": "^2.8.0", | ||
"webpack": "^1.9.11", | ||
"webpack-dev-server": "^1.9.0" | ||
}, | ||
"jest": { | ||
"scriptPreprocessor": "jest/preprocessor.js", | ||
"testPathDirs": [ | ||
"modules" | ||
], | ||
"unmockedModulePathPatterns": [ | ||
"array-find", | ||
"exenv", | ||
"lodash", | ||
"object-assign", | ||
"react" | ||
] | ||
} | ||
} |
@@ -26,3 +26,3 @@ var path = require('path'); | ||
{ | ||
test: /\.js(x|)?$/, | ||
test: /\.jsx?$/, | ||
loader: 'babel-loader?stage=0' | ||
@@ -29,0 +29,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
220773
5
4400
27
8
- Removedobject-assign@^3.0.0
- Removedast-types@0.8.15(transitive)
- Removedbase62@1.2.8(transitive)
- Removedenvify@3.4.1(transitive)
- Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)
- Removedjstransform@11.0.3(transitive)
- Removedobject-assign@2.1.13.0.0(transitive)
- Removedreact@0.13.3(transitive)
- Removedrecast@0.10.43(transitive)
- Removedsource-map@0.4.4(transitive)