addClasses()

import { addClasses } from "@unifast/node";

Signatur

function addClasses(rules: Record<string, string>): UnifastPlugin

Parameter

rules

Ein Record<string, string>, bei dem die Schlüssel CSS-Selektoren und die Werte durch Leerzeichen getrennte Klassennamen sind, die passenden Elementen hinzugefügt werden sollen. Die Klassen werden mit allen bestehenden Klassen des Elements zusammengeführt.

Unterstützte Selektoren

Unterstützt wird eine breite Teilmenge von CSS Selectors Level 4, einschließlich:

• Tag-Selektoren: h1, p, table

• Klassen-Selektoren: .info, .alert.warning

• ID-Selektoren: #main

• Universal-Selektor: *

• Attribut-Selektoren: [data-type], [href^="https"], [href$=".pdf"], [href*="example"], [class~="bar"], [lang|="en"]

• Kombinatoren: Nachfahre ( ), Kind (>), direkter Nachbar (+), allgemeiner Nachbar (~)

• Pseudo-Klassen: :first-child, :last-child, :nth-child(), :not(), :empty

• Kommagetrennte Selektoren: h1, h2, h3

• Zusammengesetzte Selektoren: div.alert#main[data-type="warning"]

Verwendung

import { compile, addClasses } from "@unifast/node";

const md = `
# Hello World

Some paragraph text.

| Name | Value |
|------|-------|
| A    | 1     |
`;

const result = compile(md, {
  plugins: [
    addClasses({
      h1: "text-3xl font-bold",
      p: "leading-relaxed",
      table: "border-collapse w-full",
    }),
  ],
});

// <h1 class="text-3xl font-bold">Hello World</h1>
// <p class="leading-relaxed">Some paragraph text.</p>
// <table class="border-collapse w-full">...</table>

Beispiele

Kommagetrennte Selektoren

Wenden Sie dieselben Klassen auf mehrere Elementtypen an:

import { compile, addClasses } from "@unifast/node";

const result = compile(md, {
  plugins: [
    addClasses({
      "h1, h2, h3": "font-bold tracking-tight",
    }),
  ],
});

Komplexe Selektoren

Verwenden Sie Kombinatoren und Pseudo-Klassen für präzises Targeting:

import { compile, addClasses } from "@unifast/node";

const result = compile(md, {
  plugins: [
    addClasses({
      "pre > code": "block overflow-x-auto",
      "ul > li:first-child": "mt-0",
      "ul > li:last-child": "mb-0",
      "a[href^=\"https\"]": "external-link",
      "div:not(.alert)": "default-container",
    }),
  ],
});

Tailwind-CSS-Utility-Klassen

Ein gängiges Muster ist die Verwendung von addClasses, um Tailwind-Utilities auf aus Markdown generiertes HTML anzuwenden:

import { compile, addClasses } from "@unifast/node";

const result = compile(md, {
  plugins: [
    addClasses({
      h1: "text-4xl font-extrabold text-gray-900 mb-8",
      h2: "text-2xl font-bold text-gray-800 mt-12 mb-4",
      h3: "text-xl font-semibold text-gray-700 mt-8 mb-3",
      p: "text-base leading-7 text-gray-600 mb-4",
      a: "text-blue-600 underline hover:text-blue-800",
      blockquote: "border-l-4 border-gray-300 pl-4 italic text-gray-500",
      table: "min-w-full divide-y divide-gray-200",
      "thead th": "px-4 py-2 text-left text-sm font-semibold text-gray-900",
      "tbody td": "px-4 py-2 text-sm text-gray-700",
      "tbody tr:nth-child(2n)": "bg-gray-50",
      img: "rounded-lg shadow-md",
      pre: "rounded-lg overflow-hidden",
      "pre > code": "block p-4 text-sm",
    }),
  ],
});

Attribut-Selektoren

Zielen Sie Elemente basierend auf ihren Attributen an:

import { compile, addClasses } from "@unifast/node";

const result = compile(md, {
  plugins: [
    addClasses({
      "[href$=\".pdf\"]": "pdf-link",
      "[href^=\"https\"]": "external",
      "[data-type]": "has-type",
    }),
  ],
});