polished
Version:
A lightweight toolset for writing styles in Javascript.
1,413 lines (1,363 loc) • 135 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/esm/extends'), require('@babel/runtime/helpers/esm/assertThisInitialized'), require('@babel/runtime/helpers/esm/inheritsLoose'), require('@babel/runtime/helpers/esm/wrapNativeSuper'), require('@babel/runtime/helpers/esm/taggedTemplateLiteralLoose')) :
typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/esm/extends', '@babel/runtime/helpers/esm/assertThisInitialized', '@babel/runtime/helpers/esm/inheritsLoose', '@babel/runtime/helpers/esm/wrapNativeSuper', '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.polished = {}, global["extends"], global.assertThisInitialized, global.inheritsLoose, global.wrapNativeSuper, global.taggedTemplateLiteralLoose));
})(this, (function (exports, _extends, _assertThisInitialized, _inheritsLoose, _wrapNativeSuper, _taggedTemplateLiteralLoose) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
var _wrapNativeSuper__default = /*#__PURE__*/_interopDefaultLegacy(_wrapNativeSuper);
var _taggedTemplateLiteralLoose__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteralLoose);
function last() {
var _ref;
return _ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref];
}
function negation(a) {
return -a;
}
function addition(a, b) {
return a + b;
}
function subtraction(a, b) {
return a - b;
}
function multiplication(a, b) {
return a * b;
}
function division(a, b) {
return a / b;
}
function max() {
return Math.max.apply(Math, arguments);
}
function min() {
return Math.min.apply(Math, arguments);
}
function comma() {
return Array.of.apply(Array, arguments);
}
var defaultSymbols = {
symbols: {
'*': {
infix: {
symbol: '*',
f: multiplication,
notation: 'infix',
precedence: 4,
rightToLeft: 0,
argCount: 2
},
symbol: '*',
regSymbol: '\\*'
},
'/': {
infix: {
symbol: '/',
f: division,
notation: 'infix',
precedence: 4,
rightToLeft: 0,
argCount: 2
},
symbol: '/',
regSymbol: '/'
},
'+': {
infix: {
symbol: '+',
f: addition,
notation: 'infix',
precedence: 2,
rightToLeft: 0,
argCount: 2
},
prefix: {
symbol: '+',
f: last,
notation: 'prefix',
precedence: 3,
rightToLeft: 0,
argCount: 1
},
symbol: '+',
regSymbol: '\\+'
},
'-': {
infix: {
symbol: '-',
f: subtraction,
notation: 'infix',
precedence: 2,
rightToLeft: 0,
argCount: 2
},
prefix: {
symbol: '-',
f: negation,
notation: 'prefix',
precedence: 3,
rightToLeft: 0,
argCount: 1
},
symbol: '-',
regSymbol: '-'
},
',': {
infix: {
symbol: ',',
f: comma,
notation: 'infix',
precedence: 1,
rightToLeft: 0,
argCount: 2
},
symbol: ',',
regSymbol: ','
},
'(': {
prefix: {
symbol: '(',
f: last,
notation: 'prefix',
precedence: 0,
rightToLeft: 0,
argCount: 1
},
symbol: '(',
regSymbol: '\\('
},
')': {
postfix: {
symbol: ')',
f: undefined,
notation: 'postfix',
precedence: 0,
rightToLeft: 0,
argCount: 1
},
symbol: ')',
regSymbol: '\\)'
},
min: {
func: {
symbol: 'min',
f: min,
notation: 'func',
precedence: 0,
rightToLeft: 0,
argCount: 1
},
symbol: 'min',
regSymbol: 'min\\b'
},
max: {
func: {
symbol: 'max',
f: max,
notation: 'func',
precedence: 0,
rightToLeft: 0,
argCount: 1
},
symbol: 'max',
regSymbol: 'max\\b'
}
}
};
var defaultSymbolMap = defaultSymbols;
// based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
/**
* Parse errors.md and turn it into a simple hash of code: message
* @private
*/
var ERRORS = {
"1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
"2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
"3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
"4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
"5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
"6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
"7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
"8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
"9": "Please provide a number of steps to the modularScale helper.\n\n",
"10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
"11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
"12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
"13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
"14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
"15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
"16": "You must provide a template to this method.\n\n",
"17": "You passed an unsupported selector state to this method.\n\n",
"18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
"19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
"20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
"21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
"22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
"23": "fontFace expects a name of a font-family.\n\n",
"24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
"25": "fontFace expects localFonts to be an array.\n\n",
"26": "fontFace expects fileFormats to be an array.\n\n",
"27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
"28": "Please supply a filename to retinaImage() as the first argument.\n\n",
"29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
"30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
"31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
"32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
"33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
"34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
"35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
"36": "Property must be a string value.\n\n",
"37": "Syntax Error at %s.\n\n",
"38": "Formula contains a function that needs parentheses at %s.\n\n",
"39": "Formula is missing closing parenthesis at %s.\n\n",
"40": "Formula has too many closing parentheses at %s.\n\n",
"41": "All values in a formula must have the same unit or be unitless.\n\n",
"42": "Please provide a number of steps to the modularScale helper.\n\n",
"43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
"44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
"45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
"46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
"47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
"48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
"49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
"50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
"51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
"52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
"53": "fontFace expects localFonts to be an array.\n\n",
"54": "fontFace expects fileFormats to be an array.\n\n",
"55": "fontFace expects a name of a font-family.\n\n",
"56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
"57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
"58": "Please supply a filename to retinaImage() as the first argument.\n\n",
"59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
"60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
"61": "Property must be a string value.\n\n",
"62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
"63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
"64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
"65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
"66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
"67": "You must provide a template to this method.\n\n",
"68": "You passed an unsupported selector state to this method.\n\n",
"69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
"70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
"71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
"72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
"73": "Please provide a valid CSS variable.\n\n",
"74": "CSS variable not found and no default was provided.\n\n",
"75": "important requires a valid style object, got a %s instead.\n\n",
"76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
"77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
"78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
};
/**
* super basic version of sprintf
* @private
*/
function format() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var a = args[0];
var b = [];
var c;
for (c = 1; c < args.length; c += 1) {
b.push(args[c]);
}
b.forEach(function (d) {
a = a.replace(/%[a-z]/, d);
});
return a;
}
/**
* Create an error file out of errors.md for development and a simple web link to the full errors
* in production mode.
* @private
*/
var PolishedError = /*#__PURE__*/function (_Error) {
_inheritsLoose__default["default"](PolishedError, _Error);
function PolishedError(code) {
var _this;
{
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
_this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
}
return _assertThisInitialized__default["default"](_this);
}
return PolishedError;
}( /*#__PURE__*/_wrapNativeSuper__default["default"](Error));
var unitRegExp = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv|sm|s(?!\D|$)|ged|darg?|nrut)/g;
// Merges additional math functionality into the defaults.
function mergeSymbolMaps(additionalSymbols) {
var symbolMap = {};
symbolMap.symbols = additionalSymbols ? _extends__default["default"]({}, defaultSymbolMap.symbols, additionalSymbols.symbols) : _extends__default["default"]({}, defaultSymbolMap.symbols);
return symbolMap;
}
function exec(operators, values) {
var _ref;
var op = operators.pop();
values.push(op.f.apply(op, (_ref = []).concat.apply(_ref, values.splice(-op.argCount))));
return op.precedence;
}
function calculate(expression, additionalSymbols) {
var symbolMap = mergeSymbolMaps(additionalSymbols);
var match;
var operators = [symbolMap.symbols['('].prefix];
var values = [];
var pattern = new RegExp( // Pattern for numbers
"\\d+(?:\\.\\d+)?|" +
// ...and patterns for individual operators/function names
Object.keys(symbolMap.symbols).map(function (key) {
return symbolMap.symbols[key];
})
// longer symbols should be listed first
// $FlowFixMe
.sort(function (a, b) {
return b.symbol.length - a.symbol.length;
})
// $FlowFixMe
.map(function (val) {
return val.regSymbol;
}).join('|') + "|(\\S)", 'g');
pattern.lastIndex = 0; // Reset regular expression object
var afterValue = false;
do {
match = pattern.exec(expression);
var _ref2 = match || [')', undefined],
token = _ref2[0],
bad = _ref2[1];
var notNumber = symbolMap.symbols[token];
var notNewValue = notNumber && !notNumber.prefix && !notNumber.func;
var notAfterValue = !notNumber || !notNumber.postfix && !notNumber.infix;
// Check for syntax errors:
if (bad || (afterValue ? notAfterValue : notNewValue)) {
throw new PolishedError(37, match ? match.index : expression.length, expression);
}
if (afterValue) {
// We either have an infix or postfix operator (they should be mutually exclusive)
var curr = notNumber.postfix || notNumber.infix;
do {
var prev = operators[operators.length - 1];
if ((curr.precedence - prev.precedence || prev.rightToLeft) > 0) break;
// Apply previous operator, since it has precedence over current one
} while (exec(operators, values)); // Exit loop after executing an opening parenthesis or function
afterValue = curr.notation === 'postfix';
if (curr.symbol !== ')') {
operators.push(curr);
// Postfix always has precedence over any operator that follows after it
if (afterValue) exec(operators, values);
}
} else if (notNumber) {
// prefix operator or function
operators.push(notNumber.prefix || notNumber.func);
if (notNumber.func) {
// Require an opening parenthesis
match = pattern.exec(expression);
if (!match || match[0] !== '(') {
throw new PolishedError(38, match ? match.index : expression.length, expression);
}
}
} else {
// number
values.push(+token);
afterValue = true;
}
} while (match && operators.length);
if (operators.length) {
throw new PolishedError(39, match ? match.index : expression.length, expression);
} else if (match) {
throw new PolishedError(40, match ? match.index : expression.length, expression);
} else {
return values.pop();
}
}
function reverseString(str) {
return str.split('').reverse().join('');
}
/**
* Helper for doing math with CSS Units. Accepts a formula as a string. All values in the formula must have the same unit (or be unitless). Supports complex formulas utliziing addition, subtraction, multiplication, division, square root, powers, factorial, min, max, as well as parentheses for order of operation.
*
*In cases where you need to do calculations with mixed units where one unit is a [relative length unit](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units), you will want to use [CSS Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
*
* *warning* While we've done everything possible to ensure math safely evalutes formulas expressed as strings, you should always use extreme caution when passing `math` user provided values.
* @example
* // Styles as object usage
* const styles = {
* fontSize: math('12rem + 8rem'),
* fontSize: math('(12px + 2px) * 3'),
* fontSize: math('3px^2 + sqrt(4)'),
* }
*
* // styled-components usage
* const div = styled.div`
* fontSize: ${math('12rem + 8rem')};
* fontSize: ${math('(12px + 2px) * 3')};
* fontSize: ${math('3px^2 + sqrt(4)')};
* `
*
* // CSS as JS Output
*
* div: {
* fontSize: '20rem',
* fontSize: '42px',
* fontSize: '11px',
* }
*/
function math(formula, additionalSymbols) {
var reversedFormula = reverseString(formula);
var formulaMatch = reversedFormula.match(unitRegExp);
// Check that all units are the same
if (formulaMatch && !formulaMatch.every(function (unit) {
return unit === formulaMatch[0];
})) {
throw new PolishedError(41);
}
var cleanFormula = reverseString(reversedFormula.replace(unitRegExp, ''));
return "" + calculate(cleanFormula, additionalSymbols) + (formulaMatch ? reverseString(formulaMatch[0]) : '');
}
var cssVariableRegex = /--[\S]*/g;
/**
* Fetches the value of a passed CSS Variable in the :root scope, or otherwise returns a defaultValue if provided.
*
* @example
* // Styles as object usage
* const styles = {
* 'background': cssVar('--background-color'),
* }
*
* // styled-components usage
* const div = styled.div`
* background: ${cssVar('--background-color')};
* `
*
* // CSS in JS Output
*
* element {
* 'background': 'red'
* }
*/
function cssVar(cssVariable, defaultValue) {
if (!cssVariable || !cssVariable.match(cssVariableRegex)) {
throw new PolishedError(73);
}
var variableValue;
/* eslint-disable */
/* istanbul ignore next */
if (typeof document !== 'undefined' && document.documentElement !== null) {
variableValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
}
/* eslint-enable */
if (variableValue) {
return variableValue.trim();
} else if (defaultValue) {
return defaultValue;
}
throw new PolishedError(74);
}
// @private
function capitalizeString(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var positionMap$1 = ['Top', 'Right', 'Bottom', 'Left'];
function generateProperty(property, position) {
if (!property) return position.toLowerCase();
var splitProperty = property.split('-');
if (splitProperty.length > 1) {
splitProperty.splice(1, 0, position);
return splitProperty.reduce(function (acc, val) {
return "" + acc + capitalizeString(val);
});
}
var joinedProperty = property.replace(/([a-z])([A-Z])/g, "$1" + position + "$2");
return property === joinedProperty ? "" + property + position : joinedProperty;
}
function generateStyles(property, valuesWithDefaults) {
var styles = {};
for (var i = 0; i < valuesWithDefaults.length; i += 1) {
if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
styles[generateProperty(property, positionMap$1[i])] = valuesWithDefaults[i];
}
}
return styles;
}
/**
* Enables shorthand for direction-based properties. It accepts a property (hyphenated or camelCased) and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can also optionally pass a null argument for a directional value to ignore it.
* @example
* // Styles as object usage
* const styles = {
* ...directionalProperty('padding', '12px', '24px', '36px', '48px')
* }
*
* // styled-components usage
* const div = styled.div`
* ${directionalProperty('padding', '12px', '24px', '36px', '48px')}
* `
*
* // CSS as JS Output
*
* div {
* 'paddingTop': '12px',
* 'paddingRight': '24px',
* 'paddingBottom': '36px',
* 'paddingLeft': '48px'
* }
*/
function directionalProperty(property) {
for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
values[_key - 1] = arguments[_key];
}
// prettier-ignore
var firstValue = values[0],
_values$ = values[1],
secondValue = _values$ === void 0 ? firstValue : _values$,
_values$2 = values[2],
thirdValue = _values$2 === void 0 ? firstValue : _values$2,
_values$3 = values[3],
fourthValue = _values$3 === void 0 ? secondValue : _values$3;
var valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
return generateStyles(property, valuesWithDefaults);
}
/**
* Check if a string ends with something
* @private
*/
function endsWith(string, suffix) {
return string.substr(-suffix.length) === suffix;
}
var cssRegex$1 = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
/**
* Returns a given CSS value minus its unit of measure.
*
* @example
* // Styles as object usage
* const styles = {
* '--dimension': stripUnit('100px')
* }
*
* // styled-components usage
* const div = styled.div`
* --dimension: ${stripUnit('100px')};
* `
*
* // CSS in JS Output
*
* element {
* '--dimension': 100
* }
*/
function stripUnit(value) {
if (typeof value !== 'string') return value;
var matchedValue = value.match(cssRegex$1);
return matchedValue ? parseFloat(value) : value;
}
/**
* Factory function that creates pixel-to-x converters
* @private
*/
var pxtoFactory = function pxtoFactory(to) {
return function (pxval, base) {
if (base === void 0) {
base = '16px';
}
var newPxval = pxval;
var newBase = base;
if (typeof pxval === 'string') {
if (!endsWith(pxval, 'px')) {
throw new PolishedError(69, to, pxval);
}
newPxval = stripUnit(pxval);
}
if (typeof base === 'string') {
if (!endsWith(base, 'px')) {
throw new PolishedError(70, to, base);
}
newBase = stripUnit(base);
}
if (typeof newPxval === 'string') {
throw new PolishedError(71, pxval, to);
}
if (typeof newBase === 'string') {
throw new PolishedError(72, base, to);
}
return "" + newPxval / newBase + to;
};
};
var pixelsto = pxtoFactory;
/**
* Convert pixel value to ems. The default base value is 16px, but can be changed by passing a
* second argument to the function.
* @function
* @param {string|number} pxval
* @param {string|number} [base='16px']
* @example
* // Styles as object usage
* const styles = {
* 'height': em('16px')
* }
*
* // styled-components usage
* const div = styled.div`
* height: ${em('16px')}
* `
*
* // CSS in JS Output
*
* element {
* 'height': '1em'
* }
*/
var em = pixelsto('em');
var em$1 = em;
var cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
/**
* Returns a given CSS value and its unit as elements of an array.
*
* @example
* // Styles as object usage
* const styles = {
* '--dimension': getValueAndUnit('100px')[0],
* '--unit': getValueAndUnit('100px')[1],
* }
*
* // styled-components usage
* const div = styled.div`
* --dimension: ${getValueAndUnit('100px')[0]};
* --unit: ${getValueAndUnit('100px')[1]};
* `
*
* // CSS in JS Output
*
* element {
* '--dimension': 100,
* '--unit': 'px',
* }
*/
function getValueAndUnit(value) {
if (typeof value !== 'string') return [value, ''];
var matchedValue = value.match(cssRegex);
if (matchedValue) return [parseFloat(value), matchedValue[2]];
return [value, undefined];
}
/**
* Helper for targeting rules in a style block generated by polished modules that need !important-level specificity. Can optionally specify a rule (or rules) to target specific rules.
*
* @example
* // Styles as object usage
* const styles = {
* ...important(cover())
* }
*
* // styled-components usage
* const div = styled.div`
* ${important(cover())}
* `
*
* // CSS as JS Output
*
* div: {
* 'position': 'absolute !important',
* 'top': '0 !important',
* 'right: '0 !important',
* 'bottom': '0 !important',
* 'left: '0 !important'
* }
*/
function important(styleBlock, rules) {
if (typeof styleBlock !== 'object' || styleBlock === null) {
throw new PolishedError(75, typeof styleBlock);
}
var newStyleBlock = {};
Object.keys(styleBlock).forEach(function (key) {
if (typeof styleBlock[key] === 'object' && styleBlock[key] !== null) {
newStyleBlock[key] = important(styleBlock[key], rules);
} else if (!rules || rules && (rules === key || rules.indexOf(key) >= 0)) {
newStyleBlock[key] = styleBlock[key] + " !important";
} else {
newStyleBlock[key] = styleBlock[key];
}
});
return newStyleBlock;
}
var ratioNames = {
minorSecond: 1.067,
majorSecond: 1.125,
minorThird: 1.2,
majorThird: 1.25,
perfectFourth: 1.333,
augFourth: 1.414,
perfectFifth: 1.5,
minorSixth: 1.6,
goldenSection: 1.618,
majorSixth: 1.667,
minorSeventh: 1.778,
majorSeventh: 1.875,
octave: 2,
majorTenth: 2.5,
majorEleventh: 2.667,
majorTwelfth: 3,
doubleOctave: 4
};
function getRatio(ratioName) {
return ratioNames[ratioName];
}
/**
* Establish consistent measurements and spacial relationships throughout your projects by incrementing an em or rem value up or down a defined scale. We provide a list of commonly used scales as pre-defined variables.
* @example
* // Styles as object usage
* const styles = {
* // Increment two steps up the default scale
* 'fontSize': modularScale(2)
* }
*
* // styled-components usage
* const div = styled.div`
* // Increment two steps up the default scale
* fontSize: ${modularScale(2)}
* `
*
* // CSS in JS Output
*
* element {
* 'fontSize': '1.77689em'
* }
*/
function modularScale(steps, base, ratio) {
if (base === void 0) {
base = '1em';
}
if (ratio === void 0) {
ratio = 1.333;
}
if (typeof steps !== 'number') {
throw new PolishedError(42);
}
if (typeof ratio === 'string' && !ratioNames[ratio]) {
throw new PolishedError(43);
}
var _ref = typeof base === 'string' ? getValueAndUnit(base) : [base, ''],
realBase = _ref[0],
unit = _ref[1];
var realRatio = typeof ratio === 'string' ? getRatio(ratio) : ratio;
if (typeof realBase === 'string') {
throw new PolishedError(44, base);
}
return "" + realBase * Math.pow(realRatio, steps) + (unit || '');
}
/**
* Convert pixel value to rems. The default base value is 16px, but can be changed by passing a
* second argument to the function.
* @function
* @param {string|number} pxval
* @param {string|number} [base='16px']
* @example
* // Styles as object usage
* const styles = {
* 'height': rem('16px')
* }
*
* // styled-components usage
* const div = styled.div`
* height: ${rem('16px')}
* `
*
* // CSS in JS Output
*
* element {
* 'height': '1rem'
* }
*/
var rem = pixelsto('rem');
var rem$1 = rem;
var defaultFontSize = 16;
function convertBase(base) {
var deconstructedValue = getValueAndUnit(base);
if (deconstructedValue[1] === 'px') {
return parseFloat(base);
}
if (deconstructedValue[1] === '%') {
return parseFloat(base) / 100 * defaultFontSize;
}
throw new PolishedError(78, deconstructedValue[1]);
}
function getBaseFromDoc() {
/* eslint-disable */
/* istanbul ignore next */
if (typeof document !== 'undefined' && document.documentElement !== null) {
var rootFontSize = getComputedStyle(document.documentElement).fontSize;
return rootFontSize ? convertBase(rootFontSize) : defaultFontSize;
}
/* eslint-enable */
/* istanbul ignore next */
return defaultFontSize;
}
/**
* Convert rem values to px. By default, the base value is pulled from the font-size property on the root element (if it is set in % or px). It defaults to 16px if not found on the root. You can also override the base value by providing your own base in % or px.
* @example
* // Styles as object usage
* const styles = {
* 'height': remToPx('1.6rem')
* 'height': remToPx('1.6rem', '10px')
* }
*
* // styled-components usage
* const div = styled.div`
* height: ${remToPx('1.6rem')}
* height: ${remToPx('1.6rem', '10px')}
* `
*
* // CSS in JS Output
*
* element {
* 'height': '25.6px',
* 'height': '16px',
* }
*/
function remToPx(value, base) {
var deconstructedValue = getValueAndUnit(value);
if (deconstructedValue[1] !== 'rem' && deconstructedValue[1] !== '') {
throw new PolishedError(77, deconstructedValue[1]);
}
var newBase = base ? convertBase(base) : getBaseFromDoc();
return deconstructedValue[0] * newBase + "px";
}
var functionsMap$3 = {
back: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
circ: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
cubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',
expo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',
quad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
quart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',
quint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
sine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
};
/**
* String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
*
* @example
* // Styles as object usage
* const styles = {
* 'transitionTimingFunction': easeIn('quad')
* }
*
* // styled-components usage
* const div = styled.div`
* transitionTimingFunction: ${easeIn('quad')};
* `
*
* // CSS as JS Output
*
* 'div': {
* 'transitionTimingFunction': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
* }
*/
function easeIn(functionName) {
return functionsMap$3[functionName.toLowerCase().trim()];
}
var functionsMap$2 = {
back: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
circ: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
cubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
expo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
quad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
quart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
quint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
sine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
};
/**
* String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
*
* @example
* // Styles as object usage
* const styles = {
* 'transitionTimingFunction': easeInOut('quad')
* }
*
* // styled-components usage
* const div = styled.div`
* transitionTimingFunction: ${easeInOut('quad')};
* `
*
* // CSS as JS Output
*
* 'div': {
* 'transitionTimingFunction': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
* }
*/
function easeInOut(functionName) {
return functionsMap$2[functionName.toLowerCase().trim()];
}
var functionsMap$1 = {
back: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
cubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
circ: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
expo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
quad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
quart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
quint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
sine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
};
/**
* String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
*
* @example
* // Styles as object usage
* const styles = {
* 'transitionTimingFunction': easeOut('quad')
* }
*
* // styled-components usage
* const div = styled.div`
* transitionTimingFunction: ${easeOut('quad')};
* `
*
* // CSS as JS Output
*
* 'div': {
* 'transitionTimingFunction': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
* }
*/
function easeOut(functionName) {
return functionsMap$1[functionName.toLowerCase().trim()];
}
/**
* Returns a CSS calc formula for linear interpolation of a property between two values. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px').
*
* @example
* // Styles as object usage
* const styles = {
* fontSize: between('20px', '100px', '400px', '1000px'),
* fontSize: between('20px', '100px')
* }
*
* // styled-components usage
* const div = styled.div`
* fontSize: ${between('20px', '100px', '400px', '1000px')};
* fontSize: ${between('20px', '100px')}
* `
*
* // CSS as JS Output
*
* h1: {
* 'fontSize': 'calc(-33.33333333333334px + 13.333333333333334vw)',
* 'fontSize': 'calc(-9.090909090909093px + 9.090909090909092vw)'
* }
*/
function between(fromSize, toSize, minScreen, maxScreen) {
if (minScreen === void 0) {
minScreen = '320px';
}
if (maxScreen === void 0) {
maxScreen = '1200px';
}
var _getValueAndUnit = getValueAndUnit(fromSize),
unitlessFromSize = _getValueAndUnit[0],
fromSizeUnit = _getValueAndUnit[1];
var _getValueAndUnit2 = getValueAndUnit(toSize),
unitlessToSize = _getValueAndUnit2[0],
toSizeUnit = _getValueAndUnit2[1];
var _getValueAndUnit3 = getValueAndUnit(minScreen),
unitlessMinScreen = _getValueAndUnit3[0],
minScreenUnit = _getValueAndUnit3[1];
var _getValueAndUnit4 = getValueAndUnit(maxScreen),
unitlessMaxScreen = _getValueAndUnit4[0],
maxScreenUnit = _getValueAndUnit4[1];
if (typeof unitlessMinScreen !== 'number' || typeof unitlessMaxScreen !== 'number' || !minScreenUnit || !maxScreenUnit || minScreenUnit !== maxScreenUnit) {
throw new PolishedError(47);
}
if (typeof unitlessFromSize !== 'number' || typeof unitlessToSize !== 'number' || fromSizeUnit !== toSizeUnit) {
throw new PolishedError(48);
}
if (fromSizeUnit !== minScreenUnit || toSizeUnit !== maxScreenUnit) {
throw new PolishedError(76);
}
var slope = (unitlessFromSize - unitlessToSize) / (unitlessMinScreen - unitlessMaxScreen);
var base = unitlessToSize - slope * unitlessMaxScreen;
return "calc(" + base.toFixed(2) + (fromSizeUnit || '') + " + " + (100 * slope).toFixed(2) + "vw)";
}
/**
* CSS to contain a float (credit to CSSMojo).
*
* @example
* // Styles as object usage
* const styles = {
* ...clearFix(),
* }
*
* // styled-components usage
* const div = styled.div`
* ${clearFix()}
* `
*
* // CSS as JS Output
*
* '&::after': {
* 'clear': 'both',
* 'content': '""',
* 'display': 'table'
* }
*/
function clearFix(parent) {
var _ref;
if (parent === void 0) {
parent = '&';
}
var pseudoSelector = parent + "::after";
return _ref = {}, _ref[pseudoSelector] = {
clear: 'both',
content: '""',
display: 'table'
}, _ref;
}
/**
* CSS to fully cover an area. Can optionally be passed an offset to act as a "padding".
*
* @example
* // Styles as object usage
* const styles = {
* ...cover()
* }
*
* // styled-components usage
* const div = styled.div`
* ${cover()}
* `
*
* // CSS as JS Output
*
* div: {
* 'position': 'absolute',
* 'top': '0',
* 'right: '0',
* 'bottom': '0',
* 'left: '0'
* }
*/
function cover(offset) {
if (offset === void 0) {
offset = 0;
}
return {
position: 'absolute',
top: offset,
right: offset,
bottom: offset,
left: offset
};
}
/**
* CSS to represent truncated text with an ellipsis. You can optionally pass a max-width and number of lines before truncating.
*
* @example
* // Styles as object usage
* const styles = {
* ...ellipsis('250px')
* }
*
* // styled-components usage
* const div = styled.div`
* ${ellipsis('250px')}
* `
*
* // CSS as JS Output
*
* div: {
* 'display': 'inline-block',
* 'maxWidth': '250px',
* 'overflow': 'hidden',
* 'textOverflow': 'ellipsis',
* 'whiteSpace': 'nowrap',
* 'wordWrap': 'normal'
* }
*/
function ellipsis(width, lines) {
if (lines === void 0) {
lines = 1;
}
var styles = {
display: 'inline-block',
maxWidth: width || '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
wordWrap: 'normal'
};
return lines > 1 ? _extends__default["default"]({}, styles, {
WebkitBoxOrient: 'vertical',
WebkitLineClamp: lines,
display: '-webkit-box',
whiteSpace: 'normal'
}) : styles;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
/**
* Returns a set of media queries that resizes a property (or set of properties) between a provided fromSize and toSize. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px') to constrain the interpolation.
*
* @example
* // Styles as object usage
* const styles = {
* ...fluidRange(
* {
* prop: 'padding',
* fromSize: '20px',
* toSize: '100px',
* },
* '400px',
* '1000px',
* )
* }
*
* // styled-components usage
* const div = styled.div`
* ${fluidRange(
* {
* prop: 'padding',
* fromSize: '20px',
* toSize: '100px',
* },
* '400px',
* '1000px',
* )}
* `
*
* // CSS as JS Output
*
* div: {
* "@media (min-width: 1000px)": Object {
* "padding": "100px",
* },
* "@media (min-width: 400px)": Object {
* "padding": "calc(-33.33333333333334px + 13.333333333333334vw)",
* },
* "padding": "20px",
* }
*/
function fluidRange(cssProp, minScreen, maxScreen) {
if (minScreen === void 0) {
minScreen = '320px';
}
if (maxScreen === void 0) {
maxScreen = '1200px';
}
if (!Array.isArray(cssProp) && typeof cssProp !== 'object' || cssProp === null) {
throw new PolishedError(49);
}
if (Array.isArray(cssProp)) {
var mediaQueries = {};
var fallbacks = {};
for (var _iterator = _createForOfIteratorHelperLoose(cssProp), _step; !(_step = _iterator()).done;) {
var _extends2, _extends3;
var obj = _step.value;
if (!obj.prop || !obj.fromSize || !obj.toSize) {
throw new PolishedError(50);
}
fallbacks[obj.prop] = obj.fromSize;
mediaQueries["@media (min-width: " + minScreen + ")"] = _extends__default["default"]({}, mediaQueries["@media (min-width: " + minScreen + ")"], (_extends2 = {}, _extends2[obj.prop] = between(obj.fromSize, obj.toSize, minScreen, maxScreen), _extends2));
mediaQueries["@media (min-width: " + maxScreen + ")"] = _extends__default["default"]({}, mediaQueries["@media (min-width: " + maxScreen + ")"], (_extends3 = {}, _extends3[obj.prop] = obj.toSize, _extends3));
}
return _extends__default["default"]({}, fallbacks, mediaQueries);
} else {
var _ref, _ref2, _ref3;
if (!cssProp.prop || !cssProp.fromSize || !cssProp.toSize) {
throw new PolishedError(51);
}
return _ref3 = {}, _ref3[cssProp.prop] = cssProp.fromSize, _ref3["@media (min-width: " + minScreen + ")"] = (_ref = {}, _ref[cssProp.prop] = between(cssProp.fromSize, cssProp.toSize, minScreen, maxScreen), _ref), _ref3["@media (min-width: " + maxScreen + ")"] = (_ref2 = {}, _ref2[cssProp.prop] = cssProp.toSize, _ref2), _ref3;
}
}
var dataURIRegex = /^\s*data:([a-z]+\/[a-z-]+(;[a-z-]+=[a-z-]+)?)?(;charset=[a-z0-9-]+)?(;base64)?,[a-z0-9!$&',()*+,;=\-._~:@/?%\s]*\s*$/i;
var formatHintMap = {
woff: 'woff',
woff2: 'woff2',
ttf: 'truetype',
otf: 'opentype',
eot: 'embedded-opentype',
svg: 'svg',
svgz: 'svg'
};
function generateFormatHint(format, formatHint) {
if (!formatHint) return '';
return " format(\"" + formatHintMap[format] + "\")";
}
function isDataURI(fontFilePath) {
return !!fontFilePath.replace(/\s+/g, ' ').match(dataURIRegex);
}
function generateFileReferences(fontFilePath, fileFormats, formatHint) {
if (isDataURI(fontFilePath)) {
return "url(\"" + fontFilePath + "\")" + generateFormatHint(fileFormats[0], formatHint);
}
var fileFontReferences = fileFormats.map(function (format) {
return "url(\"" + fontFilePath + "." + format + "\")" + generateFormatHint(format, formatHint);
});
return fileFontReferences.join(', ');
}
function generateLocalReferences(localFonts) {
var localFontReferences = localFonts.map(function (font) {
return "local(\"" + font + "\")";
});
return localFontReferences.join(', ');
}
function generateSources(fontFilePath, localFonts, fileFormats, formatHint) {
var fontReferences = [];
if (localFonts) fontReferences.push(generateLocalReferences(localFonts));
if (fontFilePath) {
fontReferences.push(generateFileReferences(fontFilePath, fileFormats, formatHint));
}
return fontReferences.join(', ');
}
/**
* CSS for a @font-face declaration. Defaults to check for local copies of the font on the user's machine. You can disable this by passing `null` to localFonts.
*
* @example
* // Styles as object basic usage
* const styles = {
* ...fontFace({
* 'fontFamily': 'Sans-Pro',
* 'fontFilePath': 'path/to/file'
* })
* }
*
* // styled-components basic usage
* const GlobalStyle = createGlobalStyle`${
* fontFace({
* 'fontFamily': 'Sans-Pro',
* 'fontFilePath': 'path/to/file'
* }
* )}`
*
* // CSS as JS Output
*
* '@font-face': {
* 'fontFamily': 'Sans-Pro',
* 'src': 'url("path/to/file.eot"), url("path/to/file.woff2"), url("path/to/file.woff"), url("path/to/file.ttf"), url("path/to/file.svg")',
* }
*/
function fontFace(_ref) {
var fontFamily = _ref.fontFamily,
fontFilePath = _ref.fontFilePath,
fontStretch = _ref.fontStretch,
fontStyle = _ref.fontStyle,
fontVariant = _ref.fontVariant,
fontWeight = _ref.fontWeight,
_ref$fileFormats = _ref.fileFormats,
fileFormats = _ref$fileFormats === void 0 ? ['eot', 'woff2', 'woff', 'ttf', 'svg'] : _ref$fileFormats,
_ref$formatHint = _ref.formatHint,
formatHint = _ref$formatHint === void 0 ? false : _ref$formatHint,
_ref$localFonts = _ref.localFonts,
localFonts = _ref$localFonts === void 0 ? [fontFamily] : _ref$localFonts,
unicodeRange = _ref.unicodeRange,
fontDisplay = _ref.fontDisplay,
fontVariationSettings = _ref.fontVariationSettings,
fontFeatureSettings = _ref.fontFeatureSettings;
// Error Handling
if (!fontFamily) throw new PolishedError(55);
if (!fontFilePath && !localFonts) {
throw new PolishedError(52);
}
if (localFonts && !Array.isArray(localFonts)) {
throw new PolishedError(53);
}
if (!Array.isArray(fileFormats)) {
throw new PolishedError(54);
}
var fontFaceDeclaration = {
'@font-face': {
fontFamily: fontFamily,
src: generateSources(fontFilePath, localFonts, fileFormats, formatHint),
unicodeRange: unicodeRange,
fontStretch: fontStretch,
fontStyle: fontStyle,
fontVariant: fontVariant,
fontWeight: fontWeight,
fontDisplay: fontDisplay,
fontVariationSettings: fontVariationSettings,
fontFeatureSettings: fontFeatureSettings
}
};
// Removes undefined fields for cleaner css object.
return JSON.parse(JSON.stringify(fontFaceDeclaration));
}
/**
* CSS to hide text to show a background image in a SEO-friendly way.
*
* @example
* // Styles as object usage
* const styles = {
* 'backgroundImage': 'url(logo.png)',
* ...hideText(),
* }
*
* // styled-components usage
* const div = styled.div`
* backgroundImage: url(logo.png);
* ${hideText()};
* `
*
* // CSS as JS Output
*
* 'div': {
* 'backgroundImage': 'url(logo.png)',
* 'textIndent': '101%',
* 'overflow': 'hidden',
* 'whiteSpace': 'nowrap',
* }
*/
function hideText() {
return {
textIndent: '101%',
overflow: 'hidden',
whiteSpace: 'nowrap'
};
}
/**
* CSS to hide content visually but remain accessible to screen readers.
* from [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/9a176f57af1cfe8ec70300da4621fb9b07e5fa31/src/css/main.css#L121)
*
* @example
* // Styles as object usage
* const styles = {
* ...hideVisually(),
* }
*
* // styled-components usage
* const div = styled.div`
* ${hideVisually()};
* `
*
* // CSS as JS Output
*
* 'div': {
* 'border': '0',
* 'clip': 'rect(0 0 0 0)',
* 'height': '1px',
* 'margin': '-1px',
* 'overflow': 'hidden',
* 'padding': '0',
* 'position': 'absolute',
* 'whiteSpace': 'nowrap',
* 'width': '1px',
* }
*/
function hideVisually() {
return {
border: '0',
clip: 'rect(0 0 0 0)',
height: '1px',
margin: '-1px',
overflow: 'hidden',
padding: '0',
position: 'absolute',
whiteSpace: 'nowrap',
width: '1px'
};
}
/**
* Generates a media query to target HiDPI devices.
*
* @example
* // Styles as object usage
* const styles = {
* [hiDPI(1.5)]: