@twind/core
Advanced tools
@twind/core - npm Package Compare versions
Comparing version 1.0.0-next.13 to 1.0.0-next.14
| # @twind/core | ||
| ## 1.0.0-next.14 | ||
| ### Patch Changes | ||
| - be less strict about interpolations values ([#245](https://github.com/tw-in-js/twind/pull/245)) | ||
| * golf: refactor sheets — always use a dedicated style element ([#245](https://github.com/tw-in-js/twind/pull/245)) | ||
| - support any target for stringify ([#245](https://github.com/tw-in-js/twind/pull/245)) | ||
| * add `stringify` helper to convert as `sheet.target` to a string; this makes `extract` isomorphic ([#245](https://github.com/tw-in-js/twind/pull/245)) | ||
| - use `data-twind` to locate SSR style element ([#245](https://github.com/tw-in-js/twind/pull/245)) | ||
| ## 1.0.0-next.13 | ||
@@ -4,0 +18,0 @@ |
@@ -211,3 +211,3 @@ import * as CSS$1 from 'csstype'; | ||
| * ```js | ||
| * import { twind, virtual, consume } from '@twind/core' | ||
| * import { twind, virtual, consume, stringify } from '@twind/core' | ||
| * | ||
@@ -218,3 +218,3 @@ * // can be re-used | ||
| * function render() { | ||
| * const html = app() | ||
| * const html = renderApp() | ||
| * | ||
@@ -228,6 +228,6 @@ * // clear all styles | ||
| * // create CSS | ||
| * const css = tw.target.join('') | ||
| * const css = stringify(tw.target) | ||
| * | ||
| * // inject as last element into the head | ||
| * return markup.replace('</head>', `<style id="tw">${css}</style></head>`) | ||
| * return markup.replace('</head>', `<style data-twind>${css}</style></head>`) | ||
| * } | ||
@@ -242,3 +242,3 @@ * ``` | ||
| declare type CSSValue = string | number | Falsey; | ||
| declare type CSSValue = string | number | bigint | Falsey; | ||
| declare function css(strings: TemplateStringsArray, ...interpolations: readonly CSSValue[]): string; | ||
@@ -263,2 +263,4 @@ declare function css(style: CSSObject | string): string; | ||
| * | ||
| * **Note**: This {@link Twind.clear clears} the Twind instance before processing the HTML. | ||
| * | ||
| * 1. parse the markup and process element classes with the provided Twind instance | ||
@@ -275,6 +277,6 @@ * 2. update the class attributes _if_ necessary | ||
| * function render() { | ||
| * const { html, css } = extract(app(), tw) | ||
| * const { html, css } = extract(renderApp(), tw) | ||
| * | ||
| * // inject as last element into the head | ||
| * return html.replace('</head>', `<style id="tw">${css}</style></head>`) | ||
| * return html.replace('</head>', `<style data-twind>${css}</style></head>`) | ||
| * } | ||
@@ -287,3 +289,3 @@ * ``` | ||
| */ | ||
| declare function extract<Theme extends BaseTheme = BaseTheme>(html: string, tw: Twind<Theme, string[]>): ExtractResult; | ||
| declare function extract(html: string, tw: Twind): ExtractResult; | ||
@@ -440,5 +442,11 @@ declare function observe<Theme extends BaseTheme = BaseTheme, Target = unknown>(tw: Twind<Theme, Target>, target?: false | HTMLElement): Twind<Theme, Target>; | ||
| declare function cssom(sheet?: CSSStyleSheet): Sheet<CSSStyleSheet>; | ||
| declare function dom(element?: HTMLStyleElement): Sheet<HTMLStyleElement>; | ||
| declare global { | ||
| interface Window { | ||
| tw?: HTMLStyleElement; | ||
| } | ||
| } | ||
| declare function cssom(target?: CSSStyleSheet): Sheet<CSSStyleSheet>; | ||
| declare function dom(target?: HTMLStyleElement): Sheet<HTMLStyleElement>; | ||
| declare function virtual(target?: string[]): Sheet<string[]>; | ||
| declare function stringify(target: unknown): string; | ||
@@ -450,3 +458,3 @@ declare const escape: typeof CSS.escape; | ||
| export { BaseProperties, BaseTheme, CSSBase, CSSFontFace, CSSNested, CSSObject, CSSProperties, CSSValue, Class, ClassObject, ColorFromThemeOptions, ColorFromThemeValue, ColorFunction, ColorFunctionOptions, ColorRecord, ColorValue, Context, CustomProperties, DefaultVariants, ExtractResult, ExtractThemes, Falsey, FilterByThemeValue, HashFunction, KebabCase, MatchConverter, MatchResult, MaybeArray, MaybeColorValue, MaybeThunk, MorphVariant, PartialTheme, Preflight, PreflightThunk, Preset, PresetThunk, PropsOf, Rule, RuleResolver, RuleResult, ScreenValue, Sheet, Shortcut, ShortcutFunction, ShortcutResolver, Shortcuts, StrictMorphVariant, StringifyDeclaration, Style, StyleConfig, StyleFunction, StyleProps, StyleToken, StyleTokenValue, ThemeConfig, ThemeFunction, ThemeMatchConverter, ThemeMatchResult, ThemeRuleResolver, ThemeSection, ThemeSectionResolver, ThemeSectionResolverContext, ThemeValue, Twind, TwindConfig, TwindPresetConfig, TwindRule, TwindUserConfig, TypedAtRules, Variant, VariantResolver, VariantResult, VariantsProps, When, arbitrary, asArray, colorFromTheme, consume, css, cssom, cx, defineConfig, dom, escape, extract, fromTheme, hash, mql, observe, shortcut, style, toColorValue, twind, virtual }; | ||
| export { BaseProperties, BaseTheme, CSSBase, CSSFontFace, CSSNested, CSSObject, CSSProperties, CSSValue, Class, ClassObject, ColorFromThemeOptions, ColorFromThemeValue, ColorFunction, ColorFunctionOptions, ColorRecord, ColorValue, Context, CustomProperties, DefaultVariants, ExtractResult, ExtractThemes, Falsey, FilterByThemeValue, HashFunction, KebabCase, MatchConverter, MatchResult, MaybeArray, MaybeColorValue, MaybeThunk, MorphVariant, PartialTheme, Preflight, PreflightThunk, Preset, PresetThunk, PropsOf, Rule, RuleResolver, RuleResult, ScreenValue, Sheet, Shortcut, ShortcutFunction, ShortcutResolver, Shortcuts, StrictMorphVariant, StringifyDeclaration, Style, StyleConfig, StyleFunction, StyleProps, StyleToken, StyleTokenValue, ThemeConfig, ThemeFunction, ThemeMatchConverter, ThemeMatchResult, ThemeRuleResolver, ThemeSection, ThemeSectionResolver, ThemeSectionResolverContext, ThemeValue, Twind, TwindConfig, TwindPresetConfig, TwindRule, TwindUserConfig, TypedAtRules, Variant, VariantResolver, VariantResult, VariantsProps, When, arbitrary, asArray, colorFromTheme, consume, css, cssom, cx, defineConfig, dom, escape, extract, fromTheme, hash, mql, observe, shortcut, stringify, style, toColorValue, twind, virtual }; | ||
| //# sourceMappingURL=core.d.ts.map |
@@ -39,3 +39,3 @@ function parseColorComponent(chars, factor) { | ||
| // eslint-disable-next-line @typescript-eslint/restrict-plus-operands | ||
| return a !== b && '' + a.split(' ').sort() !== '' + b.split(' ').sort(); | ||
| return a != b && '' + a.split(' ').sort() != '' + b.split(' ').sort(); | ||
| } | ||
@@ -51,3 +51,3 @@ | ||
| * ```js | ||
| * import { twind, virtual, consume } from '@twind/core' | ||
| * import { twind, virtual, consume, stringify } from '@twind/core' | ||
| * | ||
@@ -58,3 +58,3 @@ * // can be re-used | ||
| * function render() { | ||
| * const html = app() | ||
| * const html = renderApp() | ||
| * | ||
@@ -68,6 +68,6 @@ * // clear all styles | ||
| * // create CSS | ||
| * const css = tw.target.join('') | ||
| * const css = stringify(tw.target) | ||
| * | ||
| * // inject as last element into the head | ||
| * return markup.replace('</head>', `<style id="tw">${css}</style></head>`) | ||
| * return markup.replace('</head>', `<style data-twind>${css}</style></head>`) | ||
| * } | ||
@@ -451,3 +451,3 @@ * ``` | ||
| function stringify(rule) { | ||
| function stringify$1(rule) { | ||
| if (rule.d) { | ||
@@ -666,3 +666,3 @@ const groups = []; | ||
| } | ||
| return a.p - b.p || a.o - b.o || collator.compare('' + a.r, '' + b.r) || collator.compare(a.n, b.n); | ||
| return a.p - b.p || a.o - b.o || collator.compare(a.r, b.r) || collator.compare(a.n, b.n); | ||
| } | ||
@@ -684,8 +684,6 @@ | ||
| function translate$(rule1, context, precedence, conditions, important) { | ||
| if (important && !rule1.i) { | ||
| rule1 = { | ||
| ...rule1, | ||
| i: important | ||
| }; | ||
| } | ||
| rule1 = { | ||
| ...rule1, | ||
| i: rule1.i || important | ||
| }; | ||
| const resolved = resolve(rule1, context); | ||
@@ -795,3 +793,3 @@ if (!resolved) { | ||
| p: Layer.d | ||
| }, context).map(stringify).join('') | ||
| }, context).map(stringify$1).join('') | ||
| }); | ||
@@ -858,7 +856,4 @@ continue; | ||
| } | ||
| if (name) { | ||
| name = context.h(name); | ||
| } | ||
| rules.unshift({ | ||
| n: name, | ||
| n: name && context.h(name), | ||
| p: precedence, | ||
@@ -891,3 +886,3 @@ o: // number of declarations (descending) | ||
| function css(strings, ...interpolations) { | ||
| const { label ='css' , ...ast } = Array.isArray(strings) ? astish(interleave(strings, interpolations, (interpolation)=>typeof interpolation == 'string' || typeof interpolation == 'number' ? interpolation : '' | ||
| const { label ='css' , ...ast } = Array.isArray(strings) ? astish(interleave(strings, interpolations, (interpolation)=>interpolation != null && typeof interpolation != 'boolean' ? interpolation : '' | ||
| )) : typeof strings == 'string' ? astish(strings) : strings; | ||
@@ -929,13 +924,15 @@ const className = label + hash(JSON.stringify(ast)); | ||
| let tmp; | ||
| if (typeof value == 'string' || typeof value == 'number') { | ||
| if (value && typeof value == 'object') { | ||
| if (Array.isArray(value)) { | ||
| if (tmp = interpolate(value[0], value.slice(1))) { | ||
| result += ' ' + tmp; | ||
| } | ||
| } else { | ||
| for(const key in value){ | ||
| if (value[key]) result += ' ' + key; | ||
| } | ||
| } | ||
| } else if (value != null && typeof value != 'boolean') { | ||
| // eslint-disable-next-line @typescript-eslint/restrict-plus-operands | ||
| result += ' ' + value; | ||
| } else if (Array.isArray(value)) { | ||
| if (tmp = interpolate(value[0], value.slice(1))) { | ||
| result += ' ' + tmp; | ||
| } | ||
| } else { | ||
| for(const key in value){ | ||
| if (value[key]) result += ' ' + key; | ||
| } | ||
| } | ||
@@ -1005,5 +1002,84 @@ return result; | ||
| function createStyleElement(// 1. look for existing style element — usually from SSR | ||
| // 2. append to document.head — this assumes that document.head has at least one child node | ||
| referenceNode = document.querySelector('style[data-twind]') || document.head.lastChild) { | ||
| // insert new style element after existing element which allows to override styles | ||
| return referenceNode.parentNode.insertBefore(document.createElement('style'), referenceNode.nextSibling); | ||
| } | ||
| function cssom(target = createStyleElement().sheet) { | ||
| return { | ||
| target, | ||
| clear () { | ||
| // remove all added rules | ||
| for(let index = target.cssRules.length; index--;){ | ||
| target.deleteRule(index); | ||
| } | ||
| }, | ||
| destroy () { | ||
| target.ownerNode.remove(); | ||
| }, | ||
| insert (css, index) { | ||
| try { | ||
| // Insert | ||
| target.insertRule(css, index); | ||
| } catch (error) { | ||
| // Empty rule to keep index valid — not using `*{}` as that would show up in all rules (DX) | ||
| target.insertRule(':root{}', index); | ||
| // Some thrown errors are because of specific pseudo classes | ||
| // lets filter them to prevent unnecessary warnings | ||
| // ::-moz-focus-inner | ||
| // :-moz-focusring | ||
| if (!/:-[mwo]/.test(css)) { | ||
| console.warn(error, css); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| function dom(target = createStyleElement()) { | ||
| return { | ||
| target, | ||
| clear () { | ||
| // remove all added nodes | ||
| while(target.childNodes.length){ | ||
| target.removeChild(target.lastChild); | ||
| } | ||
| }, | ||
| destroy () { | ||
| target.remove(); | ||
| }, | ||
| insert (css, index) { | ||
| target.insertBefore(document.createTextNode(css), target.childNodes[index] || null); | ||
| } | ||
| }; | ||
| } | ||
| function virtual(target = []) { | ||
| return { | ||
| target, | ||
| clear () { | ||
| target.length = 0; | ||
| }, | ||
| destroy () { | ||
| this.clear(); | ||
| }, | ||
| insert (css, index) { | ||
| target.splice(index, 0, css); | ||
| } | ||
| }; | ||
| } | ||
| function stringify(target) { | ||
| // string[] | CSSStyleSheet | HTMLStyleElement | ||
| if (target.cssRules) { | ||
| target = Array.from(target.cssRules, (rule)=>rule.cssText | ||
| ); | ||
| } | ||
| return target.innerHTML ?? // eslint-disable-next-line @typescript-eslint/restrict-plus-operands | ||
| (Array.isArray(target) ? target.join('') : '' + target); | ||
| } | ||
| /** | ||
| * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) | ||
| * | ||
| * **Note**: This {@link Twind.clear clears} the Twind instance before processing the HTML. | ||
| * | ||
| * 1. parse the markup and process element classes with the provided Twind instance | ||
@@ -1020,6 +1096,6 @@ * 2. update the class attributes _if_ necessary | ||
| * function render() { | ||
| * const { html, css } = extract(app(), tw) | ||
| * const { html, css } = extract(renderApp(), tw) | ||
| * | ||
| * // inject as last element into the head | ||
| * return html.replace('</head>', `<style id="tw">${css}</style></head>`) | ||
| * return html.replace('</head>', `<style data-twind>${css}</style></head>`) | ||
| * } | ||
@@ -1035,3 +1111,3 @@ * ``` | ||
| html: consume(html, tw), | ||
| css: tw.target.join('') | ||
| css: stringify(tw.target) | ||
| }; | ||
@@ -1069,5 +1145,5 @@ } | ||
| const tokens = target?.getAttribute?.('class'); | ||
| const className = tokens && tw(tokens); | ||
| let className; | ||
| // try do keep classNames unmodified | ||
| if (tokens && changed(tokens, className)) { | ||
| if (tokens && changed(tokens, className = tw(tokens))) { | ||
| target.setAttribute('class', className); | ||
@@ -1101,15 +1177,9 @@ } | ||
| return (match, context)=>{ | ||
| const themeSection = camelize(section1 || (match[1][0] == '-' ? match[1].slice(1) : match[1])); | ||
| let value = context.theme(themeSection, match.$$); | ||
| const themeSection = camelize(section1 || match[1]); | ||
| // TODO suppport https://github.com/tailwindlabs/tailwindcss/pull/4348 | ||
| if (value == null) { | ||
| /** Arbitrary lookup type */ // https://github.com/tailwindlabs/tailwindcss/blob/875c850b37a57bc651e1fed91e3d89af11bdc79f/src/util/pluginUtils.js#L163 | ||
| // type?: 'lookup' | 'color' | 'line-width' | 'length' | 'any' | 'shadow' | ||
| value = arbitrary(match.$$, themeSection, context); | ||
| } | ||
| if (match.input[0] == '-' && (typeof value == 'string' || typeof value == 'number')) { | ||
| value = `calc(${value} * -1)`; | ||
| } | ||
| const value = context.theme(themeSection, match.$$) ?? /** Arbitrary lookup type */ // https://github.com/tailwindlabs/tailwindcss/blob/875c850b37a57bc651e1fed91e3d89af11bdc79f/src/util/pluginUtils.js#L163 | ||
| // type?: 'lookup' | 'color' | 'line-width' | 'length' | 'any' | 'shadow' | ||
| arbitrary(match.$$, themeSection, context); | ||
| if (value != null) { | ||
| match._ = value; | ||
| match._ = match.input[0] == '-' ? `calc(${value} * -1)` : value; | ||
| return factory(match, context, themeSection); | ||
@@ -1143,6 +1213,6 @@ } | ||
| }); | ||
| if (typeof color != 'string') { | ||
| console.warn(`Invalid color ${colorMatch} (from ${match.input}):`, color); | ||
| return; | ||
| } | ||
| // if (typeof color != 'string') { | ||
| // console.warn(`Invalid color ${colorMatch} (from ${match.input}):`, color) | ||
| // return | ||
| // } | ||
| if (resolve) { | ||
@@ -1380,3 +1450,3 @@ match._ = { | ||
| e: escape, | ||
| h: typeof hash$1 == 'function' ? hash$1 : hash$1 === true ? hash : (value)=>value | ||
| h: typeof hash$1 == 'function' ? hash$1 : hash$1 ? hash : (value)=>value | ||
| , | ||
@@ -1408,5 +1478,3 @@ s (property, value) { | ||
| const resolved = resolver(value, context); | ||
| if (resolved) { | ||
| return resolved; | ||
| } | ||
| if (resolved) return resolved; | ||
| } | ||
@@ -1494,9 +1562,7 @@ } | ||
| function insert(rule) { | ||
| if (rule.n) { | ||
| rule = { | ||
| ...rule, | ||
| n: context.h(rule.n) | ||
| }; | ||
| } | ||
| const css = stringify(rule); | ||
| rule = { | ||
| ...rule, | ||
| n: rule.n && context.h(rule.n) | ||
| }; | ||
| const css = stringify$1(rule); | ||
| // If not already inserted | ||
@@ -1516,4 +1582,4 @@ if (css && !insertedRules.has(css)) { | ||
| return Object.defineProperties(function tw(strings, ...interpolations) { | ||
| if (!cache.size && config.preflight) { | ||
| for (let preflight of config.preflight){ | ||
| if (!cache.size) { | ||
| for (let preflight of asArray(config.preflight)){ | ||
| if (typeof preflight == 'function') { | ||
@@ -1532,8 +1598,3 @@ preflight = preflight(context); | ||
| for (const rule of translate(parse(tokens), context)){ | ||
| const name = insert(rule); | ||
| if (rule.c) { | ||
| rule.c.split(' ').forEach((x)=>classNames.add(x) | ||
| ); | ||
| } | ||
| if (name) classNames.add(name); | ||
| classNames.add(rule.c).add(insert(rule)); | ||
| } | ||
@@ -1543,3 +1604,3 @@ // TODO try do keep classNames unmodified or same order | ||
| ...classNames | ||
| ].join(' '); | ||
| ].filter(Boolean).join(' '); | ||
| // Remember the generated class name | ||
@@ -1567,101 +1628,3 @@ cache.set(tokens, className).set(className, className); | ||
| function createStyleElement(parent = document.head) { | ||
| // Find existing or create a new one | ||
| const element = parent.querySelector('#tw') || document.createElement('style'); | ||
| // mark as twind stylesheet | ||
| element.id = 'tw'; | ||
| parent.append(element); | ||
| return element; | ||
| } | ||
| function cssom(sheet) { | ||
| let offset = sheet?.cssRules.length || 0; | ||
| return { | ||
| get target () { | ||
| if (!sheet) { | ||
| sheet = createStyleElement().sheet; | ||
| offset = 0; | ||
| } | ||
| return sheet; | ||
| }, | ||
| clear () { | ||
| // remove all added rules | ||
| if (sheet) { | ||
| while(sheet.cssRules.length > offset){ | ||
| sheet.deleteRule(offset); | ||
| } | ||
| } | ||
| }, | ||
| destroy () { | ||
| if (offset) { | ||
| this.clear(); | ||
| } else { | ||
| sheet?.ownerNode?.remove(); | ||
| } | ||
| }, | ||
| insert (css, index) { | ||
| try { | ||
| // Insert | ||
| this.target.insertRule(css, offset + index); | ||
| } catch (error) { | ||
| // Empty rule to keep index valid | ||
| this.target.insertRule('*{}', offset + index); | ||
| // Some thrown errors are because of specific pseudo classes | ||
| // lets filter them to prevent unnecessary warnings | ||
| // ::-moz-focus-inner | ||
| // :-moz-focusring | ||
| if (!/:-[mwo]/.test(css)) { | ||
| // TODO log css | ||
| console.warn(error); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| function dom(element) { | ||
| let offset = element?.childNodes.length || 0; | ||
| return { | ||
| get target () { | ||
| if (!element) { | ||
| element = createStyleElement(); | ||
| offset = 0; | ||
| } | ||
| return element; | ||
| }, | ||
| clear () { | ||
| // remove all added nodes | ||
| if (element) { | ||
| while(element.childNodes.length > offset){ | ||
| element.removeChild(element.lastChild); | ||
| } | ||
| } | ||
| }, | ||
| destroy () { | ||
| if (offset) { | ||
| this.clear(); | ||
| } else { | ||
| element?.remove(); | ||
| } | ||
| }, | ||
| insert (css, index) { | ||
| this.target.insertBefore(document.createTextNode(css), this.target.childNodes[offset + index] || null); | ||
| } | ||
| }; | ||
| } | ||
| function virtual(target = []) { | ||
| const offset = target.length; | ||
| return { | ||
| target, | ||
| clear () { | ||
| target.length = offset; | ||
| }, | ||
| destroy () { | ||
| this.clear(); | ||
| }, | ||
| insert (css, index) { | ||
| target.splice(offset + index, 0, css); | ||
| } | ||
| }; | ||
| } | ||
| export { arbitrary, asArray, colorFromTheme, consume, css, cssom, cx, defineConfig, dom, escape, extract, fromTheme, hash, mql, observe, shortcut, style, toColorValue, twind, virtual }; | ||
| export { arbitrary, asArray, colorFromTheme, consume, css, cssom, cx, defineConfig, dom, escape, extract, fromTheme, hash, mql, observe, shortcut, stringify, style, toColorValue, twind, virtual }; | ||
| //# sourceMappingURL=core.esnext.js.map |
@@ -1,1 +0,1 @@ | ||
| const twind_core=function(a){"use strict";function b(a,b){return Math.round(parseInt(a,16)*b)}function c(a,c={}){if("function"==typeof a)return a(c);const{opacityValue:d="1",opacityVariable:e}=c,f=e?`var(${e})`:d;if("1"==f)return a;if("0"==f)return"#0000";if("#"==a[0]&&(4==a.length||7==a.length)){const g=(a.length-1)/3,h=[17,1,0.062272][g-1];return`rgba(${[b(a.substr(1,g),h),b(a.substr(1+g,g),h),b(a.substr(1+2*g,g),h),f,]})`}return a}function d(a,b){return a!==b&&""+a.split(" ").sort()!=""+b.split(" ").sort()}function e(a,b){let c="",e=0;return f(a,(f,g,h)=>{const i=a.slice(f,g),j=b(i);d(i,j)&&(h=h?"":"\"",c+=a.slice(e,f)+h+j+h,e=g)}),c+a.slice(e,a.length)}function f(a,b){let c=1,d=0,e="",f="",g="";const h=a=>{5==c&&"class"==g&&b(d,a,e)};for(let i=0;i<a.length;i++)(f=a[i],1==c)?"<"==f&&(c="!--"==a.substr(i+1,3)?4:3):4==c?">"==f&&"--"==a.slice(i-2,i)&&(c=1):e?f==e&&"\\"!=a[i-1]&&(h(i),c=2,e=""):"\""==f||"'"==f?(e=f,d+=1):">"==f?(h(i),c=1):c&&("="==f?(g=a.slice(d,i),c=5,d=i+1):"/"==f&&(c<5||">"==a[i+1])?(h(i),c=0):/\s/.test(f)&&(h(i),c=2,d=i+1))}function g(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function h(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){g(a,b,c[b])})}return a}function i(a,b){if(null==a)return{};var c,d,e=function(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],b.indexOf(c)>=0||(e[c]=a[c]);return e}(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],!(b.indexOf(c)>=0)&&Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}const j=new Map();function k(a,b){return j.set(a,b),a}const l="undefined"!=typeof CSS&&CSS.escape||(a=>a.replace(/[!"'`*+.,;:\\/<=>?@#$%&^|~()[\]{}]/g,"\\$&").replace(/^\d/,"\\3$& "));function m(a){for(var b=9,c=a.length;c--;)b=Math.imul(b^a.charCodeAt(c),1597334677);return"#"+((b^b>>>9)>>>0).toString(36)}function n(a,b="@media "){return b+o(a).map(a=>("string"==typeof a&&(a={min:a}),a.raw||Object.keys(a).map(b=>`(${b}-width:${a[b]})`).join(" and "))).join(",")}function o(a=[]){return Array.isArray(a)?a:null==a?[]:[a]}function p(a){return[...a.v,(a.i?"!":"")+a.n].join(":")}const q={d:0,b:134217728,c:268435456,s:671088640,u:805306368,o:939524096};function r(a,b){return a& ~q.o|b}function s(a){var b;return(null===(b=a.match(/[-=:;]/g))|| void 0===b?void 0:b.length)||0}function t(a){return Math.min(/(?:^|width[^\d]+)(\d+(?:.\d+)?)(p)?/.test(a)?+RegExp.$1/(RegExp.$2?15:1)/10:0,15)<<22|Math.min(s(a),15)<<18}const u=["rst-c","st-ch","h-chi","y-lin","nk","sited","ecked","pty","ad-on","cus-w","ver","cus","cus-v","tive","sable","tiona","quire",];function v(a){return 1<< ~(/:([a-z-]+)/.test(a)&& ~u.indexOf(RegExp.$1.slice(2,7))|| -18)}function w(a){return"-"==a[0]?0:s(a)+(/^(?:(border-(?!w|c|sty)|[tlbr].{2,4}m?$|c.{7}$)|([fl].{5}l|g.{8}$|pl))/.test(a)?+!!RegExp.$1||-!!RegExp.$2:0)+1}function x({n:a,i:b,v:c=[]},d,e,f){for(const g of(a&&(a=p({n:a,i:b,v:c})),f=[...o(f)],c)){const h=d.theme("screens",g),i=h&&n(h)||d.v(g);f.push(i),e|=h?67108864|t(i):"dark"==g?1073741824:"@"==i[0]?t(i):v(i)}return{n:a,p:e,r:f,i:b}}function y(a){if(a.d){const b=[],c=a.r["reduce"+(a.n?"Right":"")]((a,c)=>"@"==c[0]?(b.unshift(c),a):a.replace(/^$| *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g,(a,b=a,d="")=>c.replace(/ *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g,(a,c,d="")=>c.replace(/&/g,b)+d)+d),a.n?"."+l(a.n):"");return c&&b.push(c),b.reduceRight((a,b)=>b+"{"+a+"}",a.d)}}function z(a,b=" "){return a.map(a=>Array.isArray(a)?(","==b?"":"~(")+z(a,",")+(","==b?"":")"):p(a)).join(b)}function A(a,b){const c=[];let d;for(const e of a)(null==d?void 0:d.p)==e.p&&""+d.r==""+e.r?(d.c=[d.c,e.c].filter(Boolean).join(" "),d.d=[d.d,e.d].filter(Boolean).join(";")):c.push(d=h({},e,{n:e.n&&b}));return c}function B(a,b,c){return k(a,(a,d)=>{const{n:e,p:f,r:g,i:i}=x(a,d,b);return c&&A(K(c,d,f,g,i,e).map(a=>a.n?h({},a,{p:r(a.p,b),o:0}):a),e)})}function C(a,b){if("("!=a[a.length-1]){const c=[];let d=!1,e=!1,f="";for(let g of a)if(!("("==g||g.endsWith("~"))){if("!"==g[0]&&(g=g.slice(1),d=!d),g.endsWith(":")){c.push(g.slice(0,-1));continue}"-"==g[0]&&(g=g.slice(1),e=!e),g.endsWith("-")&&(g=g.slice(0,-1)),g&&"&"!=g&&(f+=(f&&"-")+g)}f&&(e&&(f="-"+f),b[0].push({n:f,v:c,i:d}))}}function D(a){return a.replace(/\/\*[^]*?\*\/|\/\/[^]*?$|\s\s+|\n/gm," ")}const E=/([ ,)])|\(|[^ ,)(:[]*(?:\[[^ ]+])?:*/g,F=new Map();function G(a){let b=F.get(a);if(!b){a=D(a);const c=[],d=[[]];let e,f;for(E.lastIndex=0;(f=E.exec(a))&&f[0];)if(f[1]){C(c,d);let g=c.lastIndexOf("("),h,i;")"==f[1]&&((null==(h=c[g-1])?void 0:h.endsWith("~"))&&(i=d.shift()),g=c.lastIndexOf("(",g-1)),c.length=g+1,i&&"~"!=h&&(d[0].pop(),C([...c,B(h.slice(0,-1)+m(JSON.stringify(i)),q.s,i),],d))}else f[0].endsWith("~")&&(e=[],d[0].push(e),d.unshift(e)),c.push(f[0]);C(c,d),F.set(a,b=d[0])}return b}const H=new Intl.Collator("en",{numeric:!0});function I(a,b){for(var c=0,d=a.length;c<d;){const e=d+c>>1;0>=J(a[e],b)?c=e+1:d=e}return d}function J(a,b){const c=a.p&q.o;return c==(b.p&q.o)&&(c==q.b||c==q.o)?0:a.p-b.p||a.o-b.o||H.compare(""+a.r,""+b.r)||H.compare(a.n,b.n)}function K(a,b,c=q.u,d,e,f){const g=[];for(const h of a)for(const i of Array.isArray(h)?A(K(h,b,(c&q.o)==q.u?r(c,q.s):c,d,e),f||z([h])):L(h,b,c,d,e))g.splice(I(g,i),0,i);return g}function L(a,b,c,d,e){e&&!a.i&&(a=h({},a,{i:e}));const f=function(a,b){const c=j.get(a.n);return c?c(a,b):b.r(a.n)}(a,b);return f?"string"==typeof f?({r:d,p:c}=x(a,b,c,d),K([G(f)],b,c,d,a.i,a.n)):Array.isArray(f)?f.map(a=>h({o:0},a,{r:[...o(d),...o(a.r)],p:r(c,a.p||c)})):M(f,a,b,c,d):[{c:p(a),p:0,o:0,r:[]}]}function M(a,b,c,d,e=[]){return N(a,x(b,c,d,e),c)}function N(a,{n:b,p:c,r:d=[],i:e},f){const g=[];let i="",j=0,k=0;for(let l in a||{}){const p=a[l];if("@"==l[0]){if(!p)continue;switch(l[1]){case"a":g.push(...K([G(p)],f,c,d,e).map(a=>h({},a,{n:b})));continue;case"l":for(const s of o(p))g.push(...N(s,{n:b,p:r(c,q[l[7]]),r:d,i:e},f));continue;case"i":g.push({p:-1,o:0,r:[],d:o(p).filter(Boolean).map(a=>l+" "+a).join(";")});continue;case"k":case"f":g.push({p:q.d,o:0,r:[l],d:N(p,{p:q.d},f).map(y).join("")});continue}}if("object"!=typeof p||Array.isArray(p))"label"==l&&p?b=p+m(JSON.stringify([c,e,a])):(p||0===p)&&(k+=1,j=Math.max(j,w(l=l.replace(/[A-Z]/g,"-$&").toLowerCase())),i+=(i?";":"")+o(p).map(a=>f.s(l,O(""+a,f)+(e?" !important":""))).join(";"));else if("@"==l[0]||l.includes("&")){let u=c;"@"==l[0]&&(u|=t(l=l.replace(/\bscreen\(([^)]+)\)/g,(a,b)=>{const c=f.theme("screens",b);return c?(u|=67108864,n(c,"")):a}))),g.push(...N(p,{n:b,p:u,r:[...d,l],i:e},f))}else g.push(...N(p,{p:c,r:[l]},f))}return b&&(b=f.h(b)),g.unshift({n:b,p:c,o:Math.max(0,15-k)+1.5*Math.min(j||15,15),r:d,d:i}),g.sort(J)}function O(a,b){return a.replace(/theme\((["'`])?(.+?)\1(?:\s*,\s*(["'`])?(.+?)\3)?\)/g,(a,c,d,e,f)=>b.theme(d,f))}function P(a,b,c){return b.reduce((b,d,e)=>b+c(d)+a[e+1],a[0])}const Q=/ *(?:(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}))/g;function R(a){a=D(a);const b=[{}];let c;for(;c=Q.exec(a);)c[4]&&b.shift(),c[3]?b.unshift(b[0][c[3]]=b[0][c[3]]||{}):c[4]||(b[0][c[1]]=c[2]);return b[0]}function S(a,b){return Array.isArray(a)&&Array.isArray(a.raw)?P(a,b,a=>T(a).trim()):b.filter(Boolean).reduce((a,b)=>a+T(b),a?T(a):"")}function T(a){let b="",c;if("string"==typeof a||"number"==typeof a)b+=" "+a;else if(Array.isArray(a))(c=S(a[0],a.slice(1)))&&(b+=" "+c);else for(const d in a)a[d]&&(b+=" "+d);return b}function U(a){var{presets:b=[]}=a,c=i(a,["presets"]);let d={preflight:!1!==c.preflight&&[],theme:{},variants:o(c.variants),rules:o(c.rules),ignorelist:o(c.ignorelist),hash:c.hash,stringify:c.stringify||V};for(const e of o([...b,{preflight:!1!==c.preflight&&o(c.preflight),theme:c.theme},])){const{preflight:f,theme:g,variants:j,rules:k,hash:l=d.hash,ignorelist:m,stringify:n=d.stringify}="function"==typeof e?e(d):e;d={preflight:!1!==d.preflight&& !1!==f&&[...d.preflight,...o(f)],theme:h({},d.theme,g,{extend:h({},d.theme.extend,null==g?void 0:g.extend)}),variants:[...d.variants,...o(j)],rules:[...d.rules,...o(k)],ignorelist:[...d.ignorelist,...o(m)],hash:l,stringify:n}}return d}function V(a,b){return a+":"+b}function W(a,b,c){if("["==a[0]&&"]"==a.slice(-1)){if(a=O(a.slice(1,-1),c),/color|fill|stroke/i.test(b)){if(/^(#|((hsl|rgb)a?|hwb|lab|lch|color)\(|[a-z]+$)/.test(a))return a}else if(!/image/i.test(b))return a.includes("calc(")&&(a=a.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,"$1 $2 ")),a.replace(/(^|[^\\])_+(?![^(]*\))/g,(a,b)=>b+" ".repeat(a.length-1)).replace(/\\_(?![^(]*\))/g,"_");else if(/^[a-z-]+\(/.test(a))return a}}function X(a){return a.replace(/-./g,a=>a[1].toUpperCase())}const Y=new Proxy(function(a,...b){return z([G(S(a,b))])},{get:function(a,b){return function(a,...c){return z(G(b+"~("+S(a,c)+")"))}}});function Z(a={},b){const{label:c="style",base:d,props:e={},defaults:f,when:g=[]}=a,i=h({},null==b?void 0:b.defaults,f),j=m(JSON.stringify([c,null==b?void 0:b.className,d,e,i,g])),k=n("",d||"",q.c);function n(a,d,e){return B(((b?b.className.replace(/#.+$/,"~"):"")+c+a+j).replace(/[: ,()[\]]/,""),e,d&&G(d))}return Object.defineProperties(function(a){const c=h({},i,a);let d=(b?b(c)+" ":"")+k,f;for(const j in e){const l=e[j],m=c[j];if(m===Object(m)){let o="";for(const p in f="",m){const q=l[m[p]];q&&(o+="@"+p+"-"+m[p],f+=(f&&" ")+("_"==p?q:p+":("+q+")"))}f&&(d+=" "+n("--"+j+"-"+o,f,402653184))}else(f=l[m])&&(d+=" "+n("--"+j+"-"+m,f,402653184))}return g.forEach((a,b)=>{let e="";for(const g in a[0]){const h=c[g];if(h!==Object(h)&&""+h==""+a[0][g])e+=(e&&"_")+g+"-"+h;else{e="";break}}e&&(f=a[1])&&(d+=" "+n("-"+b+"--"+e,f,671088640))}),d},Object.getOwnPropertyDescriptors({className:k,defaults:i,selector:"."+l(k)}))}function $(a,b=[]){const c={};for(const d in a){const e=a[d],f="DEFAULT"==d?b:[...b,d];"object"==typeof e&&Object.assign(c,$(e,f)),c[f.join("-")]=e,"DEFAULT"==d&&(c[[...b,d].join("-")]=e)}return c}function _(a,b,c,d,e){for(const f of b){let g=c.get(f);g||c.set(f,g=d(f));const h=g(a,e);if(h)return h}}function aa(a){return ca(a[0],a[1])}function ba(a){return Array.isArray(a)?da(a[0],a[1],a[2]):da(a)}function ca(a,b){return fa(a,"function"==typeof b?b:()=>b)}function da(a,b,c){return Object.getPrototypeOf(a)===Object.prototype?ia(Object.keys(a).map(b=>{const c=a[b];return da(b,"function"==typeof c?c:()=>c)}),(a,b,c)=>b(a,c)):fa(a,b?"string"==typeof b?(a,d)=>({[b]:c?c(a,d):ea(a.input,a.slice(1).find(Boolean)||a.$$||a.input)}):"function"==typeof b?b:()=>b:a=>({[a[1]]:ea(a.input,a.slice(2).find(Boolean)||a.$$||a.input)}))}function ea(a,b){return"-"==a[0]?`calc(${b} * -1)`:b}function fa(a,b){return ha(a,(a,c,d)=>ga(a,c,b,d))}function ga(a,b,c,d){const e=b.exec(a);if(e)return e.$$=a.slice(e[0].length),c(e,d)}function ha(a,b){return ia(o(a).map(ja),b)}function ia(a,b){return(c,d)=>{for(const e of a){const f=b(c,e,d);if(f)return f}}}function ja(a){return"string"==typeof a?new RegExp("^"+a+(a.includes("$")||"-"==a.slice(-1)?"":"$")):a}function ka(a=document.head){const b=a.querySelector("#tw")||document.createElement("style");return b.id="tw",a.append(b),b}return a.arbitrary=W,a.asArray=o,a.colorFromTheme=function(a={},b){return(d,e)=>{const{section:f=X(d[0]).replace("-","")+"Color"}=a;if(/^(\[[^\]]+]|[^/]+?)(?:\/(.+))?$/.test(d.$$)){const{$1:g,$2:h}=RegExp,i=e.theme(f,g)||W(g,f,e);if(i){const{opacityVariable:j=`--tw-${d[0].replace(/-$/,"")}-opacity`,opacitySection:k=f.replace("Color","Opacity"),property:l=f,selector:m}=a,n=e.theme(k,h||"DEFAULT")||h&&W(h,k,e),o=c(i,{opacityVariable:j||void 0,opacityValue:n||void 0});if("string"!=typeof o){console.warn(`Invalid color ${g} (from ${d.input}):`,o);return}if(b)return d._={value:o,color:a=>c(i,a)},b(d,e);const p={};return j&&o.includes(j)&&(p[j]=n||"1"),p[l]=o,m?{[m]:p}:p}}}},a.consume=e,a.css=function(a,...b){const c=Array.isArray(a)?R(P(a,b,a=>"string"==typeof a||"number"==typeof a?a:"")):"string"==typeof a?R(a):a,{label:d="css"}=c,e=i(c,["label"]),f=d+m(JSON.stringify(e));return k(f,(a,b)=>M(e,a,b,q.o))},a.cssom=function(a){let b=(null==a?void 0:a.cssRules.length)||0;return{get target(){return a||(a=ka().sheet,b=0),a},clear(){if(a)for(;a.cssRules.length>b;)a.deleteRule(b)},destroy(){var c;b?this.clear():null==a||null===(c=a.ownerNode)|| void 0===c||c.remove()},insert(a,c){try{this.target.insertRule(a,b+c)}catch(d){this.target.insertRule("*{}",b+c),/:-[mwo]/.test(a)||console.warn(d)}}}},a.cx=function(a,...b){return z(G(S(a,b)))},a.defineConfig=U,a.dom=function(a){let b=(null==a?void 0:a.childNodes.length)||0;return{get target(){return a||(a=ka(),b=0),a},clear(){if(a)for(;a.childNodes.length>b;)a.removeChild(a.lastChild)},destroy(){b?this.clear():null==a||a.remove()},insert(a,c){this.target.insertBefore(document.createTextNode(a),this.target.childNodes[b+c]||null)}}},a.escape=l,a.extract=function(a,b){return b.clear(),{html:e(a,b),css:b.target.join("")}},a.fromTheme=function(a,b,c){const d=b?"string"==typeof b?(a,d)=>({[b]:c?c(a,d):a._}):b:({1:a,_:b},c,d)=>({[a||d]:b});return(b,c)=>{const e=X(a||("-"==b[1][0]?b[1].slice(1):b[1]));let f=c.theme(e,b.$$);if(null==f&&(f=W(b.$$,e,c)),"-"==b.input[0]&&("string"==typeof f||"number"==typeof f)&&(f=`calc(${f} * -1)`),null!=f)return b._=f,d(b,c,e)}},a.hash=m,a.mql=n,a.observe=function(a,b=document.documentElement){if(!b)return a;const c=new MutationObserver(f);function e({target:b,addedNodes:c}){var e,g;const h=null===(e=b)|| void 0===e?void 0:null===(g=e.getAttribute)|| void 0===g?void 0:g.call(e,"class"),i=h&&a(h);h&&d(h,i)&&b.setAttribute("class",i);for(let j=c.length;j--;){const k=c[j];f([{target:k,addedNodes:k.children||[]},])}}function f(a){a.forEach(e),c.takeRecords().forEach(e)}return f([{target:b,addedNodes:document.querySelectorAll("[class]")}]),c.observe(b,{attributes:!0,attributeFilter:["class"],subtree:!0,childList:!0}),Object.create(a,{destroy:{enumerable:!0,value(){c.disconnect(),a.destroy()}}})},a.shortcut=Y,a.style=(a,b)=>"function"==typeof a?Z(b,a):Z(a),a.toColorValue=c,a.twind=function(a,b){const c=U(a),d=function({theme:a,variants:b,rules:c,hash:d,stringify:e,ignorelist:f}){const g=new Map(),h=new Map(),j=new Map(),k=new Map(),n=ha(f,(a,b)=>b.test(a));return{theme:(function(a){var{extend:b={}}=a,c=i(a,["extend"]);const d={},e={colors:f("colors"),theme:f,negative(){return{}},breakpoints(a){const b={};for(const c in a)"string"==typeof a[c]&&(b["screen-"+c]=a[c]);return b}};function f(a,e,h){if(a){var i;if(/[.[]/.test(a)){const j=[];a.replace(/\[([^\]]+)\]|([^.[]+)/g,(a,b,c=b)=>j.push(c)),a=j.shift(),h=e,e=j.join("-")}const k=d[a]||Object.assign(Object.assign(d[a]={},g(c,a)),g(b,a));return null==e?k:null!==(i=k[e||"DEFAULT"])&& void 0!==i?i:h}const l={};for(const m in c)l[m]=f(m);return l}function g(a,b){let c=a[b];return("function"==typeof c&&(c=c(e)),c&&/color/i.test(b))?$(c):c}return f})(a),e:l,h:"function"==typeof d?d:!0===d?m:a=>a,s(a,b){return e(a,b,this)},v(a){return j.has(a)||g.set(a,_(a,b,h,aa,this)||"&:"+a),g.get(a)},r(a){return j.has(a)||j.set(a,!n(a,this)&&_(a,c,k,ba,this)),j.get(a)}}}(c),e=new Map(),f=[],g=new Set();function j(a){a.n&&(a=h({},a,{n:d.h(a.n)}));const c=y(a);if(c&&!g.has(c)){g.add(c);const e=I(f,a);b.insert(c,e,a),f.splice(e,0,a)}return a.n}return Object.defineProperties(function(a,...b){if(!e.size&&c.preflight)for(let f of c.preflight)"function"==typeof f&&(f=f(d)),f&&M(f,{},d,q.b).forEach(j);const g=S(a,b);let h=e.get(g);if(!h){const i=new Set();for(const k of K(G(g),d)){const l=j(k);k.c&&k.c.split(" ").forEach(a=>i.add(a)),l&&i.add(l)}h=[...i].join(" "),e.set(g,h).set(h,h)}return h},Object.getOwnPropertyDescriptors({get target(){return b.target},theme:d.theme,clear(){b.clear(),g.clear(),e.clear(),f.length=0},destroy(){this.clear(),b.destroy()}}))},a.virtual=function(a=[]){const b=a.length;return{target:a,clear(){a.length=b},destroy(){this.clear()},insert(c,d){a.splice(b+d,0,c)}}},a}({})//# sourceMappingURL=core.global.js.map | ||
| const twind_core=function(a){"use strict";function b(a,b){return Math.round(parseInt(a,16)*b)}function c(a,c={}){if("function"==typeof a)return a(c);const{opacityValue:d="1",opacityVariable:e}=c,f=e?`var(${e})`:d;if("1"==f)return a;if("0"==f)return"#0000";if("#"==a[0]&&(4==a.length||7==a.length)){const g=(a.length-1)/3,h=[17,1,0.062272][g-1];return`rgba(${[b(a.substr(1,g),h),b(a.substr(1+g,g),h),b(a.substr(1+2*g,g),h),f,]})`}return a}function d(a,b){return a!=b&&""+a.split(" ").sort()!=""+b.split(" ").sort()}function e(a,b){let c="",e=0;return f(a,(f,g,h)=>{const i=a.slice(f,g),j=b(i);d(i,j)&&(h=h?"":"\"",c+=a.slice(e,f)+h+j+h,e=g)}),c+a.slice(e,a.length)}function f(a,b){let c=1,d=0,e="",f="",g="";const h=a=>{5==c&&"class"==g&&b(d,a,e)};for(let i=0;i<a.length;i++)(f=a[i],1==c)?"<"==f&&(c="!--"==a.substr(i+1,3)?4:3):4==c?">"==f&&"--"==a.slice(i-2,i)&&(c=1):e?f==e&&"\\"!=a[i-1]&&(h(i),c=2,e=""):"\""==f||"'"==f?(e=f,d+=1):">"==f?(h(i),c=1):c&&("="==f?(g=a.slice(d,i),c=5,d=i+1):"/"==f&&(c<5||">"==a[i+1])?(h(i),c=0):/\s/.test(f)&&(h(i),c=2,d=i+1))}function g(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function h(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){g(a,b,c[b])})}return a}function i(a,b){if(null==a)return{};var c,d,e=function(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],b.indexOf(c)>=0||(e[c]=a[c]);return e}(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],!(b.indexOf(c)>=0)&&Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}const j=new Map();function k(a,b){return j.set(a,b),a}const l="undefined"!=typeof CSS&&CSS.escape||(a=>a.replace(/[!"'`*+.,;:\\/<=>?@#$%&^|~()[\]{}]/g,"\\$&").replace(/^\d/,"\\3$& "));function m(a){for(var b=9,c=a.length;c--;)b=Math.imul(b^a.charCodeAt(c),1597334677);return"#"+((b^b>>>9)>>>0).toString(36)}function n(a,b="@media "){return b+o(a).map(a=>("string"==typeof a&&(a={min:a}),a.raw||Object.keys(a).map(b=>`(${b}-width:${a[b]})`).join(" and "))).join(",")}function o(a=[]){return Array.isArray(a)?a:null==a?[]:[a]}function p(a){return[...a.v,(a.i?"!":"")+a.n].join(":")}const q={d:0,b:134217728,c:268435456,s:671088640,u:805306368,o:939524096};function r(a,b){return a& ~q.o|b}function s(a){var b;return(null===(b=a.match(/[-=:;]/g))|| void 0===b?void 0:b.length)||0}function t(a){return Math.min(/(?:^|width[^\d]+)(\d+(?:.\d+)?)(p)?/.test(a)?+RegExp.$1/(RegExp.$2?15:1)/10:0,15)<<22|Math.min(s(a),15)<<18}const u=["rst-c","st-ch","h-chi","y-lin","nk","sited","ecked","pty","ad-on","cus-w","ver","cus","cus-v","tive","sable","tiona","quire",];function v(a){return 1<< ~(/:([a-z-]+)/.test(a)&& ~u.indexOf(RegExp.$1.slice(2,7))|| -18)}function w(a){return"-"==a[0]?0:s(a)+(/^(?:(border-(?!w|c|sty)|[tlbr].{2,4}m?$|c.{7}$)|([fl].{5}l|g.{8}$|pl))/.test(a)?+!!RegExp.$1||-!!RegExp.$2:0)+1}function x({n:a,i:b,v:c=[]},d,e,f){for(const g of(a&&(a=p({n:a,i:b,v:c})),f=[...o(f)],c)){const h=d.theme("screens",g),i=h&&n(h)||d.v(g);f.push(i),e|=h?67108864|t(i):"dark"==g?1073741824:"@"==i[0]?t(i):v(i)}return{n:a,p:e,r:f,i:b}}function y(a){if(a.d){const b=[],c=a.r["reduce"+(a.n?"Right":"")]((a,c)=>"@"==c[0]?(b.unshift(c),a):a.replace(/^$| *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g,(a,b=a,d="")=>c.replace(/ *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g,(a,c,d="")=>c.replace(/&/g,b)+d)+d),a.n?"."+l(a.n):"");return c&&b.push(c),b.reduceRight((a,b)=>b+"{"+a+"}",a.d)}}function z(a,b=" "){return a.map(a=>Array.isArray(a)?(","==b?"":"~(")+z(a,",")+(","==b?"":")"):p(a)).join(b)}function A(a,b){const c=[];let d;for(const e of a)(null==d?void 0:d.p)==e.p&&""+d.r==""+e.r?(d.c=[d.c,e.c].filter(Boolean).join(" "),d.d=[d.d,e.d].filter(Boolean).join(";")):c.push(d=h({},e,{n:e.n&&b}));return c}function B(a,b,c){return k(a,(a,d)=>{const{n:e,p:f,r:g,i:i}=x(a,d,b);return c&&A(K(c,d,f,g,i,e).map(a=>a.n?h({},a,{p:r(a.p,b),o:0}):a),e)})}function C(a,b){if("("!=a[a.length-1]){const c=[];let d=!1,e=!1,f="";for(let g of a)if(!("("==g||g.endsWith("~"))){if("!"==g[0]&&(g=g.slice(1),d=!d),g.endsWith(":")){c.push(g.slice(0,-1));continue}"-"==g[0]&&(g=g.slice(1),e=!e),g.endsWith("-")&&(g=g.slice(0,-1)),g&&"&"!=g&&(f+=(f&&"-")+g)}f&&(e&&(f="-"+f),b[0].push({n:f,v:c,i:d}))}}function D(a){return a.replace(/\/\*[^]*?\*\/|\/\/[^]*?$|\s\s+|\n/gm," ")}const E=/([ ,)])|\(|[^ ,)(:[]*(?:\[[^ ]+])?:*/g,F=new Map();function G(a){let b=F.get(a);if(!b){a=D(a);const c=[],d=[[]];let e,f;for(E.lastIndex=0;(f=E.exec(a))&&f[0];)if(f[1]){C(c,d);let g=c.lastIndexOf("("),h,i;")"==f[1]&&((null==(h=c[g-1])?void 0:h.endsWith("~"))&&(i=d.shift()),g=c.lastIndexOf("(",g-1)),c.length=g+1,i&&"~"!=h&&(d[0].pop(),C([...c,B(h.slice(0,-1)+m(JSON.stringify(i)),q.s,i),],d))}else f[0].endsWith("~")&&(e=[],d[0].push(e),d.unshift(e)),c.push(f[0]);C(c,d),F.set(a,b=d[0])}return b}const H=new Intl.Collator("en",{numeric:!0});function I(a,b){for(var c=0,d=a.length;c<d;){const e=d+c>>1;0>=J(a[e],b)?c=e+1:d=e}return d}function J(a,b){const c=a.p&q.o;return c==(b.p&q.o)&&(c==q.b||c==q.o)?0:a.p-b.p||a.o-b.o||H.compare(a.r,b.r)||H.compare(a.n,b.n)}function K(a,b,c=q.u,d,e,f){const g=[];for(const h of a)for(const i of Array.isArray(h)?A(K(h,b,(c&q.o)==q.u?r(c,q.s):c,d,e),f||z([h])):L(h,b,c,d,e))g.splice(I(g,i),0,i);return g}function L(a,b,c,d,e){a=h({},a,{i:a.i||e});const f=function(a,b){const c=j.get(a.n);return c?c(a,b):b.r(a.n)}(a,b);return f?"string"==typeof f?({r:d,p:c}=x(a,b,c,d),K([G(f)],b,c,d,a.i,a.n)):Array.isArray(f)?f.map(a=>h({o:0},a,{r:[...o(d),...o(a.r)],p:r(c,a.p||c)})):M(f,a,b,c,d):[{c:p(a),p:0,o:0,r:[]}]}function M(a,b,c,d,e=[]){return N(a,x(b,c,d,e),c)}function N(a,{n:b,p:c,r:d=[],i:e},f){const g=[];let i="",j=0,k=0;for(let l in a||{}){const p=a[l];if("@"==l[0]){if(!p)continue;switch(l[1]){case"a":g.push(...K([G(p)],f,c,d,e).map(a=>h({},a,{n:b})));continue;case"l":for(const s of o(p))g.push(...N(s,{n:b,p:r(c,q[l[7]]),r:d,i:e},f));continue;case"i":g.push({p:-1,o:0,r:[],d:o(p).filter(Boolean).map(a=>l+" "+a).join(";")});continue;case"k":case"f":g.push({p:q.d,o:0,r:[l],d:N(p,{p:q.d},f).map(y).join("")});continue}}if("object"!=typeof p||Array.isArray(p))"label"==l&&p?b=p+m(JSON.stringify([c,e,a])):(p||0===p)&&(k+=1,j=Math.max(j,w(l=l.replace(/[A-Z]/g,"-$&").toLowerCase())),i+=(i?";":"")+o(p).map(a=>f.s(l,O(""+a,f)+(e?" !important":""))).join(";"));else if("@"==l[0]||l.includes("&")){let u=c;"@"==l[0]&&(u|=t(l=l.replace(/\bscreen\(([^)]+)\)/g,(a,b)=>{const c=f.theme("screens",b);return c?(u|=67108864,n(c,"")):a}))),g.push(...N(p,{n:b,p:u,r:[...d,l],i:e},f))}else g.push(...N(p,{p:c,r:[l]},f))}return g.unshift({n:b&&f.h(b),p:c,o:Math.max(0,15-k)+1.5*Math.min(j||15,15),r:d,d:i}),g.sort(J)}function O(a,b){return a.replace(/theme\((["'`])?(.+?)\1(?:\s*,\s*(["'`])?(.+?)\3)?\)/g,(a,c,d,e,f)=>b.theme(d,f))}function P(a,b,c){return b.reduce((b,d,e)=>b+c(d)+a[e+1],a[0])}const Q=/ *(?:(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}))/g;function R(a){a=D(a);const b=[{}];let c;for(;c=Q.exec(a);)c[4]&&b.shift(),c[3]?b.unshift(b[0][c[3]]=b[0][c[3]]||{}):c[4]||(b[0][c[1]]=c[2]);return b[0]}function S(a,b){return Array.isArray(a)&&Array.isArray(a.raw)?P(a,b,a=>T(a).trim()):b.filter(Boolean).reduce((a,b)=>a+T(b),a?T(a):"")}function T(a){let b="",c;if(a&&"object"==typeof a)if(Array.isArray(a))(c=S(a[0],a.slice(1)))&&(b+=" "+c);else for(const d in a)a[d]&&(b+=" "+d);else null!=a&&"boolean"!=typeof a&&(b+=" "+a);return b}function U(a){var{presets:b=[]}=a,c=i(a,["presets"]);let d={preflight:!1!==c.preflight&&[],theme:{},variants:o(c.variants),rules:o(c.rules),ignorelist:o(c.ignorelist),hash:c.hash,stringify:c.stringify||V};for(const e of o([...b,{preflight:!1!==c.preflight&&o(c.preflight),theme:c.theme},])){const{preflight:f,theme:g,variants:j,rules:k,hash:l=d.hash,ignorelist:m,stringify:n=d.stringify}="function"==typeof e?e(d):e;d={preflight:!1!==d.preflight&& !1!==f&&[...d.preflight,...o(f)],theme:h({},d.theme,g,{extend:h({},d.theme.extend,null==g?void 0:g.extend)}),variants:[...d.variants,...o(j)],rules:[...d.rules,...o(k)],ignorelist:[...d.ignorelist,...o(m)],hash:l,stringify:n}}return d}function V(a,b){return a+":"+b}function W(a=document.querySelector("style[data-twind]")||document.head.lastChild){return a.parentNode.insertBefore(document.createElement("style"),a.nextSibling)}function X(a){var b;return a.cssRules&&(a=Array.from(a.cssRules,a=>a.cssText)),null!==(b=a.innerHTML)&& void 0!==b?b:Array.isArray(a)?a.join(""):""+a}function Y(a,b,c){if("["==a[0]&&"]"==a.slice(-1)){if(a=O(a.slice(1,-1),c),/color|fill|stroke/i.test(b)){if(/^(#|((hsl|rgb)a?|hwb|lab|lch|color)\(|[a-z]+$)/.test(a))return a}else if(!/image/i.test(b))return a.includes("calc(")&&(a=a.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,"$1 $2 ")),a.replace(/(^|[^\\])_+(?![^(]*\))/g,(a,b)=>b+" ".repeat(a.length-1)).replace(/\\_(?![^(]*\))/g,"_");else if(/^[a-z-]+\(/.test(a))return a}}function Z(a){return a.replace(/-./g,a=>a[1].toUpperCase())}const $=new Proxy(function(a,...b){return z([G(S(a,b))])},{get:function(a,b){return function(a,...c){return z(G(b+"~("+S(a,c)+")"))}}});function _(a={},b){const{label:c="style",base:d,props:e={},defaults:f,when:g=[]}=a,i=h({},null==b?void 0:b.defaults,f),j=m(JSON.stringify([c,null==b?void 0:b.className,d,e,i,g])),k=n("",d||"",q.c);function n(a,d,e){return B(((b?b.className.replace(/#.+$/,"~"):"")+c+a+j).replace(/[: ,()[\]]/,""),e,d&&G(d))}return Object.defineProperties(function(a){const c=h({},i,a);let d=(b?b(c)+" ":"")+k,f;for(const j in e){const l=e[j],m=c[j];if(m===Object(m)){let o="";for(const p in f="",m){const q=l[m[p]];q&&(o+="@"+p+"-"+m[p],f+=(f&&" ")+("_"==p?q:p+":("+q+")"))}f&&(d+=" "+n("--"+j+"-"+o,f,402653184))}else(f=l[m])&&(d+=" "+n("--"+j+"-"+m,f,402653184))}return g.forEach((a,b)=>{let e="";for(const g in a[0]){const h=c[g];if(h!==Object(h)&&""+h==""+a[0][g])e+=(e&&"_")+g+"-"+h;else{e="";break}}e&&(f=a[1])&&(d+=" "+n("-"+b+"--"+e,f,671088640))}),d},Object.getOwnPropertyDescriptors({className:k,defaults:i,selector:"."+l(k)}))}function aa(a,b=[]){const c={};for(const d in a){const e=a[d],f="DEFAULT"==d?b:[...b,d];"object"==typeof e&&Object.assign(c,aa(e,f)),c[f.join("-")]=e,"DEFAULT"==d&&(c[[...b,d].join("-")]=e)}return c}function ba(a,b,c,d,e){for(const f of b){let g=c.get(f);g||c.set(f,g=d(f));const h=g(a,e);if(h)return h}}function ca(a){return ea(a[0],a[1])}function da(a){return Array.isArray(a)?fa(a[0],a[1],a[2]):fa(a)}function ea(a,b){return ha(a,"function"==typeof b?b:()=>b)}function fa(a,b,c){return Object.getPrototypeOf(a)===Object.prototype?ka(Object.keys(a).map(b=>{const c=a[b];return fa(b,"function"==typeof c?c:()=>c)}),(a,b,c)=>b(a,c)):ha(a,b?"string"==typeof b?(a,d)=>({[b]:c?c(a,d):ga(a.input,a.slice(1).find(Boolean)||a.$$||a.input)}):"function"==typeof b?b:()=>b:a=>({[a[1]]:ga(a.input,a.slice(2).find(Boolean)||a.$$||a.input)}))}function ga(a,b){return"-"==a[0]?`calc(${b} * -1)`:b}function ha(a,b){return ja(a,(a,c,d)=>ia(a,c,b,d))}function ia(a,b,c,d){const e=b.exec(a);if(e)return e.$$=a.slice(e[0].length),c(e,d)}function ja(a,b){return ka(o(a).map(la),b)}function ka(a,b){return(c,d)=>{for(const e of a){const f=b(c,e,d);if(f)return f}}}function la(a){return"string"==typeof a?new RegExp("^"+a+(a.includes("$")||"-"==a.slice(-1)?"":"$")):a}return a.arbitrary=Y,a.asArray=o,a.colorFromTheme=function(a={},b){return(d,e)=>{const{section:f=Z(d[0]).replace("-","")+"Color"}=a;if(/^(\[[^\]]+]|[^/]+?)(?:\/(.+))?$/.test(d.$$)){const{$1:g,$2:h}=RegExp,i=e.theme(f,g)||Y(g,f,e);if(i){const{opacityVariable:j=`--tw-${d[0].replace(/-$/,"")}-opacity`,opacitySection:k=f.replace("Color","Opacity"),property:l=f,selector:m}=a,n=e.theme(k,h||"DEFAULT")||h&&Y(h,k,e),o=c(i,{opacityVariable:j||void 0,opacityValue:n||void 0});if(b)return d._={value:o,color:a=>c(i,a)},b(d,e);const p={};return j&&o.includes(j)&&(p[j]=n||"1"),p[l]=o,m?{[m]:p}:p}}}},a.consume=e,a.css=function(a,...b){const c=Array.isArray(a)?R(P(a,b,a=>null!=a&&"boolean"!=typeof a?a:"")):"string"==typeof a?R(a):a,{label:d="css"}=c,e=i(c,["label"]),f=d+m(JSON.stringify(e));return k(f,(a,b)=>M(e,a,b,q.o))},a.cssom=function(a=W().sheet){return{target:a,clear(){for(let b=a.cssRules.length;b--;)a.deleteRule(b)},destroy(){a.ownerNode.remove()},insert(b,c){try{a.insertRule(b,c)}catch(d){a.insertRule(":root{}",c),/:-[mwo]/.test(b)||console.warn(d,b)}}}},a.cx=function(a,...b){return z(G(S(a,b)))},a.defineConfig=U,a.dom=function(a=W()){return{target:a,clear(){for(;a.childNodes.length;)a.removeChild(a.lastChild)},destroy(){a.remove()},insert(b,c){a.insertBefore(document.createTextNode(b),a.childNodes[c]||null)}}},a.escape=l,a.extract=function(a,b){return b.clear(),{html:e(a,b),css:X(b.target)}},a.fromTheme=function(a,b,c){const d=b?"string"==typeof b?(a,d)=>({[b]:c?c(a,d):a._}):b:({1:a,_:b},c,d)=>({[a||d]:b});return(b,c)=>{var e;const f=Z(a||b[1]),g=null!==(e=c.theme(f,b.$$))&& void 0!==e?e:Y(b.$$,f,c);if(null!=g)return b._="-"==b.input[0]?`calc(${g} * -1)`:g,d(b,c,f)}},a.hash=m,a.mql=n,a.observe=function(a,b=document.documentElement){if(!b)return a;const c=new MutationObserver(f);function e({target:b,addedNodes:c}){var e,g;const h=null===(e=b)|| void 0===e?void 0:null===(g=e.getAttribute)|| void 0===g?void 0:g.call(e,"class");let i;h&&d(h,i=a(h))&&b.setAttribute("class",i);for(let j=c.length;j--;){const k=c[j];f([{target:k,addedNodes:k.children||[]},])}}function f(a){a.forEach(e),c.takeRecords().forEach(e)}return f([{target:b,addedNodes:document.querySelectorAll("[class]")}]),c.observe(b,{attributes:!0,attributeFilter:["class"],subtree:!0,childList:!0}),Object.create(a,{destroy:{enumerable:!0,value(){c.disconnect(),a.destroy()}}})},a.shortcut=$,a.stringify=X,a.style=(a,b)=>"function"==typeof a?_(b,a):_(a),a.toColorValue=c,a.twind=function(a,b){const c=U(a),d=function({theme:a,variants:b,rules:c,hash:d,stringify:e,ignorelist:f}){const g=new Map(),h=new Map(),j=new Map(),k=new Map(),n=ja(f,(a,b)=>b.test(a));return{theme:(function(a){var{extend:b={}}=a,c=i(a,["extend"]);const d={},e={colors:f("colors"),theme:f,negative(){return{}},breakpoints(a){const b={};for(const c in a)"string"==typeof a[c]&&(b["screen-"+c]=a[c]);return b}};function f(a,e,h){if(a){var i;if(/[.[]/.test(a)){const j=[];a.replace(/\[([^\]]+)\]|([^.[]+)/g,(a,b,c=b)=>j.push(c)),a=j.shift(),h=e,e=j.join("-")}const k=d[a]||Object.assign(Object.assign(d[a]={},g(c,a)),g(b,a));return null==e?k:null!==(i=k[e||"DEFAULT"])&& void 0!==i?i:h}const l={};for(const m in c)l[m]=f(m);return l}function g(a,b){let c=a[b];return("function"==typeof c&&(c=c(e)),c&&/color/i.test(b))?aa(c):c}return f})(a),e:l,h:"function"==typeof d?d:d?m:a=>a,s(a,b){return e(a,b,this)},v(a){return j.has(a)||g.set(a,ba(a,b,h,ca,this)||"&:"+a),g.get(a)},r(a){return j.has(a)||j.set(a,!n(a,this)&&ba(a,c,k,da,this)),j.get(a)}}}(c),e=new Map(),f=[],g=new Set();function j(a){a=h({},a,{n:a.n&&d.h(a.n)});const c=y(a);if(c&&!g.has(c)){g.add(c);const e=I(f,a);b.insert(c,e,a),f.splice(e,0,a)}return a.n}return Object.defineProperties(function(a,...b){if(!e.size)for(let f of o(c.preflight))"function"==typeof f&&(f=f(d)),f&&M(f,{},d,q.b).forEach(j);const g=S(a,b);let h=e.get(g);if(!h){const i=new Set();for(const k of K(G(g),d))i.add(k.c).add(j(k));h=[...i].filter(Boolean).join(" "),e.set(g,h).set(h,h)}return h},Object.getOwnPropertyDescriptors({get target(){return b.target},theme:d.theme,clear(){b.clear(),g.clear(),e.clear(),f.length=0},destroy(){this.clear(),b.destroy()}}))},a.virtual=function(a=[]){return{target:a,clear(){a.length=0},destroy(){this.clear()},insert(b,c){a.splice(c,0,b)}}},a}({})//# sourceMappingURL=core.global.js.map |
297
core.js
@@ -39,3 +39,3 @@ function parseColorComponent(chars, factor) { | ||
| // eslint-disable-next-line @typescript-eslint/restrict-plus-operands | ||
| return a !== b && '' + a.split(' ').sort() !== '' + b.split(' ').sort(); | ||
| return a != b && '' + a.split(' ').sort() != '' + b.split(' ').sort(); | ||
| } | ||
@@ -51,3 +51,3 @@ | ||
| * ```js | ||
| * import { twind, virtual, consume } from '@twind/core' | ||
| * import { twind, virtual, consume, stringify } from '@twind/core' | ||
| * | ||
@@ -58,3 +58,3 @@ * // can be re-used | ||
| * function render() { | ||
| * const html = app() | ||
| * const html = renderApp() | ||
| * | ||
@@ -68,6 +68,6 @@ * // clear all styles | ||
| * // create CSS | ||
| * const css = tw.target.join('') | ||
| * const css = stringify(tw.target) | ||
| * | ||
| * // inject as last element into the head | ||
| * return markup.replace('</head>', `<style id="tw">${css}</style></head>`) | ||
| * return markup.replace('</head>', `<style data-twind>${css}</style></head>`) | ||
| * } | ||
@@ -451,3 +451,3 @@ * ``` | ||
| function stringify(rule) { | ||
| function stringify$1(rule) { | ||
| if (rule.d) { | ||
@@ -666,3 +666,3 @@ const groups = []; | ||
| } | ||
| return a.p - b.p || a.o - b.o || collator.compare('' + a.r, '' + b.r) || collator.compare(a.n, b.n); | ||
| return a.p - b.p || a.o - b.o || collator.compare(a.r, b.r) || collator.compare(a.n, b.n); | ||
| } | ||
@@ -684,8 +684,6 @@ | ||
| function translate$(rule1, context, precedence, conditions, important) { | ||
| if (important && !rule1.i) { | ||
| rule1 = { | ||
| ...rule1, | ||
| i: important | ||
| }; | ||
| } | ||
| rule1 = { | ||
| ...rule1, | ||
| i: rule1.i || important | ||
| }; | ||
| const resolved = resolve(rule1, context); | ||
@@ -795,3 +793,3 @@ if (!resolved) { | ||
| p: Layer.d | ||
| }, context).map(stringify).join('') | ||
| }, context).map(stringify$1).join('') | ||
| }); | ||
@@ -858,7 +856,4 @@ continue; | ||
| } | ||
| if (name) { | ||
| name = context.h(name); | ||
| } | ||
| rules.unshift({ | ||
| n: name, | ||
| n: name && context.h(name), | ||
| p: precedence, | ||
@@ -891,3 +886,3 @@ o: // number of declarations (descending) | ||
| function css(strings, ...interpolations) { | ||
| const { label ='css' , ...ast } = Array.isArray(strings) ? astish(interleave(strings, interpolations, (interpolation)=>typeof interpolation == 'string' || typeof interpolation == 'number' ? interpolation : '' | ||
| const { label ='css' , ...ast } = Array.isArray(strings) ? astish(interleave(strings, interpolations, (interpolation)=>interpolation != null && typeof interpolation != 'boolean' ? interpolation : '' | ||
| )) : typeof strings == 'string' ? astish(strings) : strings; | ||
@@ -929,13 +924,15 @@ const className = label + hash(JSON.stringify(ast)); | ||
| let tmp; | ||
| if (typeof value == 'string' || typeof value == 'number') { | ||
| if (value && typeof value == 'object') { | ||
| if (Array.isArray(value)) { | ||
| if (tmp = interpolate(value[0], value.slice(1))) { | ||
| result += ' ' + tmp; | ||
| } | ||
| } else { | ||
| for(const key in value){ | ||
| if (value[key]) result += ' ' + key; | ||
| } | ||
| } | ||
| } else if (value != null && typeof value != 'boolean') { | ||
| // eslint-disable-next-line @typescript-eslint/restrict-plus-operands | ||
| result += ' ' + value; | ||
| } else if (Array.isArray(value)) { | ||
| if (tmp = interpolate(value[0], value.slice(1))) { | ||
| result += ' ' + tmp; | ||
| } | ||
| } else { | ||
| for(const key in value){ | ||
| if (value[key]) result += ' ' + key; | ||
| } | ||
| } | ||
@@ -1005,5 +1002,84 @@ return result; | ||
| function createStyleElement(// 1. look for existing style element — usually from SSR | ||
| // 2. append to document.head — this assumes that document.head has at least one child node | ||
| referenceNode = document.querySelector('style[data-twind]') || document.head.lastChild) { | ||
| // insert new style element after existing element which allows to override styles | ||
| return referenceNode.parentNode.insertBefore(document.createElement('style'), referenceNode.nextSibling); | ||
| } | ||
| function cssom(target = createStyleElement().sheet) { | ||
| return { | ||
| target, | ||
| clear () { | ||
| // remove all added rules | ||
| for(let index = target.cssRules.length; index--;){ | ||
| target.deleteRule(index); | ||
| } | ||
| }, | ||
| destroy () { | ||
| target.ownerNode.remove(); | ||
| }, | ||
| insert (css, index) { | ||
| try { | ||
| // Insert | ||
| target.insertRule(css, index); | ||
| } catch (error) { | ||
| // Empty rule to keep index valid — not using `*{}` as that would show up in all rules (DX) | ||
| target.insertRule(':root{}', index); | ||
| // Some thrown errors are because of specific pseudo classes | ||
| // lets filter them to prevent unnecessary warnings | ||
| // ::-moz-focus-inner | ||
| // :-moz-focusring | ||
| if (!/:-[mwo]/.test(css)) { | ||
| console.warn(error, css); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| function dom(target = createStyleElement()) { | ||
| return { | ||
| target, | ||
| clear () { | ||
| // remove all added nodes | ||
| while(target.childNodes.length){ | ||
| target.removeChild(target.lastChild); | ||
| } | ||
| }, | ||
| destroy () { | ||
| target.remove(); | ||
| }, | ||
| insert (css, index) { | ||
| target.insertBefore(document.createTextNode(css), target.childNodes[index] || null); | ||
| } | ||
| }; | ||
| } | ||
| function virtual(target = []) { | ||
| return { | ||
| target, | ||
| clear () { | ||
| target.length = 0; | ||
| }, | ||
| destroy () { | ||
| this.clear(); | ||
| }, | ||
| insert (css, index) { | ||
| target.splice(index, 0, css); | ||
| } | ||
| }; | ||
| } | ||
| function stringify(target) { | ||
| // string[] | CSSStyleSheet | HTMLStyleElement | ||
| if (target.cssRules) { | ||
| target = Array.from(target.cssRules, (rule)=>rule.cssText | ||
| ); | ||
| } | ||
| return target.innerHTML ?? // eslint-disable-next-line @typescript-eslint/restrict-plus-operands | ||
| (Array.isArray(target) ? target.join('') : '' + target); | ||
| } | ||
| /** | ||
| * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) | ||
| * | ||
| * **Note**: This {@link Twind.clear clears} the Twind instance before processing the HTML. | ||
| * | ||
| * 1. parse the markup and process element classes with the provided Twind instance | ||
@@ -1020,6 +1096,6 @@ * 2. update the class attributes _if_ necessary | ||
| * function render() { | ||
| * const { html, css } = extract(app(), tw) | ||
| * const { html, css } = extract(renderApp(), tw) | ||
| * | ||
| * // inject as last element into the head | ||
| * return html.replace('</head>', `<style id="tw">${css}</style></head>`) | ||
| * return html.replace('</head>', `<style data-twind>${css}</style></head>`) | ||
| * } | ||
@@ -1035,3 +1111,3 @@ * ``` | ||
| html: consume(html, tw), | ||
| css: tw.target.join('') | ||
| css: stringify(tw.target) | ||
| }; | ||
@@ -1069,5 +1145,5 @@ } | ||
| const tokens = target?.getAttribute?.('class'); | ||
| const className = tokens && tw(tokens); | ||
| let className; | ||
| // try do keep classNames unmodified | ||
| if (tokens && changed(tokens, className)) { | ||
| if (tokens && changed(tokens, className = tw(tokens))) { | ||
| target.setAttribute('class', className); | ||
@@ -1101,15 +1177,9 @@ } | ||
| return (match, context)=>{ | ||
| const themeSection = camelize(section1 || (match[1][0] == '-' ? match[1].slice(1) : match[1])); | ||
| let value = context.theme(themeSection, match.$$); | ||
| const themeSection = camelize(section1 || match[1]); | ||
| // TODO suppport https://github.com/tailwindlabs/tailwindcss/pull/4348 | ||
| if (value == null) { | ||
| /** Arbitrary lookup type */ // https://github.com/tailwindlabs/tailwindcss/blob/875c850b37a57bc651e1fed91e3d89af11bdc79f/src/util/pluginUtils.js#L163 | ||
| // type?: 'lookup' | 'color' | 'line-width' | 'length' | 'any' | 'shadow' | ||
| value = arbitrary(match.$$, themeSection, context); | ||
| } | ||
| if (match.input[0] == '-' && (typeof value == 'string' || typeof value == 'number')) { | ||
| value = `calc(${value} * -1)`; | ||
| } | ||
| const value = context.theme(themeSection, match.$$) ?? /** Arbitrary lookup type */ // https://github.com/tailwindlabs/tailwindcss/blob/875c850b37a57bc651e1fed91e3d89af11bdc79f/src/util/pluginUtils.js#L163 | ||
| // type?: 'lookup' | 'color' | 'line-width' | 'length' | 'any' | 'shadow' | ||
| arbitrary(match.$$, themeSection, context); | ||
| if (value != null) { | ||
| match._ = value; | ||
| match._ = match.input[0] == '-' ? `calc(${value} * -1)` : value; | ||
| return factory(match, context, themeSection); | ||
@@ -1143,6 +1213,6 @@ } | ||
| }); | ||
| if (typeof color != 'string') { | ||
| console.warn(`Invalid color ${colorMatch} (from ${match.input}):`, color); | ||
| return; | ||
| } | ||
| // if (typeof color != 'string') { | ||
| // console.warn(`Invalid color ${colorMatch} (from ${match.input}):`, color) | ||
| // return | ||
| // } | ||
| if (resolve) { | ||
@@ -1380,3 +1450,3 @@ match._ = { | ||
| e: escape, | ||
| h: typeof hash$1 == 'function' ? hash$1 : hash$1 === true ? hash : (value)=>value | ||
| h: typeof hash$1 == 'function' ? hash$1 : hash$1 ? hash : (value)=>value | ||
| , | ||
@@ -1408,5 +1478,3 @@ s (property, value) { | ||
| const resolved = resolver(value, context); | ||
| if (resolved) { | ||
| return resolved; | ||
| } | ||
| if (resolved) return resolved; | ||
| } | ||
@@ -1494,9 +1562,7 @@ } | ||
| function insert(rule) { | ||
| if (rule.n) { | ||
| rule = { | ||
| ...rule, | ||
| n: context.h(rule.n) | ||
| }; | ||
| } | ||
| const css = stringify(rule); | ||
| rule = { | ||
| ...rule, | ||
| n: rule.n && context.h(rule.n) | ||
| }; | ||
| const css = stringify$1(rule); | ||
| // If not already inserted | ||
@@ -1516,4 +1582,4 @@ if (css && !insertedRules.has(css)) { | ||
| return Object.defineProperties(function tw(strings, ...interpolations) { | ||
| if (!cache.size && config.preflight) { | ||
| for (let preflight of config.preflight){ | ||
| if (!cache.size) { | ||
| for (let preflight of asArray(config.preflight)){ | ||
| if (typeof preflight == 'function') { | ||
@@ -1532,8 +1598,3 @@ preflight = preflight(context); | ||
| for (const rule of translate(parse(tokens), context)){ | ||
| const name = insert(rule); | ||
| if (rule.c) { | ||
| rule.c.split(' ').forEach((x)=>classNames.add(x) | ||
| ); | ||
| } | ||
| if (name) classNames.add(name); | ||
| classNames.add(rule.c).add(insert(rule)); | ||
| } | ||
@@ -1543,3 +1604,3 @@ // TODO try do keep classNames unmodified or same order | ||
| ...classNames | ||
| ].join(' '); | ||
| ].filter(Boolean).join(' '); | ||
| // Remember the generated class name | ||
@@ -1567,101 +1628,3 @@ cache.set(tokens, className).set(className, className); | ||
| function createStyleElement(parent = document.head) { | ||
| // Find existing or create a new one | ||
| const element = parent.querySelector('#tw') || document.createElement('style'); | ||
| // mark as twind stylesheet | ||
| element.id = 'tw'; | ||
| parent.append(element); | ||
| return element; | ||
| } | ||
| function cssom(sheet) { | ||
| let offset = sheet?.cssRules.length || 0; | ||
| return { | ||
| get target () { | ||
| if (!sheet) { | ||
| sheet = createStyleElement().sheet; | ||
| offset = 0; | ||
| } | ||
| return sheet; | ||
| }, | ||
| clear () { | ||
| // remove all added rules | ||
| if (sheet) { | ||
| while(sheet.cssRules.length > offset){ | ||
| sheet.deleteRule(offset); | ||
| } | ||
| } | ||
| }, | ||
| destroy () { | ||
| if (offset) { | ||
| this.clear(); | ||
| } else { | ||
| sheet?.ownerNode?.remove(); | ||
| } | ||
| }, | ||
| insert (css, index) { | ||
| try { | ||
| // Insert | ||
| this.target.insertRule(css, offset + index); | ||
| } catch (error) { | ||
| // Empty rule to keep index valid | ||
| this.target.insertRule('*{}', offset + index); | ||
| // Some thrown errors are because of specific pseudo classes | ||
| // lets filter them to prevent unnecessary warnings | ||
| // ::-moz-focus-inner | ||
| // :-moz-focusring | ||
| if (!/:-[mwo]/.test(css)) { | ||
| // TODO log css | ||
| console.warn(error); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| function dom(element) { | ||
| let offset = element?.childNodes.length || 0; | ||
| return { | ||
| get target () { | ||
| if (!element) { | ||
| element = createStyleElement(); | ||
| offset = 0; | ||
| } | ||
| return element; | ||
| }, | ||
| clear () { | ||
| // remove all added nodes | ||
| if (element) { | ||
| while(element.childNodes.length > offset){ | ||
| element.removeChild(element.lastChild); | ||
| } | ||
| } | ||
| }, | ||
| destroy () { | ||
| if (offset) { | ||
| this.clear(); | ||
| } else { | ||
| element?.remove(); | ||
| } | ||
| }, | ||
| insert (css, index) { | ||
| this.target.insertBefore(document.createTextNode(css), this.target.childNodes[offset + index] || null); | ||
| } | ||
| }; | ||
| } | ||
| function virtual(target = []) { | ||
| const offset = target.length; | ||
| return { | ||
| target, | ||
| clear () { | ||
| target.length = offset; | ||
| }, | ||
| destroy () { | ||
| this.clear(); | ||
| }, | ||
| insert (css, index) { | ||
| target.splice(offset + index, 0, css); | ||
| } | ||
| }; | ||
| } | ||
| export { arbitrary, asArray, colorFromTheme, consume, css, cssom, cx, defineConfig, dom, escape, extract, fromTheme, hash, mql, observe, shortcut, style, toColorValue, twind, virtual }; | ||
| export { arbitrary, asArray, colorFromTheme, consume, css, cssom, cx, defineConfig, dom, escape, extract, fromTheme, hash, mql, observe, shortcut, stringify, style, toColorValue, twind, virtual }; | ||
| //# sourceMappingURL=core.js.map |
| { | ||
| "name": "@twind/core", | ||
| "version": "1.0.0-next.13", | ||
| "version": "1.0.0-next.14", | ||
| "description": "compiles tailwind like shorthand syntax into CSS", | ||
@@ -27,2 +27,6 @@ "type": "module", | ||
| }, | ||
| "funding": { | ||
| "type": "opencollective", | ||
| "url": "https://opencollective.com/twind" | ||
| }, | ||
| "engines": { | ||
@@ -79,3 +83,3 @@ "node": ">=12.4" | ||
| "types": "./core.d.ts", | ||
| "readme": "# @twind/core\n\nMinimal implementation of a tailwind-compatible CSS-in-JS framework.\n\n**This package does not contain any Tailwindcss rules. These are defined in [@twind/preset-tailwind](../preset-tailwind).**\n\n---\n\n## READ THIS FIRST!\n\n**Twind v1 is still in beta. Expect bugs!**\n\n---\n\n## Installation\n\nInstall from npm:\n\n```sh\n# Using npm\nnpm install @twind/core@next\n\n# Using Yarn\nyarn add @twind/core@next\n```\n\n## Usage\n\n```js\nimport { twind, cssom, observe } from '@twind/core'\n\nconst tw = observe(\n twind(\n {\n theme: {\n /* .. */\n },\n rules: [\n /* ... */\n ],\n },\n cssom(),\n ),\n)\n```\n\n## API\n\n### `twind`\n\nTDB\n\n### `cx`\n\n```js\nimport { cx } from '@twind/core'\n\n// Set a className\nelement.className = cx`\n underline\n /* multi\n line\n comment\n */\n hover:focus:!{\n sm:{italic why}\n lg:-{px}\n -mx-1\n }\n // Position\n !top-1 !-bottom-2\n text-{xl black}\n`\n```\n\n### `shortcut`\n\nTDB\n\n### `style`\n\nTDB\n\n### `extract(html, tw)`\n\nUsed for static HTML processing (usually to provide SSR support for your javascript-powered web apps) — powered by [consume(html, tw)](#consume-html-tw)\n\n```js\nimport { twind, virtual, extract } from '@twind/core'\n\n// can be re-used\nconst tw = twind({ /* config */, virtual()}\n\nfunction render() {\n const { html, css } = extract(app(), tw)\n\n // inject as last element into the head\n return html.replace('</head>', `<style id=\"tw\">${css}</style></head>`)\n}\n```\n\n### `consume(html, tw)`\n\nUsed for static HTML processing (usually to provide SSR support for your javascript-powered web apps)\n\n1. parse the markup and process element classes with the provided Twind instance\n2. update the class attributes _if_ necessary\n3. return the HTML string with the final element classes\n\n```js\nimport { twind, virtual, consume } from '@twind/core'\n\n// can be re-used\nconst tw = twind({ /* config */, virtual()}\n\nfunction render() {\n const html = app()\n\n // clear all styles\n tw.clear()\n\n // generated markup\n const markup = comsume(html, tw)\n\n // create CSS\n const css = tw.target.join('')\n\n // inject as last element into the head\n return markup.replace('</head>', `<style id=\"tw\">${css}</style></head>`)\n}\n```\n" | ||
| "readme": "# @twind/core\n\nMinimal implementation of a tailwind-compatible CSS-in-JS framework.\n\n**This package does not contain any Tailwindcss rules. These are defined in [@twind/preset-tailwind](../preset-tailwind).**\n\n---\n\n## READ THIS FIRST!\n\n**Twind v1 is still in beta. Expect bugs!**\n\n---\n\n## Installation\n\nInstall from npm:\n\n```sh\n# Using npm\nnpm install @twind/core@next\n\n# Using Yarn\nyarn add @twind/core@next\n```\n\n## Usage\n\n```js\nimport { twind, cssom, observe } from '@twind/core'\n\nconst tw = observe(\n twind(\n {\n theme: {\n /* .. */\n },\n rules: [\n /* ... */\n ],\n },\n cssom(),\n ),\n)\n```\n\n## API\n\n### `twind`\n\nTDB\n\n### `cx`\n\n```js\nimport { cx } from '@twind/core'\n\n// Set a className\nelement.className = cx`\n underline\n /* multi\n line\n comment\n */\n hover:focus:!{\n sm:{italic why}\n lg:-{px}\n -mx-1\n }\n // Position\n !top-1 !-bottom-2\n text-{xl black}\n`\n```\n\n### `shortcut`\n\nTDB\n\n### `style`\n\nTDB\n\n### `extract(html, tw)`\n\nUsed for static HTML processing (usually to provide SSR support for your javascript-powered web apps) — powered by [consume(html, tw)](#consumehtml-tw)\n\n**Note**: This clears the Twind instance before processing the HTML.\n\n```js\nimport { twind, virtual, extract } from '@twind/core'\n\n// can be re-used\nconst tw = twind(\n {\n /* config */\n },\n virtual(),\n)\n\nfunction render() {\n const { html, css } = extract(renderApp(), tw)\n\n // inject as last element into the head\n return html.replace('</head>', `<style data-twind>${css}</style></head>`)\n}\n```\n\n### `consume(html, tw)`\n\nUsed for static HTML processing (usually to provide SSR support for your javascript-powered web apps)\n\n1. parse the markup and process element classes with the provided Twind instance\n2. update the class attributes _if_ necessary\n3. return the HTML string with the final element classes\n\n```js\nimport { twind, virtual, consume, stringify } from '@twind/core'\n\n// can be re-used\nconst tw = twind(\n {\n /* config */\n },\n virtual(),\n)\n\nfunction render() {\n const html = renderApp()\n\n // clear all styles\n tw.clear()\n\n // generated markup\n const markup = comsume(html, tw)\n\n // create CSS\n const css = stringify(tw.target)\n\n // inject as last element into the head\n return markup.replace('</head>', `<style data-twind>${css}</style></head>`)\n}\n```\n" | ||
| } |
@@ -86,4 +86,6 @@ # @twind/core | ||
| Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) — powered by [consume(html, tw)](#consume-html-tw) | ||
| Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) — powered by [consume(html, tw)](#consumehtml-tw) | ||
| **Note**: This clears the Twind instance before processing the HTML. | ||
| ```js | ||
@@ -93,9 +95,14 @@ import { twind, virtual, extract } from '@twind/core' | ||
| // can be re-used | ||
| const tw = twind({ /* config */, virtual()} | ||
| const tw = twind( | ||
| { | ||
| /* config */ | ||
| }, | ||
| virtual(), | ||
| ) | ||
| function render() { | ||
| const { html, css } = extract(app(), tw) | ||
| const { html, css } = extract(renderApp(), tw) | ||
| // inject as last element into the head | ||
| return html.replace('</head>', `<style id="tw">${css}</style></head>`) | ||
| return html.replace('</head>', `<style data-twind>${css}</style></head>`) | ||
| } | ||
@@ -113,9 +120,14 @@ ``` | ||
| ```js | ||
| import { twind, virtual, consume } from '@twind/core' | ||
| import { twind, virtual, consume, stringify } from '@twind/core' | ||
| // can be re-used | ||
| const tw = twind({ /* config */, virtual()} | ||
| const tw = twind( | ||
| { | ||
| /* config */ | ||
| }, | ||
| virtual(), | ||
| ) | ||
| function render() { | ||
| const html = app() | ||
| const html = renderApp() | ||
@@ -129,7 +141,7 @@ // clear all styles | ||
| // create CSS | ||
| const css = tw.target.join('') | ||
| const css = stringify(tw.target) | ||
| // inject as last element into the head | ||
| return markup.replace('</head>', `<style id="tw">${css}</style></head>`) | ||
| return markup.replace('</head>', `<style data-twind>${css}</style></head>`) | ||
| } | ||
| ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by9.09%
144
Worsened metrics
- Total package byte prevSize
- decreased by-1.01%
405965
- Lines of code
- decreased by-1.67%
5058
No dependency changes