to-style
Version:
Convert style objects to style strings
553 lines (438 loc) • 17.7 kB
JavaScript
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.toStyle=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
module.exports = {
prefixProperties: _dereq_('./src/prefixProperties') ,
object: _dereq_('./src/toStyleObject'),
string: _dereq_('./src/toStyleString')
}
},{"./src/prefixProperties":17,"./src/toStyleObject":19,"./src/toStyleString":20}],2:[function(_dereq_,module,exports){
var toCamelFn = function(str, letter){
return letter ? letter.toUpperCase(): ''
}
var hyphenRe = _dereq_('./hyphenRe')
module.exports = function(str){
return str?
str.replace(hyphenRe, toCamelFn):
''
}
},{"./hyphenRe":5}],3:[function(_dereq_,module,exports){
var RE = /\s+/g
module.exports = function(str){
if (!str){
return ''
}
return str.trim().replace(RE, ' ')
}
},{}],4:[function(_dereq_,module,exports){
var separate = _dereq_('./separate')
var camelize = _dereq_('./camelize')
var toUpperFirst = _dereq_('./toUpperFirst')
var hyphenRe = _dereq_('./hyphenRe')
function toLowerAndSpace(str, letter){
return letter? ' ' + letter.toLowerCase(): ' '
}
module.exports = function(name, config){
var str = config && config.capitalize?
separate(camelize(name), ' '):
separate(name, ' ').replace(hyphenRe, toLowerAndSpace)
return toUpperFirst(str.trim())
}
},{"./camelize":2,"./hyphenRe":5,"./separate":8,"./toUpperFirst":11}],5:[function(_dereq_,module,exports){
module.exports = /[-\s]+(.)?/g
},{}],6:[function(_dereq_,module,exports){
var separate = _dereq_('./separate')
module.exports = function(name){
return separate(name).toLowerCase()
}
},{"./separate":8}],7:[function(_dereq_,module,exports){
module.exports = {
toLowerFirst : _dereq_('./toLowerFirst'),
toUpperFirst : _dereq_('./toUpperFirst'),
separate : _dereq_('./separate'),
stripWhitespace : _dereq_('./stripWhitespace'),
compactWhitespace: _dereq_('./compactWhitespace'),
camelize : _dereq_('./camelize'),
humanize : _dereq_('./humanize'),
hyphenate : _dereq_('./hyphenate')
}
},{"./camelize":2,"./compactWhitespace":3,"./humanize":4,"./hyphenate":6,"./separate":8,"./stripWhitespace":9,"./toLowerFirst":10,"./toUpperFirst":11}],8:[function(_dereq_,module,exports){
var doubleColonRe = /::/g
var upperToLowerRe = /([A-Z]+)([A-Z][a-z])/g
var lowerToUpperRe = /([a-z\d])([A-Z])/g
var underscoreToDashRe = /_/g
module.exports = function(name, separator){
return name?
name.replace(doubleColonRe, '/')
.replace(upperToLowerRe, '$1_$2')
.replace(lowerToUpperRe, '$1_$2')
.replace(underscoreToDashRe, separator || '-')
:
''
}
},{}],9:[function(_dereq_,module,exports){
var RE = /\s/g
module.exports = function(str){
if (!str){
return ''
}
return str.replace(RE, '')
}
},{}],10:[function(_dereq_,module,exports){
module.exports = function(str){
return str.length?
str.charAt(0).toLowerCase() + str.substring(1):
str
}
},{}],11:[function(_dereq_,module,exports){
module.exports = function(value){
return value.length?
value.charAt(0).toUpperCase() + value.substring(1):
value
}
},{}],12:[function(_dereq_,module,exports){
module.exports = _dereq_('./prefixer')()
},{"./prefixer":18}],13:[function(_dereq_,module,exports){
var objectHasOwn = Object.prototype.hasOwnProperty
module.exports = function(object, propertyName){
return objectHasOwn.call(object, propertyName)
}
},{}],14:[function(_dereq_,module,exports){
var objectToString = Object.prototype.toString
module.exports = function(v) {
return objectToString.apply(v) === '[object Function]'
}
},{}],15:[function(_dereq_,module,exports){
var objectToString = Object.prototype.toString
module.exports = function(v){
return !!v && objectToString.call(v) === '[object Object]'
}
},{}],16:[function(_dereq_,module,exports){
var toUpperFirst = _dereq_('ustring').toUpperFirst
var re = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/
var docStyle = typeof document == 'undefined'?
{}:
document.documentElement.style
var prefixInfo = (function(){
var prefix = (function(){
for (var prop in docStyle) {
if( re.test(prop) ) {
// test is faster than match, so it's better to perform
// that on the lot and match only when necessary
return prop.match(re)[0]
}
}
// Nothing found so far? Webkit does not enumerate over the CSS properties of the style object.
// However (prop in style) returns the correct value, so we'll have to test for
// the precence of a specific property
if ('WebkitOpacity' in docStyle){
return 'Webkit'
}
if ('KhtmlOpacity' in docStyle) {
return 'Khtml'
}
return ''
})(),
lower = prefix.toLowerCase()
return {
style : prefix,
css : '-' + lower + '-',
dom : ({
Webkit: 'WebKit',
ms : 'MS',
o : 'WebKit'
})[prefix] || toUpperFirst(prefix)
}
})()
module.exports = prefixInfo
},{"ustring":7}],17:[function(_dereq_,module,exports){
module.exports = {
'border-radius' : 1,
'border-top-left-radius' : 1,
'border-top-right-radius' : 1,
'border-bottom-left-radius' : 1,
'border-bottom-right-radius' : 1,
'box-shadow' : 1,
'order' : 1,
'flex' : function(name, prefix){
return [prefix + 'box-flex']
},
'box-flex' : 1,
'box-align' : 1,
'animation' : 1,
'animation-duration' : 1,
'animation-name' : 1,
'transition' : 1,
'transition-duration' : 1,
'transform' : 1,
'transform-style' : 1,
'transform-origin' : 1,
'backface-visibility' : 1,
'perspective' : 1,
'box-pack' : 1
}
},{}],18:[function(_dereq_,module,exports){
var ustring = _dereq_('ustring')
var camelize = ustring.camelize
var hyphenate = ustring.hyphenate
var toLowerFirst = ustring.toLowerFirst
var toUpperFirst = ustring.toUpperFirst
var prefixInfo = _dereq_('./prefixInfo')
var prefixProperties = _dereq_('./prefixProperties')
var docStyle = typeof document == 'undefined'?
{}:
document.documentElement.style
module.exports = function(asStylePrefix){
return function(name, config){
config = config || {}
var styleName = toLowerFirst(camelize(name)),
cssName = hyphenate(name),
theName = asStylePrefix?
styleName:
cssName,
thePrefix = prefixInfo.style?
asStylePrefix?
prefixInfo.style:
prefixInfo.css
:
''
if ( styleName in docStyle ) {
return config.asString?
theName :
[ theName ]
}
//not a valid style name, so we'll return the value with a prefix
var upperCased = theName,
prefixProperty = prefixProperties[cssName],
result = []
if (asStylePrefix){
upperCased = toUpperFirst(theName)
}
if (typeof prefixProperty == 'function'){
var prefixedCss = prefixProperty(theName, thePrefix) || []
if (prefixedCss && !Array.isArray(prefixedCss)){
prefixedCss = [prefixedCss]
}
if (prefixedCss.length){
prefixedCss = prefixedCss.map(function(property){
return asStylePrefix?
toLowerFirst(camelize(property)):
hyphenate(property)
})
}
result = result.concat(prefixedCss)
}
if (thePrefix){
result.push(thePrefix + upperCased)
}
result.push(theName)
if (config.asString || result.length == 1){
return result[0]
}
return result
}
}
},{"./prefixInfo":16,"./prefixProperties":17,"ustring":7}],19:[function(_dereq_,module,exports){
var ustring = _dereq_('ustring')
var prefixInfo = _dereq_('./prefixInfo')
var cssPrefixFn = _dereq_('./cssPrefix')
var HYPHENATE = ustring.hyphenate
var HAS_OWN = _dereq_('./hasOwn')
var IS_OBJECT = _dereq_('./isObject')
var IS_FUNCTION = _dereq_('./isFunction')
var applyPrefix = function(target, property, value, normalizeFn){
cssPrefixFn(property).forEach(function(p){
target[normalizeFn? normalizeFn(p): p] = value
})
}
var toObject = function(str){
str = (str || '').split(';')
var result = {}
str.forEach(function(item){
var split = item.split(':')
if (split.length == 2){
result[split[0].trim()] = split[1].trim()
}
})
return result
}
/**
* @ignore
* @method toStyleObject
*
* @param {Object} styles The object to convert to a style object.
* @param {Object} [config]
* @param {Boolean} [config.addUnits=true] True if you want to add units when numerical values are encountered.
* @param {Object} config.cssUnitless An object whose keys represent css numerical property names that will not be appended with units.
* @param {Object} config.prefixProperties An object whose keys represent css property names that should be prefixed
* @param {String} config.cssUnit='px' The css unit to append to numerical values. Defaults to 'px'
* @param {String} config.normalizeName A function that normalizes a name to a valid css property name
* @param {String} config.scope
*
* @return {Object} The object, normalized with css style names
*/
var TO_STYLE_OBJECT = function(styles, config, prepend, result){
if (typeof styles == 'string'){
styles = toObject(styles)
}
config = config || {}
result = result || {}
var scope = config.scope || {},
//configs
addUnits = config.addUnits != null?
config.addUnits:
scope && scope.addUnits != null?
scope.addUnits:
true,
cssUnitless = (config.cssUnitless != null?
config.cssUnitless:
scope?
scope.cssUnitless:
null) || {},
cssUnit = (config.cssUnit || scope? scope.cssUnit: null) || 'px',
prefixProperties = (config.prefixProperties || (scope? scope.prefixProperties: null)) || {},
normalizeFn = config.normalizeName || HYPHENATE,
processed,
styleName,
propName,
propValue,
propCssUnit,
propType,
propIsNumber,
fnPropValue,
prefix
for (propName in styles) if (HAS_OWN(styles, propName)) {
propValue = styles[ propName ]
//the hyphenated style name (css property name)
styleName = normalizeFn(prepend? prepend + propName: propName)
processed = false
prefix = false
if (IS_FUNCTION(propValue)) {
//a function can either return a css value
//or an object with { value, prefix, name }
fnPropValue = propValue.call(scope || styles, propValue, propName, styleName, styles)
if (IS_OBJECT(fnPropValue) && fnPropValue.value != null){
propValue = fnPropValue.value
prefix = fnPropValue.prefix
styleName = fnPropValue.name?
normalizeFn(fnPropValue.name):
styleName
} else {
propValue = fnPropValue
}
}
propType = typeof propValue
propIsNumber = propType == 'number' || (propType == 'string' && propValue != '' && propValue * 1 == propValue)
if (propValue == null || styleName == null || styleName === ''){
continue
}
if (propIsNumber || propType == 'string'){
processed = true
}
if (!processed && propValue.value != null && propValue.prefix){
processed = true
prefix = propValue.prefix
propValue = propValue.value
}
if (processed){
prefix = prefix || !!prefixProperties[styleName]
if (propIsNumber){
propValue = addUnits && !(styleName in cssUnitless) ?
propValue + cssUnit:
propValue + ''//change it to a string, so that jquery does not append px or other units
}
//special border treatment
if (
(
styleName == 'border' ||
(!styleName.indexOf('border')
&&
!~styleName.indexOf('radius')
&&
!~styleName.indexOf('width'))
) &&
propIsNumber
){
styleName = normalizeFn(styleName + '-width')
}
//special border radius treatment
if (!styleName.indexOf('border-radius-')){
styleName.replace(/border(-radius)(-(.*))/, function(str, radius, theRest){
var positions = {
'-top' : ['-top-left', '-top-right' ],
'-left' : ['-top-left', '-bottom-left' ],
'-right' : ['-top-right', '-bottom-right'],
'-bottom' : ['-bottom-left', '-bottom-right']
}
if (theRest in positions){
styleName = []
positions[theRest].forEach(function(pos){
styleName.push(normalizeFn('border' + pos + radius))
})
} else {
styleName = normalizeFn('border'+ theRest + radius)
}
})
if (Array.isArray(styleName)){
styleName.forEach(function(styleName){
if (prefix){
applyPrefix(result, styleName, propValue, normalizeFn)
} else {
result[normalizeFn(styleName)] = propValue
}
})
continue
}
}
if (prefix){
applyPrefix(result, styleName, propValue, normalizeFn)
} else {
result[normalizeFn(styleName)] = propValue
}
} else {
//the propValue must be an object, so go down the hierarchy
TO_STYLE_OBJECT(propValue, config, styleName + '-', result)
}
}
return result
}
module.exports = TO_STYLE_OBJECT
},{"./cssPrefix":12,"./hasOwn":13,"./isFunction":14,"./isObject":15,"./prefixInfo":16,"ustring":7}],20:[function(_dereq_,module,exports){
var toStyleObject = _dereq_('./toStyleObject')
var hasOwn = _dereq_('./hasOwn')
/**
* @ignore
* @method toStyleString
*
* @param {Object} styles The object to convert to a style string.
* @param {Object} config
* @param {Boolean} config.addUnits=true True if you want to add units when numerical values are encountered. Defaults to true
* @param {Object} config.cssUnitless An object whose keys represent css numerical property names that will not be appended with units.
* @param {Object} config.prefixProperties An object whose keys represent css property names that should be prefixed
* @param {String} config.cssUnit='px' The css unit to append to numerical values. Defaults to 'px'
* @param {String} config.scope
*
* @return {Object} The object, normalized with css style names
*/
module.exports = function(styles, config){
styles = toStyleObject(styles, config)
var result = []
var prop
for(prop in styles) if (hasOwn(styles, prop)){
result.push(prop + ': ' + styles[prop])
}
return result.join('; ')
}
},{"./hasOwn":13,"./toStyleObject":19}]},{},[1])
(1)
});