@twind/core - npm Package Compare versions

Comparing version 1.0.0-next.12 to 1.0.0-next.13

CHANGELOG.md

 # @twind/core
 
+## 1.0.0-next.13
+
+### Patch Changes
+
+- BREAKING(preset authors): removed `preset()` helper to simplify config merging — What needs to change? instead calling preset, return your preset ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+* remove auto string conversion for style selector; this wouldn't have worked with `css()` anyway ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+- add `comsume(html, tw)` to process static HTML ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+* BREAKING: rename `config.tag` to `config.hash` as it better reflects what it does ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+- feat: support array property value which act as fallbacks for browser taht do not support a specific syntax or value ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+* only update class attributes if the class names within are different (ignore order) ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+- fix: ensure nullish values are not converted to array with one nullish element ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+* feat: `@layer ...` values can be arrays; this allows the same selector several times ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+- add `extract(html, tw)` to simplify SSR use case ([#244](https://github.com/tw-in-js/twind/pull/244))
+
+* fix: for unnamed rules apply the condition in normal order; otherwise `&..` is applied before there is a selector ([#244](https://github.com/tw-in-js/twind/pull/244))
+
 ## 1.0.0-next.12
@@ -4,0 +28,0 @@

core.d.ts

@@ -8,3 +8,3 @@ import * as CSS$1 from 'csstype';
 declare type TypedAtRules = {
-    [key in TypedAtRulesKeys]?: CSSBase;
+    [key in TypedAtRulesKeys]?: key extends `@layer ${string}` ? MaybeArray<CSSBase> : CSSBase;
 };
@@ -118,3 +118,3 @@ interface BaseProperties extends TypedAtRules {
 declare type PreflightThunk<Theme extends BaseTheme = BaseTheme> = (context: Context<Theme>) => Preflight | Falsey;
-declare type TagFunction = (value: string) => string;
+declare type HashFunction = (value: string) => string;
 interface TwindConfig<Theme extends BaseTheme = BaseTheme> {
@@ -125,3 +125,3 @@ theme: ThemeConfig<Theme>;
     rules: Rule<Theme>[];
-    tag: boolean | undefined | TagFunction;
+    hash?: boolean | undefined | HashFunction;
     stringify: StringifyDeclaration<Theme>;
@@ -134,9 +134,9 @@ ignorelist: (string | RegExp)[];
 declare type ExtractThemes<Theme, Presets extends Preset<any>[]> = UnionToIntersection<ExtractTheme<Omit<Theme, 'extend'> | BaseTheme | ArrayType<Presets>>>;
-interface TwindPresetConfig<Theme extends BaseTheme = BaseTheme> {
-    theme?: ThemeConfig<Theme>;
-    preflight?: false | Preflight | PreflightThunk<Theme>;
-    variants?: Variant<Theme>[];
-    rules?: Rule<Theme>[];
-    tag?: boolean | undefined | TagFunction;
-    stringify?: StringifyDeclaration<Theme>;
+interface TwindPresetConfig<Theme = BaseTheme> {
+    theme?: ThemeConfig<Theme & BaseTheme>;
+    preflight?: false | Preflight | PreflightThunk<Theme & BaseTheme>;
+    variants?: Variant<Theme & BaseTheme>[];
+    rules?: Rule<Theme & BaseTheme>[];
+    hash?: boolean | undefined | HashFunction;
+    stringify?: StringifyDeclaration<Theme & BaseTheme>;
     ignorelist?: (string | RegExp)[];
@@ -150,3 +150,3 @@ }
     rules?: Rule<BaseTheme & ExtractThemes<Theme, Presets>>[];
-    tag?: boolean | undefined | TagFunction;
+    hash?: boolean | undefined | HashFunction;
     stringify?: StringifyDeclaration<BaseTheme & ExtractThemes<Theme, Presets>>;
@@ -197,5 +197,6 @@ ignorelist?: MaybeArray<string | RegExp>;
 declare type MatchConverter<Theme extends BaseTheme = BaseTheme> = (match: MatchResult, context: Context<Theme>) => string;
-interface Preset<Theme = BaseTheme> {
-    (config: TwindConfig<Theme & BaseTheme>): TwindConfig<Theme & BaseTheme>;
+interface PresetThunk<Theme = BaseTheme> {
+    (config: TwindConfig<Theme & BaseTheme>): TwindPresetConfig<Theme>;
 }
+declare type Preset<Theme = BaseTheme> = TwindPresetConfig<Theme> | PresetThunk<Theme>;
 interface ClassObject {
@@ -208,2 +209,38 @@ [key: string]: boolean | number | unknown;
 
+/**
+ * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
+ *
+ * 1. parse the markup and process element classes with the provided Twind instance
+ * 2. update the class attributes _if_ necessary
+ * 3. return the HTML string with the final element classes
+ *
+ * ```js
+ * import { twind, virtual, consume } from '@twind/core'
+ *
+ * // can be re-used
+ * const tw = twind(config, virtual()}
+ *
+ * function render() {
+ *   const html = app()
+ *
+ *   // clear all styles
+ *   tw.clear()
+ *
+ *   // generated markup
+ *   const markup = consume(html, tw)
+ *
+ *   // create CSS
+ *   const css = tw.target.join('')
+ *
+ *   // inject as last element into the head
+ *   return markup.replace('</head>', `<style id="tw">${css}</style></head>`)
+ * }
+ * ```
+ *
+ * @param markup HTML to process
+ * @param tw a {@link Twind} instance
+ * @returns possibly modified HTML
+ */
+declare function consume(markup: string, tw: (className: string) => string): string;
+
 declare type CSSValue = string | number | Falsey;
@@ -215,8 +252,42 @@ declare function css(strings: TemplateStringsArray, ...interpolations: readonly CSSValue[]): string;
 
-declare function defineConfig<Theme = BaseTheme, Presets extends Preset<any>[] = Preset[]>({ presets, preflight, theme, variants, rules, tag, ignorelist, stringify, }: TwindUserConfig<Theme, Presets>): TwindConfig<BaseTheme & ExtractThemes<Theme, Presets>>;
+declare function defineConfig<Theme = BaseTheme, Presets extends Preset<any>[] = Preset[]>({ presets, ...userConfig }: TwindUserConfig<Theme, Presets>): TwindConfig<BaseTheme & ExtractThemes<Theme, Presets>>;
 
+/**
+ * Result of {@link extract}
+ */
+interface ExtractResult {
+    /** The possibly modified HTML */
+    html: string;
+    /** The generated CSS */
+    css: string;
+}
+/**
+ * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
+ *
+ * 1. parse the markup and process element classes with the provided Twind instance
+ * 2. update the class attributes _if_ necessary
+ * 3. return the HTML string with the final element classes
+ *
+ * ```js
+ * import { twind, virtual, extract } from '@twind/core'
+ *
+ * // can be re-used
+ * const tw = twind(config, virtual()}
+ *
+ * function render() {
+ *   const { html, css } = extract(app(), tw)
+ *
+ *   // inject as last element into the head
+ *   return html.replace('</head>', `<style id="tw">${css}</style></head>`)
+ * }
+ * ```
+ *
+ * @param markup HTML to process
+ * @param tw a {@link Twind} instance
+ * @returns the possibly modified html and css
+ */
+declare function extract<Theme extends BaseTheme = BaseTheme>(html: string, tw: Twind<Theme, string[]>): ExtractResult;
+
 declare function observe<Theme extends BaseTheme = BaseTheme, Target = unknown>(tw: Twind<Theme, Target>, target?: false | HTMLElement): Twind<Theme, Target>;
 
-declare function preset<Theme extends BaseTheme = BaseTheme>(presetConfig: TwindPresetConfig<Theme> | ((config: TwindConfig<Theme & BaseTheme>) => TwindPresetConfig<Theme>)): Preset<Theme>;
-
 declare type ThemeMatchResult<Value> = MatchResult & {
@@ -309,4 +380,4 @@ /** The found theme value */
 interface StyleFunction {
-    <Variants>(config?: StyleConfig<Variants>): Style<Variants> & string;
-    <Variants, BaseVariants>(base: Style<BaseVariants>, config?: StyleConfig<Variants, BaseVariants>): Style<Variants & BaseVariants> & string;
+    <Variants>(config?: StyleConfig<Variants>): Style<Variants>;
+    <Variants, BaseVariants>(base: Style<BaseVariants>, config?: StyleConfig<Variants, BaseVariants>): Style<Variants & BaseVariants>;
 }
@@ -320,5 +391,5 @@ declare type StyleProps<Variants> = VariantsProps<Variants>;
      * const button = style({
-     *   base: {
+     *   base: css({
      *     color: "DarkSlateGray"
-     *   }
+     *   })
      * })
@@ -333,20 +404,2 @@ *
     /**
-     * CSS Selector associated with the current component.
-     *
-     * ```js
-     * const button = style({
-     *   base: {
-     *     color: "DarkSlateGray"
-     *   }
-     * })
-     *
-     * const article = style({
-     *   base: {
-     *     [button]: { boxShadow: "0 0 0 5px" }
-     *   }
-     * })
-     * ```
-     */
-    toString(): string;
-    /**
      * CSS Class associated with the current component.
@@ -356,5 +409,5 @@ *
      * const button = style({
-     *   base: {
+     *   base: css`
      *     color: "DarkSlateGray"
-     *   }
+     *   `
      * })
@@ -371,11 +424,13 @@ *
      * const button = style({
-     *   base: {
+     *   base: css({
      *     color: "DarkSlateGray"
-     *   }
+     *   })
      * })
      *
      * const Card = styled({
-     *   base: {
-     *     [button.selector]: { boxShadow: "0 0 0 5px" }
-     *   }
+     *   base: css`
+     *     & ${button.selector} {
+     *       boxShadow: "0 0 0 5px"
+     *     }
+     *   `
      * })
@@ -400,3 +455,3 @@ * ```
 
-export { BaseProperties, BaseTheme, CSSBase, CSSFontFace, CSSNested, CSSObject, CSSProperties, CSSValue, Class, ClassObject, ColorFromThemeOptions, ColorFromThemeValue, ColorFunction, ColorFunctionOptions, ColorRecord, ColorValue, Context, CustomProperties, DefaultVariants, ExtractThemes, Falsey, FilterByThemeValue, KebabCase, MatchConverter, MatchResult, MaybeArray, MaybeColorValue, MaybeThunk, MorphVariant, PartialTheme, Preflight, PreflightThunk, Preset, PropsOf, Rule, RuleResolver, RuleResult, ScreenValue, Sheet, Shortcut, ShortcutFunction, ShortcutResolver, Shortcuts, StrictMorphVariant, StringifyDeclaration, Style, StyleConfig, StyleFunction, StyleProps, StyleToken, StyleTokenValue, TagFunction, ThemeConfig, ThemeFunction, ThemeMatchConverter, ThemeMatchResult, ThemeRuleResolver, ThemeSection, ThemeSectionResolver, ThemeSectionResolverContext, ThemeValue, Twind, TwindConfig, TwindPresetConfig, TwindRule, TwindUserConfig, TypedAtRules, Variant, VariantResolver, VariantResult, VariantsProps, When, arbitrary, asArray, colorFromTheme, css, cssom, cx, defineConfig, dom, escape, fromTheme, hash, mql, observe, preset, 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, style, toColorValue, twind, virtual };
 //# sourceMappingURL=core.d.ts.map

core.esnext.js

@@ -31,2 +31,124 @@ function parseColorComponent(chars, factor) {
 
+/**
+ * Determines if two class name strings contain the same classes.
+ *
+ * @param a first class names
+ * @param b second class names
+ * @returns are they different
+ */ function changed(a, b) {
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    return a !== b && '' + a.split(' ').sort() !== '' + b.split(' ').sort();
+}
+
+/**
+ * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
+ *
+ * 1. parse the markup and process element classes with the provided Twind instance
+ * 2. update the class attributes _if_ necessary
+ * 3. return the HTML string with the final element classes
+ *
+ * ```js
+ * import { twind, virtual, consume } from '@twind/core'
+ *
+ * // can be re-used
+ * const tw = twind(config, virtual()}
+ *
+ * function render() {
+ *   const html = app()
+ *
+ *   // clear all styles
+ *   tw.clear()
+ *
+ *   // generated markup
+ *   const markup = consume(html, tw)
+ *
+ *   // create CSS
+ *   const css = tw.target.join('')
+ *
+ *   // inject as last element into the head
+ *   return markup.replace('</head>', `<style id="tw">${css}</style></head>`)
+ * }
+ * ```
+ *
+ * @param markup HTML to process
+ * @param tw a {@link Twind} instance
+ * @returns possibly modified HTML
+ */ function consume(markup, tw) {
+    let result = '';
+    let lastChunkStart = 0;
+    extract$1(markup, (startIndex, endIndex, quote)=>{
+        const value = markup.slice(startIndex, endIndex);
+        const className = tw(value);
+        // We only need to shift things around if we need to actually change the markup
+        if (changed(value, className)) {
+            // We've hit another mutation boundary
+            // Add quote if necessary
+            quote = quote ? '' : '"';
+            result += markup.slice(lastChunkStart, startIndex) + quote + className + quote;
+            lastChunkStart = endIndex;
+        }
+    });
+    // Combine the current result with the tail-end of the input
+    return result + markup.slice(lastChunkStart, markup.length);
+}
+// For now we are using a simple parser adapted from htm (https://github.com/developit/htm/blob/master/src/build.mjs)
+// If we find any issues we can switch to something more sophisticated like
+// - https://github.com/acrazing/html5parser
+// - https://github.com/fb55/htmlparser2
+const MODE_SLASH = 0;
+const MODE_TEXT = 1;
+const MODE_WHITESPACE = 2;
+const MODE_TAGNAME = 3;
+const MODE_COMMENT = 4;
+const MODE_ATTRIBUTE = 5;
+function extract$1(markup, onClass) {
+    let mode = MODE_TEXT;
+    let startIndex = 0;
+    let quote = '';
+    let char = '';
+    let attributeName = '';
+    const commit = (currentIndex)=>{
+        if (mode == MODE_ATTRIBUTE && attributeName == 'class') {
+            onClass(startIndex, currentIndex, quote);
+        }
+    };
+    for(let position = 0; position < markup.length; position++){
+        char = markup[position];
+        if (mode == MODE_TEXT) {
+            if (char == '<') {
+                mode = markup.substr(position + 1, 3) == '!--' ? MODE_COMMENT : MODE_TAGNAME;
+            }
+        } else if (mode == MODE_COMMENT) {
+            // Ignore everything until the last three characters are '-', '-' and '>'
+            if (char == '>' && markup.slice(position - 2, position) == '--') {
+                mode = MODE_TEXT;
+            }
+        } else if (quote) {
+            if (char == quote && markup[position - 1] != '\\') {
+                commit(position);
+                mode = MODE_WHITESPACE;
+                quote = '';
+            }
+        } else if (char == '"' || char == "'") {
+            quote = char;
+            startIndex += 1;
+        } else if (char == '>') {
+            commit(position);
+            mode = MODE_TEXT;
+        } else if (!mode) ; else if (char == '=') {
+            attributeName = markup.slice(startIndex, position);
+            mode = MODE_ATTRIBUTE;
+            startIndex = position + 1;
+        } else if (char == '/' && (mode < MODE_ATTRIBUTE || markup[position + 1] == '>')) {
+            commit(position);
+            mode = MODE_SLASH;
+        } else if (/\s/.test(char)) {
+            // <a class=font-bold>
+            commit(position);
+            mode = MODE_WHITESPACE;
+            startIndex = position + 1;
+        }
+    }
+}
+
 const registry = new Map();
@@ -70,3 +192,3 @@ function register(className, factory) {
 function asArray(value = []) {
-    return Array.isArray(value) ? value : [
+    return Array.isArray(value) ? value : value == null ? [] : [
         value
@@ -302,3 +424,3 @@ ];
 }
-function convert({ n: name , i: important , v: variants = []  }, context, precedence, conditions = []) {
+function convert({ n: name , i: important , v: variants = []  }, context, precedence, conditions) {
     if (name) {
@@ -311,9 +433,9 @@ name = toClassName({
     }
+    conditions = [
+        ...asArray(conditions)
+    ];
     for (const variant of variants){
         const screen = context.theme('screens', variant);
         const condition = screen && mql(screen) || context.v(variant);
-        conditions = [
-            ...conditions,
-            condition
-        ];
+        conditions.push(condition);
         precedence |= screen ? 1 << 26 | atRulePrecedence(condition) : variant == 'dark' ? 1 << 30 /* Shifts.darkMode */  : condition[0] == '@' ? atRulePrecedence(condition) : pseudoPrecedence(condition);
@@ -330,10 +452,5 @@ }
 function stringify(rule) {
-    // TODO If selector contains a vendor prefix after a pseudo element or class,
-    // we consider them separately because merging the declarations into
-    // a single rule will cause browsers that do not understand the
-    // vendor prefix to throw out the whole rule
-    //  let selectorGroupName = selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
     if (rule.d) {
         const groups = [];
-        const selector1 = rule.r.reduceRight((selector, condition)=>{
+        const selector1 = rule.r['reduce' + (rule.n ? 'Right' : '')]((selector, condition)=>{
             if (condition[0] == '@') {
@@ -343,17 +460,12 @@ groups.unshift(condition);
             }
-            return selector ? selector.replace(/ *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g, (_, selectorPart, comma1 = '')=>// Return the current selector with the key matching multiple selectors if any
+            // Go over the selector and replace the matching multiple selectors if any
+            return selector.replace(/^$| *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g, (_, selectorPart = _, comma1 = '')=>// Return the current selector with the key matching multiple selectors if any
                 condition.replace(/ *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g, // If the current condition has a nested selector replace it
                 (_, conditionPart, comma = '')=>conditionPart.replace(/&/g, selectorPart) + comma
                 ) + comma1
-            ) : //     .split(/,(?![^[(]*])/g)
-            //     .map((selectorPart) =>
-            //       condition.split(/,(?![^[(]*])/g).map((conditionPart) =>
-            //         // If the current part has a nested selector replace it
-            //         conditionPart.replace(/&/g, selectorPart),
-            //       ),
-            //     )
-            //     .join(',')
-            condition;
-        }, rule.n && '.' + escape(rule.n));
-        if (selector1) groups.push(selector1);
+            );
+        }, rule.n ? '.' + escape(rule.n) : '');
+        if (selector1) {
+            groups.push(selector1);
+        }
         return groups.reduceRight((body, grouping)=>grouping + '{' + body + '}'
@@ -623,3 +735,3 @@ , rule.d);
     for(let key in style || {}){
-        let value1 = style[key];
+        const value1 = style[key];
         if (key[0] == '@') {
@@ -645,8 +757,10 @@ if (!value1) continue;
                     {
-                        rules.push(...serialize$(value1, {
-                            n: name,
-                            p: moveToLayer(precedence, Layer[key[7]]),
-                            r: conditions,
-                            i: important
-                        }, context));
+                        for (const css of asArray(value1)){
+                            rules.push(...serialize$(css, {
+                                n: name,
+                                p: moveToLayer(precedence, Layer[key[7]]),
+                                r: conditions,
+                                i: important
+                            }, context));
+                        }
                         continue;
@@ -737,28 +851,24 @@ }
             maxPropertyPrecedence = Math.max(maxPropertyPrecedence, declarationPropertyPrecedence(key));
-            // support theme(...) function in values
-            // calc(100vh - theme('spacing.12'))
-            value1 = resolveThemeFunction(String(value1), context) + (important ? ' !important' : '');
-            declarations += (declarations ? ';' : '') + asArray(value1).map((value)=>context.s(key, value)
+            declarations += (declarations ? ';' : '') + asArray(value1).map((value)=>context.s(key, // support theme(...) function in values
+                // calc(100vh - theme('spacing.12'))
+                // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+                resolveThemeFunction('' + value, context) + (important ? ' !important' : ''))
             ).join(';');
         }
     }
-    // We have collected all properties
-    // if there have been some we need to create a css rule
-    if (numberOfDeclarations) {
-        if (name) {
-            name = context.h(name);
-        }
-        rules.unshift({
-            n: name,
-            p: precedence,
-            o: // number of declarations (descending)
-            Math.max(0, 15 - numberOfDeclarations) + // greatest precedence of properties
-            // if there is no property precedence this is most likely a custom property only declaration
-            // these have the highest precedence
-            Math.min(maxPropertyPrecedence || 15, 15) * 1.5,
-            r: conditions,
-            // stringified declarations
-            d: declarations
-        });
+    if (name) {
+        name = context.h(name);
     }
+    rules.unshift({
+        n: name,
+        p: precedence,
+        o: // number of declarations (descending)
+        Math.max(0, 15 - numberOfDeclarations) + // greatest precedence of properties
+        // if there is no property precedence this is most likely a custom property only declaration
+        // these have the highest precedence
+        Math.min(maxPropertyPrecedence || 15, 15) * 1.5,
+        r: conditions,
+        // stringified declarations
+        d: declarations
+    });
     // only keep layer bits for merging
@@ -837,16 +947,53 @@ return rules.sort(compareTwindRules);
 
-function defineConfig({ presets =[] , preflight , theme ={} , variants =[] , rules =[] , tag , ignorelist =[] , stringify =noprefix  }) {
-    let result = {
-        preflight: preflight != false && asArray(preflight),
-        theme: theme,
-        variants,
-        rules,
-        tag,
-        ignorelist: asArray(ignorelist),
-        stringify
+function defineConfig({ presets =[] , ...userConfig }) {
+    // most user config values go first to have precendence over preset config
+    // only `preflight` and `theme` are applied as last preset to override all presets
+    let config = {
+        preflight: userConfig.preflight !== false && [],
+        theme: {},
+        variants: asArray(userConfig.variants),
+        rules: asArray(userConfig.rules),
+        ignorelist: asArray(userConfig.ignorelist),
+        hash: userConfig.hash,
+        stringify: userConfig.stringify || noprefix
     };
-    for (const preset of presets){
-        result = preset(result);
+    for (const preset of asArray([
+        ...presets,
+        {
+            preflight: userConfig.preflight !== false && asArray(userConfig.preflight),
+            theme: userConfig.theme
+        }, 
+    ])){
+        const { preflight , theme , variants , rules , hash =config.hash , ignorelist , stringify =config.stringify ,  } = typeof preset == 'function' ? preset(config) : preset;
+        config = {
+            // values defined by user or previous presets take precedence
+            preflight: config.preflight !== false && preflight !== false && [
+                ...config.preflight,
+                ...asArray(preflight)
+            ],
+            theme: {
+                ...config.theme,
+                ...theme,
+                extend: {
+                    ...config.theme.extend,
+                    ...theme?.extend
+                }
+            },
+            variants: [
+                ...config.variants,
+                ...asArray(variants)
+            ],
+            rules: [
+                ...config.rules,
+                ...asArray(rules)
+            ],
+            ignorelist: [
+                ...config.ignorelist,
+                ...asArray(ignorelist)
+            ],
+            hash,
+            stringify
+        };
     }
-    return result;
+    return config;
 }
@@ -857,2 +1004,34 @@ function noprefix(property, value) {
 
+/**
+ * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
+ *
+ * 1. parse the markup and process element classes with the provided Twind instance
+ * 2. update the class attributes _if_ necessary
+ * 3. return the HTML string with the final element classes
+ *
+ * ```js
+ * import { twind, virtual, extract } from '@twind/core'
+ *
+ * // can be re-used
+ * const tw = twind(config, virtual()}
+ *
+ * function render() {
+ *   const { html, css } = extract(app(), tw)
+ *
+ *   // inject as last element into the head
+ *   return html.replace('</head>', `<style id="tw">${css}</style></head>`)
+ * }
+ * ```
+ *
+ * @param markup HTML to process
+ * @param tw a {@link Twind} instance
+ * @returns the possibly modified html and css
+ */ function extract(html, tw) {
+    tw.clear();
+    return {
+        html: consume(html, tw),
+        css: tw.target.join('')
+    };
+}
+
 function observe(tw, target1 = typeof document != 'undefined' && document.documentElement) {
@@ -886,5 +1065,6 @@ if (!target1) return tw;
         // Not using target.classList.value (not supported in all browsers) or target.class (this is an SVGAnimatedString for svg)
-        const tokens = target.getAttribute?.('class');
+        const tokens = target?.getAttribute?.('class');
         const className = tokens && tw(tokens);
-        if (tokens !== className) {
+        // try do keep classNames unmodified
+        if (tokens && changed(tokens, className)) {
             target.setAttribute('class', className);
@@ -909,36 +1089,2 @@ }
 
-function preset(presetConfig) {
-    return (config)=>{
-        const { preflight , theme , variants =[] , rules =[] , tag =config.tag , ignorelist =[] , stringify =config.stringify ,  } = typeof presetConfig == 'function' ? presetConfig(config) : presetConfig;
-        return {
-            preflight: config.preflight && preflight != false && [
-                preflight,
-                ...config.preflight
-            ],
-            theme: {
-                ...theme,
-                ...config.theme,
-                extend: {
-                    ...theme?.extend,
-                    ...config.theme.extend
-                }
-            },
-            variants: [
-                ...config.variants,
-                ...variants
-            ],
-            rules: [
-                ...config.rules,
-                ...rules
-            ],
-            tag,
-            ignorelist: [
-                ...config.ignorelist,
-                ...ignorelist
-            ],
-            stringify
-        };
-    };
-}
-
 function fromTheme(/** Theme section to use (default: `$1` — The first matched group) */ section1, /** The css property (default: value of {@link section}) */ resolve, convert) {
@@ -1132,7 +1278,4 @@ const factory = !resolve ? ({ 1: $1 , _  }, context, section)=>({
     }, Object.getOwnPropertyDescriptors({
-        toString () {
-            return this.selector;
-        },
+        className,
         defaults,
-        className,
         selector: '.' + escape(className)
@@ -1219,3 +1362,3 @@ }));
 
-function createContext({ theme , variants , rules , tag , stringify , ignorelist  }) {
+function createContext({ theme , variants , rules , hash: hash$1 , stringify , ignorelist  }) {
     // Used to cache resolved rule values
@@ -1233,6 +1376,6 @@ const variantCache = new Map();
     return {
-        h: typeof tag == 'function' ? tag : tag === true ? hash : (value)=>value
-        ,
         theme: makeThemeFunction(theme),
         e: escape,
+        h: typeof hash$1 == 'function' ? hash$1 : hash$1 === true ? hash : (value)=>value
+        ,
         s (property, value) {
@@ -1369,4 +1512,4 @@ return stringify(property, value, this);
     return Object.defineProperties(function tw(strings, ...interpolations) {
-        if (!cache.size) {
-            asArray(config.preflight).forEach((preflight)=>{
+        if (!cache.size && config.preflight) {
+            for (let preflight of config.preflight){
                 if (typeof preflight == 'function') {
@@ -1378,3 +1521,3 @@ preflight = preflight(context);
                 }
-            });
+            }
         }
@@ -1517,3 +1660,3 @@ const tokens = interpolate(strings, interpolations);
 
-export { arbitrary, asArray, colorFromTheme, css, cssom, cx, defineConfig, dom, escape, fromTheme, hash, mql, observe, preset, shortcut, style, toColorValue, twind, virtual };
+export { arbitrary, asArray, colorFromTheme, consume, css, cssom, cx, defineConfig, dom, escape, extract, fromTheme, hash, mql, observe, shortcut, style, toColorValue, twind, virtual };
 //# sourceMappingURL=core.esnext.js.map

core.global.js

@@ -1,2 +0,1 @@
-const TwindCore=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,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function e(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},e=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),e.forEach(function(b){d(a,b,c[b])})}return a}function f(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 g=new Map();function h(a,b){return g.set(a,b),a}const i="undefined"!=typeof CSS&&CSS.escape||(a=>a.replace(/[!"'`*+.,;:\\/<=>?@#$%&^|~()[\]{}]/g,"\\$&").replace(/^\d/,"\\3$& "));function j(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 k(a,b="@media "){return b+l(a).map(a=>("string"==typeof a&&(a={min:a}),a.raw||Object.keys(a).map(b=>`(${b}-width:${a[b]})`).join(" and "))).join(",")}function l(a=[]){return Array.isArray(a)?a:[a]}function m(a){return[...a.v,(a.i?"!":"")+a.n].join(":")}const n={d:0,b:134217728,c:268435456,s:671088640,u:805306368,o:939524096};function o(a,b){return a& ~n.o|b}function p(a){var b;return(null===(b=a.match(/[-=:;]/g))|| void 0===b?void 0:b.length)||0}function q(a){return Math.min(/(?:^|width[^\d]+)(\d+(?:.\d+)?)(p)?/.test(a)?+RegExp.$1/(RegExp.$2?15:1)/10:0,15)<<22|Math.min(p(a),15)<<18}const r=["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 s(a){return 1<< ~(/:([a-z-]+)/.test(a)&& ~r.indexOf(RegExp.$1.slice(2,7))|| -18)}function t(a){return"-"==a[0]?0:p(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 u({n:a,i:b,v:c=[]},d,e,f=[]){for(const g of(a&&(a=m({n:a,i:b,v:c})),c)){const h=d.theme("screens",g),i=h&&k(h)||d.v(g);f=[...f,i],e|=h?67108864|q(i):"dark"==g?1073741824:"@"==i[0]?q(i):s(i)}return{n:a,p:e,r:f,i:b}}function v(a){if(a.d){const b=[],c=a.r.reduceRight((a,c)=>"@"==c[0]?(b.unshift(c),a):a?a.replace(/ *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g,(a,b,d="")=>c.replace(/ *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g,(a,c,d="")=>c.replace(/&/g,b)+d)+d):c,a.n&&"."+i(a.n));return c&&b.push(c),b.reduceRight((a,b)=>b+"{"+a+"}",a.d)}}function w(a,b=" "){return a.map(a=>Array.isArray(a)?(","==b?"":"~(")+w(a,",")+(","==b?"":")"):m(a)).join(b)}function x(a,b){const c=[];let d;for(const f of a)(null==d?void 0:d.p)==f.p&&""+d.r==""+f.r?(d.c=[d.c,f.c].filter(Boolean).join(" "),d.d=[d.d,f.d].filter(Boolean).join(";")):c.push(d=e({},f,{n:f.n&&b}));return c}function y(a,b,c){return h(a,(a,d)=>{const{n:f,p:g,r:h,i:i}=u(a,d,b);return c&&x(H(c,d,g,h,i,f).map(a=>a.n?e({},a,{p:o(a.p,b),o:0}):a),f)})}function z(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 A(a){return a.replace(/\/\*[^]*?\*\/|\/\/[^]*?$|\s\s+|\n/gm," ")}const B=/([ ,)])|\(|[^ ,)(:[]*(?:\[[^ ]+])?:*/g,C=new Map();function D(a){let b=C.get(a);if(!b){a=A(a);const c=[],d=[[]];let e,f;for(B.lastIndex=0;(f=B.exec(a))&&f[0];)if(f[1]){z(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(),z([...c,y(h.slice(0,-1)+j(JSON.stringify(i)),n.s,i),],d))}else f[0].endsWith("~")&&(e=[],d[0].push(e),d.unshift(e)),c.push(f[0]);z(c,d),C.set(a,b=d[0])}return b}const E=new Intl.Collator("en",{numeric:!0});function F(a,b){for(var c=0,d=a.length;c<d;){const e=d+c>>1;0>=G(a[e],b)?c=e+1:d=e}return d}function G(a,b){const c=a.p&n.o;return c==(b.p&n.o)&&(c==n.b||c==n.o)?0:a.p-b.p||a.o-b.o||E.compare(""+a.r,""+b.r)||E.compare(a.n,b.n)}function H(a,b,c=n.u,d,e,f){const g=[];for(const h of a)for(const i of Array.isArray(h)?x(H(h,b,(c&n.o)==n.u?o(c,n.s):c,d,e),f||w([h])):I(h,b,c,d,e))g.splice(F(g,i),0,i);return g}function I(a,b,c,d,f){f&&!a.i&&(a=e({},a,{i:f}));const h=function(a,b){const c=g.get(a.n);return c?c(a,b):b.r(a.n)}(a,b);return h?"string"==typeof h?({r:d,p:c}=u(a,b,c,d),H([D(h)],b,c,d,a.i,a.n)):Array.isArray(h)?h.map(a=>e({o:0},a,{r:[...l(d),...l(a.r)],p:o(c,a.p||c)})):J(h,a,b,c,d):[{c:m(a),p:0,o:0,r:[]}]}function J(a,b,c,d,e=[]){return K(a,u(b,c,d,e),c)}function K(a,{n:b,p:c,r:d=[],i:f},g){const h=[];let i="",m=0,p=0;for(let r in a||{}){let s=a[r];if("@"==r[0]){if(!s)continue;switch(r[1]){case"a":h.push(...H([D(s)],g,c,d,f).map(a=>e({},a,{n:b})));continue;case"l":h.push(...K(s,{n:b,p:o(c,n[r[7]]),r:d,i:f},g));continue;case"i":h.push({p:-1,o:0,r:[],d:l(s).filter(Boolean).map(a=>r+" "+a).join(";")});continue;case"k":case"f":h.push({p:n.d,o:0,r:[r],d:K(s,{p:n.d},g).map(v).join("")});continue}}if("object"!=typeof s||Array.isArray(s))"label"==r&&s?b=s+j(JSON.stringify([c,f,a])):(s||0===s)&&(p+=1,m=Math.max(m,t(r=r.replace(/[A-Z]/g,"-$&").toLowerCase())),s=L(String(s),g)+(f?" !important":""),i+=(i?";":"")+l(s).map(a=>g.s(r,a)).join(";"));else if("@"==r[0]||r.includes("&")){let u=c;"@"==r[0]&&(u|=q(r=r.replace(/\bscreen\(([^)]+)\)/g,(a,b)=>{const c=g.theme("screens",b);return c?(u|=67108864,k(c,"")):a}))),h.push(...K(s,{n:b,p:u,r:[...d,r],i:f},g))}else h.push(...K(s,{p:c,r:[r]},g))}return p&&(b&&(b=g.h(b)),h.unshift({n:b,p:c,o:Math.max(0,15-p)+1.5*Math.min(m||15,15),r:d,d:i})),h.sort(G)}function L(a,b){return a.replace(/theme\((["'`])?(.+?)\1(?:\s*,\s*(["'`])?(.+?)\3)?\)/g,(a,c,d,e,f)=>b.theme(d,f))}function M(a,b,c){return b.reduce((b,d,e)=>b+c(d)+a[e+1],a[0])}const N=/ *(?:(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}))/g;function O(a){a=A(a);const b=[{}];let c;for(;c=N.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 P(a,b){return Array.isArray(a)&&Array.isArray(a.raw)?M(a,b,a=>Q(a).trim()):b.filter(Boolean).reduce((a,b)=>a+Q(b),a?Q(a):"")}function Q(a){let b="",c;if("string"==typeof a||"number"==typeof a)b+=" "+a;else if(Array.isArray(a))(c=P(a[0],a.slice(1)))&&(b+=" "+c);else for(const d in a)a[d]&&(b+=" "+d);return b}function R({presets:a=[],preflight:b,theme:c={},variants:d=[],rules:e=[],tag:f,ignorelist:g=[],stringify:h=S}){let i={preflight:!1!=b&&l(b),theme:c,variants:d,rules:e,tag:f,ignorelist:l(g),stringify:h};for(const j of a)i=j(i);return i}function S(a,b){return a+":"+b}function T(a,b,c){if("["==a[0]&&"]"==a.slice(-1)){if(a=L(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 U(a){return a.replace(/-./g,a=>a[1].toUpperCase())}const V=new Proxy(function(a,...b){return w([D(P(a,b))])},{get:function(a,b){return function(a,...c){return w(D(b+"~("+P(a,c)+")"))}}});function W(a={},b){const{label:c="style",base:d,props:f={},defaults:g,when:h=[]}=a,k=e({},null==b?void 0:b.defaults,g),l=j(JSON.stringify([c,null==b?void 0:b.className,d,f,k,h])),m=o("",d||"",n.c);function o(a,d,e){return y(((b?b.className.replace(/#.+$/,"~"):"")+c+a+l).replace(/[: ,()[\]]/,""),e,d&&D(d))}return Object.defineProperties(function(a){const c=e({},k,a);let d=(b?b(c)+" ":"")+m,g;for(const i in f){const j=f[i],l=c[i];if(l===Object(l)){let n="";for(const p in g="",l){const q=j[l[p]];q&&(n+="@"+p+"-"+l[p],g+=(g&&" ")+("_"==p?q:p+":("+q+")"))}g&&(d+=" "+o("--"+i+"-"+n,g,402653184))}else(g=j[l])&&(d+=" "+o("--"+i+"-"+l,g,402653184))}return h.forEach((a,b)=>{let e="";for(const f in a[0]){const h=c[f];if(h!==Object(h)&&""+h==""+a[0][f])e+=(e&&"_")+f+"-"+h;else{e="";break}}e&&(g=a[1])&&(d+=" "+o("-"+b+"--"+e,g,671088640))}),d},Object.getOwnPropertyDescriptors({toString(){return this.selector},defaults:k,className:m,selector:"."+i(m)}))}function X(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,X(e,f)),c[f.join("-")]=e,"DEFAULT"==d&&(c[[...b,d].join("-")]=e)}return c}function Y(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 Z(a){return _(a[0],a[1])}function $(a){return Array.isArray(a)?aa(a[0],a[1],a[2]):aa(a)}function _(a,b){return ca(a,"function"==typeof b?b:()=>b)}function aa(a,b,c){return Object.getPrototypeOf(a)===Object.prototype?fa(Object.keys(a).map(b=>{const c=a[b];return aa(b,"function"==typeof c?c:()=>c)}),(a,b,c)=>b(a,c)):ca(a,b?"string"==typeof b?(a,d)=>({[b]:c?c(a,d):ba(a.input,a.slice(1).find(Boolean)||a.$$||a.input)}):"function"==typeof b?b:()=>b:a=>({[a[1]]:ba(a.input,a.slice(2).find(Boolean)||a.$$||a.input)}))}function ba(a,b){return"-"==a[0]?`calc(${b} * -1)`:b}function ca(a,b){return ea(a,(a,c,d)=>da(a,c,b,d))}function da(a,b,c,d){const e=b.exec(a);if(e)return e.$$=a.slice(e[0].length),c(e,d)}function ea(a,b){return fa(l(a).map(ga),b)}function fa(a,b){return(c,d)=>{for(const e of a){const f=b(c,e,d);if(f)return f}}}function ga(a){return"string"==typeof a?new RegExp("^"+a+(a.includes("$")||"-"==a.slice(-1)?"":"$")):a}function ha(a=document.head){const b=a.querySelector("#tw")||document.createElement("style");return b.id="tw",a.append(b),b}return a.arbitrary=T,a.asArray=l,a.colorFromTheme=function(a={},b){return(d,e)=>{const{section:f=U(d[0]).replace("-","")+"Color"}=a;if(/^(\[[^\]]+]|[^/]+?)(?:\/(.+))?$/.test(d.$$)){const{$1:g,$2:h}=RegExp,i=e.theme(f,g)||T(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&&T(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.css=function(a,...b){const c=Array.isArray(a)?O(M(a,b,a=>"string"==typeof a||"number"==typeof a?a:"")):"string"==typeof a?O(a):a,{label:d="css"}=c,e=f(c,["label"]),g=d+j(JSON.stringify(e));return h(g,(a,b)=>J(e,a,b,n.o))},a.cssom=function(a){let b=(null==a?void 0:a.cssRules.length)||0;return{get target(){return a||(a=ha().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 w(D(P(a,b)))},a.defineConfig=R,a.dom=function(a){let b=(null==a?void 0:a.childNodes.length)||0;return{get target(){return a||(a=ha(),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=i,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=U(a||("-"==b[1][0]?b[1].slice(1):b[1]));let f=c.theme(e,b.$$);if(null==f&&(f=T(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=j,a.mql=k,a.observe=function(a,b=document.documentElement){if(!b)return a;const c=new MutationObserver(e);function d({target:b,addedNodes:c}){var d,f;const g=null===(f=(d=b).getAttribute)|| void 0===f?void 0:f.call(d,"class"),h=g&&a(g);g!==h&&b.setAttribute("class",h);for(let i=c.length;i--;){const j=c[i];e([{target:j,addedNodes:j.children||[]},])}}function e(a){a.forEach(d),c.takeRecords().forEach(d)}return e([{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.preset=function(a){return b=>{const{preflight:c,theme:d,variants:f=[],rules:g=[],tag:h=b.tag,ignorelist:i=[],stringify:j=b.stringify}="function"==typeof a?a(b):a;return{preflight:b.preflight&& !1!=c&&[c,...b.preflight],theme:e({},d,b.theme,{extend:e({},null==d?void 0:d.extend,b.theme.extend)}),variants:[...b.variants,...f],rules:[...b.rules,...g],tag:h,ignorelist:[...b.ignorelist,...i],stringify:j}}},a.shortcut=V,a.style=(a,b)=>"function"==typeof a?W(b,a):W(a),a.toColorValue=c,a.twind=function(a,b){const c=R(a),d=function({theme:a,variants:b,rules:c,tag:d,stringify:e,ignorelist:g}){const h=new Map(),k=new Map(),l=new Map(),m=new Map(),n=ea(g,(a,b)=>b.test(a));return{h:"function"==typeof d?d:!0===d?j:a=>a,theme:(function(a){var{extend:b={}}=a,c=f(a,["extend"]);const d={},e={colors:g("colors"),theme:g,negative(){return{}},breakpoints(a){const b={};for(const c in a)"string"==typeof a[c]&&(b["screen-"+c]=a[c]);return b}};function g(a,e,f){if(a){var i;if(/[.[]/.test(a)){const j=[];a.replace(/\[([^\]]+)\]|([^.[]+)/g,(a,b,c=b)=>j.push(c)),a=j.shift(),f=e,e=j.join("-")}const k=d[a]||Object.assign(Object.assign(d[a]={},h(c,a)),h(b,a));return null==e?k:null!==(i=k[e||"DEFAULT"])&& void 0!==i?i:f}const l={};for(const m in c)l[m]=g(m);return l}function h(a,b){let c=a[b];return("function"==typeof c&&(c=c(e)),c&&/color/i.test(b))?X(c):c}return g})(a),e:i,s(a,b){return e(a,b,this)},v(a){return l.has(a)||h.set(a,Y(a,b,k,Z,this)||"&:"+a),h.get(a)},r(a){return l.has(a)||l.set(a,!n(a,this)&&Y(a,c,m,$,this)),l.get(a)}}}(c),g=new Map(),h=[],k=new Set();function m(a){a.n&&(a=e({},a,{n:d.h(a.n)}));const c=v(a);if(c&&!k.has(c)){k.add(c);const f=F(h,a);b.insert(c,f,a),h.splice(f,0,a)}return a.n}return Object.defineProperties(function(a,...b){g.size||l(c.preflight).forEach(a=>{"function"==typeof a&&(a=a(d)),a&&J(a,{},d,n.b).forEach(m)});const e=P(a,b);let f=g.get(e);if(!f){const h=new Set();for(const i of H(D(e),d)){const j=m(i);i.c&&i.c.split(" ").forEach(a=>h.add(a)),j&&h.add(j)}f=[...h].join(" "),g.set(e,f).set(f,f)}return f},Object.getOwnPropertyDescriptors({get target(){return b.target},theme:d.theme,clear(){b.clear(),k.clear(),g.clear(),h.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){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

core.js

@@ -31,2 +31,124 @@ function parseColorComponent(chars, factor) {
 
+/**
+ * Determines if two class name strings contain the same classes.
+ *
+ * @param a first class names
+ * @param b second class names
+ * @returns are they different
+ */ function changed(a, b) {
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    return a !== b && '' + a.split(' ').sort() !== '' + b.split(' ').sort();
+}
+
+/**
+ * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
+ *
+ * 1. parse the markup and process element classes with the provided Twind instance
+ * 2. update the class attributes _if_ necessary
+ * 3. return the HTML string with the final element classes
+ *
+ * ```js
+ * import { twind, virtual, consume } from '@twind/core'
+ *
+ * // can be re-used
+ * const tw = twind(config, virtual()}
+ *
+ * function render() {
+ *   const html = app()
+ *
+ *   // clear all styles
+ *   tw.clear()
+ *
+ *   // generated markup
+ *   const markup = consume(html, tw)
+ *
+ *   // create CSS
+ *   const css = tw.target.join('')
+ *
+ *   // inject as last element into the head
+ *   return markup.replace('</head>', `<style id="tw">${css}</style></head>`)
+ * }
+ * ```
+ *
+ * @param markup HTML to process
+ * @param tw a {@link Twind} instance
+ * @returns possibly modified HTML
+ */ function consume(markup, tw) {
+    let result = '';
+    let lastChunkStart = 0;
+    extract$1(markup, (startIndex, endIndex, quote)=>{
+        const value = markup.slice(startIndex, endIndex);
+        const className = tw(value);
+        // We only need to shift things around if we need to actually change the markup
+        if (changed(value, className)) {
+            // We've hit another mutation boundary
+            // Add quote if necessary
+            quote = quote ? '' : '"';
+            result += markup.slice(lastChunkStart, startIndex) + quote + className + quote;
+            lastChunkStart = endIndex;
+        }
+    });
+    // Combine the current result with the tail-end of the input
+    return result + markup.slice(lastChunkStart, markup.length);
+}
+// For now we are using a simple parser adapted from htm (https://github.com/developit/htm/blob/master/src/build.mjs)
+// If we find any issues we can switch to something more sophisticated like
+// - https://github.com/acrazing/html5parser
+// - https://github.com/fb55/htmlparser2
+const MODE_SLASH = 0;
+const MODE_TEXT = 1;
+const MODE_WHITESPACE = 2;
+const MODE_TAGNAME = 3;
+const MODE_COMMENT = 4;
+const MODE_ATTRIBUTE = 5;
+function extract$1(markup, onClass) {
+    let mode = MODE_TEXT;
+    let startIndex = 0;
+    let quote = '';
+    let char = '';
+    let attributeName = '';
+    const commit = (currentIndex)=>{
+        if (mode == MODE_ATTRIBUTE && attributeName == 'class') {
+            onClass(startIndex, currentIndex, quote);
+        }
+    };
+    for(let position = 0; position < markup.length; position++){
+        char = markup[position];
+        if (mode == MODE_TEXT) {
+            if (char == '<') {
+                mode = markup.substr(position + 1, 3) == '!--' ? MODE_COMMENT : MODE_TAGNAME;
+            }
+        } else if (mode == MODE_COMMENT) {
+            // Ignore everything until the last three characters are '-', '-' and '>'
+            if (char == '>' && markup.slice(position - 2, position) == '--') {
+                mode = MODE_TEXT;
+            }
+        } else if (quote) {
+            if (char == quote && markup[position - 1] != '\\') {
+                commit(position);
+                mode = MODE_WHITESPACE;
+                quote = '';
+            }
+        } else if (char == '"' || char == "'") {
+            quote = char;
+            startIndex += 1;
+        } else if (char == '>') {
+            commit(position);
+            mode = MODE_TEXT;
+        } else if (!mode) ; else if (char == '=') {
+            attributeName = markup.slice(startIndex, position);
+            mode = MODE_ATTRIBUTE;
+            startIndex = position + 1;
+        } else if (char == '/' && (mode < MODE_ATTRIBUTE || markup[position + 1] == '>')) {
+            commit(position);
+            mode = MODE_SLASH;
+        } else if (/\s/.test(char)) {
+            // <a class=font-bold>
+            commit(position);
+            mode = MODE_WHITESPACE;
+            startIndex = position + 1;
+        }
+    }
+}
+
 const registry = new Map();
@@ -70,3 +192,3 @@ function register(className, factory) {
 function asArray(value = []) {
-    return Array.isArray(value) ? value : [
+    return Array.isArray(value) ? value : value == null ? [] : [
         value
@@ -302,3 +424,3 @@ ];
 }
-function convert({ n: name , i: important , v: variants = []  }, context, precedence, conditions = []) {
+function convert({ n: name , i: important , v: variants = []  }, context, precedence, conditions) {
     if (name) {
@@ -311,9 +433,9 @@ name = toClassName({
     }
+    conditions = [
+        ...asArray(conditions)
+    ];
     for (const variant of variants){
         const screen = context.theme('screens', variant);
         const condition = screen && mql(screen) || context.v(variant);
-        conditions = [
-            ...conditions,
-            condition
-        ];
+        conditions.push(condition);
         precedence |= screen ? 1 << 26 | atRulePrecedence(condition) : variant == 'dark' ? 1 << 30 /* Shifts.darkMode */  : condition[0] == '@' ? atRulePrecedence(condition) : pseudoPrecedence(condition);
@@ -330,10 +452,5 @@ }
 function stringify(rule) {
-    // TODO If selector contains a vendor prefix after a pseudo element or class,
-    // we consider them separately because merging the declarations into
-    // a single rule will cause browsers that do not understand the
-    // vendor prefix to throw out the whole rule
-    //  let selectorGroupName = selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
     if (rule.d) {
         const groups = [];
-        const selector1 = rule.r.reduceRight((selector, condition)=>{
+        const selector1 = rule.r['reduce' + (rule.n ? 'Right' : '')]((selector, condition)=>{
             if (condition[0] == '@') {
@@ -343,17 +460,12 @@ groups.unshift(condition);
             }
-            return selector ? selector.replace(/ *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g, (_, selectorPart, comma1 = '')=>// Return the current selector with the key matching multiple selectors if any
+            // Go over the selector and replace the matching multiple selectors if any
+            return selector.replace(/^$| *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g, (_, selectorPart = _, comma1 = '')=>// Return the current selector with the key matching multiple selectors if any
                 condition.replace(/ *((?:\\,|\(.+?\)|\[.+?\]|[^,])+) *(,|$)/g, // If the current condition has a nested selector replace it
                 (_, conditionPart, comma = '')=>conditionPart.replace(/&/g, selectorPart) + comma
                 ) + comma1
-            ) : //     .split(/,(?![^[(]*])/g)
-            //     .map((selectorPart) =>
-            //       condition.split(/,(?![^[(]*])/g).map((conditionPart) =>
-            //         // If the current part has a nested selector replace it
-            //         conditionPart.replace(/&/g, selectorPart),
-            //       ),
-            //     )
-            //     .join(',')
-            condition;
-        }, rule.n && '.' + escape(rule.n));
-        if (selector1) groups.push(selector1);
+            );
+        }, rule.n ? '.' + escape(rule.n) : '');
+        if (selector1) {
+            groups.push(selector1);
+        }
         return groups.reduceRight((body, grouping)=>grouping + '{' + body + '}'
@@ -623,3 +735,3 @@ , rule.d);
     for(let key in style || {}){
-        let value1 = style[key];
+        const value1 = style[key];
         if (key[0] == '@') {
@@ -645,8 +757,10 @@ if (!value1) continue;
                     {
-                        rules.push(...serialize$(value1, {
-                            n: name,
-                            p: moveToLayer(precedence, Layer[key[7]]),
-                            r: conditions,
-                            i: important
-                        }, context));
+                        for (const css of asArray(value1)){
+                            rules.push(...serialize$(css, {
+                                n: name,
+                                p: moveToLayer(precedence, Layer[key[7]]),
+                                r: conditions,
+                                i: important
+                            }, context));
+                        }
                         continue;
@@ -737,28 +851,24 @@ }
             maxPropertyPrecedence = Math.max(maxPropertyPrecedence, declarationPropertyPrecedence(key));
-            // support theme(...) function in values
-            // calc(100vh - theme('spacing.12'))
-            value1 = resolveThemeFunction(String(value1), context) + (important ? ' !important' : '');
-            declarations += (declarations ? ';' : '') + asArray(value1).map((value)=>context.s(key, value)
+            declarations += (declarations ? ';' : '') + asArray(value1).map((value)=>context.s(key, // support theme(...) function in values
+                // calc(100vh - theme('spacing.12'))
+                // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+                resolveThemeFunction('' + value, context) + (important ? ' !important' : ''))
             ).join(';');
         }
     }
-    // We have collected all properties
-    // if there have been some we need to create a css rule
-    if (numberOfDeclarations) {
-        if (name) {
-            name = context.h(name);
-        }
-        rules.unshift({
-            n: name,
-            p: precedence,
-            o: // number of declarations (descending)
-            Math.max(0, 15 - numberOfDeclarations) + // greatest precedence of properties
-            // if there is no property precedence this is most likely a custom property only declaration
-            // these have the highest precedence
-            Math.min(maxPropertyPrecedence || 15, 15) * 1.5,
-            r: conditions,
-            // stringified declarations
-            d: declarations
-        });
+    if (name) {
+        name = context.h(name);
     }
+    rules.unshift({
+        n: name,
+        p: precedence,
+        o: // number of declarations (descending)
+        Math.max(0, 15 - numberOfDeclarations) + // greatest precedence of properties
+        // if there is no property precedence this is most likely a custom property only declaration
+        // these have the highest precedence
+        Math.min(maxPropertyPrecedence || 15, 15) * 1.5,
+        r: conditions,
+        // stringified declarations
+        d: declarations
+    });
     // only keep layer bits for merging
@@ -837,16 +947,53 @@ return rules.sort(compareTwindRules);
 
-function defineConfig({ presets =[] , preflight , theme ={} , variants =[] , rules =[] , tag , ignorelist =[] , stringify =noprefix  }) {
-    let result = {
-        preflight: preflight != false && asArray(preflight),
-        theme: theme,
-        variants,
-        rules,
-        tag,
-        ignorelist: asArray(ignorelist),
-        stringify
+function defineConfig({ presets =[] , ...userConfig }) {
+    // most user config values go first to have precendence over preset config
+    // only `preflight` and `theme` are applied as last preset to override all presets
+    let config = {
+        preflight: userConfig.preflight !== false && [],
+        theme: {},
+        variants: asArray(userConfig.variants),
+        rules: asArray(userConfig.rules),
+        ignorelist: asArray(userConfig.ignorelist),
+        hash: userConfig.hash,
+        stringify: userConfig.stringify || noprefix
     };
-    for (const preset of presets){
-        result = preset(result);
+    for (const preset of asArray([
+        ...presets,
+        {
+            preflight: userConfig.preflight !== false && asArray(userConfig.preflight),
+            theme: userConfig.theme
+        }, 
+    ])){
+        const { preflight , theme , variants , rules , hash =config.hash , ignorelist , stringify =config.stringify ,  } = typeof preset == 'function' ? preset(config) : preset;
+        config = {
+            // values defined by user or previous presets take precedence
+            preflight: config.preflight !== false && preflight !== false && [
+                ...config.preflight,
+                ...asArray(preflight)
+            ],
+            theme: {
+                ...config.theme,
+                ...theme,
+                extend: {
+                    ...config.theme.extend,
+                    ...theme?.extend
+                }
+            },
+            variants: [
+                ...config.variants,
+                ...asArray(variants)
+            ],
+            rules: [
+                ...config.rules,
+                ...asArray(rules)
+            ],
+            ignorelist: [
+                ...config.ignorelist,
+                ...asArray(ignorelist)
+            ],
+            hash,
+            stringify
+        };
     }
-    return result;
+    return config;
 }
@@ -857,2 +1004,34 @@ function noprefix(property, value) {
 
+/**
+ * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
+ *
+ * 1. parse the markup and process element classes with the provided Twind instance
+ * 2. update the class attributes _if_ necessary
+ * 3. return the HTML string with the final element classes
+ *
+ * ```js
+ * import { twind, virtual, extract } from '@twind/core'
+ *
+ * // can be re-used
+ * const tw = twind(config, virtual()}
+ *
+ * function render() {
+ *   const { html, css } = extract(app(), tw)
+ *
+ *   // inject as last element into the head
+ *   return html.replace('</head>', `<style id="tw">${css}</style></head>`)
+ * }
+ * ```
+ *
+ * @param markup HTML to process
+ * @param tw a {@link Twind} instance
+ * @returns the possibly modified html and css
+ */ function extract(html, tw) {
+    tw.clear();
+    return {
+        html: consume(html, tw),
+        css: tw.target.join('')
+    };
+}
+
 function observe(tw, target1 = typeof document != 'undefined' && document.documentElement) {
@@ -886,5 +1065,6 @@ if (!target1) return tw;
         // Not using target.classList.value (not supported in all browsers) or target.class (this is an SVGAnimatedString for svg)
-        const tokens = target.getAttribute?.('class');
+        const tokens = target?.getAttribute?.('class');
         const className = tokens && tw(tokens);
-        if (tokens !== className) {
+        // try do keep classNames unmodified
+        if (tokens && changed(tokens, className)) {
             target.setAttribute('class', className);
@@ -909,36 +1089,2 @@ }
 
-function preset(presetConfig) {
-    return (config)=>{
-        const { preflight , theme , variants =[] , rules =[] , tag =config.tag , ignorelist =[] , stringify =config.stringify ,  } = typeof presetConfig == 'function' ? presetConfig(config) : presetConfig;
-        return {
-            preflight: config.preflight && preflight != false && [
-                preflight,
-                ...config.preflight
-            ],
-            theme: {
-                ...theme,
-                ...config.theme,
-                extend: {
-                    ...theme?.extend,
-                    ...config.theme.extend
-                }
-            },
-            variants: [
-                ...config.variants,
-                ...variants
-            ],
-            rules: [
-                ...config.rules,
-                ...rules
-            ],
-            tag,
-            ignorelist: [
-                ...config.ignorelist,
-                ...ignorelist
-            ],
-            stringify
-        };
-    };
-}
-
 function fromTheme(/** Theme section to use (default: `$1` — The first matched group) */ section1, /** The css property (default: value of {@link section}) */ resolve, convert) {
@@ -1132,7 +1278,4 @@ const factory = !resolve ? ({ 1: $1 , _  }, context, section)=>({
     }, Object.getOwnPropertyDescriptors({
-        toString () {
-            return this.selector;
-        },
+        className,
         defaults,
-        className,
         selector: '.' + escape(className)
@@ -1219,3 +1362,3 @@ }));
 
-function createContext({ theme , variants , rules , tag , stringify , ignorelist  }) {
+function createContext({ theme , variants , rules , hash: hash$1 , stringify , ignorelist  }) {
     // Used to cache resolved rule values
@@ -1233,6 +1376,6 @@ const variantCache = new Map();
     return {
-        h: typeof tag == 'function' ? tag : tag === true ? hash : (value)=>value
-        ,
         theme: makeThemeFunction(theme),
         e: escape,
+        h: typeof hash$1 == 'function' ? hash$1 : hash$1 === true ? hash : (value)=>value
+        ,
         s (property, value) {
@@ -1369,4 +1512,4 @@ return stringify(property, value, this);
     return Object.defineProperties(function tw(strings, ...interpolations) {
-        if (!cache.size) {
-            asArray(config.preflight).forEach((preflight)=>{
+        if (!cache.size && config.preflight) {
+            for (let preflight of config.preflight){
                 if (typeof preflight == 'function') {
@@ -1378,3 +1521,3 @@ preflight = preflight(context);
                 }
-            });
+            }
         }
@@ -1517,3 +1660,3 @@ const tokens = interpolate(strings, interpolations);
 
-export { arbitrary, asArray, colorFromTheme, css, cssom, cx, defineConfig, dom, escape, fromTheme, hash, mql, observe, preset, shortcut, style, toColorValue, twind, virtual };
+export { arbitrary, asArray, colorFromTheme, consume, css, cssom, cx, defineConfig, dom, escape, extract, fromTheme, hash, mql, observe, shortcut, style, toColorValue, twind, virtual };
 //# sourceMappingURL=core.js.map

package.json

 {
   "name": "@twind/core",
-  "version": "1.0.0-next.12",
+  "version": "1.0.0-next.13",
   "description": "compiles tailwind like shorthand syntax into CSS",
@@ -78,3 +78,3 @@ "type": "module",
   "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"
+  "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.md

@@ -46,1 +46,87 @@ # @twind/core
 ```
+
+## API
+
+### `twind`
+
+TDB
+
+### `cx`
+
+```js
+import { cx } from '@twind/core'
+
+// Set a className
+element.className = cx`
+  underline
+  /* multi
+    line
+    comment
+  */
+  hover:focus:!{
+    sm:{italic why}
+    lg:-{px}
+    -mx-1
+  }
+  // Position
+  !top-1 !-bottom-2
+  text-{xl black}
+`
+```
+
+### `shortcut`
+
+TDB
+
+### `style`
+
+TDB
+
+### `extract(html, tw)`
+
+Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) — powered by [consume(html, tw)](#consume-html-tw)
+
+```js
+import { twind, virtual, extract } from '@twind/core'
+
+// can be re-used
+const tw = twind({ /* config */, virtual()}
+
+function render() {
+  const { html, css } = extract(app(), tw)
+
+  // inject as last element into the head
+  return html.replace('</head>', `<style id="tw">${css}</style></head>`)
+}
+```
+
+### `consume(html, tw)`
+
+Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
+
+1. parse the markup and process element classes with the provided Twind instance
+2. update the class attributes _if_ necessary
+3. return the HTML string with the final element classes
+
+```js
+import { twind, virtual, consume } from '@twind/core'
+
+// can be re-used
+const tw = twind({ /* config */, virtual()}
+
+function render() {
+  const html = app()
+
+  // clear all styles
+  tw.clear()
+
+  // generated markup
+  const markup = comsume(html, tw)
+
+  // create CSS
+  const css = tw.target.join('')
+
+  // inject as last element into the head
+  return markup.replace('</head>', `<style id="tw">${css}</style></head>`)
+}
+```

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

410098

increased by9.03%

Lines of code

5144

increased by10.13%

Number of lines in readme file

132

increased by186.96%

No dependency changes