styled-components
Version:
CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.
983 lines (961 loc) • 114 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
typeof define === 'function' && define.amd ? define(['react'], factory) :
(global = global || self, global.styled = factory(global.React));
})(this, (function (React) { 'use strict';
var SC_ATTR = (typeof process !== 'undefined' &&
typeof process.env !== 'undefined' &&
(process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
'data-styled';
var SC_ATTR_ACTIVE = 'active';
var SC_ATTR_VERSION = 'data-styled-version';
var SC_VERSION = "6.3.11";
var SPLITTER = '/*!sc*/\n';
var IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
? SC_DISABLE_SPEEDY
: typeof process !== 'undefined' &&
typeof process.env !== 'undefined' &&
typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
? false
: process.env.REACT_APP_SC_DISABLE_SPEEDY
: typeof process !== 'undefined' &&
typeof process.env !== 'undefined' &&
typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
process.env.SC_DISABLE_SPEEDY !== ''
? process.env.SC_DISABLE_SPEEDY === 'false'
? false
: process.env.SC_DISABLE_SPEEDY
: "development" !== 'production');
// Shared empty execution context when generating static styles
var STATIC_EXECUTION_CONTEXT = {};
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var EMPTY_ARRAY = Object.freeze([]);
var EMPTY_OBJECT = Object.freeze({});
/**
* If the Object prototype is frozen, the "toString" property is non-writable. This means that any objects which inherit this property
* cannot have the property changed using a "=" assignment operator. If using strict mode, attempting that will cause an error. If not using
* strict mode, attempting that will be silently ignored.
*
* If the Object prototype is frozen, inherited non-writable properties can still be shadowed using one of two mechanisms:
*
* 1. ES6 class methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#methods
* 2. Using the `Object.defineProperty()` static method:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
*
* However, this project uses Babel to transpile ES6 classes, and transforms ES6 class methods to use the assignment operator instead:
* https://babeljs.io/docs/babel-plugin-transform-class-properties#options
*
* Therefore, the most compatible way to shadow the prototype's "toString" property is to define a new "toString" property on this object.
*/
function setToString(object, toStringFn) {
Object.defineProperty(object, 'toString', { value: toStringFn });
}
var errorMap = {
'1': 'Cannot create styled-component for component: %s.\n\n',
'2': "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",
'3': 'Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n',
'4': 'The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n',
'5': 'The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n',
'6': "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",
'7': 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',
'8': 'ThemeProvider: Please make your "theme" prop an object.\n\n',
'9': 'Missing document `<head>`\n\n',
'10': 'Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n',
'11': '_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n',
'12': 'It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n',
'13': '%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n',
'14': 'ThemeProvider: "theme" prop is required.\n\n',
'15': "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",
'16': "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",
'17': "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",
'18': 'ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`',
};
var ERRORS = errorMap ;
/**
* super basic version of sprintf
*/
function format() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var a = args[0];
var b = [];
for (var c = 1, len = args.length; c < len; 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.
*/
function throwStyledComponentsError(code) {
var interpolations = [];
for (var _i = 1; _i < arguments.length; _i++) {
interpolations[_i - 1] = arguments[_i];
}
{
return new Error(format.apply(void 0, __spreadArray([ERRORS[code]], interpolations, false)).trim());
}
}
/** Create a GroupedTag with an underlying Tag implementation */
var makeGroupedTag = function (tag) {
return new DefaultGroupedTag(tag);
};
var BASE_SIZE = 1 << 9;
var DefaultGroupedTag = /** @class */ (function () {
function DefaultGroupedTag(tag) {
this.groupSizes = new Uint32Array(BASE_SIZE);
this.length = BASE_SIZE;
this.tag = tag;
this._cGroup = 0;
this._cIndex = 0;
}
DefaultGroupedTag.prototype.indexOfGroup = function (group) {
if (group === this._cGroup)
return this._cIndex;
var index = this._cIndex;
if (group > this._cGroup) {
for (var i = this._cGroup; i < group; i++) {
index += this.groupSizes[i];
}
}
else {
for (var i = this._cGroup - 1; i >= group; i--) {
index -= this.groupSizes[i];
}
}
this._cGroup = group;
this._cIndex = index;
return index;
};
DefaultGroupedTag.prototype.insertRules = function (group, rules) {
if (group >= this.groupSizes.length) {
var oldBuffer = this.groupSizes;
var oldSize = oldBuffer.length;
var newSize = oldSize;
while (group >= newSize) {
newSize <<= 1;
if (newSize < 0) {
throw throwStyledComponentsError(16, "".concat(group));
}
}
this.groupSizes = new Uint32Array(newSize);
this.groupSizes.set(oldBuffer);
this.length = newSize;
for (var i = oldSize; i < newSize; i++) {
this.groupSizes[i] = 0;
}
}
var ruleIndex = this.indexOfGroup(group + 1);
var insertedCount = 0;
for (var i = 0, l = rules.length; i < l; i++) {
if (this.tag.insertRule(ruleIndex, rules[i])) {
this.groupSizes[group]++;
ruleIndex++;
insertedCount++;
}
}
// Keep cache consistent: groups after the insertion point shift forward
if (insertedCount > 0 && this._cGroup > group) {
this._cIndex += insertedCount;
}
};
DefaultGroupedTag.prototype.clearGroup = function (group) {
if (group < this.length) {
var length_1 = this.groupSizes[group];
var startIndex = this.indexOfGroup(group);
var endIndex = startIndex + length_1;
this.groupSizes[group] = 0;
for (var i = startIndex; i < endIndex; i++) {
this.tag.deleteRule(startIndex);
}
// Keep cache consistent: groups after the cleared group shift backward
if (length_1 > 0 && this._cGroup > group) {
this._cIndex -= length_1;
}
}
};
DefaultGroupedTag.prototype.getGroup = function (group) {
var css = '';
if (group >= this.length || this.groupSizes[group] === 0) {
return css;
}
var length = this.groupSizes[group];
var startIndex = this.indexOfGroup(group);
var endIndex = startIndex + length;
for (var i = startIndex; i < endIndex; i++) {
css += this.tag.getRule(i) + SPLITTER;
}
return css;
};
return DefaultGroupedTag;
}());
var MAX_SMI = 1 << (31 - 1);
var groupIDRegister = new Map();
var reverseRegister = new Map();
var nextFreeGroup = 1;
var getGroupForId = function (id) {
if (groupIDRegister.has(id)) {
return groupIDRegister.get(id);
}
while (reverseRegister.has(nextFreeGroup)) {
nextFreeGroup++;
}
var group = nextFreeGroup++;
if (((group | 0) < 0 || group > MAX_SMI)) {
throw throwStyledComponentsError(16, "".concat(group));
}
groupIDRegister.set(id, group);
reverseRegister.set(group, id);
return group;
};
var getIdForGroup = function (group) {
return reverseRegister.get(group);
};
var setGroupForId = function (id, group) {
// move pointer
nextFreeGroup = group + 1;
groupIDRegister.set(id, group);
reverseRegister.set(group, id);
};
var SELECTOR = "style[".concat(SC_ATTR, "][").concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\"]");
var MARKER_RE = new RegExp("^".concat(SC_ATTR, "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)"));
/**
* Type guard to check if a node is a ShadowRoot.
* Uses instanceof when available, with duck-typing fallback for cross-realm scenarios.
*/
var isShadowRoot = function (node) {
return ((typeof ShadowRoot !== 'undefined' && node instanceof ShadowRoot) ||
('host' in node &&
// https://dom.spec.whatwg.org/#dom-node-document_fragment_node
node.nodeType === 11));
};
/**
* Extract the container (Document or ShadowRoot) from an InsertionTarget.
* If the target is a ShadowRoot, return it directly.
* If the target is an HTMLElement, return its root node if it's a ShadowRoot, otherwise return document.
*/
var getRehydrationContainer = function (target) {
if (!target) {
return document;
}
// Check if target is a ShadowRoot
if (isShadowRoot(target)) {
return target;
}
// Check if target is an HTMLElement inside a ShadowRoot
if ('getRootNode' in target) {
var root = target.getRootNode();
if (isShadowRoot(root)) {
return root;
}
}
return document;
};
var outputSheet = function (sheet) {
var tag = sheet.getTag();
var length = tag.length;
var css = '';
var _loop_1 = function (group) {
var id = getIdForGroup(group);
if (id === undefined)
return "continue";
var names = sheet.names.get(id);
if (names === undefined || !names.size)
return "continue";
var rules = tag.getGroup(group);
if (rules.length === 0)
return "continue";
var selector = SC_ATTR + '.g' + group + '[id="' + id + '"]';
var content = '';
names.forEach(function (name) {
if (name.length > 0) {
content += name + ',';
}
});
// NOTE: It's easier to collect rules and have the marker
// after the actual rules to simplify the rehydration
css += rules + selector + '{content:"' + content + '"}' + SPLITTER;
};
for (var group = 0; group < length; group++) {
_loop_1(group);
}
return css;
};
var rehydrateNamesFromContent = function (sheet, id, content) {
var names = content.split(',');
var name;
for (var i = 0, l = names.length; i < l; i++) {
if ((name = names[i])) {
sheet.registerName(id, name);
}
}
};
var rehydrateSheetFromTag = function (sheet, style) {
var _a;
var parts = ((_a = style.textContent) !== null && _a !== void 0 ? _a : '').split(SPLITTER);
var rules = [];
for (var i = 0, l = parts.length; i < l; i++) {
var part = parts[i].trim();
if (!part)
continue;
var marker = part.match(MARKER_RE);
if (marker) {
var group = parseInt(marker[1], 10) | 0;
var id = marker[2];
if (group !== 0) {
// Rehydrate componentId to group index mapping
setGroupForId(id, group);
// Rehydrate names and rules
// looks like: data-styled.g11[id="idA"]{content:"nameA,"}
rehydrateNamesFromContent(sheet, id, marker[3]);
sheet.getTag().insertRules(group, rules);
}
rules.length = 0;
}
else {
rules.push(part);
}
}
};
var rehydrateSheet = function (sheet) {
var container = getRehydrationContainer(sheet.options.target);
var nodes = container.querySelectorAll(SELECTOR);
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {
rehydrateSheetFromTag(sheet, node);
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
}
};
function getNonce() {
return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
}
/** Find last style element if any inside target */
var findLastStyleTag = function (target) {
var arr = Array.from(target.querySelectorAll("style[".concat(SC_ATTR, "]")));
return arr[arr.length - 1];
};
/** Create a style element inside `target` or <head> after the last */
var makeStyleTag = function (target) {
var head = document.head;
var parent = target || head;
var style = document.createElement('style');
var prevStyle = findLastStyleTag(parent);
var nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
var nonce = getNonce();
if (nonce)
style.setAttribute('nonce', nonce);
parent.insertBefore(style, nextSibling);
return style;
};
/** Get the CSSStyleSheet instance for a given style element */
var getSheet = function (tag) {
var _a;
if (tag.sheet) {
return tag.sheet;
}
// Avoid Firefox quirk where the style element might not have a sheet property.
// Use the tag's root node to find styleSheets — document.styleSheets doesn't
// include sheets inside shadow roots.
var root = tag.getRootNode();
var styleSheets = (_a = root.styleSheets) !== null && _a !== void 0 ? _a : document.styleSheets;
for (var i = 0, l = styleSheets.length; i < l; i++) {
var sheet = styleSheets[i];
if (sheet.ownerNode === tag) {
return sheet;
}
}
throw throwStyledComponentsError(17);
};
/** Remove a GlobalStyle's SSR-rendered inline style tag(s) from the DOM */
var removeGlobalStyleTag = function (componentId, target) {
if (typeof document === 'undefined')
return;
var container = target !== null && target !== void 0 ? target : document;
var styleTags = container.querySelectorAll("style[data-styled-global=\"".concat(componentId, "\"]"));
styleTags.forEach(function (tag) { return tag.remove(); });
};
/** Create a CSSStyleSheet-like tag depending on the environment */
var makeTag = function (_a) {
var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target;
if (isServer) {
return new VirtualTag(target);
}
else if (useCSSOMInjection) {
return new CSSOMTag(target);
}
else {
return new TextTag(target);
}
};
var CSSOMTag = /** @class */ (function () {
function CSSOMTag(target) {
this.element = makeStyleTag(target);
// Avoid Edge bug where empty style elements don't create sheets
this.element.appendChild(document.createTextNode(''));
this.sheet = getSheet(this.element);
this.length = 0;
}
CSSOMTag.prototype.insertRule = function (index, rule) {
try {
this.sheet.insertRule(rule, index);
this.length++;
return true;
}
catch (_error) {
return false;
}
};
CSSOMTag.prototype.deleteRule = function (index) {
this.sheet.deleteRule(index);
this.length--;
};
CSSOMTag.prototype.getRule = function (index) {
var rule = this.sheet.cssRules[index];
// Avoid IE11 quirk where cssText is inaccessible on some invalid rules
if (rule && rule.cssText) {
return rule.cssText;
}
else {
return '';
}
};
return CSSOMTag;
}());
/** A Tag that emulates the CSSStyleSheet API but uses text nodes */
var TextTag = /** @class */ (function () {
function TextTag(target) {
this.element = makeStyleTag(target);
this.nodes = this.element.childNodes;
this.length = 0;
}
TextTag.prototype.insertRule = function (index, rule) {
if (index <= this.length && index >= 0) {
var node = document.createTextNode(rule);
var refNode = this.nodes[index];
this.element.insertBefore(node, refNode || null);
this.length++;
return true;
}
else {
return false;
}
};
TextTag.prototype.deleteRule = function (index) {
this.element.removeChild(this.nodes[index]);
this.length--;
};
TextTag.prototype.getRule = function (index) {
if (index < this.length) {
return this.nodes[index].textContent;
}
else {
return '';
}
};
return TextTag;
}());
/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
var VirtualTag = /** @class */ (function () {
function VirtualTag(_target) {
this.rules = [];
this.length = 0;
}
VirtualTag.prototype.insertRule = function (index, rule) {
if (index <= this.length) {
if (index === this.length) {
this.rules.push(rule);
}
else {
this.rules.splice(index, 0, rule);
}
this.length++;
return true;
}
else {
return false;
}
};
VirtualTag.prototype.deleteRule = function (index) {
this.rules.splice(index, 1);
this.length--;
};
VirtualTag.prototype.getRule = function (index) {
if (index < this.length) {
return this.rules[index];
}
else {
return '';
}
};
return VirtualTag;
}());
var SHOULD_REHYDRATE = IS_BROWSER;
var defaultOptions = {
isServer: !IS_BROWSER,
useCSSOMInjection: !DISABLE_SPEEDY,
};
/** Contains the main stylesheet logic for stringification and caching */
var StyleSheet = /** @class */ (function () {
function StyleSheet(options, globalStyles, names) {
if (options === void 0) { options = EMPTY_OBJECT; }
if (globalStyles === void 0) { globalStyles = {}; }
var _this = this;
this.options = __assign(__assign({}, defaultOptions), options);
this.gs = globalStyles;
this.names = new Map(names);
this.server = !!options.isServer;
// We rehydrate only once and use the sheet that is created first
if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {
SHOULD_REHYDRATE = false;
rehydrateSheet(this);
}
setToString(this, function () { return outputSheet(_this); });
}
/** Register a group ID to give it an index */
StyleSheet.registerId = function (id) {
return getGroupForId(id);
};
StyleSheet.prototype.rehydrate = function () {
if (!this.server && IS_BROWSER) {
rehydrateSheet(this);
}
};
StyleSheet.prototype.reconstructWithOptions = function (options, withNames) {
if (withNames === void 0) { withNames = true; }
var newSheet = new StyleSheet(__assign(__assign({}, this.options), options), this.gs, (withNames && this.names) || undefined);
// If we're reconstructing with a new target on the client, check if the container changed
// This handles the case where StyleSheetManager's target prop changes (e.g., from undefined to shadowRoot)
// We only rehydrate if the container (Document or ShadowRoot) actually changes
if (!this.server && IS_BROWSER && options.target !== this.options.target) {
var oldContainer = getRehydrationContainer(this.options.target);
var newContainer = getRehydrationContainer(options.target);
if (oldContainer !== newContainer) {
rehydrateSheet(newSheet);
}
}
return newSheet;
};
StyleSheet.prototype.allocateGSInstance = function (id) {
return (this.gs[id] = (this.gs[id] || 0) + 1);
};
/** Lazily initialises a GroupedTag for when it's actually needed */
StyleSheet.prototype.getTag = function () {
return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));
};
/** Check whether a name is known for caching */
StyleSheet.prototype.hasNameForId = function (id, name) {
var _a, _b;
return (_b = (_a = this.names.get(id)) === null || _a === void 0 ? void 0 : _a.has(name)) !== null && _b !== void 0 ? _b : false;
};
/** Mark a group's name as known for caching */
StyleSheet.prototype.registerName = function (id, name) {
getGroupForId(id);
var existing = this.names.get(id);
if (existing) {
existing.add(name);
}
else {
this.names.set(id, new Set([name]));
}
};
/** Insert new rules which also marks the name as known */
StyleSheet.prototype.insertRules = function (id, name, rules) {
this.registerName(id, name);
this.getTag().insertRules(getGroupForId(id), rules);
};
/** Clears all cached names for a given group ID */
StyleSheet.prototype.clearNames = function (id) {
if (this.names.has(id)) {
this.names.get(id).clear();
}
};
/** Clears all rules for a given group ID */
StyleSheet.prototype.clearRules = function (id) {
this.getTag().clearGroup(getGroupForId(id));
this.clearNames(id);
};
/** Clears the entire tag which deletes all rules but not its names */
StyleSheet.prototype.clearTag = function () {
// NOTE: This does not clear the names, since it's only used during SSR
// so that we can continuously output only new rules
this.tag = undefined;
};
return StyleSheet;
}());
var e="-ms-";var r="-moz-";var a="-webkit-";var c="comm";var n="rule";var s="decl";var i="@import";var v="@namespace";var b="@keyframes";var g="@layer";var $=Math.abs;var m=String.fromCharCode;var x=Object.assign;function y(e,r){return A(e,0)^45?(((r<<2^A(e,0))<<2^A(e,1))<<2^A(e,2))<<2^A(e,3):0}function j(e){return e.trim()}function z(e,r){return (e=r.exec(e))?e[0]:e}function C(e,r,a){return e.replace(r,a)}function O(e,r,a){return e.indexOf(r,a)}function A(e,r){return e.charCodeAt(r)|0}function M(e,r,a){return e.slice(r,a)}function S(e){return e.length}function q(e){return e.length}function B(e,r){return r.push(e),e}function D(e,r){return e.map(r).join("")}function E(e,r){return e.filter((function(e){return !z(e,r)}))}var F=1;var G=1;var H=0;var I=0;var J=0;var K="";function L(e,r,a,c,n,s,t,u){return {value:e,root:r,parent:a,type:c,props:n,children:s,line:F,column:G,length:t,return:"",siblings:u}}function N(e,r){return x(L("",null,null,"",null,null,0,e.siblings),e,{length:-e.length},r)}function P(e){while(e.root)e=N(e.root,{children:[e]});B(e,e.siblings);}function Q(){return J}function R(){J=I>0?A(K,--I):0;if(G--,J===10)G=1,F--;return J}function T(){J=I<H?A(K,I++):0;if(G++,J===10)G=1,F++;return J}function U(){return A(K,I)}function V(){return I}function W(e,r){return M(K,e,r)}function X(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function Y(e){return F=G=1,H=S(K=e),I=0,[]}function Z(e){return K="",e}function _(e){return j(W(I-1,ne(e===91?e+2:e===40?e+1:e)))}function re(e){while(J=U())if(J<33)T();else break;return X(e)>2||X(J)>3?"":" "}function ce(e,r){while(--r&&T())if(J<48||J>102||J>57&&J<65||J>70&&J<97)break;return W(e,V()+(r<6&&U()==32&&T()==32))}function ne(e){while(T())switch(J){case e:return I;case 34:case 39:if(e!==34&&e!==39)ne(J);break;case 40:if(e===41)ne(e);break;case 92:T();break}return I}function se(e,r){while(T())if(e+J===47+10)break;else if(e+J===42+42&&U()===47)break;return "/*"+W(r,I-1)+"*"+m(e===47?e:T())}function te(e){while(!X(U()))T();return W(e,I)}function ue(e){return Z(ie("",null,null,null,[""],e=Y(e),0,[0],e))}function ie(e,r,a,c,n,s,t,u,i){var f=0;var o=0;var l=t;var p=0;var v=0;var b=0;var h=1;var w=1;var d=1;var g=0;var k="";var x=n;var y=s;var j=c;var z=k;while(w)switch(b=g,g=T()){case 40:if(b!=108&&A(z,l-1)==58){if(O(z+=C(_(g),"&","&\f"),"&\f",$(f?u[f-1]:0))!=-1)d=-1;break}case 34:case 39:case 91:z+=_(g);break;case 9:case 10:case 13:case 32:z+=re(b);break;case 92:z+=ce(V()-1,7);continue;case 47:switch(U()){case 42:case 47:B(oe(se(T(),V()),r,a,i),i);if((X(b||1)==5||X(U()||1)==5)&&S(z)&&M(z,-1,void 0)!==" ")z+=" ";break;default:z+="/";}break;case 123*h:u[f++]=S(z)*d;case 125*h:case 59:case 0:switch(g){case 0:case 125:w=0;case 59+o:if(d==-1)z=C(z,/\f/g,"");if(v>0&&(S(z)-l||h===0&&b===47))B(v>32?le(z+";",c,a,l-1,i):le(C(z," ","")+";",c,a,l-2,i),i);break;case 59:z+=";";default:B(j=fe(z,r,a,f,o,n,u,k,x=[],y=[],l,s),s);if(g===123)if(o===0)ie(z,r,j,j,x,s,l,u,y);else {switch(p){case 99:if(A(z,3)===110)break;case 108:if(A(z,2)===97)break;default:o=0;case 100:case 109:case 115:}if(o)ie(e,j,j,c&&B(fe(e,j,j,0,0,n,u,k,n,x=[],l,y),y),n,y,l,u,c?x:y);else ie(z,j,j,j,[""],y,0,u,y);}}f=o=v=0,h=d=1,k=z="",l=t;break;case 58:l=1+S(z),v=b;default:if(h<1)if(g==123)--h;else if(g==125&&h++==0&&R()==125)continue;switch(z+=m(g),g*h){case 38:d=o>0?1:(z+="\f",-1);break;case 44:u[f++]=(S(z)-1)*d,d=1;break;case 64:if(U()===45)z+=_(T());p=U(),o=l=S(k=z+=te(V())),g++;break;case 45:if(b===45&&S(z)==2)h=0;}}return s}function fe(e,r,a,c,s,t,u,i,f,o,l,p){var v=s-1;var b=s===0?t:[""];var h=q(b);for(var w=0,d=0,g=0;w<c;++w)for(var k=0,m=M(e,v+1,v=$(d=u[w])),x=e;k<h;++k)if(x=j(d>0?b[k]+" "+m:C(m,/&\f/g,b[k])))f[g++]=x;return L(e,r,a,s===0?n:i,f,o,l,p)}function oe(e,r,a,n){return L(e,r,a,c,m(Q()),M(e,2,-2),0,n)}function le(e,r,a,c,n){return L(e,r,a,s,M(e,0,c),M(e,c+1,-1),c,n)}function pe(c,n,s){switch(y(c,n)){case 5103:return a+"print-"+c+c;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:case 6391:case 5879:case 5623:case 6135:case 4599:return a+c+c;case 4855:return a+c.replace("add","source-over").replace("substract","source-out").replace("intersect","source-in").replace("exclude","xor")+c;case 4789:return r+c+c;case 5349:case 4246:case 4810:case 6968:case 2756:return a+c+r+c+e+c+c;case 5936:switch(A(c,n+11)){case 114:return a+c+e+C(c,/[svh]\w+-[tblr]{2}/,"tb")+c;case 108:return a+c+e+C(c,/[svh]\w+-[tblr]{2}/,"tb-rl")+c;case 45:return a+c+e+C(c,/[svh]\w+-[tblr]{2}/,"lr")+c}case 6828:case 4268:case 2903:return a+c+e+c+c;case 6165:return a+c+e+"flex-"+c+c;case 5187:return a+c+C(c,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+c;case 5443:return a+c+e+"flex-item-"+C(c,/flex-|-self/g,"")+(!z(c,/flex-|baseline/)?e+"grid-row-"+C(c,/flex-|-self/g,""):"")+c;case 4675:return a+c+e+"flex-line-pack"+C(c,/align-content|flex-|-self/g,"")+c;case 5548:return a+c+e+C(c,"shrink","negative")+c;case 5292:return a+c+e+C(c,"basis","preferred-size")+c;case 6060:return a+"box-"+C(c,"-grow","")+a+c+e+C(c,"grow","positive")+c;case 4554:return a+C(c,/([^-])(transform)/g,"$1"+a+"$2")+c;case 6187:return C(C(C(c,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),c,"")+c;case 5495:case 3959:return C(c,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return C(C(c,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/space-between/,"justify")+a+c+c;case 4200:if(!z(c,/flex-|baseline/))return e+"grid-column-align"+M(c,n)+c;break;case 2592:case 3360:return e+C(c,"template-","")+c;case 4384:case 3616:if(s&&s.some((function(e,r){return n=r,z(e.props,/grid-\w+-end/)}))){return ~O(c+(s=s[n].value),"span",0)?c:e+C(c,"-start","")+c+e+"grid-row-span:"+(~O(s,"span",0)?z(s,/\d+/):+z(s,/\d+/)-+z(c,/\d+/))+";"}return e+C(c,"-start","")+c;case 4896:case 4128:return s&&s.some((function(e){return z(e.props,/grid-\w+-start/)}))?c:e+C(C(c,"-end","-span"),"span ","")+c;case 4095:case 3583:case 4068:case 2532:return C(c,/(.+)-inline(.+)/,a+"$1$2")+c;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(S(c)-1-n>6)switch(A(c,n+1)){case 109:if(A(c,n+4)!==45)break;case 102:return C(c,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(A(c,n+3)==108?"$3":"$2-$3"))+c;case 115:return ~O(c,"stretch",0)?pe(C(c,"stretch","fill-available"),n,s)+c:c}break;case 5152:case 5920:return C(c,/(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/,(function(r,a,n,s,t,u,i){return e+a+":"+n+i+(s?e+a+"-span:"+(t?u:+u-+n)+i:"")+c}));case 4949:if(A(c,n+6)===121)return C(c,":",":"+a)+c;break;case 6444:switch(A(c,A(c,14)===45?18:11)){case 120:return C(c,/(.+:)([^;\s!]+)(;|(\s+)?!.+)?/,"$1"+a+(A(c,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+c;case 100:return C(c,":",":"+e)+c}break;case 5719:case 2647:case 2135:case 3927:case 2391:return C(c,"scroll-","scroll-snap-")+c}return c}function ve(e,r){var a="";for(var c=0;c<e.length;c++)a+=r(e[c],c,e,r)||"";return a}function be(e,r,a,t){switch(e.type){case g:if(e.children.length)break;case i:case v:case s:return e.return=e.return||e.value;case c:return "";case b:return e.return=e.value+"{"+ve(e.children,t)+"}";case n:if(!S(e.value=e.props.join(",")))return ""}return S(a=ve(e.children,t))?e.return=e.value+"{"+a+"}":""}function he(e){var r=q(e);return function(a,c,n,s){var t="";for(var u=0;u<r;u++)t+=e[u](a,c,n,s)||"";return t}}function we(e){return function(r){if(!r.root)if(r=r.return)e(r);}}function de(c,t,u,i){if(c.length>-1)if(!c.return)switch(c.type){case s:c.return=pe(c.value,c.length,u);return;case b:return ve([N(c,{value:C(c.value,"@","@"+a)})],i);case n:if(c.length)return D(u=c.props,(function(n){switch(z(n,i=/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":P(N(c,{props:[C(n,/:(read-\w+)/,":"+r+"$1")]}));P(N(c,{props:[n]}));x(c,{props:E(u,i)});break;case"::placeholder":P(N(c,{props:[C(n,/:(plac\w+)/,":"+a+"input-$1")]}));P(N(c,{props:[C(n,/:(plac\w+)/,":"+r+"$1")]}));P(N(c,{props:[C(n,/:(plac\w+)/,e+"input-$1")]}));P(N(c,{props:[n]}));x(c,{props:E(u,i)});break}return ""}))}}
var SEED$1 = 5381;
// When we have separate strings it's useful to run a progressive
// version of djb2 where we pretend that we're still looping over
// the same string
var phash = function (h, x) {
var i = x.length;
while (i) {
h = (h * 33) ^ x.charCodeAt(--i);
}
return h;
};
// This is a djb2 hashing function
var hash = function (x) {
return phash(SEED$1, x);
};
var AMP_REGEX = /&/g;
// Character codes for fast comparison
var DOUBLE_QUOTE = 34; // "
var SINGLE_QUOTE = 39; // '
var SLASH = 47; // /
var ASTERISK = 42; // *
var BACKSLASH = 92; // \
var OPEN_BRACE = 123; // {
var CLOSE_BRACE = 125; // }
var SEMICOLON = 59; // ;
var NEWLINE = 10; // \n
var OPEN_PAREN = 40; // (
var CLOSE_PAREN = 41; // )
/**
* Strips JS-style line comments (//) from CSS, handling comments anywhere
* in the line while preserving strings, url() contents, and valid CSS.
* Optimized with early bail and charCodeAt for performance.
*/
function stripLineComments(css) {
// Fast path: no // means no line comments
if (css.indexOf('//') === -1)
return css;
var len = css.length;
var parts = [];
var start = 0;
var i = 0;
var inString = 0; // 0 = none, DOUBLE_QUOTE or SINGLE_QUOTE when in string
var urlDepth = 0; // Track nesting depth inside url()
while (i < len) {
var code = css.charCodeAt(i);
// Track string state
if ((code === DOUBLE_QUOTE || code === SINGLE_QUOTE) &&
(i === 0 || css.charCodeAt(i - 1) !== BACKSLASH)) {
if (inString === 0) {
inString = code;
}
else if (inString === code) {
inString = 0;
}
i++;
continue;
}
// Skip string content
if (inString !== 0) {
i++;
continue;
}
// Handle CSS block comments: skip /* ... */ entirely
if (code === SLASH && i + 1 < len && css.charCodeAt(i + 1) === ASTERISK) {
i += 2;
while (i + 1 < len && !(css.charCodeAt(i) === ASTERISK && css.charCodeAt(i + 1) === SLASH)) {
i++;
}
i += 2; // skip past */
continue;
}
// Track url() context - check for 'url(' (case insensitive via | 32)
if (code === OPEN_PAREN &&
i >= 3 &&
(css.charCodeAt(i - 1) | 32) === 108 && // l
(css.charCodeAt(i - 2) | 32) === 114 && // r
(css.charCodeAt(i - 3) | 32) === 117 // u
) {
urlDepth = 1;
i++;
continue;
}
// Track nested parentheses inside url()
if (urlDepth > 0) {
if (code === CLOSE_PAREN)
urlDepth--;
else if (code === OPEN_PAREN)
urlDepth++;
i++;
continue;
}
// Strip orphaned */ (no matching /*) — invalid CSS that breaks parsing
if (code === ASTERISK && i + 1 < len && css.charCodeAt(i + 1) === SLASH) {
if (i > start)
parts.push(css.substring(start, i));
i += 2;
start = i;
continue;
}
// Check for line comment (only when not in url())
if (code === SLASH && i + 1 < len && css.charCodeAt(i + 1) === SLASH) {
if (i > start)
parts.push(css.substring(start, i));
// Skip to end of line
while (i < len && css.charCodeAt(i) !== NEWLINE) {
i++;
}
start = i;
continue;
}
i++;
}
// No comments found after indexOf check means // was in a string or url()
if (start === 0)
return css;
if (start < len)
parts.push(css.substring(start));
return parts.join('');
}
/**
* Checks if CSS has unbalanced closing braces that would cause stylis
* to prematurely close rule blocks.
* Optimized with early bail and charCodeAt for performance.
*/
function hasUnbalancedBraces(css) {
// Fast path: no closing brace means can't have unbalanced braces
if (css.indexOf('}') === -1)
return false;
var len = css.length;
var depth = 0;
var inString = 0; // 0 = none, char code when in string
var inComment = false;
for (var i = 0; i < len; i++) {
var code = css.charCodeAt(i);
// Handle CSS comments
if (inString === 0 && !inComment && code === SLASH && css.charCodeAt(i + 1) === ASTERISK) {
inComment = true;
i++;
continue;
}
if (inComment) {
if (code === ASTERISK && css.charCodeAt(i + 1) === SLASH) {
inComment = false;
i++;
}
continue;
}
// Track string state
if ((code === DOUBLE_QUOTE || code === SINGLE_QUOTE) &&
(i === 0 || css.charCodeAt(i - 1) !== BACKSLASH)) {
if (inString === 0) {
inString = code;
}
else if (inString === code) {
inString = 0;
}
continue;
}
if (inString !== 0)
continue;
// Track brace depth
if (code === OPEN_BRACE) {
depth++;
}
else if (code === CLOSE_BRACE) {
depth--;
if (depth < 0)
return true;
}
}
return depth !== 0 || inString !== 0;
}
/**
* Sanitizes CSS by removing declarations with unbalanced braces.
* This contains invalid syntax to just the affected declaration.
* Optimized with charCodeAt for performance.
*/
function sanitizeCSS(css) {
// Fast path: valid CSS passes through unchanged
if (!hasUnbalancedBraces(css)) {
return css;
}
var len = css.length;
var result = '';
var declStart = 0;
var braceDepth = 0;
var inString = 0;
var inComment = false;
for (var i = 0; i < len; i++) {
var code = css.charCodeAt(i);
// Handle CSS comments
if (inString === 0 && !inComment && code === SLASH && css.charCodeAt(i + 1) === ASTERISK) {
inComment = true;
i++;
continue;
}
if (inComment) {
if (code === ASTERISK && css.charCodeAt(i + 1) === SLASH) {
inComment = false;
i++;
}
continue;
}
// Track string state
if ((code === DOUBLE_QUOTE || code === SINGLE_QUOTE) &&
(i === 0 || css.charCodeAt(i - 1) !== BACKSLASH)) {
if (inString === 0) {
inString = code;
}
else if (inString === code) {
inString = 0;
}
continue;
}
if (inString !== 0)
continue;
if (code === OPEN_BRACE) {
braceDepth++;
}
else if (code === CLOSE_BRACE) {
braceDepth--;
if (braceDepth < 0) {
// Extra closing brace - skip to next semicolon or newline
var skipEnd = i + 1;
while (skipEnd < len) {
var skipCode = css.charCodeAt(skipEnd);
if (skipCode === SEMICOLON || skipCode === NEWLINE)
break;
skipEnd++;
}
if (skipEnd < len && css.charCodeAt(skipEnd) === SEMICOLON)
skipEnd++;
braceDepth = 0;
i = skipEnd - 1;
declStart = skipEnd;
continue;
}
if (braceDepth === 0) {
result += css.substring(declStart, i + 1);
declStart = i + 1;
}
}
else if (code === SEMICOLON && braceDepth === 0) {
result += css.substring(declStart, i + 1);
declStart = i + 1;
}
}
// Add remaining valid content
if (declStart < len) {
var remaining = css.substring(declStart);
if (!hasUnbalancedBraces(remaining)) {
result += remaining;
}
}
return result;
}
/**
* Takes an element and recurses through it's rules added the namespace to the start of each selector.
* Takes into account media queries by recursing through child rules if they are present.
*/
function recursivelySetNamepace(compiled, namespace) {
return compiled.map(function (rule) {
if (rule.type === 'rule') {
// add the namespace to the start
rule.value = "".concat(namespace, " ").concat(rule.value);
// add the namespace after each comma for subsequent selectors.
rule.value = rule.value.replaceAll(',', ",".concat(namespace, " "));
rule.props = rule.props.map(function (prop) {
return "".concat(namespace, " ").concat(prop);
});
}
if (Array.isArray(rule.children) && rule.type !== '@keyframes') {
rule.children = recursivelySetNamepace(rule.children, namespace);
}
return rule;
});
}
function createStylisInstance(_a) {
var _b = _a === void 0 ? EMPTY_OBJECT : _a, _c = _b.options, options = _c === void 0 ? EMPTY_OBJECT : _c, _d = _b.plugins, plugins = _d === void 0 ? EMPTY_ARRAY : _d;
var _componentId;
var _selector;
var _selectorRegexp;
var selfReferenceReplacer = function (match, offset, string) {
if (
/**
* We only want to refer to the static class directly if the selector is part of a
* self-reference selector `& + & { color: red; }`
*/
string.startsWith(_selector) &&
string.endsWith(_selector) &&
string.replaceAll(_selector, '').length > 0) {
return ".".concat(_componentId);
}
return match;
};
/**
* When writing a style like
*
* & + & {
* color: red;
* }
*
* The second ampersand should be a reference to the static component class. stylis
* has no knowledge of static class so we have to intelligently replace the base selector.
*
* https://github.com/thysultan/stylis.js/tree/v4.0.2#abstract-syntax-structure
*/
var selfReferenceReplacementPlugin = function (element) {
if (element.type === n && element.value.includes('&')) {
// Lazy RegExp creation: only allocate when self-reference pattern is actually used
if (!_selectorRegexp) {
_selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
}
element.props[0] = element.props[0]
// catch any hanging references that stylis missed
.replace(AMP_REGEX, _selector)
.replace(_selectorRegexp, selfReferenceReplacer);
}
};
var middlewares = plugins.slice();
middlewares.push(selfReferenceReplacementPlugin);
/**
* Enables automatic vendor-prefixing for styles.
*/
if (options.prefix) {
mid