@unocss/core 0.4.15 → 0.6.0

package/dist/index.d.ts

@@ -7,14 +7,14 @@ declare class UnoGenerator {
     constructor(userConfig?: UserConfig, defaults?: UserConfigDefaults);
     setConfig(userConfig?: UserConfig, defaults?: UserConfigDefaults): void;
     applyExtractors(code: string, id?: string, set?: Set<string>): Promise<Set<string>>;
-    generate(input: string | Set<string>, id?: string, scope?: string): Promise<GenerateResult>;
+    generate(input: string | Set<string>, { id, scope, preflights, layerComments, }?: GenerateOptions): Promise<GenerateResult>;
     matchVariants(raw: string): VariantMatchedResult;
     applyVariants(parsed: ParsedUtil, variantHandlers?: VariantHandler[], raw?: string): readonly [string, CSSEntries, string | undefined];
     constructCustomCSS(context: Readonly<RuleContext>, body: CSSObject | CSSEntries, overrideSelector?: string): string;
     parseUtil(input: string | VariantMatchedResult): Promise<ParsedUtil | RawUtil | undefined>;
     stringifyUtil(parsed?: ParsedUtil | RawUtil): StringifiedUtil | undefined;
-    expandShortcut(processed: string, depth?: number): string[] | undefined;
-    stringifyShortcuts(parent: VariantMatchedResult, expanded: string[]): Promise<StringifiedUtil[]>;
+    expandShortcut(processed: string, depth?: number): [string[], RuleMeta | undefined] | undefined;
+    stringifyShortcuts(parent: VariantMatchedResult, expanded: string[], meta?: RuleMeta): Promise<StringifiedUtil[] | undefined>;
     isExcluded(raw: string): boolean;
 }
 declare function createGenerator(config?: UserConfig, defaults?: UserConfigDefaults): UnoGenerator;
@@ -57,15 +57,33 @@ interface RuleContext<Theme extends {} = {}> {
      */
     constructCSS: (body: CSSEntries | CSSObject, overrideSelector?: string) => string;
 }
-declare type Extractor = (code: string, id?: string) => Awaitable<Set<string> | undefined>;
-declare type DynamicRule<Theme extends {} = {}> = [RegExp, ((match: string[], context: Readonly<RuleContext<Theme>>) => Awaitable<CSSObject | CSSEntries | string | undefined>)];
-declare type StaticRule = [string, CSSObject | CSSEntries];
+interface ExtractorContext {
+    readonly original: string;
+    code: string;
+    id?: string;
+}
+interface Extractor {
+    name: string;
+    extract(ctx: ExtractorContext): Awaitable<Set<string> | undefined>;
+    order?: number;
+}
+interface RuleMeta {
+    layer?: string;
+}
+declare type DynamicMatcher<Theme extends {} = {}> = ((match: string[], context: Readonly<RuleContext<Theme>>) => Awaitable<CSSObject | CSSEntries | string | undefined>);
+declare type DynamicRule<Theme extends {} = {}> = [RegExp, DynamicMatcher<Theme>] | [RegExp, DynamicMatcher<Theme>, RuleMeta];
+declare type StaticRule = [string, CSSObject | CSSEntries] | [string, CSSObject | CSSEntries, RuleMeta];
 declare type Rule<Theme extends {} = {}> = DynamicRule<Theme> | StaticRule;
-declare type DynamicShortcut = [RegExp, ((match: string[]) => (string | string[] | undefined))];
-declare type StaticShortcut = [string, string | string[]];
+declare type DynamicShortcutMatcher = ((match: string[]) => (string | string[] | undefined));
+declare type DynamicShortcut = [RegExp, DynamicShortcutMatcher] | [RegExp, DynamicShortcutMatcher, RuleMeta];
+declare type StaticShortcut = [string, string | string[]] | [string, string | string[], RuleMeta];
 declare type StaticShortcutMap = Record<string, string | string[]>;
 declare type UserShortcuts = StaticShortcutMap | (StaticShortcut | DynamicShortcut | StaticShortcutMap)[];
 declare type Shortcut = StaticShortcut | DynamicShortcut;
+interface Preflight {
+    getCSS: () => string | undefined;
+    layer?: string;
+}
 declare type ExcludeRule = string | RegExp;
 interface VariantHandler {
     /**
@@ -124,10 +142,22 @@ interface ConfigBase<Theme extends {} = {}> {
      * Can be language-aware.
      */
     extractors?: Extractor[];
+    /**
+     * Raw CSS injections.
+     */
+    preflights?: Preflight[];
     /**
      * Theme object for shared configuration between rules
      */
     theme?: Theme;
+    /**
+     * Layer orders. Default to 0.
+     */
+    layers?: Record<string, number>;
+    /**
+     * Custom function to sort layers.
+     */
+    sortLayers?: (layers: string[]) => string[];
 }
 interface Preset extends ConfigBase {
     enforce?: 'pre' | 'post';
@@ -146,46 +176,92 @@ interface GeneratorOptions {
      */
     warnExcluded?: boolean;
 }
-interface UserConfig<Theme extends {} = {}> extends ConfigBase<Theme>, GeneratorOptions {
+interface UserOnlyOptions<Theme extends {} = {}> {
+    /**
+     * The theme object, will be merged with the theme provides by presets
+     */
     theme?: Theme;
+    /**
+     * Layout name of shortcuts
+     *
+     * @default 'shortcuts'
+     */
+    shortcutsLayer?: string;
+    /**
+     * Presets
+     */
     presets?: Preset[];
+    /**
+     * Environment mode
+     *
+     * @default 'build'
+     */
+    envMode?: 'dev' | 'build';
 }
-interface UserConfigDefaults<Theme extends {} = {}> extends ConfigBase<Theme> {
-    theme?: Theme;
-    presets?: Preset[];
+interface UserConfig<Theme extends {} = {}> extends ConfigBase<Theme>, UserOnlyOptions<Theme>, GeneratorOptions {
+}
+interface UserConfigDefaults<Theme extends {} = {}> extends ConfigBase<Theme>, UserOnlyOptions<Theme> {
 }
 interface ResolvedConfig extends Omit<Required<UserConfig>, 'presets' | 'rules' | 'shortcuts'> {
     shortcuts: Shortcut[];
     variants: VariantObject[];
     rulesSize: number;
     rulesDynamic: (DynamicRule | undefined)[];
-    rulesStaticMap: Record<string, [number, CSSObject | CSSEntries] | undefined>;
+    rulesStaticMap: Record<string, [number, CSSObject | CSSEntries, RuleMeta | undefined] | undefined>;
 }
 interface GenerateResult {
     css: string;
+    layers: string[];
+    getLayer(name?: string): string | undefined;
+    getLayers(excludes?: string[]): string;
     matched: Set<string>;
 }
 declare type VariantMatchedResult = readonly [
-    string,
-    string,
-    VariantHandler[]
+    raw: string,
+    current: string,
+    variants: VariantHandler[]
 ];
 declare type ParsedUtil = readonly [
-    number,
-    string,
-    CSSEntries,
-    VariantHandler[]
+    index: number,
+    raw: string,
+    entries: CSSEntries,
+    meta: RuleMeta | undefined,
+    variants: VariantHandler[]
 ];
 declare type RawUtil = readonly [
-    number,
-    string
+    index: number,
+    rawCSS: string,
+    meta: RuleMeta | undefined
 ];
 declare type StringifiedUtil = readonly [
-    number,
-    string | undefined,
-    string,
-    string | undefined
+    index: number,
+    selector: string | undefined,
+    body: string,
+    mediaQuery: string | undefined,
+    meta: RuleMeta | undefined
 ];
+interface GenerateOptions {
+    /**
+     * Filepath of the file being processed.
+     */
+    id?: string;
+    /**
+     * Generate preflights (if defined)
+     *
+     * @default true
+     */
+    preflights?: boolean;
+    /**
+     * @expiremental
+     */
+    scope?: string;
+    /**
+     * Show layer seperator in comments
+     *
+     * @default true
+     */
+    layerComments?: boolean;
+}
 
 declare function escapeRegExp(string: string): string;
 /**
@@ -227,6 +303,8 @@ declare class BetterMap<K, V> extends Map<K, V> {
     map<R>(mapFn: (value: V, key: K) => R): R[];
 }
 
+declare function withLayer<T>(layer: string, rules: Rule<T>[]): Rule<T>[];
+
 declare const extractorSplit: Extractor;
 
-export { ArgumentType, Awaitable, BetterMap, CSSEntries, CSSObject, ConfigBase, DeepPartial, DynamicRule, DynamicShortcut, ExcludeRule, Extractor, GenerateResult, GeneratorOptions, ParsedUtil, Preset, RawUtil, ResolvedConfig, RestArgs, Rule, RuleContext, Shift, Shortcut, StaticRule, StaticShortcut, StaticShortcutMap, StringifiedUtil, TwoKeyMap, UnoGenerator, UserConfig, UserConfigDefaults, UserShortcuts, Variant, VariantFunction, VariantHandler, VariantMatchedResult, VariantObject, attributifyRE, createGenerator, e, entriesToCss, escapeRegExp, escapeSelector, extractorSplit, hasScopePlaceholder, hex2rgba, isAttributifySelector, isObject, isRawUtil, isStaticRule, isStaticShortcut, isValidSelector, mergeDeep, mergeSet, normalizeVariant, toArray, uniq, validateFilterRE };
+export { ArgumentType, Awaitable, BetterMap, CSSEntries, CSSObject, ConfigBase, DeepPartial, DynamicMatcher, DynamicRule, DynamicShortcut, DynamicShortcutMatcher, ExcludeRule, Extractor, ExtractorContext, GenerateOptions, GenerateResult, GeneratorOptions, ParsedUtil, Preflight, Preset, RawUtil, ResolvedConfig, RestArgs, Rule, RuleContext, RuleMeta, Shift, Shortcut, StaticRule, StaticShortcut, StaticShortcutMap, StringifiedUtil, TwoKeyMap, UnoGenerator, UserConfig, UserConfigDefaults, UserOnlyOptions, UserShortcuts, Variant, VariantFunction, VariantHandler, VariantMatchedResult, VariantObject, attributifyRE, createGenerator, e, entriesToCss, escapeRegExp, escapeSelector, extractorSplit, hasScopePlaceholder, hex2rgba, isAttributifySelector, isObject, isRawUtil, isStaticRule, isStaticShortcut, isValidSelector, mergeDeep, mergeSet, normalizeVariant, toArray, uniq, validateFilterRE, withLayer };

package/dist/index.js

@@ -31,7 +31,8 @@ __export(exports, {
   normalizeVariant: () => normalizeVariant,
   toArray: () => toArray,
   uniq: () => uniq,
-  validateFilterRE: () => validateFilterRE
+  validateFilterRE: () => validateFilterRE,
+  withLayer: () => withLayer
 });
 
 // src/utils/escape.ts
@@ -147,7 +148,7 @@ function hex2rgba(hex = "") {
 
 // src/utils/helpers.ts
 var attributifyRE = /^\[(.+?)~?="(.*)"\]$/;
-var validateFilterRE = /[a-z]/;
+var validateFilterRE = /[a-z?]/;
 function isAttributifySelector(selector) {
   return selector.match(attributifyRE);
 }
@@ -158,7 +159,7 @@ function normalizeVariant(variant) {
   return typeof variant === "function" ? { match: variant } : variant;
 }
 function isRawUtil(util) {
-  return util.length === 2;
+  return util.length === 3;
 }
 
 // src/utils/map.ts
@@ -217,8 +218,25 @@ var BetterMap = class extends Map {
   }
 };
 
+// src/utils/layer.ts
+function withLayer(layer, rules) {
+  rules.forEach((r) => {
+    if (!r[2])
+      r[2] = { layer };
+    else
+      r[2].layer = layer;
+  });
+  return rules;
+}
+
 // src/extractors/split.ts
-var extractorSplit = (code) => new Set(code.split(/[\s'"`;>=]+/g).filter(isValidSelector));
+var extractorSplit = {
+  name: "split",
+  order: 0,
+  extract({ code }) {
+    return new Set(code.split(/[\s'"`;>=]+/g).filter(isValidSelector));
+  }
+};
 
 // src/config.ts
 function resolveShortcuts(shortcuts) {
@@ -228,6 +246,10 @@ function resolveShortcuts(shortcuts) {
     return Object.entries(s);
   });
 }
+var defaultLayers = {
+  shortcuts: -1,
+  default: 0
+};
 function resolveConfig(userConfig = {}, defaults = {}) {
   const config = Object.assign({}, defaults, userConfig);
   const rawPresets = config.presets || [];
@@ -236,6 +258,7 @@ function resolveConfig(userConfig = {}, defaults = {}) {
     ...rawPresets.filter((p) => !p.enforce),
     ...rawPresets.filter((p) => p.enforce === "post")
   ];
+  const layers = Object.assign(defaultLayers, ...rawPresets.map((i) => i.layers), userConfig.layers);
   function mergePresets(key) {
     return uniq([
       ...sortedPresets.flatMap((p) => toArray(p[key] || [])),
@@ -245,12 +268,13 @@ function resolveConfig(userConfig = {}, defaults = {}) {
   const extractors = mergePresets("extractors");
   if (!extractors.length)
     extractors.push(extractorSplit);
+  extractors.sort((a, b) => (a.order || 0) - (b.order || 0));
   const rules = mergePresets("rules");
   const rulesStaticMap = {};
   const rulesSize = rules.length;
   rules.forEach((rule, i) => {
     if (isStaticRule(rule)) {
-      rulesStaticMap[rule[0]] = [i, rule[1]];
+      rulesStaticMap[rule[0]] = [i, rule[1], rule[2]];
       delete rules[i];
     }
   });
@@ -262,11 +286,16 @@ function resolveConfig(userConfig = {}, defaults = {}) {
     mergeSelectors: true,
     warnExcluded: true,
     excluded: [],
+    sortLayers: (layers2) => layers2,
     ...config,
+    envMode: config.envMode || "build",
+    shortcutsLayer: config.shortcutsLayer || "shortcuts",
+    layers,
     theme,
     rulesSize,
     rulesDynamic: rules,
     rulesStaticMap,
+    preflights: mergePresets("preflights"),
     variants: mergePresets("variants").map(normalizeVariant),
     shortcuts: resolveShortcuts(mergePresets("shortcuts")),
     extractors
@@ -293,17 +322,31 @@ var UnoGenerator = class {
     this._cache = new Map();
   }
   async applyExtractors(code, id, set = new Set()) {
-    await Promise.all(this.config.extractors.map(async (i) => {
-      const result = await i(code, id);
+    const context = {
+      get original() {
+        return code;
+      },
+      code,
+      id
+    };
+    for (const extractor of this.config.extractors) {
+      const result = await extractor.extract(context);
       result == null ? void 0 : result.forEach((t) => set.add(t));
-    }));
+    }
     return set;
   }
-  async generate(input, id, scope) {
+  async generate(input, {
+    id,
+    scope,
+    preflights = true,
+    layerComments = true
+  } = {}) {
     const tokens = typeof input === "string" ? await this.applyExtractors(input, id) : input;
+    const layerSet = new Set(["default"]);
     const matched = new Set();
     const sheet = new Map();
     const hit = (raw, payload) => {
+      var _a;
       this._cache.set(raw, payload);
       matched.add(raw);
       for (const item of payload) {
@@ -311,6 +354,8 @@ var UnoGenerator = class {
         if (!sheet.has(query))
           sheet.set(query, []);
         sheet.get(query).push(item);
+        if ((_a = item[4]) == null ? void 0 : _a.layer)
+          layerSet.add(item[4].layer);
       }
     };
     await Promise.all(Array.from(tokens).map(async (raw) => {
@@ -334,9 +379,9 @@ var UnoGenerator = class {
         return;
       }
       const expanded = this.expandShortcut(applied[1]);
-      if (expanded == null ? void 0 : expanded.length) {
-        const utils = await this.stringifyShortcuts(applied, expanded);
-        if (utils.length) {
+      if (expanded) {
+        const utils = await this.stringifyShortcuts(applied, expanded[0], expanded[1]);
+        if (utils == null ? void 0 : utils.length) {
           hit(raw, utils);
           return;
         }
@@ -349,30 +394,66 @@ var UnoGenerator = class {
       }
       this._cache.set(raw, null);
     }));
-    const css = Array.from(sheet).map(([query, items]) => {
-      const size = items.length;
-      const sorted = items.sort((a, b) => {
-        var _a;
-        return a[0] - b[0] || ((_a = a[1]) == null ? void 0 : _a.localeCompare(b[1] || "")) || 0;
-      }).map((a) => [a[1] ? applyScope(a[1], scope) : a[1], a[2]]);
-      const rules = sorted.map(([selector, body], idx) => {
-        if (selector && this.config.mergeSelectors) {
-          for (let i = size - 1; i > idx; i--) {
-            const current = sorted[i];
-            if (current[0] && current[1] === body) {
-              current[0] = `${selector},${current[0]}`;
-              return null;
+    if (preflights) {
+      this.config.preflights.forEach((i) => {
+        if (i.layer)
+          layerSet.add(i.layer);
+      });
+    }
+    const layerCache = {};
+    const layers = this.config.sortLayers(Array.from(layerSet).sort((a, b) => {
+      var _a, _b;
+      return ((_a = this.config.layers[a]) != null ? _a : 0) - ((_b = this.config.layers[b]) != null ? _b : 0) || a.localeCompare(b);
+    }));
+    const getLayer = (layer) => {
+      if (layerCache[layer])
+        return layerCache[layer];
+      let css = Array.from(sheet).map(([query, items]) => {
+        const size = items.length;
+        const sorted = items.filter((i) => {
+          var _a;
+          return (((_a = i[4]) == null ? void 0 : _a.layer) || "default") === layer;
+        }).sort((a, b) => {
+          var _a;
+          return a[0] - b[0] || ((_a = a[1]) == null ? void 0 : _a.localeCompare(b[1] || "")) || 0;
+        }).map((a) => [a[1] ? applyScope(a[1], scope) : a[1], a[2]]);
+        if (!sorted.length)
+          return void 0;
+        const rules = sorted.map(([selector, body], idx) => {
+          if (selector && this.config.mergeSelectors) {
+            for (let i = size - 1; i > idx; i--) {
+              const current = sorted[i];
+              if (current && current[0] && current[1] === body) {
+                current[0] = `${selector},${current[0]}`;
+                return null;
+              }
             }
           }
-        }
-        return selector ? `${selector}{${body}}` : body;
-      }).filter(Boolean).join("\n");
-      return query ? `${query}{
+          return selector ? `${selector}{${body}}` : body;
+        }).filter(Boolean).join("\n");
+        return query ? `${query}{
 ${rules}
 }` : rules;
-    }).join("\n");
+      }).filter(Boolean).join("\n");
+      if (preflights) {
+        css = [
+          ...this.config.preflights.filter((i) => (i.layer || "default") === layer).map((i) => i.getCSS()).filter(Boolean),
+          css
+        ].join("\n");
+      }
+      return layerCache[layer] = layerComments && css ? `/* layer: ${layer} */
+${css}` : css;
+    };
+    const getLayers = (excludes) => {
+      return layers.filter((i) => !(excludes == null ? void 0 : excludes.includes(i))).map((i) => getLayer(i) || "").filter(Boolean).join("\n");
+    };
     return {
-      css,
+      get css() {
+        return getLayers();
+      },
+      layers,
+      getLayers,
+      getLayer,
       matched
     };
   }
@@ -406,7 +487,7 @@ ${rules}
     }
     return [raw, processed, handlers];
   }
-  applyVariants(parsed, variantHandlers = parsed[3], raw = parsed[1]) {
+  applyVariants(parsed, variantHandlers = parsed[4], raw = parsed[1]) {
     const selector = variantHandlers.reduce((p, v) => {
       var _a;
       return ((_a = v.selector) == null ? void 0 : _a.call(v, p)) || p;
@@ -424,7 +505,7 @@ ${rules}
   }
   constructCustomCSS(context, body, overrideSelector) {
     body = normalizeEntries(body);
-    const [selector, entries, mediaQuery] = this.applyVariants([0, overrideSelector || context.rawSelector, body, context.variantHandlers]);
+    const [selector, entries, mediaQuery] = this.applyVariants([0, overrideSelector || context.rawSelector, body, void 0, context.variantHandlers]);
     const cssBody = `${selector}{${entriesToCss(entries)}}`;
     if (mediaQuery)
       return `${mediaQuery}{${cssBody}}`;
@@ -435,7 +516,7 @@ ${rules}
     const [raw, processed, variantHandlers] = typeof input === "string" ? this.matchVariants(input) : input;
     const staticMatch = rulesStaticMap[processed];
     if (staticMatch == null ? void 0 : staticMatch[1])
-      return [staticMatch[0], raw, normalizeEntries(staticMatch[1]), variantHandlers];
+      return [staticMatch[0], raw, normalizeEntries(staticMatch[1]), staticMatch[2], variantHandlers];
     const context = {
       rawSelector: raw,
       currentSelector: processed,
@@ -448,35 +529,37 @@ ${rules}
       const rule = rulesDynamic[i];
       if (!rule)
         continue;
-      const [matcher, handler] = rule;
+      const [matcher, handler, meta] = rule;
       const match = processed.match(matcher);
       if (!match)
         continue;
       const result = await handler(match, context);
       if (typeof result === "string")
-        return [i, result];
+        return [i, result, meta];
       if (result)
-        return [i, raw, normalizeEntries(result), variantHandlers];
+        return [i, raw, normalizeEntries(result), meta, variantHandlers];
     }
   }
   stringifyUtil(parsed) {
     if (!parsed)
       return;
     if (isRawUtil(parsed))
-      return [parsed[0], void 0, parsed[1], void 0];
+      return [parsed[0], void 0, parsed[1], void 0, parsed[2]];
     const [selector, entries, mediaQuery] = this.applyVariants(parsed);
     const body = entriesToCss(entries);
     if (!body)
       return;
-    return [parsed[0], selector, body, mediaQuery];
+    return [parsed[0], selector, body, mediaQuery, parsed[3]];
   }
   expandShortcut(processed, depth = 3) {
     if (depth === 0)
       return;
+    let meta;
     let result;
     for (const s of this.config.shortcuts) {
       if (isStaticShortcut(s)) {
         if (s[0] === processed) {
+          meta = meta || s[2];
           result = s[1];
           break;
         }
@@ -484,22 +567,32 @@ ${rules}
         const match = processed.match(s[0]);
         if (match)
           result = s[1](match);
-        if (result)
+        if (result) {
+          meta = meta || s[2];
           break;
+        }
       }
     }
     if (!result)
       return;
     if (typeof result === "string")
       result = result.split(/ /g);
-    return result.flatMap((r) => this.expandShortcut(r, depth - 1) || [r]);
+    return [
+      result.flatMap((r) => {
+        var _a;
+        return ((_a = this.expandShortcut(r, depth - 1)) == null ? void 0 : _a[0]) || [r];
+      }),
+      meta
+    ];
   }
-  async stringifyShortcuts(parent, expanded) {
+  async stringifyShortcuts(parent, expanded, meta = { layer: this.config.shortcutsLayer }) {
     const selectorMap = new TwoKeyMap();
     const parsed = (await Promise.all(uniq(expanded).map((i) => this.parseUtil(i)))).filter(Boolean).sort((a, b) => a[0] - b[0]);
     const [raw, , parentVariants] = parent;
     for (const item of parsed) {
-      const [selector, entries, mediaQuery] = this.applyVariants(item, [...item[3], ...parentVariants], raw);
+      if (isRawUtil(item))
+        continue;
+      const [selector, entries, mediaQuery] = this.applyVariants(item, [...item[4], ...parentVariants], raw);
       const mapItem = selectorMap.getFallback(selector, mediaQuery, [[], item[0]]);
       mapItem[0].push(...entries);
       if (item[0] > mapItem[1])
@@ -507,9 +600,9 @@ ${rules}
     }
     return selectorMap.map(([entries, index], selector, mediaQuery) => {
       const body = entriesToCss(entries);
-      if (!body)
-        return void 0;
-      return [index, selector, body, mediaQuery];
+      if (body)
+        return [index, selector, body, mediaQuery, meta];
+      return void 0;
     }).filter(Boolean);
   }
   isExcluded(raw) {
@@ -561,5 +654,6 @@ function normalizeEntries(obj) {
   normalizeVariant,
   toArray,
   uniq,
-  validateFilterRE
+  validateFilterRE,
+  withLayer
 });

package/dist/index.mjs

@@ -111,7 +111,7 @@ function hex2rgba(hex = "") {
 
 // src/utils/helpers.ts
 var attributifyRE = /^\[(.+?)~?="(.*)"\]$/;
-var validateFilterRE = /[a-z]/;
+var validateFilterRE = /[a-z?]/;
 function isAttributifySelector(selector) {
   return selector.match(attributifyRE);
 }
@@ -122,7 +122,7 @@ function normalizeVariant(variant) {
   return typeof variant === "function" ? { match: variant } : variant;
 }
 function isRawUtil(util) {
-  return util.length === 2;
+  return util.length === 3;
 }
 
 // src/utils/map.ts
@@ -181,8 +181,25 @@ var BetterMap = class extends Map {
   }
 };
 
+// src/utils/layer.ts
+function withLayer(layer, rules) {
+  rules.forEach((r) => {
+    if (!r[2])
+      r[2] = { layer };
+    else
+      r[2].layer = layer;
+  });
+  return rules;
+}
+
 // src/extractors/split.ts
-var extractorSplit = (code) => new Set(code.split(/[\s'"`;>=]+/g).filter(isValidSelector));
+var extractorSplit = {
+  name: "split",
+  order: 0,
+  extract({ code }) {
+    return new Set(code.split(/[\s'"`;>=]+/g).filter(isValidSelector));
+  }
+};
 
 // src/config.ts
 function resolveShortcuts(shortcuts) {
@@ -192,6 +209,10 @@ function resolveShortcuts(shortcuts) {
     return Object.entries(s);
   });
 }
+var defaultLayers = {
+  shortcuts: -1,
+  default: 0
+};
 function resolveConfig(userConfig = {}, defaults = {}) {
   const config = Object.assign({}, defaults, userConfig);
   const rawPresets = config.presets || [];
@@ -200,6 +221,7 @@ function resolveConfig(userConfig = {}, defaults = {}) {
     ...rawPresets.filter((p) => !p.enforce),
     ...rawPresets.filter((p) => p.enforce === "post")
   ];
+  const layers = Object.assign(defaultLayers, ...rawPresets.map((i) => i.layers), userConfig.layers);
   function mergePresets(key) {
     return uniq([
       ...sortedPresets.flatMap((p) => toArray(p[key] || [])),
@@ -209,12 +231,13 @@ function resolveConfig(userConfig = {}, defaults = {}) {
   const extractors = mergePresets("extractors");
   if (!extractors.length)
     extractors.push(extractorSplit);
+  extractors.sort((a, b) => (a.order || 0) - (b.order || 0));
   const rules = mergePresets("rules");
   const rulesStaticMap = {};
   const rulesSize = rules.length;
   rules.forEach((rule, i) => {
     if (isStaticRule(rule)) {
-      rulesStaticMap[rule[0]] = [i, rule[1]];
+      rulesStaticMap[rule[0]] = [i, rule[1], rule[2]];
       delete rules[i];
     }
   });
@@ -226,11 +249,16 @@ function resolveConfig(userConfig = {}, defaults = {}) {
     mergeSelectors: true,
     warnExcluded: true,
     excluded: [],
+    sortLayers: (layers2) => layers2,
     ...config,
+    envMode: config.envMode || "build",
+    shortcutsLayer: config.shortcutsLayer || "shortcuts",
+    layers,
     theme,
     rulesSize,
     rulesDynamic: rules,
     rulesStaticMap,
+    preflights: mergePresets("preflights"),
     variants: mergePresets("variants").map(normalizeVariant),
     shortcuts: resolveShortcuts(mergePresets("shortcuts")),
     extractors
@@ -257,17 +285,31 @@ var UnoGenerator = class {
     this._cache = new Map();
   }
   async applyExtractors(code, id, set = new Set()) {
-    await Promise.all(this.config.extractors.map(async (i) => {
-      const result = await i(code, id);
+    const context = {
+      get original() {
+        return code;
+      },
+      code,
+      id
+    };
+    for (const extractor of this.config.extractors) {
+      const result = await extractor.extract(context);
       result == null ? void 0 : result.forEach((t) => set.add(t));
-    }));
+    }
     return set;
   }
-  async generate(input, id, scope) {
+  async generate(input, {
+    id,
+    scope,
+    preflights = true,
+    layerComments = true
+  } = {}) {
     const tokens = typeof input === "string" ? await this.applyExtractors(input, id) : input;
+    const layerSet = new Set(["default"]);
     const matched = new Set();
     const sheet = new Map();
     const hit = (raw, payload) => {
+      var _a;
       this._cache.set(raw, payload);
       matched.add(raw);
       for (const item of payload) {
@@ -275,6 +317,8 @@ var UnoGenerator = class {
         if (!sheet.has(query))
           sheet.set(query, []);
         sheet.get(query).push(item);
+        if ((_a = item[4]) == null ? void 0 : _a.layer)
+          layerSet.add(item[4].layer);
       }
     };
     await Promise.all(Array.from(tokens).map(async (raw) => {
@@ -298,9 +342,9 @@ var UnoGenerator = class {
         return;
       }
       const expanded = this.expandShortcut(applied[1]);
-      if (expanded == null ? void 0 : expanded.length) {
-        const utils = await this.stringifyShortcuts(applied, expanded);
-        if (utils.length) {
+      if (expanded) {
+        const utils = await this.stringifyShortcuts(applied, expanded[0], expanded[1]);
+        if (utils == null ? void 0 : utils.length) {
           hit(raw, utils);
           return;
         }
@@ -313,30 +357,66 @@ var UnoGenerator = class {
       }
       this._cache.set(raw, null);
     }));
-    const css = Array.from(sheet).map(([query, items]) => {
-      const size = items.length;
-      const sorted = items.sort((a, b) => {
-        var _a;
-        return a[0] - b[0] || ((_a = a[1]) == null ? void 0 : _a.localeCompare(b[1] || "")) || 0;
-      }).map((a) => [a[1] ? applyScope(a[1], scope) : a[1], a[2]]);
-      const rules = sorted.map(([selector, body], idx) => {
-        if (selector && this.config.mergeSelectors) {
-          for (let i = size - 1; i > idx; i--) {
-            const current = sorted[i];
-            if (current[0] && current[1] === body) {
-              current[0] = `${selector},${current[0]}`;
-              return null;
+    if (preflights) {
+      this.config.preflights.forEach((i) => {
+        if (i.layer)
+          layerSet.add(i.layer);
+      });
+    }
+    const layerCache = {};
+    const layers = this.config.sortLayers(Array.from(layerSet).sort((a, b) => {
+      var _a, _b;
+      return ((_a = this.config.layers[a]) != null ? _a : 0) - ((_b = this.config.layers[b]) != null ? _b : 0) || a.localeCompare(b);
+    }));
+    const getLayer = (layer) => {
+      if (layerCache[layer])
+        return layerCache[layer];
+      let css = Array.from(sheet).map(([query, items]) => {
+        const size = items.length;
+        const sorted = items.filter((i) => {
+          var _a;
+          return (((_a = i[4]) == null ? void 0 : _a.layer) || "default") === layer;
+        }).sort((a, b) => {
+          var _a;
+          return a[0] - b[0] || ((_a = a[1]) == null ? void 0 : _a.localeCompare(b[1] || "")) || 0;
+        }).map((a) => [a[1] ? applyScope(a[1], scope) : a[1], a[2]]);
+        if (!sorted.length)
+          return void 0;
+        const rules = sorted.map(([selector, body], idx) => {
+          if (selector && this.config.mergeSelectors) {
+            for (let i = size - 1; i > idx; i--) {
+              const current = sorted[i];
+              if (current && current[0] && current[1] === body) {
+                current[0] = `${selector},${current[0]}`;
+                return null;
+              }
             }
           }
-        }
-        return selector ? `${selector}{${body}}` : body;
-      }).filter(Boolean).join("\n");
-      return query ? `${query}{
+          return selector ? `${selector}{${body}}` : body;
+        }).filter(Boolean).join("\n");
+        return query ? `${query}{
 ${rules}
 }` : rules;
-    }).join("\n");
+      }).filter(Boolean).join("\n");
+      if (preflights) {
+        css = [
+          ...this.config.preflights.filter((i) => (i.layer || "default") === layer).map((i) => i.getCSS()).filter(Boolean),
+          css
+        ].join("\n");
+      }
+      return layerCache[layer] = layerComments && css ? `/* layer: ${layer} */
+${css}` : css;
+    };
+    const getLayers = (excludes) => {
+      return layers.filter((i) => !(excludes == null ? void 0 : excludes.includes(i))).map((i) => getLayer(i) || "").filter(Boolean).join("\n");
+    };
     return {
-      css,
+      get css() {
+        return getLayers();
+      },
+      layers,
+      getLayers,
+      getLayer,
       matched
     };
   }
@@ -370,7 +450,7 @@ ${rules}
     }
     return [raw, processed, handlers];
   }
-  applyVariants(parsed, variantHandlers = parsed[3], raw = parsed[1]) {
+  applyVariants(parsed, variantHandlers = parsed[4], raw = parsed[1]) {
     const selector = variantHandlers.reduce((p, v) => {
       var _a;
       return ((_a = v.selector) == null ? void 0 : _a.call(v, p)) || p;
@@ -388,7 +468,7 @@ ${rules}
   }
   constructCustomCSS(context, body, overrideSelector) {
     body = normalizeEntries(body);
-    const [selector, entries, mediaQuery] = this.applyVariants([0, overrideSelector || context.rawSelector, body, context.variantHandlers]);
+    const [selector, entries, mediaQuery] = this.applyVariants([0, overrideSelector || context.rawSelector, body, void 0, context.variantHandlers]);
     const cssBody = `${selector}{${entriesToCss(entries)}}`;
     if (mediaQuery)
       return `${mediaQuery}{${cssBody}}`;
@@ -399,7 +479,7 @@ ${rules}
     const [raw, processed, variantHandlers] = typeof input === "string" ? this.matchVariants(input) : input;
     const staticMatch = rulesStaticMap[processed];
     if (staticMatch == null ? void 0 : staticMatch[1])
-      return [staticMatch[0], raw, normalizeEntries(staticMatch[1]), variantHandlers];
+      return [staticMatch[0], raw, normalizeEntries(staticMatch[1]), staticMatch[2], variantHandlers];
     const context = {
       rawSelector: raw,
       currentSelector: processed,
@@ -412,35 +492,37 @@ ${rules}
       const rule = rulesDynamic[i];
       if (!rule)
         continue;
-      const [matcher, handler] = rule;
+      const [matcher, handler, meta] = rule;
       const match = processed.match(matcher);
       if (!match)
         continue;
       const result = await handler(match, context);
       if (typeof result === "string")
-        return [i, result];
+        return [i, result, meta];
       if (result)
-        return [i, raw, normalizeEntries(result), variantHandlers];
+        return [i, raw, normalizeEntries(result), meta, variantHandlers];
     }
   }
   stringifyUtil(parsed) {
     if (!parsed)
       return;
     if (isRawUtil(parsed))
-      return [parsed[0], void 0, parsed[1], void 0];
+      return [parsed[0], void 0, parsed[1], void 0, parsed[2]];
     const [selector, entries, mediaQuery] = this.applyVariants(parsed);
     const body = entriesToCss(entries);
     if (!body)
       return;
-    return [parsed[0], selector, body, mediaQuery];
+    return [parsed[0], selector, body, mediaQuery, parsed[3]];
   }
   expandShortcut(processed, depth = 3) {
     if (depth === 0)
       return;
+    let meta;
     let result;
     for (const s of this.config.shortcuts) {
       if (isStaticShortcut(s)) {
         if (s[0] === processed) {
+          meta = meta || s[2];
           result = s[1];
           break;
         }
@@ -448,22 +530,32 @@ ${rules}
         const match = processed.match(s[0]);
         if (match)
           result = s[1](match);
-        if (result)
+        if (result) {
+          meta = meta || s[2];
           break;
+        }
       }
     }
     if (!result)
       return;
     if (typeof result === "string")
       result = result.split(/ /g);
-    return result.flatMap((r) => this.expandShortcut(r, depth - 1) || [r]);
+    return [
+      result.flatMap((r) => {
+        var _a;
+        return ((_a = this.expandShortcut(r, depth - 1)) == null ? void 0 : _a[0]) || [r];
+      }),
+      meta
+    ];
   }
-  async stringifyShortcuts(parent, expanded) {
+  async stringifyShortcuts(parent, expanded, meta = { layer: this.config.shortcutsLayer }) {
     const selectorMap = new TwoKeyMap();
     const parsed = (await Promise.all(uniq(expanded).map((i) => this.parseUtil(i)))).filter(Boolean).sort((a, b) => a[0] - b[0]);
     const [raw, , parentVariants] = parent;
     for (const item of parsed) {
-      const [selector, entries, mediaQuery] = this.applyVariants(item, [...item[3], ...parentVariants], raw);
+      if (isRawUtil(item))
+        continue;
+      const [selector, entries, mediaQuery] = this.applyVariants(item, [...item[4], ...parentVariants], raw);
       const mapItem = selectorMap.getFallback(selector, mediaQuery, [[], item[0]]);
       mapItem[0].push(...entries);
       if (item[0] > mapItem[1])
@@ -471,9 +563,9 @@ ${rules}
     }
     return selectorMap.map(([entries, index], selector, mediaQuery) => {
       const body = entriesToCss(entries);
-      if (!body)
-        return void 0;
-      return [index, selector, body, mediaQuery];
+      if (body)
+        return [index, selector, body, mediaQuery, meta];
+      return void 0;
     }).filter(Boolean);
   }
   isExcluded(raw) {
@@ -524,5 +616,6 @@ export {
   normalizeVariant,
   toArray,
   uniq,
-  validateFilterRE
+  validateFilterRE,
+  withLayer
 };

package/package.json

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