@dash-ui/styles
Version:
A tiny, powerful, framework-agnostic CSS-in-JS library.
1,386 lines (1,145 loc) • 38.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Dash = {}));
})(this, (function (exports) { 'use strict';
var unitlessKeys = {
animationIterationCount: 1,
borderImageOutset: 1,
borderImageSlice: 1,
borderImageWidth: 1,
boxFlex: 1,
boxFlexGroup: 1,
boxOrdinalGroup: 1,
columnCount: 1,
columns: 1,
flex: 1,
flexGrow: 1,
flexPositive: 1,
flexShrink: 1,
flexNegative: 1,
flexOrder: 1,
gridRow: 1,
gridRowEnd: 1,
gridRowSpan: 1,
gridRowStart: 1,
gridColumn: 1,
gridColumnEnd: 1,
gridColumnSpan: 1,
gridColumnStart: 1,
msGridRow: 1,
msGridRowSpan: 1,
msGridColumn: 1,
msGridColumnSpan: 1,
fontWeight: 1,
lineHeight: 1,
opacity: 1,
order: 1,
orphans: 1,
tabSize: 1,
widows: 1,
zIndex: 1,
zoom: 1,
WebkitLineClamp: 1,
// SVG-related properties
fillOpacity: 1,
floodOpacity: 1,
stopOpacity: 1,
strokeDasharray: 1,
strokeDashoffset: 1,
strokeMiterlimit: 1,
strokeOpacity: 1,
strokeWidth: 1
};
var unitless = unitlessKeys;
var WEBKIT = '-webkit-';
var MOZ = '-moz-';
var MS = '-ms-';
var FLEX = 'flex-';
var $1 = '$1';
var $2 = '$2';
function charCodeAt(s, code) {
return s.charCodeAt(code);
}
function replace(s, i, o) {
return s.replace(i, o);
}
function indexOf(s, a, b) {
return s.indexOf(a, b);
}
function substring(s, a, b) {
return s.substring(a, b);
}
function Stylis (Z) {
function L(d, c, e, h, a) {
for (var m = 0, b = 0, v = 0, n = 0, q, g, w = 0, E = 0, k, u = k = q = 0, l = 0, r = 0, G = 0, t = 0, I = e.length, H = I - 1, x, f = '', p = '', M = '', N = '', B; l < I;) {
g = charCodeAt(e, l);
l === H && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, I++, H++);
if (0 === b + n + v + m) {
if (l === H && (0 < r && (f = replace(f, O, '')), 0 < f.trim().length)) {
switch (g) {
case 32:
case 9:
case 59:
case 13:
case 10:
break;
default:
f += e.charAt(l);
}
g = 59;
}
switch (g) {
case 123:
f = f.trim();
q = charCodeAt(f, 0);
k = 1;
for (t = ++l; l < I;) {
switch (g = charCodeAt(e, l)) {
case 123:
k++;
break;
case 125:
k--;
break;
case 47:
switch (g = charCodeAt(e, l + 1)) {
case 42:
case 47:
a: {
for (u = l + 1; u < H; ++u) {
switch (charCodeAt(e, u)) {
case 47:
if (42 === g && 42 === charCodeAt(e, u - 1) && l + 2 !== u) {
l = u + 1;
break a;
}
break;
case 10:
if (47 === g) {
l = u + 1;
break a;
}
}
}
l = u;
}
}
break;
case 91:
g++;
case 40:
g++;
case 34:
case 39:
for (; l++ < H && charCodeAt(e, l) !== g;) {
}
}
if (0 === k) break;
l++;
}
k = substring(e, t, l);
0 === q && (q = (f = replace(f, fa, '').trim()).charCodeAt(0));
switch (q) {
case 64:
0 < r && (f = replace(f, O, ''));
g = charCodeAt(f, 1);
switch (g) {
case 100:
case 109:
case 115:
case 45:
r = c;
break;
default:
r = P;
}
k = L(c, r, k, g, a + 1);
t = k.length;
0 < A && (r = aa(P, f, G), B = F(3, k, r, c, C, z, t, g, a, h), f = r.join(''), void 0 !== B && 0 === (t = (k = B.trim()).length) && (g = 0, k = ''));
if (0 < t) switch (g) {
case 115:
f = replace(f, ha, ia);
case 100:
case 109:
case 45:
k = f + '{' + k + '}';
break;
case 107:
f = replace(f, ja, $1 + ' ' + $2);
k = f + '{' + k + '}';
k = 1 === y || 2 === y && J('@' + k, 3) ? '@' + WEBKIT + k + '@' + k : '@' + k;
break;
default:
k = f + k, 112 === h && (k = (p += k, ''));
} else k = '';
break;
default:
k = L(c, aa(c, f, G), k, h, a + 1);
}
M += k;
k = G = r = u = q = 0;
f = '';
g = charCodeAt(e, ++l);
break;
case 125:
case 59:
f = (0 < r ? replace(f, O, '') : f).trim();
if (1 < (t = f.length)) switch (0 === u && (q = charCodeAt(f, 0), 45 === q || 96 < q && 123 > q) && (t = (f = replace(f, ' ', ':')).length), 0 < A && void 0 !== (B = F(1, f, c, d, C, z, p.length, h, a, h)) && 0 === (t = (f = B.trim()).length) && (f = '\x00\x00'), q = charCodeAt(f, 0), g = charCodeAt(f, 1), q) {
case 0:
break;
case 64:
if (105 === g || 99 === g) {
N += f + e.charAt(l);
break;
}
default:
58 !== charCodeAt(f, t - 1) && (p += Q(f, q, g, charCodeAt(f, 2)));
}
G = r = u = q = 0;
f = '';
g = charCodeAt(e, ++l);
}
}
switch (g) {
case 13:
case 10:
47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
0 < A * ba && F(0, f, c, d, C, z, p.length, h, a, h);
z = 1;
C++;
break;
case 59:
case 125:
if (0 === b + n + v + m) {
z++;
break;
}
default:
z++;
x = e.charAt(l);
switch (g) {
case 9:
case 32:
if (0 === n + m + b) switch (w) {
case 44:
case 58:
case 9:
case 32:
x = '';
break;
default:
32 !== g && (x = ' ');
}
break;
case 0:
x = '\\0';
break;
case 12:
x = '\\f';
break;
case 11:
x = '\\v';
break;
case 38:
0 === n + b + m && (r = G = 1, x = '\f' + x);
break;
case 108:
if (0 === n + b + m + D && 0 < u) switch (l - u) {
case 2:
112 === w && 58 === charCodeAt(e, l - 3) && (D = w);
case 8:
111 === E && (D = E);
}
break;
case 58:
0 === n + b + m && (u = l);
break;
case 44:
0 === b + v + n + m && (r = 1, x += '\r');
break;
case 34:
case 39:
0 === b && (n = n === g ? 0 : 0 === n ? g : n);
break;
case 91:
0 === n + b + v && m++;
break;
case 93:
0 === n + b + v && m--;
break;
case 41:
0 === n + b + m && v--;
break;
case 40:
if (0 === n + b + m) {
if (0 === q) switch (2 * w + 3 * E) {
case 533:
break;
default:
q = 1;
}
v++;
}
break;
case 64:
0 === b + v + n + m + u + k && (k = 1);
break;
case 42:
case 47:
if (!(0 < n + m + v)) switch (b) {
case 0:
switch (2 * g + 3 * charCodeAt(e, l + 1)) {
case 235:
b = 47;
break;
case 220:
t = l, b = 42;
}
break;
case 42:
47 === g && 42 === w && t + 2 !== l && (33 === charCodeAt(e, t + 2) && (p += substring(e, t, l + 1)), x = '', b = 0);
}
}
0 === b && (f += x);
}
E = w;
w = g;
l++;
}
t = p.length;
if (0 < t) {
r = c;
if (0 < A && (B = F(2, p, r, d, C, z, t, h, a, h), void 0 !== B && 0 === (p = B).length)) return N + p + M;
p = r.join(',') + '{' + p + '}';
if (0 !== y * D) {
2 !== y || J(p, 2) || (D = 0);
switch (D) {
case 111:
p = replace(p, ka, ':' + MOZ + $1) + p;
break;
case 112:
p = replace(p, R, '::' + WEBKIT + 'input-$1') + replace(p, R, '::' + MOZ + $1) + replace(p, R, ':' + MS + 'input-$1') + p;
}
D = 0;
}
}
return N + p + M;
}
function aa(d, c, e) {
var h = c.trim().split(la);
c = h;
var a = h.length,
m = d.length;
switch (m) {
case 0:
case 1:
var b = 0;
for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
c[b] = ca(d, c[b], e).trim();
}
break;
default:
var v = b = 0;
for (c = []; b < a; ++b) {
for (var n = 0; n < m; ++n) {
c[v++] = ca(d[n] + ' ', h[b], e).trim();
}
}
}
return c;
}
function ca(d, c, e) {
var h = charCodeAt(c, 0);
33 > h && (h = (c = c.trim()).charCodeAt(0));
switch (h) {
case 38:
return c.replace(S, $1 + d.trim());
case 58:
return d.trim() + c.replace(S, $1 + d.trim());
default:
if (0 < 1 * e && 0 < indexOf(c, '\f')) return c.replace(S, (58 === charCodeAt(d, 0) ? '' : $1) + d.trim());
}
return d + c;
}
function Q(d, c, e, h) {
var a = d + ';',
m = 2 * c + 3 * e + 4 * h;
if (944 === m) {
d = indexOf(a, ':', 9) + 1;
var b = substring(a, d, a.length - 1).trim();
b = substring(a, 0, d).trim() + b + ';';
return 1 === y || 2 === y && J(b, 1) ? WEBKIT + b + b : b;
}
if (0 === y || 2 === y && !J(a, 1)) return a;
switch (m) {
case 1015:
return 97 === charCodeAt(a, 10) ? WEBKIT + a + a : a;
case 951:
return 116 === charCodeAt(a, 3) ? WEBKIT + a + a : a;
case 963:
return 110 === charCodeAt(a, 5) ? WEBKIT + a + a : a;
case 1009:
if (100 !== charCodeAt(a, 4)) break;
case 969:
case 942:
return WEBKIT + a + a;
case 978:
return WEBKIT + a + MOZ + a + a;
case 1019:
case 983:
return WEBKIT + a + MOZ + a + MS + a + a;
case 883:
if (45 === charCodeAt(a, 8)) return WEBKIT + a + a;
if (0 < indexOf(a, 'image-set(', 11)) return replace(a, ma, $1 + WEBKIT + $2) + a;
break;
case 932:
if (45 === charCodeAt(a, 4)) switch (charCodeAt(a, 5)) {
case 103:
return WEBKIT + 'box-' + replace(a, '-grow', '') + WEBKIT + a + MS + replace(a, 'grow', 'positive') + a;
case 115:
return WEBKIT + a + MS + replace(a, 'shrink', 'negative') + a;
case 98:
return WEBKIT + a + MS + replace(a, 'basis', 'preferred-size') + a;
}
return WEBKIT + a + MS + a + a;
case 964:
return WEBKIT + a + MS + FLEX + a + a;
case 1023:
if (99 !== charCodeAt(a, 8)) break;
b = substring(a, indexOf(a, ':', 15)).replace(FLEX, '').replace('space-between', 'justify');
return WEBKIT + 'box-pack' + b + WEBKIT + a + MS + FLEX + 'pack' + b + a;
case 1005:
return na.test(a) ? replace(a, da, ':' + WEBKIT) + replace(a, da, ':' + MOZ) + a : a;
case 1e3:
b = substring(a, 13).trim();
c = indexOf(b, '-') + 1;
switch (charCodeAt(b, 0) + charCodeAt(b, c)) {
case 226:
b = replace(a, T, 'tb');
break;
case 232:
b = replace(a, T, 'tb-rl');
break;
case 220:
b = replace(a, T, 'lr');
break;
default:
return a;
}
return WEBKIT + a + MS + b + a;
case 1017:
if (-1 === indexOf(a, 'sticky', 9)) break;
case 975:
c = (a = d).length - 10;
b = (33 === charCodeAt(a, c) ? substring(a, 0, c) : a).substring(indexOf(d, ':', 7) + 1).trim();
switch (m = charCodeAt(b, 0) + (charCodeAt(b, 7) | 0)) {
case 203:
if (111 > charCodeAt(b, 8)) break;
case 115:
a = replace(a, b, WEBKIT + b) + ';' + a;
break;
case 207:
case 102:
a = a.replace(b, WEBKIT + (102 < m ? 'inline-' : '') + 'box') + ';' + replace(a, b, WEBKIT + b) + ';' + replace(a, b, MS + b + 'box') + ';' + a;
}
return a + ';';
case 938:
if (45 === charCodeAt(a, 5)) switch (charCodeAt(a, 6)) {
case 105:
return b = replace(a, '-items', ''), WEBKIT + a + WEBKIT + 'box-' + b + MS + FLEX + b + a;
case 115:
return WEBKIT + a + MS + FLEX + 'item-' + replace(a, ea, '') + a;
default:
return WEBKIT + a + MS + FLEX + 'line-pack' + replace(a, 'align-content', '').replace(ea, '') + a;
}
break;
case 973:
case 989:
if (45 !== charCodeAt(a, 3) || 122 === charCodeAt(a, 4)) break;
case 931:
case 953:
if (!0 === oa.test(d)) return 115 === (b = substring(d, indexOf(d, ':') + 1)).charCodeAt(0) ? Q(replace(d, 'stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : replace(a, b, WEBKIT + b) + a.replace(b, MOZ + replace(b, 'fill-', '')) + a;
break;
case 962:
if (a = WEBKIT + a + (102 === charCodeAt(a, 5) ? MS + a : '') + a, 211 === e + h && 105 === charCodeAt(a, 13) && 0 < indexOf(a, 'transform', 10)) return substring(a, 0, indexOf(a, ';', 27) + 1).replace(pa, $1 + WEBKIT + $2) + a;
}
return a;
}
function J(d, c) {
var e = indexOf(d, 1 === c ? ':' : '{'),
h = substring(d, 0, 3 !== c ? e : 10);
e = substring(d, e + 1, d.length - 1);
return U(2 !== c ? h : replace(h, qa, $1), e, c);
}
function ia(d, c) {
var e = Q(c, charCodeAt(c, 0), charCodeAt(c, 1), charCodeAt(c, 2));
return e !== c + ';' ? e.replace(ra, ' or ($1)').substring(4) : '(' + c + ')';
}
function F(d, c, e, h, a, m, b, v, n, q) {
for (var g = 0, w = c, E; g < A; ++g) {
switch (E = V[g].call(K, d, w, e, h, a, m, b, v, n, q)) {
case void 0:
case !1:
case !0:
case null:
break;
default:
w = E;
}
}
if (w !== c) return w;
}
function W(d) {
switch (d) {
case void 0:
case null:
A = V.length = 0;
break;
default:
if ('function' === typeof d) V[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {
W(d[c]);
} else ba = !!d | 0;
}
return W;
}
function X(d) {
d = d.prefix;
void 0 !== d && (U = null, d ? 'function' !== typeof d ? y = 1 : (y = 2, U = d) : y = 0);
return X;
}
function K(d, c) {
var e = d;
33 > charCodeAt(e, 0) && (e = e.trim());
Y = e;
e = [Y];
if (0 < A) {
var h = F(-1, c, e, e, C, z, 0, 0, 0, 0);
void 0 !== h && 'string' === typeof h && (c = h);
}
var a = L(P, e, c, 0, 0);
0 < A && (h = F(-2, a, e, e, C, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
Y = '';
D = 0;
z = C = 1;
return a;
}
var fa = /^\0+/g,
O = /[\0\r\f]/g,
da = /: */g,
na = /zoo|gra/,
pa = /([,: ])(transform)/g,
la = /,\r+?/g,
S = /([\t\r\n ])*\f?&/g,
ja = /@(k\w+)\s*(\S*)\s*/,
R = /::(place)/g,
ka = /:(read-only)/g,
T = /[svh]\w+-[tblr]{2}/,
ha = /\(\s*(.*)\s*\)/g,
ra = /([\s\S]*?);/g,
ea = /-self|' + FLEX + '/g,
qa = /[^]*?(:[rp][el]a[\w-]+)[^]*/,
oa = /stretch|:\s*\w+\-(?:conte|avail)/,
ma = /([^-])(image-set\()/,
z = 1,
C = 1,
D = 0,
y = 1,
P = [],
V = [],
A = 0,
U = null,
ba = 0,
Y = '';
K.use = W;
K.set = X;
void 0 !== Z && X(Z);
return K;
}
/**
* An FNV-1a hashing algorithm with a 32-bit offset basis. FNV-1a hashes are designed
* to be fast while maintaining a low collision rate. The high dispersion rate makes
* them well-suited for hashing nearly identical strings.
*
* @param string - A string you want to hash
*/
function hash(string) {
// 32-bit offset basis
var out = 2166136261;
var i = 0;
var len = string.length;
for (; i < len; ++i) {
out = (out ^= string.charCodeAt(i)) + (out << 1) + (out << 4) + (out << 7) + (out << 8) + (out << 24);
}
return (out >>> 0).toString(36);
}
var minL = /(^|[:;,{}\s])\s+|$/g;
var minR = / +{/g;
function safeHash(key, hashFn) {
var hashCache = {};
var value;
return function (string) {
if (value = hashCache[string]) return value;
value = hashFn(string.replace(minL, "$1").replace(minR, "{")); // allows class names to start with numbers
return hashCache[string] = value = !key && !isNaN(value[0]) ? "_" + value : value;
};
}
function noop() {}
/**
* Dash is a tiny, performant CSS-in-JS style rule sheet manager similar to Emotion.
*
* @param options - Configuration options
*/
function createDash(options) {
if (options === void 0) {
options = {};
}
var _options = options,
_options$key = _options.key,
key = _options$key === void 0 ? "ui" : _options$key,
nonce = _options.nonce,
stylisPlugins = _options.stylisPlugins,
_options$prefix = _options.prefix,
prefix = _options$prefix === void 0 ? true : _options$prefix,
batchInserts = _options.batchInserts,
speedy = _options.speedy,
_options$container = _options.container,
container = _options$container === void 0 ? typeof document !== "undefined" ? document.head : void 0 : _options$container;
var stylis = new Stylis({
prefix: prefix
});
var inserted = new Set();
var cache = new Map();
var sheetsCache = new Map();
var sheet = styleSheet({
key: key,
container: container,
nonce: nonce,
speedy: speedy,
batchInserts: batchInserts
});
if (typeof document !== "undefined") {
var nodes = document.querySelectorAll('style[data-cache="' + key + '"]');
var i = 0;
var attr;
var node;
var _insert = inserted.add.bind(inserted);
for (; i < nodes.length; i++) {
/* istanbul ignore next */
if ((attr = (node = nodes[i]).getAttribute("data-dash")) === null) continue;
attr.split(" ").forEach(_insert);
container && node.parentNode !== container && container.appendChild(node);
}
stylis.use(stylisPlugins)(ruleSheet);
}
/* istanbul ignore next */
if (typeof process !== "undefined" && "production" !== "production") {
var commentStart = /\/\*/g;
var commentEnd = /\*\//g;
stylis.use(function (context, content) {
if (context === -1) {
while (commentStart.test(content)) {
commentEnd.lastIndex = commentStart.lastIndex;
/* istanbul ignore next */
if (commentEnd.test(content)) {
commentStart.lastIndex = commentEnd.lastIndex;
continue;
}
throw new Error('Your styles have an unterminated comment ("/*" without ' + 'corresponding "*/").');
}
commentStart.lastIndex = 0;
}
});
}
var insert = function insert(key, selector, styles, styleSheet) {
if (inserted.has(key)) return;
inserted.add(key);
Sheet.x = styleSheet === void 0 ? sheet : styleSheet;
stylis(selector, styles);
};
function _insert2(key, selector, styles, styleSheet) {
if (inserted.has(key)) return;
inserted.add(key);
Sheet.x = styleSheet === void 0 ? sheet : styleSheet;
cache.set(key, stylis(selector, styles));
}
if (typeof document === "undefined") {
insert = _insert2;
}
return {
key: key,
sheet: sheet,
sheets: {
add: function add(name) {
var sheetRef = sheetsCache.get(name) || {
n: 0,
s: styleSheet(sheet)
};
sheetsCache.set(name, sheetRef);
sheetRef.n++;
return sheetRef.s;
},
delete: function _delete(name) {
var sheetRef = sheetsCache.get(name);
if (!sheetRef) return -1;
if (sheetRef.n === 1) {
sheetsCache.delete(name);
sheetRef.s.flush();
}
return --sheetRef.n;
},
keys: sheetsCache.keys.bind(sheetsCache)
},
stylis: stylis,
insert: insert,
inserted: inserted,
cache: cache
};
}
//
// Stylesheet
function styleSheet(options) {
// Based off emotion and glamor's StyleSheet
var key = options.key,
container = options.container,
nonce = options.nonce,
batchInserts = options.batchInserts,
speedy = options.speedy;
var tag = null;
var sheet = null;
var supportsConstructableStylesheets = false;
if (typeof document !== "undefined") {
supportsConstructableStylesheets = "CSSStyleSheet" in window && "replace" in CSSStyleSheet.prototype && "adoptedStyleSheets" in Document.prototype;
if (!supportsConstructableStylesheets) {
tag = document.createElement("style");
tag.setAttribute("data-dash", key);
if (nonce) {
tag.setAttribute("nonce", nonce);
}
container === null || container === void 0 ? void 0 : container.appendChild(tag);
sheet = tag.sheet;
/* istanbul ignore next */
if (!sheet) {
// this weirdness brought to you by firefox
var _document = document,
styleSheets = _document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
if (styleSheets[i].ownerNode === tag) {
sheet = styleSheets[i];
break;
}
}
}
} else {
sheet = new CSSStyleSheet();
document.adoptedStyleSheets = [].concat(document.adoptedStyleSheets, [sheet]);
}
}
function _ref(s) {
return s !== sheet;
}
return {
key: key,
nonce: nonce,
container: container,
speedy: speedy,
insert: function insert(rule) {
/* istanbul ignore next */
var insertRule = function insertRule() {
try {
// this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
if (typeof process !== "undefined" && "production" !== "production") {
console.warn('There was a problem inserting the following rule: "' + rule + '"', e);
}
}
};
if (batchInserts) {
tasks.push(insertRule);
scheduleFlush();
} else {
insertRule();
}
},
flush: function flush() {
if (tag && tag.parentNode) {
tag.parentNode.removeChild(tag);
} else if (supportsConstructableStylesheets) {
document.adoptedStyleSheets = document.adoptedStyleSheets.filter(_ref);
}
}
};
}
var scheduled = false;
var tasks = [];
function _ref2() {
var task;
while (task = tasks.shift()) {
task();
}
scheduled = false;
if (tasks.length) {
scheduleFlush();
}
}
function scheduleFlush() {
if (!scheduled) {
scheduled = true;
requestAnimationFrame(_ref2);
}
}
//
// Stylis plugins
var RULE_DELIMITER = "/*|*/";
var RULE_NEEDLE = RULE_DELIMITER + "}";
function _ref3$1(block) {
block && Sheet.x.insert(block + "}");
}
function ruleSheet( // https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
context, content, selectors, parents, line, column, length, ns, depth, at) {
// selector
if (context === 2) {
if (ns === 0) return content + RULE_DELIMITER;
} // at-rule
else if (context === 3) {
// @font-face, @page
if (ns === 102 || ns === 112) {
Sheet.x.insert(selectors[0] + content);
return "";
} else {
/* istanbul ignore next */
return content + (at === 0 ? RULE_DELIMITER : "");
}
} else if (context === -2) {
content.split(RULE_NEEDLE).forEach(_ref3$1);
}
}
var Sheet = {
x: {
insert: noop
}
};
/**
* A factory function that returns a new `styles` instance with
* your custom configuration options.
*
* @param options - Configuration options
*/
function _ref3(curr, arg) {
function _ref2(k) {
return typeof arg[k] === "number" || arg[k];
}
if (typeof arg === "string") {
curr += "-" + arg;
} else if (typeof arg === "object") {
var keys = Object.keys(arg).filter(_ref2);
if (keys.length) {
curr += "-" + keys.join("-");
}
}
return curr;
}
function _label(args) {
// add helpful labels to the name in development
return [].concat(args).reduce(_ref3, "").replace(/[^\w-]/g, "-");
}
function _ref4(e) {
return e();
}
function _ref5(_theme) {
function theme(_x) {
return _theme.apply(this, arguments);
}
theme.toString = function () {
return _theme.toString();
};
return theme;
}
function createStyles(options) {
if (options === void 0) {
options = {};
}
var dash = options.dash || createDash();
var key = dash.key,
insert = dash.insert,
sheets = dash.sheets;
var themes = {};
var tokens = {};
var hash$1 = safeHash(key, options.hash || hash);
var label; // explicit here on purpose so it's not in every test
/* istanbul ignore next */
if (typeof process !== "undefined" && "production" === "development") {
label = _label;
}
var styles = {
variants: function variants(styleMap) {
var compiledStyleMap = {};
var styleKey;
/* istanbul ignore next */
for (styleKey in styleMap) {
compiledStyleMap[styleKey] = compileStyles(styleMap[styleKey], tokens);
}
var defaultStyles = compiledStyleMap.default || ""; // style('text', {})
function style() {
// eslint-disable-next-line prefer-spread
var css_ = css.apply(null, arguments);
if (!css_) return "";
var name = hash$1(css_);
/* istanbul ignore next */
if (label) name += label(arguments);
var className = key + "-" + name;
insert(name, "." + className, css_);
return className;
}
function css() {
var args = arguments;
var numArgs = args.length;
if (numArgs === 1 && typeof args[0] !== "object") {
return defaultStyles + (compiledStyleMap[args[0]] || "");
} else if (numArgs > 0) {
var nextStyles = defaultStyles;
for (var i = 0; i < numArgs; i++) {
var arg = args[i];
if (typeof arg !== "object") {
nextStyles += compiledStyleMap[arg] || "";
} else if (arg !== null) {
for (var _key in arg) {
if (arg[_key]) nextStyles += compiledStyleMap[_key] || "";
}
}
}
return nextStyles;
}
return defaultStyles;
}
style.styles = styleMap;
style.css = css;
return style;
},
one: function one() {
var one = compileStyles(compileLiterals(arguments), tokens);
var name = hash$1(one);
var className = key + "-" + name;
var callback = function callback(createClassName) {
if (!createClassName && createClassName !== void 0) return "";
insert(name, "." + className, one);
return className;
};
callback.css = function (createCss) {
return !createCss && createCss !== void 0 ? "" : one;
};
return callback;
},
cls: function cls() {
var css = compileStyles(compileLiterals(arguments), tokens);
var name = hash$1(css);
var className = key + "-" + name;
insert(name, "." + className, css);
return className;
},
lazy: function lazy(lazyFn) {
var cache = new Map();
function css(value) {
if (value === void 0) return "";
var key = typeof value === "object" ? JSON.stringify(value) : value;
var css = cache.get(key);
if (css === void 0) {
css = compileStyles(lazyFn(value), tokens);
cache.set(key, css);
}
return css;
}
var lazyStyle = function lazyStyle(value) {
var css_ = css(value);
if (!css_) return "";
var name = hash$1(css_);
var className = key + "-" + name;
insert(name, "." + className, css_);
return className;
};
lazyStyle.css = css;
return lazyStyle;
},
join: function join() {
var _ref;
var css = (_ref = "").concat.apply(_ref, Array.prototype.slice.call(arguments));
var name = hash$1(css);
var className = key + "-" + name;
insert(name, "." + className, css);
return className;
},
keyframes: function keyframes() {
var css = compileStyles(compileLiterals(arguments), tokens);
var name = hash$1(css);
var animationName = key + "-" + name; // Adding to a cached sheet here rather than the default sheet because
// we want this to persist between `clearCache()` calls.
insert(name, "", "@keyframes " + animationName + "{" + css + "}", sheets.add(name));
return animationName;
},
insertGlobal: function insertGlobal() {
var css = compileStyles(compileLiterals(arguments), tokens);
if (!css) return noop;
var name = hash$1(css);
insert(name, "", css, sheets.add(name));
return function () {
!sheets.delete(name) && dash.inserted.delete(name);
};
},
insertTokens: function insertTokens(nextTokens, selector) {
if (selector === void 0) {
selector = ":root";
}
var _serializeTokens = serializeTokens(nextTokens, options.mangleTokens),
css = _serializeTokens.css,
vars = _serializeTokens.vars;
if (!css) return noop;
mergeTokens(tokens, vars);
return styles.insertGlobal(selector + "{" + css + "}");
},
insertThemes: function insertThemes(nextThemes) {
var flush = [];
for (var _name in nextThemes) {
flush.push(styles.insertTokens(themes[_name] = themes[_name] === void 0 ? // @ts-expect-error
nextThemes[_name] : mergeTokens(themes[_name], nextThemes[_name]), "." + styles.theme(_name)));
}
return function () {
flush.forEach(_ref4);
};
},
theme: _ref5(function (theme) {
return key + "-" + theme + "-theme";
}),
dash: dash,
hash: hash$1,
tokens: tokens
};
Object.defineProperty(styles, "tokens", {
get: function get() {
return tokens;
},
configurable: false
});
styles.insertTokens(options.tokens || emptyObj);
styles.insertThemes(options.themes || emptyObj);
return typeof process !== "undefined" && "production" !== "production" ? Object.freeze(styles) : styles;
}
var emptyObj = {};
/**
* A utility function that will compile style objects and callbacks into CSS strings.
*
* @param styles - A style callback, object, or string
* @param tokens - A map of CSS tokens for style callbacks
*/
function compileStyles(styles, tokens) {
var value = typeof styles === "function" ? styles(tokens) : styles;
return typeof value === "object" && value !== null ? stringifyStyleObject(value) : value || "";
}
function stringifyStyleObject(object) {
var string = "";
for (var key in object) {
var _value = object[key];
if (typeof _value !== "object") {
var isCustom = key.charCodeAt(1) === 45;
string += (isCustom ? key : cssCase(key)) + ":" + (typeof _value !== "number" || unitless[key] || _value === 0 || isCustom ? _value : _value + "px") + ";";
} else {
string += key + "{" + stringifyStyleObject(_value) + "}";
}
}
return string;
}
function compileLiterals(args) {
var literals = args[0];
return Array.isArray(literals) ? literals.reduce(function (curr, next, i) {
return curr + next + (args[i + 1] || "");
}, "") : literals;
} //
// Variable and theme serialization
var cssCaseRe = /[A-Z]|^ms/g;
var cssDisallowedRe = /[^\w-]/g; // We cache the case transformations below because the cache
// will grow to a predictable size and the regex is slowwwww
var caseCache = {};
function cssCase(string) {
var _caseCache$string;
return (_caseCache$string = caseCache[string]) !== null && _caseCache$string !== void 0 ? _caseCache$string : caseCache[string] = string.replace(cssCaseRe, "-$&").toLowerCase();
}
function serializeTokens(tokens, mangle, names) {
if (names === void 0) {
names = [];
}
var vars = {};
var css = "";
for (var key in tokens) {
var _value2 = tokens[key];
if (typeof _value2 === "object") {
var result = serializeTokens(_value2, mangle, names.concat(key));
vars[key] = result.vars;
css += result.css;
} else {
var _name2 = cssCase(names.length > 0 ? names.join("-") + "-" + key : key).replace(cssDisallowedRe, "-");
vars[key] = "var(" + (_name2 = "--" + (mangle === true || mangle && !mangle[_name2] ? mangled(_name2) : _name2)) + ")";
css += _name2 + ":" + _value2 + ";";
}
}
return {
vars: vars,
css: css
};
}
var mangled = /*#__PURE__*/safeHash("", hash);
function mergeTokens(target, source) {
for (var key in source) {
var _value3 = source[key];
target[key] = typeof _value3 === "object" ? mergeTokens(target[key] || {}, _value3) : _value3;
}
return target;
}
/**
* A utility function that will convert a camel-cased, dot-notation string
* into a dash-cased CSS property variable.
*
* @param path - A dot-notation string that represents the path to a value
*/
function pathToToken(path) {
return "var(--" + path.replace(/\./g, "-").replace(cssCaseRe, "-$&").toLowerCase() + ")";
}
//
// Creates and exports default `styles` instance
var styles = /*#__PURE__*/createStyles();
/**
* These are CSS variable type definitions that tell functions like
* style callbacks which tokens are available. They can be defined
* globally in your application like so:
*
* @example
* declare module '＠dash-ui/styles' {
* export interface DashTokens {
* color: {
* red: string
* }
* }
* }
*
* They can also be created automatically when you use a `createStyles()` factory.
* @example
* const styles = createStyles({
* tokens: {
* foo: 'bar',
* bar: 'baz'
* }
* })
*
* // "foo" | "bar"
* type Level1VariableNames = keyof DashTokens
*/
exports.compileStyles = compileStyles;
exports.createDash = createDash;
exports.createStyles = createStyles;
exports.hash = hash;
exports.pathToToken = pathToToken;
exports.styleSheet = styleSheet;
exports.styles = styles;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=dash.dev.js.map