@unocss/core 0.18.1 → 0.20.2

package/dist/index.cjs

@@ -337,6 +337,7 @@ function resolveConfig(userConfig = {}, defaults = {}) {
     ...sortedPresets.map((p) => p.theme || {}),
     config.theme || {}
   ].reduce((a, p) => mergeDeep(a, p), {});
+  const options = Object.assign({}, ...config.presets?.map((p) => Array.isArray(p) ? p : [p]).flat(1).map((p) => p.options ?? {}) || []);
   return {
     mergeSelectors: true,
     warn: true,
@@ -352,14 +353,17 @@ function resolveConfig(userConfig = {}, defaults = {}) {
     rulesSize,
     rulesDynamic: rules,
     rulesStaticMap,
+    preprocess: mergePresets("preprocess"),
+    postprocess: mergePresets("postprocess"),
     preflights: mergePresets("preflights"),
     variants: mergePresets("variants").map(normalizeVariant),
     shortcuts: resolveShortcuts(mergePresets("shortcuts")),
-    extractors
+    extractors,
+    options
   };
 }
 
-const version = "0.18.1";
+const version = "0.20.2";
 
 class UnoGenerator {
   constructor(userConfig = {}, defaults = {}) {
@@ -388,7 +392,8 @@ class UnoGenerator {
         return code;
       },
       code,
-      id
+      id,
+      options: this.config.options
     };
     for (const extractor of this.config.extractors) {
       const result = await extractor.extract(context);
@@ -436,8 +441,8 @@ class UnoGenerator {
         return;
       }
       let current = raw;
-      if (this.config.preprocess)
-        current = this.config.preprocess(raw);
+      for (const p of this.config.preprocess)
+        current = p(raw);
       if (this.isBlocked(current))
         return block(current);
       const applied = this.matchVariants(raw, current);
@@ -449,7 +454,8 @@ class UnoGenerator {
         theme: this.config.theme,
         generator: this,
         variantHandlers: applied[2],
-        constructCSS: (...args) => this.constructCustomCSS(context, ...args)
+        constructCSS: (...args) => this.constructCustomCSS(context, ...args),
+        options: this.config.options
       };
       const expanded = this.expandShortcut(applied[1], context);
       if (expanded) {
@@ -474,7 +480,13 @@ class UnoGenerator {
     const getLayer = (layer) => {
       if (layerCache[layer])
         return layerCache[layer];
-      let css = Array.from(sheet).sort((a, b) => (this.parentOrders.get(a[0]) || 0) - (this.parentOrders.get(b[0]) || 0)).map(([parent, items]) => {
+      let css = Array.from(sheet).sort((a, b) => {
+        const parentOrderA = this.parentOrders.get(a[0]);
+        const parentOrderB = this.parentOrders.get(b[0]);
+        if (parentOrderA !== void 0 && parentOrderB !== void 0)
+          return parentOrderA - parentOrderB;
+        return a[0]?.localeCompare(b[0] || "");
+      }).map(([parent, items]) => {
         const size = items.length;
         const sorted = items.filter((i) => (i[4]?.layer || "default") === layer).sort((a, b) => a[0] - b[0] || a[1]?.localeCompare(b[1] || "") || 0).map((a) => [a[1] ? applyScope(a[1], scope) : a[1], a[2]]);
         if (!sorted.length)
@@ -519,12 +531,18 @@ class UnoGenerator {
     const handlers = [];
     let processed = current || raw;
     let applied = false;
+    const context = {
+      rawSelector: raw,
+      theme: this.config.theme,
+      generator: this,
+      options: this.config.options
+    };
     while (true) {
       applied = false;
       for (const v of this.config.variants) {
         if (!v.multiPass && usedVariants.has(v))
           continue;
-        let handler = v.match(processed, raw, this.config.theme);
+        let handler = v.match(processed, context);
         if (!handler)
           continue;
         if (typeof handler === "string")
@@ -547,19 +565,23 @@ class UnoGenerator {
     return [raw, processed, handlers];
   }
   applyVariants(parsed, variantHandlers = parsed[4], raw = parsed[1]) {
-    const entries = variantHandlers.reduce((p, v) => v.body?.(p) || p, parsed[2]);
-    return [
-      variantHandlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw)),
+    const handlers = [...variantHandlers].sort((a, b) => (a.order || 0) - (b.order || 0));
+    const entries = handlers.reduce((p, v) => v.body?.(p) || p, parsed[2]);
+    const obj = {
+      selector: handlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw)),
       entries,
-      variantHandlers.reduce((p, v) => Array.isArray(v.parent) ? v.parent[0] : v.parent || p, void 0)
-    ];
+      parent: handlers.reduce((p, v) => Array.isArray(v.parent) ? v.parent[0] : v.parent || p, void 0)
+    };
+    for (const p of this.config.postprocess)
+      p(obj);
+    return obj;
   }
   constructCustomCSS(context, body, overrideSelector) {
     body = normalizeCSSEntries(body);
-    const [selector, entries, mediaQuery] = this.applyVariants([0, overrideSelector || context.rawSelector, body, void 0, context.variantHandlers]);
+    const { selector, entries, parent } = this.applyVariants([0, overrideSelector || context.rawSelector, body, void 0, context.variantHandlers]);
     const cssBody = `${selector}{${entriesToCss(entries)}}`;
-    if (mediaQuery)
-      return `${mediaQuery}{${cssBody}}`;
+    if (parent)
+      return `${parent}{${cssBody}}`;
     return cssBody;
   }
   async parseUtil(input, context, internal = false) {
@@ -596,11 +618,11 @@ class UnoGenerator {
       return;
     if (isRawUtil(parsed))
       return [parsed[0], void 0, parsed[1], void 0, parsed[2]];
-    const [selector, entries, mediaQuery] = this.applyVariants(parsed);
+    const { selector, entries, parent } = this.applyVariants(parsed);
     const body = entriesToCss(entries);
     if (!body)
       return;
-    return [parsed[0], selector, body, mediaQuery, parsed[3]];
+    return [parsed[0], selector, body, parent, parsed[3]];
   }
   expandShortcut(processed, context, depth = 3) {
     if (depth === 0)
@@ -645,8 +667,8 @@ class UnoGenerator {
     for (const item of parsed) {
       if (isRawUtil(item))
         continue;
-      const [selector, entries, mediaQuery] = this.applyVariants(item, [...item[4], ...parentVariants], raw);
-      const mapItem = selectorMap.getFallback(selector, mediaQuery, [[], item[0]]);
+      const { selector, entries, parent: parent2 } = this.applyVariants(item, [...item[4], ...parentVariants], raw);
+      const mapItem = selectorMap.getFallback(selector, parent2, [[], item[0]]);
       mapItem[0].push(...entries);
       if (item[0] > mapItem[1])
         mapItem[1] = item[0];

package/dist/index.d.ts

@@ -11,7 +11,7 @@ declare class UnoGenerator {
     applyExtractors(code: string, id?: string, set?: Set<string>): Promise<Set<string>>;
     generate(input: string | Set<string>, { id, scope, preflights, safelist, minify, }?: GenerateOptions): Promise<GenerateResult>;
     matchVariants(raw: string, current?: string): VariantMatchedResult;
-    applyVariants(parsed: ParsedUtil, variantHandlers?: VariantHandler[], raw?: string): readonly [string, CSSEntries, string | undefined];
+    applyVariants(parsed: ParsedUtil, variantHandlers?: VariantHandler[], raw?: string): UtilObject;
     constructCustomCSS(context: Readonly<RuleContext>, body: CSSObject | CSSEntries, overrideSelector?: string): string;
     parseUtil(input: string | VariantMatchedResult, context: RuleContext, internal?: boolean): Promise<ParsedUtil[] | RawUtil[] | undefined>;
     stringifyUtil(parsed?: ParsedUtil | RawUtil): StringifiedUtil | undefined;
@@ -51,14 +51,19 @@ declare type ParsedColorValue = {
      */
     name: string;
     /**
-     * Color scale. Preferrably 000 - 999
+     * Color scale, preferrably 000 - 999.
      */
     no: string;
     /**
      * {@link RGBAColorValue}
      */
     rgba?: RGBAColorValue;
+    /**
+     * Parsed rgba's alpha value.
+     */
+    alpha?: number | string;
 };
+declare type PresetOptions = Record<string, any>;
 interface RuleContext<Theme extends {} = {}> {
     /**
      * Unprocessed selector from user input.
@@ -86,11 +91,34 @@ interface RuleContext<Theme extends {} = {}> {
      * Variants and selector escaping will be handled automatically.
      */
     constructCSS: (body: CSSEntries | CSSObject, overrideSelector?: string) => string;
+    /**
+     * User-provided options from preset.
+     */
+    readonly options: PresetOptions;
+}
+interface VariantContext<Theme extends {} = {}> {
+    /**
+     * Unprocessed selector from user input.
+     */
+    rawSelector: string;
+    /**
+     * UnoCSS generator instance
+     */
+    generator: UnoGenerator;
+    /**
+     * The theme object
+     */
+    theme: Theme;
+    /**
+     * User-provided options from preset.
+     */
+    readonly options: PresetOptions;
 }
 interface ExtractorContext {
     readonly original: string;
     code: string;
     id?: string;
+    readonly options: PresetOptions;
 }
 interface Extractor {
     name: string;
@@ -143,8 +171,12 @@ interface VariantHandler {
      * Provide a parent selector(e.g. media query) to the output css.
      */
     parent?: string | [string, number] | undefined;
+    /**
+     * Variant ordering.
+     */
+    order?: number;
 }
-declare type VariantFunction<Theme extends {} = {}> = (matcher: string, raw: string, theme: Theme) => string | VariantHandler | undefined;
+declare type VariantFunction<Theme extends {} = {}> = (matcher: string, context: Readonly<VariantContext<Theme>>) => string | VariantHandler | undefined;
 declare type VariantObject<Theme extends {} = {}> = {
     /**
      * The entry function to match and rewrite the selector for futher processing.
@@ -158,6 +190,8 @@ declare type VariantObject<Theme extends {} = {}> = {
     multiPass?: boolean;
 };
 declare type Variant<Theme extends {} = {}> = VariantFunction<Theme> | VariantObject<Theme>;
+declare type Preprocessor = (matcher: string) => string | undefined;
+declare type Postprocessor = (util: UtilObject) => void;
 interface ConfigBase<Theme extends {} = {}> {
     /**
      * Rules to generate CSS utilities
@@ -203,6 +237,14 @@ interface ConfigBase<Theme extends {} = {}> {
      * Custom function to sort layers.
      */
     sortLayers?: (layers: string[]) => string[];
+    /**
+     * Preprocess the incoming utilities, return falsy value to exclude
+     */
+    preprocess?: Preprocessor | Preprocessor[];
+    /**
+     * Process the generate utils object
+     */
+    postprocess?: Postprocessor | Postprocessor[];
 }
 interface Preset<Theme extends {} = {}> extends ConfigBase<Theme> {
     name: string;
@@ -210,7 +252,7 @@ interface Preset<Theme extends {} = {}> extends ConfigBase<Theme> {
     /**
      * Preset options for other tools like IDE to consume
      */
-    options?: any;
+    options?: PresetOptions;
 }
 interface GeneratorOptions {
     /**
@@ -231,10 +273,6 @@ interface UserOnlyOptions<Theme extends {} = {}> {
      * The theme object, will be merged with the theme provides by presets
      */
     theme?: Theme;
-    /**
-     * Preprocess the incoming utilities, return falsy value to exclude
-     */
-    preprocess?: (matcher: string) => string | undefined;
     /**
      * Layout name of shortcuts
      *
@@ -282,9 +320,12 @@ interface UserConfigDefaults<Theme extends {} = {}> extends ConfigBase<Theme>, U
 interface ResolvedConfig extends Omit<RequiredByKey<UserConfig, 'mergeSelectors' | 'theme' | 'rules' | 'variants' | 'layers' | 'extractors' | 'blocklist' | 'safelist' | 'preflights' | 'sortLayers'>, 'rules' | 'shortcuts'> {
     shortcuts: Shortcut[];
     variants: VariantObject[];
+    preprocess: Preprocessor[];
+    postprocess: Postprocessor[];
     rulesSize: number;
     rulesDynamic: (DynamicRule | undefined)[];
     rulesStaticMap: Record<string, [number, CSSObject | CSSEntries, RuleMeta | undefined] | undefined>;
+    options: PresetOptions;
 }
 interface GenerateResult {
     css: string;
@@ -317,6 +358,11 @@ declare type StringifiedUtil = readonly [
     parent: string | undefined,
     meta: RuleMeta | undefined
 ];
+interface UtilObject {
+    selector: string;
+    entries: CSSEntries;
+    parent: string | undefined;
+}
 interface GenerateOptions {
     /**
      * Filepath of the file being processed.
@@ -409,4 +455,4 @@ declare const extractorSplit: Extractor;
 
 declare const extractorSvelte: Extractor;
 
-export { ArgumentType, Awaitable, BetterMap, BlocklistRule, CSSEntries, CSSObject, CSSValues, ConfigBase, DeepPartial, DynamicMatcher, DynamicRule, DynamicShortcut, DynamicShortcutMatcher, Extractor, ExtractorContext, FilterPattern, FlatObjectTuple, GenerateOptions, GenerateResult, GeneratorOptions, ParsedColorValue, ParsedUtil, PartialByKeys, PluginOptions, Preflight, Preset, RGBAColorValue, RawUtil, RequiredByKey, ResolvedConfig, RestArgs, Rule, RuleContext, RuleMeta, Shift, Shortcut, StaticRule, StaticShortcut, StaticShortcutMap, StringifiedUtil, TwoKeyMap, UnoGenerator, UserConfig, UserConfigDefaults, UserOnlyOptions, UserShortcuts, ValueHandler, ValueHandlerCallback, Variant, VariantFunction, VariantHandler, VariantMatchedResult, VariantObject, attributifyRE, clearIdenticalEntries, createGenerator, createValueHandler, e, entriesToCss, escapeRegExp, escapeSelector, expandVariantGroup, extractorSplit, extractorSvelte, hasScopePlaceholder, hex2rgba, isAttributifySelector, isObject, isRawUtil, isStaticRule, isStaticShortcut, isValidSelector, mergeDeep, mergeSet, normalizeCSSEntries, normalizeCSSValues, normalizeVariant, notNull, regexClassGroup, toArray, uniq, validateFilterRE, warnOnce, withLayer };
+export { ArgumentType, Awaitable, BetterMap, BlocklistRule, CSSEntries, CSSObject, CSSValues, ConfigBase, DeepPartial, DynamicMatcher, DynamicRule, DynamicShortcut, DynamicShortcutMatcher, Extractor, ExtractorContext, FilterPattern, FlatObjectTuple, GenerateOptions, GenerateResult, GeneratorOptions, ParsedColorValue, ParsedUtil, PartialByKeys, PluginOptions, Postprocessor, Preflight, Preprocessor, Preset, PresetOptions, RGBAColorValue, RawUtil, RequiredByKey, ResolvedConfig, RestArgs, Rule, RuleContext, RuleMeta, Shift, Shortcut, StaticRule, StaticShortcut, StaticShortcutMap, StringifiedUtil, TwoKeyMap, UnoGenerator, UserConfig, UserConfigDefaults, UserOnlyOptions, UserShortcuts, UtilObject, ValueHandler, ValueHandlerCallback, Variant, VariantContext, VariantFunction, VariantHandler, VariantMatchedResult, VariantObject, attributifyRE, clearIdenticalEntries, createGenerator, createValueHandler, e, entriesToCss, escapeRegExp, escapeSelector, expandVariantGroup, extractorSplit, extractorSvelte, hasScopePlaceholder, hex2rgba, isAttributifySelector, isObject, isRawUtil, isStaticRule, isStaticShortcut, isValidSelector, mergeDeep, mergeSet, normalizeCSSEntries, normalizeCSSValues, normalizeVariant, notNull, regexClassGroup, toArray, uniq, validateFilterRE, warnOnce, withLayer };

package/dist/index.mjs

@@ -333,6 +333,7 @@ function resolveConfig(userConfig = {}, defaults = {}) {
     ...sortedPresets.map((p) => p.theme || {}),
     config.theme || {}
   ].reduce((a, p) => mergeDeep(a, p), {});
+  const options = Object.assign({}, ...config.presets?.map((p) => Array.isArray(p) ? p : [p]).flat(1).map((p) => p.options ?? {}) || []);
   return {
     mergeSelectors: true,
     warn: true,
@@ -348,14 +349,17 @@ function resolveConfig(userConfig = {}, defaults = {}) {
     rulesSize,
     rulesDynamic: rules,
     rulesStaticMap,
+    preprocess: mergePresets("preprocess"),
+    postprocess: mergePresets("postprocess"),
     preflights: mergePresets("preflights"),
     variants: mergePresets("variants").map(normalizeVariant),
     shortcuts: resolveShortcuts(mergePresets("shortcuts")),
-    extractors
+    extractors,
+    options
   };
 }
 
-const version = "0.18.1";
+const version = "0.20.2";
 
 class UnoGenerator {
   constructor(userConfig = {}, defaults = {}) {
@@ -384,7 +388,8 @@ class UnoGenerator {
         return code;
       },
       code,
-      id
+      id,
+      options: this.config.options
     };
     for (const extractor of this.config.extractors) {
       const result = await extractor.extract(context);
@@ -432,8 +437,8 @@ class UnoGenerator {
         return;
       }
       let current = raw;
-      if (this.config.preprocess)
-        current = this.config.preprocess(raw);
+      for (const p of this.config.preprocess)
+        current = p(raw);
       if (this.isBlocked(current))
         return block(current);
       const applied = this.matchVariants(raw, current);
@@ -445,7 +450,8 @@ class UnoGenerator {
         theme: this.config.theme,
         generator: this,
         variantHandlers: applied[2],
-        constructCSS: (...args) => this.constructCustomCSS(context, ...args)
+        constructCSS: (...args) => this.constructCustomCSS(context, ...args),
+        options: this.config.options
       };
       const expanded = this.expandShortcut(applied[1], context);
       if (expanded) {
@@ -470,7 +476,13 @@ class UnoGenerator {
     const getLayer = (layer) => {
       if (layerCache[layer])
         return layerCache[layer];
-      let css = Array.from(sheet).sort((a, b) => (this.parentOrders.get(a[0]) || 0) - (this.parentOrders.get(b[0]) || 0)).map(([parent, items]) => {
+      let css = Array.from(sheet).sort((a, b) => {
+        const parentOrderA = this.parentOrders.get(a[0]);
+        const parentOrderB = this.parentOrders.get(b[0]);
+        if (parentOrderA !== void 0 && parentOrderB !== void 0)
+          return parentOrderA - parentOrderB;
+        return a[0]?.localeCompare(b[0] || "");
+      }).map(([parent, items]) => {
         const size = items.length;
         const sorted = items.filter((i) => (i[4]?.layer || "default") === layer).sort((a, b) => a[0] - b[0] || a[1]?.localeCompare(b[1] || "") || 0).map((a) => [a[1] ? applyScope(a[1], scope) : a[1], a[2]]);
         if (!sorted.length)
@@ -515,12 +527,18 @@ class UnoGenerator {
     const handlers = [];
     let processed = current || raw;
     let applied = false;
+    const context = {
+      rawSelector: raw,
+      theme: this.config.theme,
+      generator: this,
+      options: this.config.options
+    };
     while (true) {
       applied = false;
       for (const v of this.config.variants) {
         if (!v.multiPass && usedVariants.has(v))
           continue;
-        let handler = v.match(processed, raw, this.config.theme);
+        let handler = v.match(processed, context);
         if (!handler)
           continue;
         if (typeof handler === "string")
@@ -543,19 +561,23 @@ class UnoGenerator {
     return [raw, processed, handlers];
   }
   applyVariants(parsed, variantHandlers = parsed[4], raw = parsed[1]) {
-    const entries = variantHandlers.reduce((p, v) => v.body?.(p) || p, parsed[2]);
-    return [
-      variantHandlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw)),
+    const handlers = [...variantHandlers].sort((a, b) => (a.order || 0) - (b.order || 0));
+    const entries = handlers.reduce((p, v) => v.body?.(p) || p, parsed[2]);
+    const obj = {
+      selector: handlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw)),
       entries,
-      variantHandlers.reduce((p, v) => Array.isArray(v.parent) ? v.parent[0] : v.parent || p, void 0)
-    ];
+      parent: handlers.reduce((p, v) => Array.isArray(v.parent) ? v.parent[0] : v.parent || p, void 0)
+    };
+    for (const p of this.config.postprocess)
+      p(obj);
+    return obj;
   }
   constructCustomCSS(context, body, overrideSelector) {
     body = normalizeCSSEntries(body);
-    const [selector, entries, mediaQuery] = this.applyVariants([0, overrideSelector || context.rawSelector, body, void 0, context.variantHandlers]);
+    const { selector, entries, parent } = this.applyVariants([0, overrideSelector || context.rawSelector, body, void 0, context.variantHandlers]);
     const cssBody = `${selector}{${entriesToCss(entries)}}`;
-    if (mediaQuery)
-      return `${mediaQuery}{${cssBody}}`;
+    if (parent)
+      return `${parent}{${cssBody}}`;
     return cssBody;
   }
   async parseUtil(input, context, internal = false) {
@@ -592,11 +614,11 @@ class UnoGenerator {
       return;
     if (isRawUtil(parsed))
       return [parsed[0], void 0, parsed[1], void 0, parsed[2]];
-    const [selector, entries, mediaQuery] = this.applyVariants(parsed);
+    const { selector, entries, parent } = this.applyVariants(parsed);
     const body = entriesToCss(entries);
     if (!body)
       return;
-    return [parsed[0], selector, body, mediaQuery, parsed[3]];
+    return [parsed[0], selector, body, parent, parsed[3]];
   }
   expandShortcut(processed, context, depth = 3) {
     if (depth === 0)
@@ -641,8 +663,8 @@ class UnoGenerator {
     for (const item of parsed) {
       if (isRawUtil(item))
         continue;
-      const [selector, entries, mediaQuery] = this.applyVariants(item, [...item[4], ...parentVariants], raw);
-      const mapItem = selectorMap.getFallback(selector, mediaQuery, [[], item[0]]);
+      const { selector, entries, parent: parent2 } = this.applyVariants(item, [...item[4], ...parentVariants], raw);
+      const mapItem = selectorMap.getFallback(selector, parent2, [[], item[0]]);
       mapItem[0].push(...entries);
       if (item[0] > mapItem[1])
         mapItem[1] = item[0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/core",
-  "version": "0.18.1",
+  "version": "0.20.2",
   "description": "The instant on-demand Atomic CSS engine.",
   "keywords": [
     "unocss",