import hashString from '@emotion/hash'; import unitless from '@emotion/unitless'; import memoize from '@emotion/memoize'; var isDevelopment = true; 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(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[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) { return value + 'px'; } return value; }; { 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 ''; } var componentSelector = interpolation; if (componentSelector.__emotion_styles !== undefined) { if (String(componentSelector) === 'NO_COMPONENT_SELECTOR') { throw new Error(noComponentSelectorMessage); } return componentSelector; } switch (typeof interpolation) { case 'boolean': { return ''; } case 'object': { var keyframes = interpolation; if (keyframes.anim === 1) { cursor = { name: keyframes.name, styles: keyframes.styles, next: cursor }; return keyframes.name; } var serializedStyles = interpolation; if (serializedStyles.styles !== undefined) { var next = serializedStyles.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 = serializedStyles.styles + ";"; 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 { 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': { 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\nInstead of doing this:\n\n" + [].concat(matched, ["`" + replaced + "`"]).join('\n') + "\n\nYou should wrap it with `css` like this:\n\ncss`" + replaced + "`"); } } break; } // finalize string values (regular strings and functions interpolated into css calls) var asString = interpolation; if (registered == null) { return asString; } var cached = registered[asString]; return cached !== undefined ? cached : asString; } 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') { var asString = value; if (registered != null && registered[asString] !== undefined) { string += key + "{" + registered[asString] + "}"; } else if (isProcessableValue(asString)) { string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";"; } } else { if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) { 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 (key === 'undefined') { console.error(UNDEFINED_AS_OBJECT_KEY_ERROR); } string += key + "{" + interpolated + "}"; } } } } } } return string; } var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes // keyframes are stored on the SerializedStyles object as a linked list var cursor; 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 { var asTemplateStringsArr = strings; if (asTemplateStringsArr[0] === undefined) { console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR); } styles += asTemplateStringsArr[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) { var templateStringsArr = strings; if (templateStringsArr[i] === undefined) { console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR); } styles += templateStringsArr[i]; } } // 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 += '-' + match[1]; } var name = hashString(styles) + identifierName; { var devStyles = { name: name, styles: styles, 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 devStyles; } } export { serializeStyles };