'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var hashString = require('@emotion/hash'); var unitless = require('@emotion/unitless'); var memoize = require('@emotion/memoize'); function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; } var hashString__default = /*#__PURE__*/_interopDefault(hashString); var unitless__default = /*#__PURE__*/_interopDefault(unitless); var memoize__default = /*#__PURE__*/_interopDefault(memoize); var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences"; var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key)."; var hyphenateRegex = /[A-Z]|^ms/g; var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g; var isCustomProperty = function isCustomProperty(property) { return property.charCodeAt(1) === 45; }; var isProcessableValue = function isProcessableValue(value) { return value != null && typeof value !== 'boolean'; }; var processStyleName = /* #__PURE__ */memoize__default["default"](function (styleName) { return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase(); }); var processStyleValue = function processStyleValue(key, value) { switch (key) { case 'animation': case 'animationName': { if (typeof value === 'string') { return value.replace(animationRegex, function (match, p1, p2) { cursor = { name: p1, styles: p2, next: cursor }; return p1; }); } } } if (unitless__default["default"][key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) { return value + 'px'; } return value; }; if (process.env.NODE_ENV !== 'production') { var contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/; var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']; var oldProcessStyleValue = processStyleValue; var msPattern = /^-ms-/; var hyphenPattern = /-(.)/g; var hyphenatedCache = {}; processStyleValue = function processStyleValue(key, value) { if (key === 'content') { if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) { throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`"); } } var processed = oldProcessStyleValue(key, value); if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) { hyphenatedCache[key] = true; console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) { return _char.toUpperCase(); }) + "?"); } return processed; }; } var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.'; function handleInterpolation(mergedProps, registered, interpolation) { if (interpolation == null) { return ''; } if (interpolation.__emotion_styles !== undefined) { if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') { throw new Error(noComponentSelectorMessage); } return interpolation; } switch (typeof interpolation) { case 'boolean': { return ''; } case 'object': { if (interpolation.anim === 1) { cursor = { name: interpolation.name, styles: interpolation.styles, next: cursor }; return interpolation.name; } if (interpolation.styles !== undefined) { var next = interpolation.next; if (next !== undefined) { // not the most efficient thing ever but this is a pretty rare case // and there will be very few iterations of this generally while (next !== undefined) { cursor = { name: next.name, styles: next.styles, next: cursor }; next = next.next; } } var styles = interpolation.styles + ";"; if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) { styles += interpolation.map; } return styles; } return createStringFromObject(mergedProps, registered, interpolation); } case 'function': { if (mergedProps !== undefined) { var previousCursor = cursor; var result = interpolation(mergedProps); cursor = previousCursor; return handleInterpolation(mergedProps, registered, result); } else if (process.env.NODE_ENV !== 'production') { console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`"); } break; } case 'string': if (process.env.NODE_ENV !== 'production') { var matched = []; var replaced = interpolation.replace(animationRegex, function (match, p1, p2) { var fakeVarName = "animation" + matched.length; matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`"); return "${" + fakeVarName + "}"; }); if (matched.length) { console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`")); } } break; } // finalize string values (regular strings and functions interpolated into css calls) if (registered == null) { return interpolation; } var cached = registered[interpolation]; return cached !== undefined ? cached : interpolation; } function createStringFromObject(mergedProps, registered, obj) { var string = ''; if (Array.isArray(obj)) { for (var i = 0; i < obj.length; i++) { string += handleInterpolation(mergedProps, registered, obj[i]) + ";"; } } else { for (var _key in obj) { var value = obj[_key]; if (typeof value !== 'object') { if (registered != null && registered[value] !== undefined) { string += _key + "{" + registered[value] + "}"; } else if (isProcessableValue(value)) { string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";"; } } else { if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') { throw new Error(noComponentSelectorMessage); } if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) { for (var _i = 0; _i < value.length; _i++) { if (isProcessableValue(value[_i])) { string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";"; } } } else { var interpolated = handleInterpolation(mergedProps, registered, value); switch (_key) { case 'animation': case 'animationName': { string += processStyleName(_key) + ":" + interpolated + ";"; break; } default: { if (process.env.NODE_ENV !== 'production' && _key === 'undefined') { console.error(UNDEFINED_AS_OBJECT_KEY_ERROR); } string += _key + "{" + interpolated + "}"; } } } } } } return string; } var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g; var sourceMapPattern; if (process.env.NODE_ENV !== 'production') { sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g; } // this is the cursor for keyframes // keyframes are stored on the SerializedStyles object as a linked list var cursor; var serializeStyles = function serializeStyles(args, registered, mergedProps) { if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) { return args[0]; } var stringMode = true; var styles = ''; cursor = undefined; var strings = args[0]; if (strings == null || strings.raw === undefined) { stringMode = false; styles += handleInterpolation(mergedProps, registered, strings); } else { if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) { console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR); } styles += strings[0]; } // we start at 1 since we've already handled the first arg for (var i = 1; i < args.length; i++) { styles += handleInterpolation(mergedProps, registered, args[i]); if (stringMode) { if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) { console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR); } styles += strings[i]; } } var sourceMap; if (process.env.NODE_ENV !== 'production') { styles = styles.replace(sourceMapPattern, function (match) { sourceMap = match; return ''; }); } // using a global regex with .exec is stateful so lastIndex has to be reset each time labelPattern.lastIndex = 0; var identifierName = ''; var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5 while ((match = labelPattern.exec(styles)) !== null) { identifierName += '-' + // $FlowFixMe we know it's not null match[1]; } var name = hashString__default["default"](styles) + identifierName; if (process.env.NODE_ENV !== 'production') { // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it) return { name: name, styles: styles, map: sourceMap, next: cursor, toString: function toString() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } }; } return { name: name, styles: styles, next: cursor }; }; exports.serializeStyles = serializeStyles;