import { StyleSheet } from '@emotion/sheet'; import { dealloc, alloc, next, token, from, peek, delimit, slice, position, stringify, COMMENT, rulesheet, middleware, prefixer, serialize, compile } from 'stylis'; import '@emotion/weak-memoize'; import '@emotion/memoize'; var last = function last(arr) { return arr.length ? arr[arr.length - 1] : null; }; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) { var previous = 0; var character = 0; while (true) { previous = character; character = peek(); // &\f if (previous === 38 && character === 12) { points[index] = 1; } if (token(character)) { break; } next(); } return slice(begin, position); }; var toRules = function toRules(parsed, points) { // pretend we've started with a comma var index = -1; var character = 44; do { switch (token(character)) { case 0: // &\f if (character === 38 && peek() === 12) { // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings // stylis inserts \f after & to know when & where it should replace this sequence with the context selector // and when it should just concatenate the outer and inner selectors // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here points[index] = 1; } parsed[index] += identifierWithPointTracking(position - 1, points, index); break; case 2: parsed[index] += delimit(character); break; case 4: // comma if (character === 44) { // colon parsed[++index] = peek() === 58 ? '&\f' : ''; points[index] = parsed[index].length; break; } // fallthrough default: parsed[index] += from(character); } } while (character = next()); return parsed; }; var getRules = function getRules(value, points) { return dealloc(toRules(alloc(value), points)); }; // WeakSet would be more appropriate, but only WeakMap is supported in IE11 var fixedElements = /* #__PURE__ */new WeakMap(); var compat = function compat(element) { if (element.type !== 'rule' || !element.parent || // .length indicates if this rule contains pseudo or not !element.length) { return; } var value = element.value, parent = element.parent; var isImplicitRule = element.column === parent.column && element.line === parent.line; while (parent.type !== 'rule') { parent = parent.parent; if (!parent) return; } // short-circuit for the simplest case if (element.props.length === 1 && value.charCodeAt(0) !== 58 /* colon */ && !fixedElements.get(parent)) { return; } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level) // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent" if (isImplicitRule) { return; } fixedElements.set(element, true); var points = []; var rules = getRules(value, points); var parentRules = parent.props; for (var i = 0, k = 0; i < rules.length; i++) { for (var j = 0; j < parentRules.length; j++, k++) { element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i]; } } }; var removeLabel = function removeLabel(element) { if (element.type === 'decl') { var value = element.value; if ( // charcode for l value.charCodeAt(0) === 108 && // charcode for b value.charCodeAt(2) === 98) { // this ignores label element["return"] = ''; element.value = ''; } } }; var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'; var isIgnoringComment = function isIgnoringComment(element) { return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1; }; var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) { return function (element, index, children) { if (element.type !== 'rule') return; var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g); if (unsafePseudoClasses && cache.compat !== true) { var prevElement = index > 0 ? children[index - 1] : null; if (prevElement && isIgnoringComment(last(prevElement.children))) { return; } unsafePseudoClasses.forEach(function (unsafePseudoClass) { console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\"."); }); } }; }; var isImportRule = function isImportRule(element) { return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64; }; var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) { for (var i = index - 1; i >= 0; i--) { if (!isImportRule(children[i])) { return true; } } return false; }; // use this to remove incorrect elements from further processing // so they don't get handed to the `sheet` (or anything else) // as that could potentially lead to additional logs which in turn could be overhelming to the user var nullifyElement = function nullifyElement(element) { element.type = ''; element.value = ''; element["return"] = ''; element.children = ''; element.props = ''; }; var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) { if (!isImportRule(element)) { return; } if (element.parent) { console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles."); nullifyElement(element); } else if (isPrependedWithRegularRules(index, children)) { console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."); nullifyElement(element); } }; var defaultStylisPlugins = [prefixer]; var createCache = function createCache(options) { var key = options.key; if (process.env.NODE_ENV !== 'production' && !key) { throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements."); } if ( key === 'css') { var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be) // note this very very intentionally targets all style elements regardless of the key to ensure // that creating a cache works inside of render of a React component Array.prototype.forEach.call(ssrStyles, function (node) { // we want to only move elements which have a space in the data-emotion attribute value // because that indicates that it is an Emotion 11 server-side rendered style elements // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes) // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles // will not result in the Emotion 10 styles being destroyed var dataEmotionAttribute = node.getAttribute('data-emotion'); if (dataEmotionAttribute.indexOf(' ') === -1) { return; } document.head.appendChild(node); node.setAttribute('data-s', ''); }); } var stylisPlugins = options.stylisPlugins || defaultStylisPlugins; if (process.env.NODE_ENV !== 'production') { // $FlowFixMe if (/[^a-z-]/.test(key)) { throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed"); } } var inserted = {}; // $FlowFixMe var container; var nodesToHydrate = []; { container = options.container || document.head; Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which // means that the style elements we're looking at are only Emotion 11 server-rendered style elements document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) { var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe for (var i = 1; i < attrib.length; i++) { inserted[attrib[i]] = true; } nodesToHydrate.push(node); }); } var _insert; var omnipresentPlugins = [compat, removeLabel]; if (process.env.NODE_ENV !== 'production') { omnipresentPlugins.push(createUnsafeSelectorsAlarm({ get compat() { return cache.compat; } }), incorrectImportAlarm); } { var currentSheet; var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) { if (!element.root) { if (element["return"]) { currentSheet.insert(element["return"]); } else if (element.value && element.type !== COMMENT) { // insert empty rule in non-production environments // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet currentSheet.insert(element.value + "{}"); } } } : rulesheet(function (rule) { currentSheet.insert(rule); })]; var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)); var stylis = function stylis(styles) { return serialize(compile(styles), serializer); }; _insert = function insert(selector, serialized, sheet, shouldCache) { currentSheet = sheet; if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) { currentSheet = { insert: function insert(rule) { sheet.insert(rule + serialized.map); } }; } stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles); if (shouldCache) { cache.inserted[serialized.name] = true; } }; } var cache = { key: key, sheet: new StyleSheet({ key: key, container: container, nonce: options.nonce, speedy: options.speedy, prepend: options.prepend }), nonce: options.nonce, inserted: inserted, registered: {}, insert: _insert }; cache.sheet.hydrate(nodesToHydrate); return cache; }; export default createCache;