Πρόσθετα (Plugins)

Ένα πρόσθετο pantoken επεκτείνει την έξοδο token ή CSS χωρίς να διακλαδίζει ένα πακέτο. Το φτιάχνετε με definePlugin από @pantoken/plugin-kit, στη συνέχεια το δίνετε σε buildTokens ή toCss.

Δημιουργία ενός πρόσθετου

Δώστε στο definePlugin τα hooks που υλοποιείτε. Επιστρέφει ένα κανονικό πρόσθετο, με την επωνυμία των δυνατοτήτων που συναγάγονται από αυτά τα hooks. Ένα πρόσθετο μπορεί να επεκτείνει το IR (tokens, icons), την έξοδο CSS (css), ή και τα δύο.

import { definePlugin } from "@pantoken/plugin-kit";

export const brand = () =>
  definePlugin({
    name: "@acme/brand",
    tokens: (ctx) => [...ctx.tokens /* add records */],
    css: () => ({ append: ":root { /* … */ }" }),
  });

Εγγραφή με επίγνωση δυνατοτήτων

buildTokens και toCss τρέχουν checkPlugins πάνω από τα πρόσθετα που περνάτε. Ειδοποιεί — δεν ρίχνει ποτέ — όταν ένα πρόσθετο δεν έχει ταιριαστό hook για το στάδιο στο οποίο εγγράφεται, έτσι ένα πρόσθετο μόνο για token που περνάει σε toCss παραλείπεται με μια σημείωση αντί να μην κάνει τίποτα σιωπηρά.

Σύνθεση προσθέτων

Χτίστε πάνω σε άλλο πρόσθετο με extendPlugin, ή συγχωνεύστε ομότιμα με mergePlugin:

import { extendPlugin, mergePlugin } from "@pantoken/plugin-kit";

const themed = extendPlugin(brand(), { css: () => ({ append: "/* extra */" }) });
const both = mergePlugin(brand(), icons());

Τα hooks του ίδιου σταδίου συντίθενται: tokens τρέχει πρώτα τη βάση και μετά το πρόσθετο, css συγχωνεύει τις δύο συνεισφορές, και icons τρέχει και τα δύο.

Επικύρωση της εξόδου του πρόσθετού σας

Τρέξτε τους κοινόχρηστους ελέγχους drift από @pantoken/utils πάνω στην έξοδο του πρόσθετού σας στο τεστ του, ώστε ένα τυπογραφικό λάθος ή ένα μετονομασμένο token να αποτύχει γρήγορα και τοπικά:

import { danglingReferences, unknownReferences } from "@pantoken/utils";
import { tokens } from "@pantoken/tokens";

// A self-contained contribution defines what it references, so nothing should dangle.
expect(danglingReferences(myPlugin().css!({ tokens, css: "" }).append ?? "")).toEqual([]);

// A contribution that only references tokens defined elsewhere: every target must be a real token.
expect(unknownReferences(myBridgeCss, tokens)).toEqual([]);

Τα ενσωματωμένα πρόσθετα

• @pantoken/plugin-simple-icons — brand icons από simple-icons, εγγεγραμμένα ως icon tokens.
• @pantoken/plugin-logos — λογότυπα προϊόντων Instructure ως SVG, data URIs, και --instui-logo-* image tokens.
• @pantoken/plugin-prune-custom-props — ένα PostCSS plugin (όχι pantoken plugin) που αφαιρεί αχρησιμοποίητες custom properties από ένα stylesheet.

Μερικά πράγματα που παλαιότερα ήταν πρόσθετα τώρα αποστέλλονται στο @pantoken/components, αφού τόσα πολλά components τα χρειάζονται έτοιμα: οι σκιές ανύψωσης (--instui-elevation-*, στο components.css), το δαχτυλίδι focus-outline (στο base.css — κάθε στοιχείο που μπορεί να λάβει focus το αποκτά όταν το pantoken ελέγχει τη σελίδα), και οι γραμματοσειρές επωνυμίας Instructure (Atkinson Hyperlegible Next: base.css εφαρμόζει --instui-font-family-base; το opt-in @pantoken/components/fonts.css φορτώνει τα @font-face woff2s).

Δείτε την API reference για τα exports κάθε πρόσθετου.