Merge branch 'main' into fix/vscode

README.md

@@ -471,7 +471,7 @@ theme: {
   colors: {
     'veryCool': '#0000ff', // class="text-very-cool"
     'brand': {
-      'primary': '#1f6ae3', //class="bg-brand-primary"
+      'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary"
     }
   },
   breakpoints: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/monorepo",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "private": true,
   "packageManager": "pnpm@7.3.0",
   "scripts": {

packages/autocomplete/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/autocomplete",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "Autocomplete utils for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/cli",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "CLI for UnoCSS",
   "author": {
     "name": "Johann Schopplich",

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/config",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "Config loader for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/core",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "The instant on-demand Atomic CSS engine.",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/core/src/types.ts

@@ -500,6 +500,9 @@ export interface UnocssPluginContext<Config extends UserConfig = UserConfig> {
   tokens: Set<string>
   /** Map for all module's raw content */
   modules: BetterMap<string, string>
+  /** Module IDs that been affected by UnoCSS */
+  affectedModules: Set<string>
+
   filter: (code: string, id: string) => boolean
   extract: (code: string, id?: string) => Promise<void>
 

packages/extractor-pug/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/extractor-pug",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "UnoCSS extractor for Pug",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/inspector/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/inspector",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "The inspector UI for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/nuxt",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "Nuxt module for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/preset-attributify/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-attributify",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "Attributify preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/preset-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-icons",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "Pure CSS Icons for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/preset-mini/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "The minimal preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",

packages/preset-mini/src/rules/align.ts

@@ -13,10 +13,11 @@ const verticalAlignAlias: Record<string, string> = {
   'text-bottom': 'text-bottom',
   'sub': 'sub',
   'super': 'super',
+  ...Object.fromEntries(globalKeywords.map(x => [x, x])),
 }
 
 export const verticalAligns: Rule[] = [
-  [/^(?:vertical|align|v)-(.+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})` }],
+  [/^(?: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 }])

packages/preset-mini/src/rules/behaviors.ts

@@ -4,13 +4,13 @@ import { colorResolver, globalKeywords, handler as h } from '../utils'
 
 export const outline: Rule<Theme>[] = [
   // size
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ 'outline-width': theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: 'outline-(width|size)-<num>' }],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ 'outline-width': theme.lineWidth?.[d] ?? h.bracket.cssvar.global.px(d) }), { autocomplete: 'outline-(width|size)-<num>' }],
 
   // color
   [/^outline-(?:color-)?(.+)$/, colorResolver('outline-color', 'outline-color'), { autocomplete: 'outline-$colors' }],
 
   // offset
-  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ 'outline-offset': theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: 'outline-(offset)-<num>' }],
+  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ 'outline-offset': theme.lineWidth?.[d] ?? h.bracket.cssvar.global.px(d) }), { autocomplete: 'outline-(offset)-<num>' }],
 
   // style
   ['outline', { 'outline-style': 'solid' }],

packages/preset-mini/src/rules/border.ts

@@ -96,7 +96,7 @@ function handlerBorder(m: string[], ctx: RuleContext): CSSEntries | undefined {
 }
 
 function handlerBorderSize([, a = '', b]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {
-  const v = theme.lineWidth?.[b || 'DEFAULT'] ?? h.bracket.cssvar.px(b || '1')
+  const v = theme.lineWidth?.[b || 'DEFAULT'] ?? h.bracket.cssvar.global.px(b || '1')
   if (a in directionMap && v != null)
     return directionMap[a].map(i => [`border${i}-width`, v])
 }
@@ -117,7 +117,7 @@ function handlerBorderOpacity([, a = '', opacity]: string[]): CSSEntries | undef
 }
 
 function handlerRounded([, a = '', s]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {
-  const v = theme.borderRadius?.[s || 'DEFAULT'] || h.bracket.cssvar.fraction.rem(s || '1')
+  const v = theme.borderRadius?.[s || 'DEFAULT'] || h.bracket.cssvar.global.fraction.rem(s || '1')
   if (a in cornerMap && v != null)
     return cornerMap[a].map(i => [`border${i}-radius`, v])
 }

packages/preset-mini/src/rules/decoration.ts

@@ -8,7 +8,7 @@ export const textDecorations: Rule<Theme>[] = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ 'text-decoration-line': s }), { autocomplete: 'decoration-(underline|overline|line-through)' }],
 
   // size
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ 'text-decoration-thickness': theme.lineWidth?.[s] ?? h.bracket.cssvar.px(s) }), { autocomplete: '(underline|decoration)-<num>' }],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ 'text-decoration-thickness': theme.lineWidth?.[s] ?? h.bracket.cssvar.global.px(s) }), { autocomplete: '(underline|decoration)-<num>' }],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ 'text-decoration-thickness': s }), { autocomplete: '(underline|decoration)-(auto|from-font)' }],
 
   // colors
@@ -24,7 +24,7 @@ export const textDecorations: Rule<Theme>[] = [
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-line-opacity': h.bracket.percent(opacity) }), { autocomplete: '(underline|decoration)-(op|opacity)-<percent>' }],
 
   // offset
-  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ 'text-underline-offset': theme.lineWidth?.[s] ?? h.auto.bracket.cssvar.px(s) }), { autocomplete: '(underline|decoration)-(offset)-<num>' }],
+  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ 'text-underline-offset': theme.lineWidth?.[s] ?? h.auto.bracket.cssvar.global.px(s) }), { autocomplete: '(underline|decoration)-(offset)-<num>' }],
 
   // style
   ...decorationStyles.map(v => [`underline-${v}`, { 'text-decoration-style': v }] as Rule<Theme>),

packages/preset-mini/src/rules/gap.ts

@@ -9,7 +9,7 @@ const directions: Record<string, string> = {
 }
 
 const handleGap = ([, d = '', s]: string[], { theme }: RuleContext<Theme>) => {
-  const v = theme.spacing?.[s] ?? h.bracket.cssvar.rem(s)
+  const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.rem(s)
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,

packages/preset-mini/src/rules/layout.ts

@@ -1,11 +1,13 @@
 import type { Rule } from '@unocss/core'
+import { globalKeywords } from '../utils'
 
 const overflowValues = [
   'auto',
   'hidden',
   'clip',
   'visible',
   'scroll',
+  ...globalKeywords,
 ]
 
 export const overflows: Rule[] = [

packages/preset-mini/src/rules/position.ts

@@ -1,9 +1,10 @@
 import type { CSSEntries, Rule, RuleContext } from '@unocss/core'
 import type { Theme } from '../theme'
-import { handler as h, insetMap } from '../utils'
+import { globalKeywords, handler as h, insetMap, makeGlobalStaticRules } from '../utils'
 
 export const positions: Rule[] = [
   [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
+  [/^(?:position-|pos-)([-\w]+)$/, ([, v]) => globalKeywords.includes(v) ? { position: v } : undefined],
   [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })],
 ]
 
@@ -15,19 +16,22 @@ export const justifies: Rule[] = [
   ['justify-between', { 'justify-content': 'space-between' }],
   ['justify-around', { 'justify-content': 'space-around' }],
   ['justify-evenly', { 'justify-content': 'space-evenly' }],
+  ...makeGlobalStaticRules('justify', 'justify-content'),
 
   // items
   ['justify-items-start', { 'justify-items': 'start' }],
   ['justify-items-end', { 'justify-items': 'end' }],
   ['justify-items-center', { 'justify-items': 'center' }],
   ['justify-items-stretch', { 'justify-items': 'stretch' }],
+  ...makeGlobalStaticRules('justify-items'),
 
   // selfs
   ['justify-self-auto', { 'justify-self': 'auto' }],
   ['justify-self-start', { 'justify-self': 'start' }],
   ['justify-self-end', { 'justify-self': 'end' }],
   ['justify-self-center', { 'justify-self': 'center' }],
   ['justify-self-stretch', { 'justify-self': 'stretch' }],
+  ...makeGlobalStaticRules('justify-self'),
 ]
 
 export const orders: Rule[] = [
@@ -45,13 +49,15 @@ export const alignments: Rule[] = [
   ['content-between', { 'align-content': 'space-between' }],
   ['content-around', { 'align-content': 'space-around' }],
   ['content-evenly', { 'align-content': 'space-evenly' }],
+  ...makeGlobalStaticRules('content', 'align-content'),
 
   // items
   ['items-start', { 'align-items': 'flex-start' }],
   ['items-end', { 'align-items': 'flex-end' }],
   ['items-center', { 'align-items': 'center' }],
   ['items-baseline', { 'align-items': 'baseline' }],
   ['items-stretch', { 'align-items': 'stretch' }],
+  ...makeGlobalStaticRules('items', 'align-items'),
 
   // selfs
   ['self-auto', { 'align-self': 'auto' }],
@@ -60,6 +66,7 @@ export const alignments: Rule[] = [
   ['self-center', { 'align-self': 'center' }],
   ['self-stretch', { 'align-self': 'stretch' }],
   ['self-baseline', { 'align-self': 'baseline' }],
+  ...makeGlobalStaticRules('self', 'align-self'),
 ]
 
 export const placements: Rule[] = [
@@ -71,23 +78,26 @@ export const placements: Rule[] = [
   ['place-content-around', { 'place-content': 'space-around' }],
   ['place-content-evenly', { 'place-content': 'space-evenly' }],
   ['place-content-stretch', { 'place-content': 'stretch' }],
+  ...makeGlobalStaticRules('place-content'),
 
   // items
   ['place-items-start', { 'place-items': 'start' }],
   ['place-items-end', { 'place-items': 'end' }],
   ['place-items-center', { 'place-items': 'center' }],
   ['place-items-stretch', { 'place-items': 'stretch' }],
+  ...makeGlobalStaticRules('place-items'),
 
   // selfs
   ['place-self-auto', { 'place-self': 'auto' }],
   ['place-self-start', { 'place-self': 'start' }],
   ['place-self-end', { 'place-self': 'end' }],
   ['place-self-center', { 'place-self': 'center' }],
   ['place-self-stretch', { 'place-self': 'stretch' }],
+  ...makeGlobalStaticRules('place-self'),
 ]
 
 function handleInsetValue(v: string, { theme }: RuleContext<Theme>): string | number | undefined {
-  return theme.spacing?.[v] ?? h.bracket.cssvar.auto.fraction.rem(v)
+  return theme.spacing?.[v] ?? h.bracket.cssvar.global.auto.fraction.rem(v)
 }
 
 function handleInsetValues([, d, v]: string[], ctx: RuleContext): CSSEntries | undefined {
@@ -119,20 +129,23 @@ export const floats: Rule[] = [
   ['float-left', { float: 'left' }],
   ['float-right', { float: 'right' }],
   ['float-none', { float: 'none' }],
+  ...makeGlobalStaticRules('float'),
 
   // clears
   ['clear-left', { clear: 'left' }],
   ['clear-right', { clear: 'right' }],
   ['clear-both', { clear: 'both' }],
   ['clear-none', { clear: 'none' }],
+  ...makeGlobalStaticRules('clear'),
 ]
 
 export const zIndexes: Rule[] = [
   [/^z([\d.]+)$/, ([, v]) => ({ 'z-index': h.number(v) })],
-  [/^z-(.+)$/, ([, v]) => ({ 'z-index': h.bracket.cssvar.auto.number(v) }), { autocomplete: 'z-<num>' }],
+  [/^z-(.+)$/, ([, v]) => ({ 'z-index': h.bracket.cssvar.global.auto.number(v) }), { autocomplete: 'z-<num>' }],
 ]
 
 export const boxSizing: Rule[] = [
   ['box-border', { 'box-sizing': 'border-box' }],
   ['box-content', { 'box-sizing': 'content-box' }],
+  ...makeGlobalStaticRules('box', 'box-sizing'),
 ]

packages/preset-mini/src/rules/size.ts

@@ -28,7 +28,7 @@ function getSizeValue(minmax: string, hw: string, theme: Theme, prop: string) {
       return `${prop}-content`
   }
 
-  return h.bracket.cssvar.auto.fraction.rem(prop)
+  return h.bracket.cssvar.global.auto.fraction.rem(prop)
 }
 
 export const sizes: Rule<Theme>[] = [
@@ -60,7 +60,7 @@ function getAspectRatio(prop: string) {
     case 'video': return '16/9'
   }
 
-  return h.bracket.cssvar.auto.number(prop)
+  return h.bracket.cssvar.global.auto.number(prop)
 }
 
 export const aspectRatio: Rule[] = [

packages/preset-mini/src/rules/static.ts

@@ -1,5 +1,5 @@
 import type { Rule } from '@unocss/core'
-import { handler as h } from '../utils'
+import { globalKeywords, handler as h, makeGlobalStaticRules } from '../utils'
 
 export const varEmpty = 'var(--un-empty,/*!*/ /*!*/)'
 
@@ -12,41 +12,49 @@ export const displays: Rule[] = [
   ['flow-root', { display: 'flow-root' }],
   ['list-item', { display: 'list-item' }],
   ['hidden', { display: 'none' }],
-  [/^display-(.+)$/, ([, c]) => ({ display: h.bracket.cssvar(c) || c })],
+  [/^display-(.+)$/, ([, c]) => ({ display: h.bracket.cssvar.global(c) || c })],
 ]
 
 export const appearances: Rule[] = [
   ['visible', { visibility: 'visible' }],
   ['invisible', { visibility: 'hidden' }],
   ['backface-visible', { 'backface-visibility': 'visible' }],
   ['backface-hidden', { 'backface-visibility': 'hidden' }],
+  ...makeGlobalStaticRules('backface', 'backface-visibility'),
 ]
 
 export const cursors: Rule[] = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: h.bracket.cssvar(c) || c })],
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: h.bracket.cssvar.global(c) || c })],
 ]
 
 export const pointerEvents: Rule[] = [
   ['pointer-events-auto', { 'pointer-events': 'auto' }],
   ['pointer-events-none', { 'pointer-events': 'none' }],
+  ...makeGlobalStaticRules('pointer-events'),
 ]
 
 export const resizes: Rule[] = [
   ['resize-x', { resize: 'horizontal' }],
   ['resize-y', { resize: 'vertical' }],
   ['resize', { resize: 'both' }],
   ['resize-none', { resize: 'none' }],
+  ...makeGlobalStaticRules('resize'),
 ]
 
 export const userSelects: Rule[] = [
   ['select-auto', { 'user-select': 'auto' }],
   ['select-all', { 'user-select': 'all' }],
   ['select-text', { 'user-select': 'text' }],
   ['select-none', { 'user-select': 'none' }],
+  ...makeGlobalStaticRules('select', 'user-select'),
 ]
 
 export const whitespaces: Rule[] = [
-  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)$/, ([, v]) => ({ 'white-space': v }), { autocomplete: '(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)' }],
+  [
+    /^(?:whitespace-|ws-)([-\w]+)$/,
+    ([, v]) => ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces', ...globalKeywords].includes(v) ? { 'white-space': v } : undefined,
+    { autocomplete: '(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)' },
+  ],
 ]
 
 export const contents: Rule[] = [
@@ -73,6 +81,7 @@ export const textTransforms: Rule[] = [
   ['case-lower', { 'text-transform': 'lowercase' }],
   ['case-capital', { 'text-transform': 'capitalize' }],
   ['case-normal', { 'text-transform': 'none' }],
+  ...makeGlobalStaticRules('case', 'text-transform'),
 ]
 
 export const fontStyles: Rule[] = [