@unocss/core 0.4.8 → 0.4.12

package/dist/index.d.ts

@@ -10,6 +10,7 @@ declare class UnoGenerator {
     generate(input: string | Set<string>, id?: string, scope?: string): 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;
@@ -29,11 +30,32 @@ declare type DeepPartial<T> = {
 declare type CSSObject = Record<string, string | number | undefined>;
 declare type CSSEntries = [string, string | number | undefined][];
 interface RuleContext<Theme extends {} = {}> {
+    /**
+     * Unprocessed selector from user input.
+     * Useful for generating CSS rule.
+     */
     rawSelector: string;
+    /**
+     * Current selector for rule matching
+     */
     currentSelector: string;
+    /**
+     * UnoCSS generator instance
+     */
     generator: UnoGenerator;
+    /**
+     * The theme object
+     */
     theme: Theme;
+    /**
+     * Matched variants handlers for this rule.
+     */
     variantHandlers: VariantHandler[];
+    /**
+     * Constrcut a custom CSS rule.
+     * Variants and selector escaping will be handled automatically.
+     */
+    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>)];
@@ -182,7 +204,7 @@ declare function toArray<T>(value?: T | T[]): T[];
 declare function uniq<T>(value: T[]): T[];
 declare function mergeSet<T>(target: Set<T>, append: Set<T>): Set<T>;
 
-declare function hex2rgba(hex: string): [number, number, number, number] | [number, number, number] | undefined;
+declare function hex2rgba(hex?: string): [number, number, number, number] | [number, number, number] | undefined;
 
 declare const attributifyRE: RegExp;
 declare const validateFilterRE: RegExp;

package/dist/index.js

@@ -124,7 +124,7 @@ function mergeSet(target, append) {
 
 // src/utils/colors.ts
 var hexRE = /^#?([\da-f]+)$/i;
-function hex2rgba(hex) {
+function hex2rgba(hex = "") {
   const [, body] = hex.match(hexRE) || [];
   if (!body)
     return;
@@ -422,6 +422,14 @@ ${rules}
       mediaQuery
     ];
   }
+  constructCustomCSS(context, body, overrideSelector) {
+    body = normalizeEntries(body);
+    const [selector, entries, mediaQuery] = this.applyVariants([0, overrideSelector || context.rawSelector, body, context.variantHandlers]);
+    const cssBody = `${selector}{${entriesToCss(entries)}}`;
+    if (mediaQuery)
+      return `${mediaQuery}{${cssBody}}`;
+    return cssBody;
+  }
   async parseUtil(input) {
     const { theme, rulesStaticMap, rulesDynamic, rulesSize } = this.config;
     const [raw, processed, variantHandlers] = typeof input === "string" ? this.matchVariants(input) : input;
@@ -433,7 +441,8 @@ ${rules}
       currentSelector: processed,
       theme,
       generator: this,
-      variantHandlers
+      variantHandlers,
+      constructCSS: (...args) => this.constructCustomCSS(context, ...args)
     };
     for (let i = rulesSize; i >= 0; i--) {
       const rule = rulesDynamic[i];
@@ -483,11 +492,11 @@ ${rules}
       return;
     if (typeof result === "string")
       result = result.split(/ /g);
-    return uniq(result.flatMap((r) => this.expandShortcut(r, depth - 1) || [r]));
+    return result.flatMap((r) => this.expandShortcut(r, depth - 1) || [r]);
   }
   async stringifyShortcuts(parent, expanded) {
     const selectorMap = new TwoKeyMap();
-    const parsed = (await Promise.all(expanded.map((i) => this.parseUtil(i)))).filter(Boolean).sort((a, b) => a[0] - b[0]);
+    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);

package/dist/index.mjs

@@ -88,7 +88,7 @@ function mergeSet(target, append) {
 
 // src/utils/colors.ts
 var hexRE = /^#?([\da-f]+)$/i;
-function hex2rgba(hex) {
+function hex2rgba(hex = "") {
   const [, body] = hex.match(hexRE) || [];
   if (!body)
     return;
@@ -386,6 +386,14 @@ ${rules}
       mediaQuery
     ];
   }
+  constructCustomCSS(context, body, overrideSelector) {
+    body = normalizeEntries(body);
+    const [selector, entries, mediaQuery] = this.applyVariants([0, overrideSelector || context.rawSelector, body, context.variantHandlers]);
+    const cssBody = `${selector}{${entriesToCss(entries)}}`;
+    if (mediaQuery)
+      return `${mediaQuery}{${cssBody}}`;
+    return cssBody;
+  }
   async parseUtil(input) {
     const { theme, rulesStaticMap, rulesDynamic, rulesSize } = this.config;
     const [raw, processed, variantHandlers] = typeof input === "string" ? this.matchVariants(input) : input;
@@ -397,7 +405,8 @@ ${rules}
       currentSelector: processed,
       theme,
       generator: this,
-      variantHandlers
+      variantHandlers,
+      constructCSS: (...args) => this.constructCustomCSS(context, ...args)
     };
     for (let i = rulesSize; i >= 0; i--) {
       const rule = rulesDynamic[i];
@@ -447,11 +456,11 @@ ${rules}
       return;
     if (typeof result === "string")
       result = result.split(/ /g);
-    return uniq(result.flatMap((r) => this.expandShortcut(r, depth - 1) || [r]));
+    return result.flatMap((r) => this.expandShortcut(r, depth - 1) || [r]);
   }
   async stringifyShortcuts(parent, expanded) {
     const selectorMap = new TwoKeyMap();
-    const parsed = (await Promise.all(expanded.map((i) => this.parseUtil(i)))).filter(Boolean).sort((a, b) => a[0] - b[0]);
+    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);

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@unocss/core",
-  "version": "0.4.8",
-  "description": "",
-  "keywords": [],
-  "homepage": "https://github.com/antfu/unocss#readme",
+  "version": "0.4.12",
+  "description": "The instant on-demand Atomic CSS engine.",
+  "keywords": [
+    "unocss",
+    "atomic-css",
+    "atomic-css-engine",
+    "css",
+    "tailwind",
+    "windicss"
+  ],
+  "homepage": "https://github.com/antfu/unocss/tree/main/packages/core#readme",
   "bugs": {
     "url": "https://github.com/antfu/unocss/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/antfu/unocss.git"
+    "url": "git+https://github.com/antfu/unocss.git",
+    "directory": "packages/core"
   },
   "funding": "https://github.com/sponsors/antfu",
   "license": "MIT",