@unocss/core 0.21.1 → 0.22.2

package/dist/index.cjs

@@ -161,6 +161,7 @@ function hex2rgba(hex = "") {
 
 const attributifyRE = /^\[(.+?)~?="(.*)"\]$/;
 const validateFilterRE = /(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:%-?]/;
+const CONTROL_SHORTCUT_NO_MERGE = "$$shortcut-no-merge";
 function isAttributifySelector(selector) {
   return selector.match(attributifyRE);
 }
@@ -387,7 +388,7 @@ function resolveConfig(userConfig = {}, defaults = {}) {
   };
 }
 
-const version = "0.21.1";
+const version = "0.22.2";
 
 class UnoGenerator {
   constructor(userConfig = {}, defaults = {}) {
@@ -499,33 +500,38 @@ class UnoGenerator {
     }
     const layerCache = {};
     const layers = this.config.sortLayers(Array.from(layerSet).sort((a, b) => (this.config.layers[a] ?? 0) - (this.config.layers[b] ?? 0) || a.localeCompare(b)));
+    let preflightsMap = {};
+    if (preflights) {
+      preflightsMap = Object.fromEntries(await Promise.all(layers.map(async (layer) => {
+        const preflights2 = await Promise.all(this.config.preflights.filter((i) => (i.layer || "default") === layer).map(async (i) => await i.getCSS()));
+        const css = preflights2.filter(Boolean).join(nl);
+        return [layer, css];
+      })));
+    }
     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) || a[0]?.localeCompare(b[0] || "") || 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]]);
+        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], !!a[4]?.noMerge]).map((a) => [a[0] == null ? a[0] : [a[0]], a[1], a[2]]);
         if (!sorted.length)
           return void 0;
-        const rules = sorted.reverse().map(([selector, body], idx) => {
+        const rules = sorted.reverse().map(([selector, body, noMerge], idx) => {
           if (selector && this.config.mergeSelectors) {
             for (let i = idx + 1; i < size; i++) {
               const current = sorted[i];
-              if (current && current[0] && current[1] === body) {
-                current[0] = `${current[0]},${nl}${selector}`;
+              if (!noMerge && current && current[0] && current[1] === body) {
+                current[0].push(...selector);
                 return null;
               }
             }
           }
-          return selector ? `${selector}{${body}}` : body;
+          return selector ? `${[...new Set(selector)].join(`,${nl}`)}{${body}}` : body;
         }).filter(Boolean).reverse().join(nl);
         return parent ? `${parent}{${nl}${rules}${nl}}` : rules;
       }).filter(Boolean).join(nl);
       if (preflights) {
-        css = [
-          ...this.config.preflights.filter((i) => (i.layer || "default") === layer).map((i) => i.getCSS()).filter(Boolean),
-          css
-        ].join(nl);
+        css = [preflightsMap[layer], css].filter(Boolean).join(nl);
       }
       return layerCache[layer] = !minify && css ? `/* layer: ${layer} */${nl}${css}` : css;
     };
@@ -684,16 +690,18 @@ class UnoGenerator {
         continue;
       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];
+      mapItem[0].push(entries);
     }
-    return selectorMap.map(([entries, index], selector, mediaQuery) => {
-      const body = entriesToCss(entries);
-      if (body)
-        return [index, selector, body, mediaQuery, meta];
-      return void 0;
-    }).filter(Boolean);
+    return selectorMap.map(([e2, index], selector, mediaQuery) => {
+      const split = e2.filter((entries) => entries.some((entry) => entry[0] === CONTROL_SHORTCUT_NO_MERGE));
+      const rest = e2.filter((entries) => entries.every((entry) => entry[0] !== CONTROL_SHORTCUT_NO_MERGE));
+      return [...split, rest.flat(1)].map((entries) => {
+        const body = entriesToCss(entries);
+        if (body)
+          return [index, selector, body, mediaQuery, meta];
+        return void 0;
+      });
+    }).flat(1).filter(Boolean);
   }
   isBlocked(raw) {
     return !raw || this.config.blocklist.some((e2) => typeof e2 === "string" ? e2 === raw : e2.test(raw));
@@ -710,14 +718,15 @@ function applyScope(css, scope) {
   else
     return scope ? `${scope} ${css}` : css;
 }
+const attributifyRe = /^\[(.+?)(~?=)"(.*)"\]$/;
 function toEscapedSelector(raw) {
-  if (raw.startsWith("["))
-    return raw.replace(/^\[(.+?)(~?=)"(.*)"\]$/, (_, n, s, i) => `[${e(n)}${s}"${e(i)}"]`);
-  else
-    return `.${e(raw)}`;
+  if (raw.startsWith("[") && attributifyRe.test(raw))
+    return raw.replace(attributifyRe, (_, n, s, i) => `[${e(n)}${s}"${e(i)}"]`);
+  return `.${e(raw)}`;
 }
 
 exports.BetterMap = BetterMap;
+exports.CONTROL_SHORTCUT_NO_MERGE = CONTROL_SHORTCUT_NO_MERGE;
 exports.TwoKeyMap = TwoKeyMap;
 exports.UnoGenerator = UnoGenerator;
 exports.attributifyRE = attributifyRE;

package/dist/index.d.ts

@@ -38,7 +38,7 @@ declare type RequiredByKey<T, K extends keyof T = keyof T> = FlatObjectTuple<Req
 declare type CSSObject = Record<string, string | number | undefined>;
 declare type CSSEntries = [string, string | number | undefined][];
 declare type RGBAColorValue = [number, number, number, number] | [number, number, number];
-declare type ParsedColorValue = {
+interface ParsedColorValue {
     /**
      * Parsed color value.
      */
@@ -63,7 +63,7 @@ declare type ParsedColorValue = {
      * Parsed rgba's alpha value.
      */
     alpha?: number | string;
-};
+}
 declare type PresetOptions = Record<string, any>;
 interface RuleContext<Theme extends {} = {}> {
     /**
@@ -123,6 +123,11 @@ interface RuleMeta {
      * @default 'default'
      */
     layer?: string;
+    /**
+     * Option to not merge this selector even if the body are the same.
+     * @default false
+     */
+    noMerge?: boolean;
     /**
      * Internal rules will only be matched for shortcuts but not the user code.
      * @default false
@@ -142,7 +147,7 @@ declare type UserShortcuts<Theme extends {} = {}> = StaticShortcutMap | (StaticS
 declare type Shortcut<Theme extends {} = {}> = StaticShortcut | DynamicShortcut<Theme>;
 declare type FilterPattern = ReadonlyArray<string | RegExp> | string | RegExp | null;
 interface Preflight {
-    getCSS: () => string | undefined;
+    getCSS: () => Promise<string | undefined> | string | undefined;
     layer?: string;
 }
 declare type BlocklistRule = string | RegExp;
@@ -169,7 +174,7 @@ interface VariantHandler {
     order?: number;
 }
 declare type VariantFunction<Theme extends {} = {}> = (matcher: string, context: Readonly<VariantContext<Theme>>) => string | VariantHandler | undefined;
-declare type VariantObject<Theme extends {} = {}> = {
+interface VariantObject<Theme extends {} = {}> {
     /**
      * The entry function to match and rewrite the selector for futher processing.
      */
@@ -180,7 +185,7 @@ declare type VariantObject<Theme extends {} = {}> = {
      * @default false
      */
     multiPass?: boolean;
-};
+}
 declare type Variant<Theme extends {} = {}> = VariantFunction<Theme> | VariantObject<Theme>;
 declare type Preprocessor = (matcher: string) => string | undefined;
 declare type Postprocessor = (util: UtilObject) => void;
@@ -410,6 +415,7 @@ declare function hex2rgba(hex?: string): RGBAColorValue | undefined;
 
 declare const attributifyRE: RegExp;
 declare const validateFilterRE: RegExp;
+declare const CONTROL_SHORTCUT_NO_MERGE = "$$shortcut-no-merge";
 declare function isAttributifySelector(selector: string): RegExpMatchArray | null;
 declare function isValidSelector(selector?: string): selector is string;
 declare function normalizeVariant(variant: Variant): VariantObject;
@@ -452,4 +458,4 @@ declare const extractorSplit: Extractor;
 
 declare const extractorSvelte: Extractor;
 
-export { ArgumentType, Arrayable, 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, ThemeExtender, TwoKeyMap, UnoGenerator, UserConfig, UserConfigDefaults, UserOnlyOptions, UserShortcuts, UtilObject, ValueHandler, ValueHandlerCallback, Variant, VariantContext, VariantFunction, VariantHandler, VariantMatchedResult, VariantObject, attributifyRE, clearIdenticalEntries, clone, 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, Arrayable, Awaitable, BetterMap, BlocklistRule, CONTROL_SHORTCUT_NO_MERGE, 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, ThemeExtender, TwoKeyMap, UnoGenerator, UserConfig, UserConfigDefaults, UserOnlyOptions, UserShortcuts, UtilObject, ValueHandler, ValueHandlerCallback, Variant, VariantContext, VariantFunction, VariantHandler, VariantMatchedResult, VariantObject, attributifyRE, clearIdenticalEntries, clone, 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

@@ -157,6 +157,7 @@ function hex2rgba(hex = "") {
 
 const attributifyRE = /^\[(.+?)~?="(.*)"\]$/;
 const validateFilterRE = /(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:%-?]/;
+const CONTROL_SHORTCUT_NO_MERGE = "$$shortcut-no-merge";
 function isAttributifySelector(selector) {
   return selector.match(attributifyRE);
 }
@@ -383,7 +384,7 @@ function resolveConfig(userConfig = {}, defaults = {}) {
   };
 }
 
-const version = "0.21.1";
+const version = "0.22.2";
 
 class UnoGenerator {
   constructor(userConfig = {}, defaults = {}) {
@@ -495,33 +496,38 @@ class UnoGenerator {
     }
     const layerCache = {};
     const layers = this.config.sortLayers(Array.from(layerSet).sort((a, b) => (this.config.layers[a] ?? 0) - (this.config.layers[b] ?? 0) || a.localeCompare(b)));
+    let preflightsMap = {};
+    if (preflights) {
+      preflightsMap = Object.fromEntries(await Promise.all(layers.map(async (layer) => {
+        const preflights2 = await Promise.all(this.config.preflights.filter((i) => (i.layer || "default") === layer).map(async (i) => await i.getCSS()));
+        const css = preflights2.filter(Boolean).join(nl);
+        return [layer, css];
+      })));
+    }
     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) || a[0]?.localeCompare(b[0] || "") || 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]]);
+        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], !!a[4]?.noMerge]).map((a) => [a[0] == null ? a[0] : [a[0]], a[1], a[2]]);
         if (!sorted.length)
           return void 0;
-        const rules = sorted.reverse().map(([selector, body], idx) => {
+        const rules = sorted.reverse().map(([selector, body, noMerge], idx) => {
           if (selector && this.config.mergeSelectors) {
             for (let i = idx + 1; i < size; i++) {
               const current = sorted[i];
-              if (current && current[0] && current[1] === body) {
-                current[0] = `${current[0]},${nl}${selector}`;
+              if (!noMerge && current && current[0] && current[1] === body) {
+                current[0].push(...selector);
                 return null;
               }
             }
           }
-          return selector ? `${selector}{${body}}` : body;
+          return selector ? `${[...new Set(selector)].join(`,${nl}`)}{${body}}` : body;
         }).filter(Boolean).reverse().join(nl);
         return parent ? `${parent}{${nl}${rules}${nl}}` : rules;
       }).filter(Boolean).join(nl);
       if (preflights) {
-        css = [
-          ...this.config.preflights.filter((i) => (i.layer || "default") === layer).map((i) => i.getCSS()).filter(Boolean),
-          css
-        ].join(nl);
+        css = [preflightsMap[layer], css].filter(Boolean).join(nl);
       }
       return layerCache[layer] = !minify && css ? `/* layer: ${layer} */${nl}${css}` : css;
     };
@@ -680,16 +686,18 @@ class UnoGenerator {
         continue;
       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];
+      mapItem[0].push(entries);
     }
-    return selectorMap.map(([entries, index], selector, mediaQuery) => {
-      const body = entriesToCss(entries);
-      if (body)
-        return [index, selector, body, mediaQuery, meta];
-      return void 0;
-    }).filter(Boolean);
+    return selectorMap.map(([e2, index], selector, mediaQuery) => {
+      const split = e2.filter((entries) => entries.some((entry) => entry[0] === CONTROL_SHORTCUT_NO_MERGE));
+      const rest = e2.filter((entries) => entries.every((entry) => entry[0] !== CONTROL_SHORTCUT_NO_MERGE));
+      return [...split, rest.flat(1)].map((entries) => {
+        const body = entriesToCss(entries);
+        if (body)
+          return [index, selector, body, mediaQuery, meta];
+        return void 0;
+      });
+    }).flat(1).filter(Boolean);
   }
   isBlocked(raw) {
     return !raw || this.config.blocklist.some((e2) => typeof e2 === "string" ? e2 === raw : e2.test(raw));
@@ -706,11 +714,11 @@ function applyScope(css, scope) {
   else
     return scope ? `${scope} ${css}` : css;
 }
+const attributifyRe = /^\[(.+?)(~?=)"(.*)"\]$/;
 function toEscapedSelector(raw) {
-  if (raw.startsWith("["))
-    return raw.replace(/^\[(.+?)(~?=)"(.*)"\]$/, (_, n, s, i) => `[${e(n)}${s}"${e(i)}"]`);
-  else
-    return `.${e(raw)}`;
+  if (raw.startsWith("[") && attributifyRe.test(raw))
+    return raw.replace(attributifyRe, (_, n, s, i) => `[${e(n)}${s}"${e(i)}"]`);
+  return `.${e(raw)}`;
 }
 
-export { BetterMap, TwoKeyMap, UnoGenerator, attributifyRE, clearIdenticalEntries, clone, 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 { BetterMap, CONTROL_SHORTCUT_NO_MERGE, TwoKeyMap, UnoGenerator, attributifyRE, clearIdenticalEntries, clone, 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/package.json

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