Symbols and multiple selectors

Symbols is a new feature in UnoCSS that allows for easily editing adding selectors, wrapping the entire CSS property and more.

To use them we need to change

function* ([, c]) {

to this:

function* ([, c], { symbols }) {

For example we can edit the selector to create a hover property:

import { defineConfig, presetWind3 } from "unocss";

export default defineConfig({
  presets: [presetWind3()],
  rules: [
    [
      /^fancy-(.*)$/,
      function* ([, c], { symbols }) {
        yield { color: `${c}` };
        yield { "text-decoration": `underline ${c}` };
        yield {
          [symbols.selector]: (selector) => `${selector}:hover`,
          "text-decoration-thickness": `8px`,
        };
      },
    ],
  ],
});

In this case we need to use a symbol with the yield syntax to edit the selector so the CSS property is applied when hovered.

Multiple CSS properties (using yield)

Symbols - at rules

Files

Preparing Environment

Installing dependencies
Starting http server