refactor!: upgrade to support presetWind4 & redesign options

.gitignore

@@ -29,3 +29,5 @@ logs
 # Vitepress
 docs/.vitepress/cache/
 docs/.vitepress/dist/
+
+packages/core/src/core/preflights/reset.ts

docs/guide/started.md

@@ -159,10 +159,10 @@ export interface UsefulOptions {
    * Enable the default preset
    * Only works when `presets` is not specified
    *
-   * @about [@unocss/preset-uno](https://unocss.dev/presets/uno)
+   * @about [@unocss/preset-wind3](https://unocss.dev/presets/wind3)
    * @default true
    */
-  uno?: boolean | PresetUnoOptions
+  wind3?: boolean | PresetUnoOptions
 
   /**
    * Enable attributify mode and the options of it

package.json

@@ -3,9 +3,9 @@
   "type": "module",
   "version": "0.9.1",
   "private": true,
-  "packageManager": "pnpm@10.10.0",
+  "packageManager": "pnpm@10.12.1",
   "scripts": {
-    "build": "pnpm -r -F=./packages/* run build",
+    "build": "pnpm reset && pnpm -r -F=./packages/* run build",
     "stub": "pnpm -r -F=./packages/* --parallel run stub",
     "dev": "pnpm stub",
     "release": "pnpm lint:fix && bumpp -r",
@@ -18,7 +18,8 @@
     "typecheck": "tsc --noEmit",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "reset": "esno scripts/reset.ts"
   },
   "devDependencies": {
     "@antfu/eslint-config": "catalog:",
@@ -27,14 +28,29 @@
     "@types/node": "catalog:",
     "@types/postcss-js": "catalog:",
     "@unocss/eslint-plugin": "catalog:",
+    "@unocss/preset-attributify": "catalog:",
+    "@unocss/preset-icons": "catalog:",
     "@unocss/preset-legacy-compat": "catalog:",
+    "@unocss/preset-mini": "catalog:",
+    "@unocss/preset-rem-to-px": "catalog:",
+    "@unocss/preset-tagify": "catalog:",
+    "@unocss/preset-typography": "catalog:",
+    "@unocss/preset-web-fonts": "catalog:",
+    "@unocss/preset-wind3": "catalog:",
+    "@unocss/preset-wind4": "catalog:",
+    "@unocss/transformer-compile-class": "catalog:",
+    "@unocss/transformer-directives": "catalog:",
+    "@unocss/transformer-variant-group": "catalog:",
     "bumpp": "catalog:",
     "eslint": "catalog:",
+    "eslint-import-resolver-node": "catalog:",
     "esno": "catalog:",
+    "execa": "catalog:",
     "fs-extra": "catalog:",
     "lint-staged": "catalog:",
     "simple-git-hooks": "catalog:",
     "taze": "catalog:",
+    "tsdown": "catalog:",
     "typescript": "catalog:",
     "unbuild": "catalog:",
     "unocss": "catalog:",

packages/core/package.json

@@ -23,12 +23,11 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     }
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -42,11 +41,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "unbuild",
-    "stub": "unbuild --stub"
+    "build": "tsdown",
+    "dev": "tsdown --watch"
   },
   "peerDependencies": {
-    "unocss": "^0.65.0 || ^65.4.0"
+    "unocss": "^0.65.0 || >=65.4.0"
   },
   "peerDependenciesMeta": {
     "unocss": {
@@ -55,17 +54,6 @@
   },
   "dependencies": {
     "@unocss/core": "catalog:",
-    "@unocss/preset-attributify": "catalog:",
-    "@unocss/preset-icons": "catalog:",
-    "@unocss/preset-mini": "catalog:",
-    "@unocss/preset-rem-to-px": "catalog:",
-    "@unocss/preset-tagify": "catalog:",
-    "@unocss/preset-typography": "catalog:",
-    "@unocss/preset-uno": "catalog:",
-    "@unocss/preset-web-fonts": "catalog:",
-    "@unocss/transformer-compile-class": "catalog:",
-    "@unocss/transformer-directives": "catalog:",
-    "@unocss/transformer-variant-group": "catalog:",
     "postcss": "catalog:",
     "postcss-js": "catalog:",
     "unocss-preset-magicss": "catalog:"

packages/core/src/core/preflights/index.ts

@@ -12,6 +12,6 @@ export function preflights(options: ResolvedOptions): Preflight[] {
   }
 
   return [
-    options.enableResetStyles || options.preflights.reset ? resetPreflight : undefined,
+    options.preflights.reset ? resetPreflight : undefined,
   ].filter(Boolean) as Preflight[]
 }

packages/core/src/core/preflights/reset.ts

@@ -1,7 +1,7 @@
 import type { Preflight } from '@unocss/core'
 import { layerMeta } from '../../meta'
 
-const resetCSS = `*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--un-default-border-color,#e5e7eb);}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;}body{margin:0;line-height:inherit;}hr{height:0;color:inherit;border-top-width:1px;}abbr:where([title]){text-decoration:underline dotted;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}a{color:inherit;text-decoration:inherit;}b,strong{font-weight:bolder;}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}table{text-indent:0;border-color:inherit;border-collapse:collapse;}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0;}button,select{text-transform:none;}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none;}:-moz-focusring{outline:auto;}:-moz-ui-invalid{box-shadow:none;}progress{vertical-align:baseline;}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto;}[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}summary{display:list-item;}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}fieldset{margin:0;padding:0;}legend{padding:0;}ol,ul,menu{list-style:none;margin:0;padding:0;}dialog{padding:0;}textarea{resize:vertical;}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af;}button,[role="button"]{cursor:pointer;}:disabled{cursor:default;}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}img,video{max-width:100%;height:auto;}[hidden]{display:none;}`
+const resetCSS = `__reset_placeholder__`
 
 function compressCSS(css: string) {
   return css.replace(/\s+/g, ' ').replace(/\/\*[\s\S]*?\*\//g, '')

packages/core/src/core/rules.ts

@@ -1,19 +1,12 @@
 import type { Rule, RuleMeta } from '@unocss/core'
-import { parseColor } from '@unocss/preset-mini/utils'
 import { layerMeta } from '../meta'
 
 // IN-README-START
 // Use any css variable easily.
 export const rules: Rule[] = [
-  [/^([^:]+)::(\S|[^:]+)$/, ([, n, v], { theme }) => {
-    const color = parseColor(v, theme)
-    if (color?.cssColor?.type === 'rgb' && color.cssColor.components) {
-      return {
-        [`--${n}`]: `${color.cssColor.components.join(',')}`,
-      }
-    }
+  [/^([^:]+)::(\S|[^:]+)$/, ([, k, v]) => {
     return {
-      [`--${n}`]: v,
+      [`--${k}`]: v,
     }
   }],
 ]

packages/core/src/core/shortcuts.ts

@@ -19,8 +19,8 @@ const _shortcuts: CustomStaticShortcuts = [
   [['pcc', 'pc', 'p-c', 'p-c-c'], 'pxc pyc'],
 
   // flex layout
-  [['f-c', 'fcc'], 'flex justify-center items-center'],
-  [['f-c-c', 'fccc'], 'f-c flex-col'],
+  [['fcc', 'f-c'], 'flex justify-center items-center'],
+  [['fccc', 'f-c-c'], 'f-c flex-col'],
   [['fc', 'fxc', 'f-x-c'], 'flex justify-center'],
   [['fi', 'fyc', 'f-y-c'], 'flex items-center'],
   [['fs', 'fxs'], 'flex justify-start'],

packages/core/src/core/variants/index.ts

@@ -1,9 +1,8 @@
 import type { Variant } from '@unocss/core'
-import type { Theme } from '@unocss/preset-mini'
 import type { ResolvedOptions } from '../../types'
 import { v_active } from './active'
 
-export function variants(_options: ResolvedOptions): Variant<Theme>[] {
+export function variants(_options: ResolvedOptions): Variant[] {
   return [
     v_active,
   ]

packages/core/src/index.ts

@@ -1,7 +1,7 @@
-import type { Shortcut, UserConfig } from '@unocss/core'
+import type { UserConfig } from 'unocss'
 import type { UsefulOptions, UsefulTheme } from './types'
 import { definePreset, mergeConfigs } from '@unocss/core'
-import { extractors, postprocess, preflights, rules, shortcuts, variants } from './core'
+import { shortcuts as builtInShortcuts, extractors, postprocess, preflights, rules, variants } from './core'
 import { PRESET_NAME } from './meta'
 import { resolveOptions } from './resolve'
 
@@ -11,7 +11,10 @@ export type { UsefulOptions, UsefulTheme }
 
 export const presetUseful = definePreset<UsefulOptions, UsefulTheme>(async (options) => {
   const resolvedOptions = await resolveOptions(options ?? {})
-  const { enableDefaultShortcuts, theme, meta } = resolvedOptions
+  const { theme, meta, shortcuts: userShortcuts } = resolvedOptions
+  const shortcuts = (userShortcuts === true || (typeof userShortcuts === 'object' && userShortcuts.default !== false))
+    ? builtInShortcuts
+    : []
 
   return {
     name: `unocss-preset-${PRESET_NAME}`,
@@ -21,7 +24,7 @@ export const presetUseful = definePreset<UsefulOptions, UsefulTheme>(async (opti
     rules,
     theme,
     variants: variants(resolvedOptions),
-    shortcuts: [...enableDefaultShortcuts ? shortcuts : [], ...meta.shortcuts] as Shortcut[],
+    shortcuts,
     extractors,
     postprocess: postprocess(resolvedOptions),
     presets: meta.presets,

packages/core/src/resolve.ts

@@ -1,28 +1,30 @@
-import type { Theme } from '@unocss/preset-mini'
 import type { WebFontsOptions } from '@unocss/preset-web-fonts'
-import type { CustomStaticShortcuts, ResolvedOptions, UsefulOptions, UsefulTheme } from './types'
+import type { CustomStaticShortcuts, ImportantOptions, PostprocessOptions, ResolvedOptions, UsefulOptions, UsefulTheme } from './types'
 import { nomarlizeTheme } from './core'
 import { cssObj2StrSync, deepMerge, resolveAnimation } from './utils'
 
 const defaultOptions: UsefulOptions = {
   theme: {},
-  important: false,
-  enableDefaultShortcuts: true,
-  /**
-   * @deprecated Use `magicss` option instead
-   */
-  enableMagicAnimations: false,
-  /**
-   * @deprecated Use `preflights.reset` instead
-   */
-  enableResetStyles: true,
+
+  postprocess: {
+    important: false,
+  },
+
+  shortcuts: {
+    default: true,
+  },
+
   preflights: {
-    reset: true,
+    reset: false,
   },
-  // presets
-  uno: { preflight: 'on-demand' },
+
+  // default by enabling all presets, wind3 and wind4 互斥, only one can be enabled
+  wind4: true, // After v1.0.0, wind4 is the default preset
+  wind3: false,
   attributify: true,
   icons: true,
+
+  // optional presets
   webFonts: false,
   typography: false,
   tagify: false,
@@ -41,22 +43,41 @@ const defaultPresetOptions: Record<string, any> = {
   } as WebFontsOptions,
 }
 
-const defaultImportantOptions = {
-  excludes: [],
-  includes: [/.*/g],
+const defaultPostprocessOptions: Required<PostprocessOptions> = {
+  important: {
+    excludes: [],
+    includes: [/.*/g],
+  },
+  unColor: '--un-color',
 }
 
 export async function resolveOptions(options: UsefulOptions) {
   const optionsWithDefault = Object.assign({}, defaultOptions, options) as Required<UsefulOptions>
-  optionsWithDefault.unColor = typeof optionsWithDefault.unColor === 'string'
-    ? optionsWithDefault.unColor
-    : optionsWithDefault.unColor ? '--un-color' : false
 
-  optionsWithDefault.important = typeof optionsWithDefault.important === 'object'
-    ? Object.assign({}, defaultImportantOptions, optionsWithDefault.important)
-    : optionsWithDefault.important === true
-      ? defaultImportantOptions
-      : false
+  if (optionsWithDefault.wind4 && optionsWithDefault.wind3) {
+    console.warn('wind3 and wind4 are mutually exclusive, only one can be enabled')
+    optionsWithDefault.wind3 = false
+  }
+
+  // Reolve postprocess options
+  if (optionsWithDefault.postprocess === true) {
+    optionsWithDefault.postprocess = defaultPostprocessOptions
+  }
+  else if (typeof optionsWithDefault.postprocess === 'object') {
+    if (typeof optionsWithDefault.postprocess.important === 'object') {
+      optionsWithDefault.postprocess.important = {
+        ...defaultPostprocessOptions.important as ImportantOptions,
+        ...optionsWithDefault.postprocess.important,
+      }
+    }
+    else if (optionsWithDefault.postprocess.important === true) {
+      optionsWithDefault.postprocess.important = defaultPostprocessOptions.important
+    }
+
+    if (optionsWithDefault.postprocess.unColor === true) {
+      optionsWithDefault.postprocess.unColor = defaultPostprocessOptions.unColor
+    }
+  }
 
   const presets = await resolvePresets(optionsWithDefault)
   const transformers = await resolveTransformers(optionsWithDefault)
@@ -88,21 +109,22 @@ function resolveExtend(extend: UsefulTheme['extend']) {
     resolvedAnimation.keyframes[key] = `{${cssObj2StrSync(keyframes[key])}}`
 
   return {
-    theme: { animation: resolvedAnimation } as Theme,
+    theme: { animation: resolvedAnimation } as UsefulTheme,
     shortcuts: _shortcuts,
   }
 }
 
 async function resolvePresets(options: Required<UsefulOptions>) {
   const presets = []
   const presetMap = {
-    uno: import('@unocss/preset-uno').then(m => m.presetUno),
-    attributify: import('@unocss/preset-attributify').then(m => m.presetAttributify),
-    icons: import('@unocss/preset-icons').then(m => m.presetIcons),
-    webFonts: import('@unocss/preset-web-fonts').then(m => m.presetWebFonts),
-    typography: import('@unocss/preset-typography').then(m => m.presetTypography),
-    tagify: import('@unocss/preset-tagify').then(m => m.presetTagify),
-    remToPx: import('@unocss/preset-rem-to-px').then(m => m.default),
+    wind3: import('unocss').then(m => m.presetWind3),
+    wind4: import('unocss').then(m => m.presetWind4),
+    attributify: import('unocss').then(m => m.presetAttributify),
+    icons: import('unocss').then(m => m.presetIcons),
+    webFonts: import('unocss').then(m => m.presetWebFonts),
+    typography: import('unocss').then(m => m.presetTypography),
+    tagify: import('unocss').then(m => m.presetTagify),
+    remToPx: import('@unocss/preset-rem-to-px').then(m => m.presetRemToPx),
     magicss: import('unocss-preset-magicss').then(m => m.presetMagicss),
   }