Postprocess

Handle postprocess for UnoCSS generated CSS.

If you don't know how postprocess works, please refer to postprocess documents or online demo

UnColor

It will extract rgba color in css variable. See linked discussion.

For example: bg-red will generate the following CSS:

.bg-red {
  --un-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--un-bg-opacity));
}

If you enable uncolor postprocess, we will extract color variables:

.bg-red{
  --un-color:248 113 113;
  --un-bg-opacity:1;
  background-color:rgb(var(--un-color) / var(--un-bg-opacity));
}

You can use un-color variable in the following CSS context. For example: text-[rgb(var(--un-color))].

Types

/**
 * Extract rgba color in css variable
 *
 * @default false
 */
unColor?: boolean | string

Important

It will add !important suffix to all properties you need.

For example: bg-red will generate the following CSS:

.bg-red {
  --un-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--un-bg-opacity));
}

If you enable important postprocess, we will add !important suffix to all properties:

.bg-red {
  --un-bg-opacity: 1 !important;
  background-color: rgb(248 113 113 / var(--un-bg-opacity)) !important;
}

You can customize which properties need the !important suffix.

export default defineUsefulConfig({
  important: {
    include: ['bg', 'text'], // include bg-* and text-* properties
    excludes: ['color', /bg-/, 'margin'], // exclude color, bg-*, and margin properties
  },
})

See test cases for more examples.

Types

/**
 * Make all unitilities important.
 *
 * @default false
 */
important?: boolean | ImportantOptions

export interface ImportantOptions {
  /**
   * Make all unitilities important.
   *
   */
  includes?: FilterPattern

  /**
   * Make all unitilities important.
   *
   */
  excludes?: FilterPattern
}