Merge branch 'main' into agufagit/main

unocss · Feb 22, 2023 · 16f7720 · 16f7720
2 parents 20d9a61 + 31774d4
commit 16f7720
Show file tree

Hide file tree

Showing 57 changed files with 166 additions and 157 deletions.
diff --git a/interactive/components/Intro.vue b/interactive/components/Intro.vue
@@ -1,18 +1,9 @@
 <template>
   <div px5 py12 gap4 c-truegray5 h-full of-auto>
-    <svg w-25 h-25 mxa mb4 mt8 flex-none viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M117.722 167.444C117.722 139.83 140.108 117.444 167.722 117.444V117.444C195.336 117.444 217.722 139.83 217.722 167.444V167.444C217.722 195.058 195.336 217.444 167.722 217.444V217.444C140.108 217.444 117.722 195.058 117.722 167.444V167.444Z"
-        fill="#666" fill-opacity="60"
-      />
-      <path
-        d="M117.722 52.5561C117.722 24.9419 140.108 2.55614 167.722 2.55614V2.55614C195.336 2.55614 217.722 24.9419 217.722 52.5561V97.5561C217.722 100.318 215.483 102.556 212.722 102.556H122.722C119.961 102.556 117.722 100.318 117.722 97.5561V52.5561Z"
-        fill="#666" fill-opacity="30"
-      />
-      <path
-        d="M102.278 167.444C102.278 195.058 79.8922 217.444 52.278 217.444V217.444C24.6637 217.444 2.27796 195.058 2.27796 167.444L2.27796 122.444C2.27796 119.682 4.51654 117.444 7.27796 117.444L97.278 117.444C100.039 117.444 102.278 119.682 102.278 122.444L102.278 167.444Z"
-        fill="#666"
-      />
+    <svg w-25 h-25 mxa mb4 mt8 flex-none viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M117.444 167.888C117.444 140.273 139.83 117.888 167.444 117.888V117.888C195.058 117.888 217.444 140.273 217.444 167.888V167.888C217.444 195.502 195.058 217.888 167.444 217.888V217.888C139.83 217.888 117.444 195.502 117.444 167.888V167.888Z" fill="#858585" />
+      <path d="M117.444 53C117.444 25.3858 139.83 3 167.444 3V3C195.058 3 217.444 25.3858 217.444 53V98C217.444 100.761 215.205 103 212.444 103H122.444C119.683 103 117.444 100.761 117.444 98V53Z" fill="#CCCCCC" />
+      <path d="M102 167.888C102 195.502 79.6142 217.888 52 217.888V217.888C24.3858 217.888 2 195.502 2 167.888L2.00001 122.888C2.00001 120.126 4.23859 117.888 7.00001 117.888L97 117.888C99.7614 117.888 102 120.126 102 122.888L102 167.888Z" fill="#4D4D4D" />
     </svg>
     <p>
       Welcome to UnoCSS <b c-black dark:c-white>Interactive</b> docs! <sup>Beta</sup>

diff --git a/interactive/public/favicon.svg b/interactive/public/favicon.svg
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@unocss/monorepo",
   "type": "module",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "private": true,
   "packageManager": "pnpm@7.11.0",
   "scripts": {

diff --git a/packages/README.md b/packages/README.md
@@ -27,4 +27,6 @@
 | [@unocss/webpack](./webpack) | The Webpack plugin | No | - |
 | [@unocss/nuxt](./nuxt) | The Nuxt Module | No | - |
 | [@unocss/runtime](./runtime) | CSS-in-JS Runtime for UnoCSS | No | - |
+| [@unocss/eslint-plugin](./eslint-plugin) | ESLint plugin | No | - |
+| [@unocss/eslint-config](./eslint-config) | ESLint config | No | - |
 | [VS Code Extension](./vscode) | UnoCSS for VS Code | - | - |
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/astro",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "UnoCSS integration for Astro",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/autocomplete/package.json b/packages/autocomplete/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/autocomplete",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "Autocomplete utils for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/autocomplete/src/create.ts b/packages/autocomplete/src/create.ts
@@ -63,7 +63,7 @@ export function createAutocomplete(uno: UnoGenerator): UnocssAutocomplete {
       return cache.get(input)!
 
     // match and ignore existing variants
-    const [, processed, , variants] = uno.matchVariants(input)
+    const [, processed, , variants] = await uno.matchVariants(input)
     let idx = processed ? input.search(escapeRegExp(processed)) : input.length
     // This input contains variants that modifies the processed part,
     // autocomplete will need to reverse it which is not possible

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/cli",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "CLI for UnoCSS",
   "author": {
     "name": "Johann Schopplich",

diff --git a/packages/config/package.json b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/config",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "Config loader for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/core",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "The instant on-demand Atomic CSS engine.",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/core/src/generator/index.ts b/packages/core/src/generator/index.ts
@@ -87,7 +87,7 @@ export class UnoGenerator<Theme extends {} = {}> {
       return
     }
 
-    const applied = this.matchVariants(raw, current)
+    const applied = await this.matchVariants(raw, current)
 
     if (!applied || this.isBlocked(applied[1])) {
       this.blocked.add(raw)
@@ -101,7 +101,7 @@ export class UnoGenerator<Theme extends {} = {}> {
       context.variants = [...applied[3]]
 
     // expand shortcuts
-    const expanded = this.expandShortcut(context.currentSelector, context)
+    const expanded = await this.expandShortcut(context.currentSelector, context)
     const utils = expanded
       ? await this.stringifyShortcuts(context.variantMatch, context, expanded[0], expanded[1])
       // no shortcuts
@@ -292,7 +292,7 @@ export class UnoGenerator<Theme extends {} = {}> {
     }
   }
 
-  matchVariants(raw: string, current?: string): VariantMatchedResult<Theme> {
+  async matchVariants(raw: string, current?: string): Promise<VariantMatchedResult<Theme>> {
     // process variants
     const variants = new Set<Variant<Theme>>()
     const handlers: VariantHandler[] = []
@@ -310,7 +310,7 @@ export class UnoGenerator<Theme extends {} = {}> {
       for (const v of this.config.variants) {
         if (!v.multiPass && variants.has(v))
           continue
-        let handler = v.match(processed, context)
+        let handler = await v.match(processed, context)
         if (!handler)
           continue
         if (isString(handler))
@@ -364,11 +364,11 @@ export class UnoGenerator<Theme extends {} = {}> {
       this.parentOrders.set(parent, parentOrder)
 
     const obj: UtilObject = {
-      selector: movePseudoElementsEnd([
+      selector: [
         variantContextResult.prefix,
         variantContextResult.selector,
         variantContextResult.pseudo,
-      ].join('')),
+      ].join(''),
       entries: variantContextResult.entries,
       parent,
       layer: variantContextResult.layer,
@@ -401,7 +401,7 @@ export class UnoGenerator<Theme extends {} = {}> {
     shortcutPrefix?: string | string[] | undefined,
   ): Promise<(ParsedUtil | RawUtil)[] | undefined> {
     const [raw, processed, variantHandlers] = isString(input)
-      ? this.matchVariants(input)
+      ? await this.matchVariants(input)
       : input
 
     if (this.config.details)
@@ -496,7 +496,7 @@ export class UnoGenerator<Theme extends {} = {}> {
     return [parsed[0], selector, body, parent, ruleMeta, this.config.details ? context : undefined, noMerge]
   }
 
-  expandShortcut(input: string, context: RuleContext<Theme>, depth = 5): [ShortcutValue[], RuleMeta | undefined] | undefined {
+  async expandShortcut(input: string, context: RuleContext<Theme>, depth = 5): Promise<[ShortcutValue[], RuleMeta | undefined] | undefined> {
     if (depth === 0)
       return
 
@@ -544,9 +544,9 @@ export class UnoGenerator<Theme extends {} = {}> {
 
     // expand nested shortcuts with variants
     if (!result) {
-      const [raw, inputWithoutVariant] = isString(input) ? this.matchVariants(input) : input
+      const [raw, inputWithoutVariant] = isString(input) ? await this.matchVariants(input) : input
       if (raw !== inputWithoutVariant) {
-        const expanded = this.expandShortcut(inputWithoutVariant, context, depth - 1)
+        const expanded = await this.expandShortcut(inputWithoutVariant, context, depth - 1)
         if (expanded)
           result = expanded[0].map(item => isString(item) ? raw.replace(inputWithoutVariant, item) : item)
       }
@@ -556,9 +556,9 @@ export class UnoGenerator<Theme extends {} = {}> {
       return
 
     return [
-      result
-        .flatMap(r => (isString(r) ? this.expandShortcut(r, context, depth - 1)?.[0] : undefined) || [r])
-        .filter(Boolean),
+      (await Promise.all(result.map(
+        async r => (isString(r) ? (await this.expandShortcut(r, context, depth - 1))?.[0] : undefined) || [r],
+      ))).flat(1).filter(Boolean),
       meta,
     ]
   }
@@ -647,16 +647,6 @@ function applyScope(css: string, scope?: string) {
     return scope ? `${scope} ${css}` : css
 }
 
-export function movePseudoElementsEnd(selector: string) {
-  const pseudoElements = selector.match(/::[\w-]+(\([\w-]+\))?/g)
-  if (pseudoElements) {
-    for (const e of pseudoElements)
-      selector = selector.replace(e, '')
-    selector += pseudoElements.join('')
-  }
-  return selector
-}
-
 const attributifyRe = /^\[(.+?)(~?=)"(.*)"\]$/
 export function toEscapedSelector(raw: string) {
   if (attributifyRe.test(raw))

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -270,7 +270,7 @@ export interface VariantHandler {
   layer?: string | undefined
 }
 
-export type VariantFunction<Theme extends {} = {}> = (matcher: string, context: Readonly<VariantContext<Theme>>) => string | VariantHandler | undefined
+export type VariantFunction<Theme extends {} = {}> = (matcher: string, context: Readonly<VariantContext<Theme>>) => Awaitable<string | VariantHandler | undefined>
 
 export interface VariantObject<Theme extends {} = {}> {
   /**

diff --git a/packages/eslint-config/README.md b/packages/eslint-config/README.md
@@ -2,8 +2,6 @@
 
 ESLint config for UnoCSS.
 
-**Currently working in progress, breaking changes may NOT follow semver.**
-
 ## Installation
 
 ```bash

diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/eslint-config",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "ESLint config for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md
@@ -2,8 +2,6 @@
 
 ESLint plugin for UnoCSS.
 
-**Currently working in progress, breaking changes may NOT follow semver.**
-
 ## Installation
 
 Please refer to [@unocss/eslint-config](https://github.com/unocss/unocss/blob/main/packages/eslint-config) for installation.
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/eslint-plugin",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "ESLint plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/extractor-pug/package.json b/packages/extractor-pug/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/extractor-pug",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "UnoCSS extractor for Pug",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/inspector/package.json b/packages/inspector/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/inspector",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "The inspector UI for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/nuxt",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "Nuxt module for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/nuxt/src/index.ts b/packages/nuxt/src/index.ts
@@ -68,7 +68,7 @@ export default defineNuxtModule<UnocssNuxtOptions>({
       const preset = nuxt.options.postcss.plugins.cssnano.preset
       nuxt.options.postcss.plugins.cssnano = {
         preset: [preset?.[0] || 'default', Object.assign(
-          preset?.[1] || {}, { mergeRules: false },
+          preset?.[1] || {}, { mergeRules: false, normalizeWhitespace: false },
         )],
       }
     }

diff --git a/packages/preset-attributify/package.json b/packages/preset-attributify/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-attributify",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "Attributify preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/preset-attributify/src/variant.ts b/packages/preset-attributify/src/variant.ts
@@ -8,11 +8,13 @@ export const variantAttributify = (options: AttributifyOptions = {}): VariantObj
   const prefix = options.prefix ?? 'un-'
   const prefixedOnly = options.prefixedOnly ?? false
   const trueToNonValued = options.trueToNonValued ?? false
+  let variantsValueRE: RegExp | false | undefined
 
   return {
     name: 'attributify',
-    match(input) {
+    match(input, { generator }) {
       const match = isAttributifySelector(input)
+
       if (!match)
         return
 
@@ -23,11 +25,26 @@ export const variantAttributify = (options: AttributifyOptions = {}): VariantObj
         return
 
       const content = match[2]
+
       const [, variants = '', body = content] = content.match(variantsRE) || []
       if (body === '~' || (trueToNonValued && body === 'true') || !body)
         return `${variants}${name}`
-      else
-        return `${variants}${name}-${body}`
+
+      if (variantsValueRE == null) {
+        const separators = generator?.config?.separators?.join('|')
+        if (separators)
+          variantsValueRE = new RegExp(`^(.*\\](?:${separators}))(\\[[^\\]]+?\\])$`)
+        else
+          variantsValueRE = false
+      }
+
+      if (variantsValueRE) {
+        const [, bodyVariant, bracketValue] = content.match(variantsValueRE) || []
+        if (bracketValue)
+          return `${bodyVariant}${variants}${name}-${bracketValue}`
+      }
+
+      return `${variants}${name}-${body}`
     },
   }
 }
diff --git a/packages/preset-icons/package.json b/packages/preset-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-icons",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "Pure CSS Icons for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/preset-mini/package.json b/packages/preset-mini/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.49.7",
+  "version": "0.49.8",
   "description": "The minimal preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

diff --git a/packages/preset-mini/src/_rules/align.ts b/packages/preset-mini/src/_rules/align.ts
@@ -22,4 +22,4 @@ export const verticalAligns: Rule[] = [
   [/^(?:vertical|align|v)-([-\w]+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})` }],
 ]
 
-export const textAligns: Rule[] = ['center', 'left', 'right', 'justify', 'start', 'end', ...globalKeywords].map(v => [`text-${v}`, { 'text-align': v }])
+export const textAligns: Rule[] = ['center', 'left', 'right', 'justify', 'start', 'end'].map(v => [`text-${v}`, { 'text-align': v }])
diff --git a/packages/preset-mini/src/_rules/color.ts b/packages/preset-mini/src/_rules/color.ts
@@ -1,5 +1,5 @@
 import type { Rule } from '@unocss/core'
-import { colorResolver, handler as h } from '../utils'
+import { colorResolver, globalKeywords, handler as h } from '../utils'
 import { numberWithUnitRE } from '../_utils/handlers/regex'
 
 /**
@@ -13,9 +13,10 @@ export const opacity: Rule[] = [
  * @example c-red color-red5 text-red-300
  */
 export const textColors: Rule[] = [
-  [/^(?:color|c)-(.+)$/, colorResolver('color', 'text'), { autocomplete: '(text|color|c)-$colors' }],
+  [/^(?:color|c)-(.+)$/, colorResolver('color', 'text'), { autocomplete: '(color|c)-$colors' }],
   // auto detection and fallback to font-size if the content looks like a size
-  [/^text-(.+)$/, colorResolver('color', 'text', css => !css.color?.toString().match(numberWithUnitRE)), { autocomplete: '(text|color|c)-$colors' }],
+  [/^text-(.+)$/, colorResolver('color', 'text', css => !css.color?.toString().match(numberWithUnitRE)), { autocomplete: 'text-$colors' }],
+  [/^(?:text|color|c)-(.+)$/, ([, v]) => globalKeywords.includes(v) ? { color: v } : undefined, { autocomplete: `(text|color|c)-(${globalKeywords.join('|')})` }],
   [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-opacity': h.bracket.percent(opacity) }), { autocomplete: '(text|color|c)-(op|opacity)-<percent>' }],
 ]