@wix/origami-transforms 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,16 @@
-# Temporary Holding Version
+# @wix/origami-transforms
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Babel and PostCSS checks and transforms for Wix origami page files.
+
+Exports `createTransformPipeline`, `createTransformRegistry`, `createContextFactory`,
+`relativeToSite`, `LayoutError`, the Babel/PostCSS adapters and runners, `jsxPlugins`
+and `cssPlugins`. The pipeline accepts the existing `{ layout, jsxPlugins, cssPlugins }`
+options, exposes `babelOptionsFor` and `postcssPlugin`, and takes `serve` or `build`
+through `setCommand`. It has no Vite dependency.
+
+JavaScript source lives in `src/`; `pnpm build` emits declarations to `dist/`.
+Run `pnpm test` and `pnpm lint` for the transform suite and lint checks.
+Transform specs and CSS fixtures live only in this package. The old runtime keeps its
+own integration, browser and packed-package tests. Consumers import the shared API
+and types from `@wix/origami-transforms`; there are no public subpath exports.
+The host layout only needs a `root` string.

package/dist/cssPlugins/customMedia.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const customMediaPlugin: import("../transform/types.js").CssTransformPlugin;

package/dist/cssPlugins/fonts.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const fontsPlugin: import("../transform/types.js").CssTransformPlugin;

package/dist/cssPlugins/index.d.ts

@@ -0,0 +1,2 @@
+/** @type {readonly import('../transform/types.js').CssTransformPlugin[]} */
+export const cssPlugins: readonly import("../transform/types.js").CssTransformPlugin[];

package/dist/cssPlugins/layout/compiler.d.ts

@@ -0,0 +1 @@
+export function compileContainers(root: import("postcss").Root, context: import("../../transform/types.js").TransformContext): void;

package/dist/cssPlugins/layout/contract.d.ts

@@ -0,0 +1,12 @@
+export const CONTENT: "internal-container-content-wrapper";
+export const OVERFLOW: "internal-container-overflow-wrapper";
+export const targets: Readonly<{
+    "internal-container-content-wrapper": Set<string>;
+    "internal-container-overflow-wrapper": Set<string>;
+}>;
+export const displays: Readonly<{
+    GridContainerLayout: "grid";
+    FlexContainerLayout: "flex";
+    StackContainerLayout: "flex";
+    OrganizerContainerLayout: "flex";
+}>;

package/dist/cssPlugins/layout/index.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../../transform/types.js').CssTransformPlugin} */
+export const layoutPlugin: import("../../transform/types.js").CssTransformPlugin;

package/dist/cssPlugins/layout/parser.d.ts

@@ -0,0 +1,2 @@
+export function isLayoutSource(node: import("postcss").Node, context: import("../../transform/types.js").TransformContext): boolean;
+export function parseTargets(root: import("postcss").Root, context: import("../../transform/types.js").TransformContext): Map<import("postcss").Rule, import("postcss").AtRule[]>;

package/dist/cssPlugins/mixins.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const mixinsPlugin: import("../transform/types.js").CssTransformPlugin;

package/dist/cssPlugins/presets.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const presetsPlugin: import("../transform/types.js").CssTransformPlugin;

package/dist/cssPlugins/spx/calls.d.ts

@@ -0,0 +1 @@
+export function lowerCalls(declaration: import("postcss").Declaration, resolve: (value: number) => string, invalidCall: () => Error): void;

package/dist/cssPlugins/spx/cascade.d.ts

@@ -0,0 +1 @@
+export function compileCascadeDeclaration(declaration: import("postcss").Declaration): void;

package/dist/cssPlugins/spx/index.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../../transform/types.js').CssTransformPlugin} */
+export const spxPlugin: import("../../transform/types.js").CssTransformPlugin;

package/dist/cssPlugins/stackChildren.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const stackChildrenPlugin: import("../transform/types.js").CssTransformPlugin;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./transform/pipeline.js";
+export * from "./transform/registry.js";
+export * from "./transform/context.js";
+export * from "./transform/relativeToSite.js";
+export * from "./transform/layoutError.js";
+export * from "./transform/jsx/babelAdapter.js";
+export * from "./transform/jsx/runPlugins.js";
+export * from "./transform/css/postcssPlugin.js";
+export * from "./transform/css/runPlugins.js";
+export * from "./jsxPlugins/index.js";
+export * from "./cssPlugins/index.js";
+export * from "./transform/types.js";

package/dist/jsxPlugins/index.d.ts

@@ -0,0 +1,2 @@
+/** @type {readonly import('../transform/types.js').JsxTransformPlugin[]} */
+export const jsxPlugins: readonly import("../transform/types.js").JsxTransformPlugin[];

package/dist/jsxPlugins/mediaValidation/index.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../../transform/types.js').JsxTransformPlugin} */
+export const mediaValidationPlugin: import("../../transform/types.js").JsxTransformPlugin;

package/dist/jsxPlugins/origamiCompatibility/ast.d.ts

@@ -0,0 +1,3 @@
+export function findAttribute(attributes: any, name: any): any;
+export function indexProperties(properties: any): Map<any, any>;
+export function objectPropValue(openingElement: any, name: any): any;

package/dist/jsxPlugins/origamiCompatibility/componentBindings.d.ts

@@ -0,0 +1 @@
+export function collectComponentBindings(program: object, rulesByComponent: Map<string, readonly object[]>): Map<string, readonly object[]>;

package/dist/jsxPlugins/origamiCompatibility/index.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../../transform/types.js').JsxTransformPlugin} */
+export const origamiCompatibilityPlugin: import("../../transform/types.js").JsxTransformPlugin;

package/dist/jsxPlugins/origamiCompatibility/rules/containerProps.d.ts

@@ -0,0 +1,4 @@
+export namespace containerPropsRule {
+    let components: string[];
+    function apply(openingElement: any): void;
+}

package/dist/jsxPlugins/origamiCompatibility/rules/richTextHtml.d.ts

@@ -0,0 +1,4 @@
+export namespace richTextHtmlRule {
+    let components: string[];
+    function apply(openingElement: any): void;
+}

package/dist/jsxPlugins/validation/checks.d.ts

@@ -0,0 +1,12 @@
+export function assertKnownConstraints(rules: any): void;
+export function constrainsChildren(rule: any): boolean;
+export function checkRule(rule: any, { node, componentOf, report }: {
+    node: any;
+    componentOf: any;
+    report: any;
+}): void;
+export function checkCreateElement(rule: any, { node, component, report }: {
+    node: any;
+    component: any;
+    report: any;
+}): any;

package/dist/jsxPlugins/validation/index.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('../../transform/types.js').JsxTransformPlugin} */
+export const layoutValidationPlugin: import("../../transform/types.js").JsxTransformPlugin;

package/dist/jsxPlugins/validation/rules.d.ts

@@ -0,0 +1,7 @@
+export const RULES: {
+    id: string;
+    components: string[];
+    allowedChildren: string[];
+    minChildren: number;
+    maxChildren: number;
+}[];

package/dist/jsxPlugins/validation/tree.d.ts

@@ -0,0 +1 @@
+export function describe(node: any): string;

package/dist/transform/context.d.ts

@@ -0,0 +1,13 @@
+export function createContextFactory({ layout, command }: {
+    layout: any;
+    command: any;
+}): (id: any, { ssr }?: {
+    ssr?: boolean | undefined;
+}) => Readonly<{
+    id: any;
+    filePath: any;
+    relativePath: string | undefined;
+    layout: any;
+    command: any;
+    ssr: boolean;
+}>;

package/dist/transform/css/postcssPlugin.d.ts

@@ -0,0 +1,10 @@
+export function createCssPostcssPlugin({ selectPlugins, contextFor, failures }: {
+    selectPlugins: (context: import("../types.js").TransformContext) => readonly object[];
+    contextFor: (id: string) => import("../types.js").TransformContext;
+    failures?: Map<string, Set<string>>;
+}): {
+    postcssPlugin: string;
+    Once(root: any, { result }: {
+        result: any;
+    }): void;
+};

package/dist/transform/css/runPlugins.d.ts

@@ -0,0 +1,5 @@
+export function runCssPlugins({ plugins, root, context }: {
+    plugins: any;
+    root: any;
+    context: any;
+}): void;

package/dist/transform/jsx/babelAdapter.d.ts

@@ -0,0 +1,19 @@
+export function createBabelOptionsSelector({ selectPlugins, contextFor }: {
+    selectPlugins: any;
+    contextFor: any;
+}): (id: any, { ssr }?: {
+    ssr?: boolean | undefined;
+}) => {
+    parserOpts?: {
+        plugins: any[];
+    };
+    plugins: ((() => {
+        name: string;
+        visitor: {
+            Program(program: any, state: any): void;
+        };
+    }) | {
+        plugins: any;
+        context: any;
+    })[][];
+};

package/dist/transform/jsx/runPlugins.d.ts

@@ -0,0 +1,5 @@
+export function runJsxPlugins({ plugins, program, context }: {
+    plugins: any;
+    program: any;
+    context: any;
+}): void;

package/dist/transform/layoutError.d.ts

@@ -0,0 +1,19 @@
+export class LayoutError extends Error {
+    /**
+     * @param {readonly string[]} violations
+     * @param {{ file?: string, line?: number, column?: number }} [location] The first violation's, which the
+     *     bundler prints as the error's position (Vite's CSS stage reads `file`, `line` and `column`).
+     */
+    constructor(violations: readonly string[], location?: {
+        file?: string;
+        line?: number;
+        column?: number;
+    });
+    stack: string;
+    violations: readonly string[];
+    location: {
+        file?: string;
+        line?: number;
+        column?: number;
+    };
+}

package/dist/transform/pipeline.d.ts

@@ -0,0 +1,31 @@
+export function createTransformPipeline({ layout, jsxPlugins, cssPlugins }: {
+    layout: import("./types.js").SiteLayout;
+    jsxPlugins?: readonly import("./types.js").JsxTransformPlugin[];
+    cssPlugins?: readonly import("./types.js").CssTransformPlugin[];
+}): {
+    postcssPlugin: {
+        postcssPlugin: string;
+        Once(root: any, { result }: {
+            result: any;
+        }): void;
+    };
+    babelOptionsFor: (id: any, { ssr }?: {
+        ssr?: boolean | undefined;
+    }) => {
+        parserOpts?: {
+            plugins: any[];
+        };
+        plugins: ((() => {
+            name: string;
+            visitor: {
+                Program(program: any, state: any): void;
+            };
+        }) | {
+            plugins: any;
+            context: any;
+        })[][];
+    };
+    /** Whether a stylesheet whose last CSS run failed declared `file`, so an edit to it may fix the stylesheet. */
+    failedStylesheetDependsOn: (file: any) => boolean;
+    setCommand: (value: any) => void;
+};

package/dist/transform/registry.d.ts

@@ -0,0 +1,5 @@
+export function createTransformRegistry(plugins?: readonly any[]): {
+    register: (plugin: any) => /*elided*/ any;
+    /** The plugins that apply to `context`, in order. Frozen; safe to hold onto. */
+    select: (context: any) => readonly any[];
+};

package/dist/transform/relativeToSite.d.ts

@@ -0,0 +1 @@
+export function relativeToSite(root: any, id: any): string | undefined;

package/dist/transform/types.d.ts

@@ -0,0 +1,86 @@
+/**
+ * The site root supplied by the host runtime.
+ */
+export type SiteLayout = {
+    root: string;
+};
+/**
+ * The transform-plugin contract.
+ *
+ * Both stages have the same shape: an engine parses the file once, and each plugin is handed that
+ * AST plus the file's context and does what it likes with it. Babel and PostCSS are engines here,
+ * not plugin hosts — a plugin never has to know either one's own plugin protocol. Which stage a
+ * plugin belongs to is decided by the list it is registered in, so no descriptor restates it.
+ */
+export type TransformContext = {
+    /**
+     * Module id as the bundler reports it, query string included.
+     */
+    id: string;
+    /**
+     * `id` with any query stripped.
+     */
+    filePath: string;
+    /**
+     * Posix path relative to the site root, or undefined when the file lies outside it.
+     */
+    relativePath: string | undefined;
+    layout: SiteLayout;
+    command: "serve" | "build";
+    /**
+     * Always false for the CSS stage, which PostCSS drives without an SSR signal.
+     */
+    ssr: boolean;
+};
+/**
+ * The transform-plugin contract.
+ *
+ * Both stages have the same shape: an engine parses the file once, and each plugin is handed that
+ * AST plus the file's context and does what it likes with it. Babel and PostCSS are engines here,
+ * not plugin hosts — a plugin never has to know either one's own plugin protocol. Which stage a
+ * plugin belongs to is decided by the list it is registered in, so no descriptor restates it.
+ */
+export type TransformPluginBase = {
+    name: string;
+    /**
+     * Ascending. Ties break by registration order.
+     */
+    order: number;
+    /**
+     * Whether the plugin runs for this
+     * file. Must depend only on the file's identity, not on anything that can change between transforms
+     * of the same file: the pipeline memoizes the selection per file path.
+     */
+    appliesTo?: (context: TransformContext) => boolean;
+};
+/**
+ * `program` is the Babel `NodePath` for the module's Program node. Traverse it if you need to —
+ * nothing walks it for you, so a plugin that can rule itself out cheaply should just return.
+ * `parserPlugins` are Babel parser plugins the file needs; they are unioned across selected plugins
+ * and applied before any of them run.
+ */
+export type JsxTransformPlugin = TransformPluginBase & {
+    transform: (program: any, context: TransformContext) => void;
+    parserPlugins?: readonly string[];
+};
+/**
+ * The transform-plugin contract.
+ *
+ * Both stages have the same shape: an engine parses the file once, and each plugin is handed that
+ * AST plus the file's context and does what it likes with it. Babel and PostCSS are engines here,
+ * not plugin hosts — a plugin never has to know either one's own plugin protocol. Which stage a
+ * plugin belongs to is decided by the list it is registered in, so no descriptor restates it.
+ */
+export type CssTransformPlugin = TransformPluginBase & {
+    validate?: (root: import("postcss").Root, context: CssTransformContext) => void;
+    transform: (root: import("postcss").Root, context: CssTransformContext) => void;
+};
+/**
+ * `addDependency` declares a file the plugin read besides the stylesheet, so the bundler re-runs the
+ * stylesheet when it changes. `warn` reports a problem at `node` without failing the run, as a PostCSS
+ * warning on the stylesheet's result. Both are absent when no bundler drives the run.
+ */
+export type CssTransformContext = TransformContext & {
+    addDependency?: (file: string) => void;
+    warn?: (node: import("postcss").Node, text: string) => void;
+};

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
+  "main": "./src/index.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist tsconfig.tsbuildinfo && tsc -b .",
+    "lint": "oxlint .",
+    "test": "node --test test/*.spec.js",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.0",
+    "@wix/origami-fonts": "1.0.0",
+    "@wix/origami-system-components": "1.6.0",
+    "postcss": "^8.5.3",
+    "postcss-custom-media": "^12.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^6.0.3"
+  },
+  "publishUnscoped": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "wix": {
+    "artifact": {
+      "groupId": "com.wixpress.npm",
+      "artifactId": "origami-transforms",
+      "targets": {
+        "docker": false
+      }
+    },
+    "validations": {
+      "source": [
+        "lint"
+      ],
+      "postBuild": [
+        "test"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "falconPackageHash": "6410a8c82ddf594a8cf6d774ed79445c9589127257b0fc5c50834dfd"
 }

package/src/cssPlugins/customMedia.js

@@ -0,0 +1,52 @@
+// `@custom-media --name (query);` with `@media (--name) {}` (Media Queries Level 5). No browser ships it, so the
+// alias is always expanded. The expansion is postcss-custom-media's, which matches the DM output exactly; this
+// descriptor only runs that plugin over the stage's shared Root, so the stage keeps its gating (site-owned files)
+// and its ordering.
+//
+// A definition is only visible within the document that declares it. DM emits the definitions in the theme
+// carrier, the generator `@import`s that into every page stylesheet, and Vite's postcss-import inlines it before
+// this stage runs — so definition and usage share one Root.
+
+import postcss from 'postcss'
+import postcssCustomMedia from 'postcss-custom-media'
+
+const processor = postcss([postcssCustomMedia()])
+
+const CUSTOM_MEDIA_QUERY = /\(\s*--/
+
+// Whether the document uses the feature at all: a definition to remove, or an alias to expand. Every carrier but
+// the theme has neither, and this walk visits only at-rules, where the expansion walks and re-marks every node.
+const usesCustomMedia = root => {
+    let used = false
+    root.walkAtRules(atRule => {
+        if (atRule.name === 'custom-media' || (atRule.name === 'media' && CUSTOM_MEDIA_QUERY.test(atRule.params))) {
+            used = true
+            return false
+        }
+    })
+    return used
+}
+
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const customMediaPlugin = {
+    name: 'custom-media',
+    order: 0,
+    transform(root, context) {
+        if (!usesCustomMedia(root)) return
+        // A Root handed to `process` is transformed in place. The plugin has no async hooks, so `sync` is safe.
+        // Its warnings go to the nested Result and are dropped: the only one it raises is a cyclic definition,
+        // which leaves the alias unexpanded and so fails below anyway. A definition it cannot parse at all is a
+        // different matter — it emits the unparsed bytes as the query and warns about nothing, which no check
+        // here can see. DM does not emit one.
+        processor.process(root, { from: context.filePath }).sync()
+        // An unexpanded alias is left as authored, and a browser evaluates it to "unknown", which silently
+        // disables the whole block.
+        root.walkAtRules('media', atRule => {
+            if (CUSTOM_MEDIA_QUERY.test(atRule.params)) {
+                throw new Error(
+                    `@media ${atRule.params} has no usable @custom-media definition: it is missing or cyclic`
+                )
+            }
+        })
+    },
+}

package/src/cssPlugins/fonts.js

@@ -0,0 +1,93 @@
+// Checks the theme's font tokens (`--wst-heading-1-font: normal normal 700 --spx(88)/1em benzin`). It changes
+// nothing. The editor reads the family at the end of each one as one Wix font id and fails the import otherwise, so
+// the build fails, with every such token listed, unless the family is exactly the id of a font in the Wix font
+// catalog bundled in @wix/origami-fonts: no quotes, commas or fallbacks, the same case. A legacy font, which the
+// editor no longer offers, counts as not in the catalog. `origami search-font` finds the right id.
+
+import { basename } from 'node:path'
+import { fonts } from '@wix/origami-fonts'
+import { LayoutError } from '../transform/layoutError.js'
+
+const FONT_TOKEN = /^--wst-[\w-]+-font$/
+// The size in a `font` shorthand, with its optional line height: the family follows it. The number's quantifiers
+// never overlap, so a long run of digits that is not a size fails in linear time.
+const SIZE = /^(?:--spx\(.*\)|calc\(.*\)|(?:\d+(?:\.\d*)?|\.\d+)(?:px|em|rem|%|vw|vh|pt)?)(?:\/\S+)?$/i
+const FONT_IDS = new Set(fonts.filter(font => font.permissions !== 'legacy').map(font => font.id))
+
+/** A value split on top-level whitespace, so `--spx(16)/1.3em` stays one token. */
+const tokens = value => {
+    const result = []
+    let depth = 0
+    let current = ''
+    for (const char of value.trim()) {
+        if (char === '(') depth++
+        else if (char === ')') depth--
+        if (depth === 0 && /\s/.test(char)) {
+            if (current) result.push(current)
+            current = ''
+        } else current += char
+    }
+    if (current) result.push(current)
+    return result
+}
+
+/** A font shorthand's family as written; undefined for `var(…)`. */
+const familyOf = value => {
+    if (/var\(/.test(value)) return undefined
+    const parts = tokens(value)
+    // The last size: the repo's TS lib (ES2022) has no findLastIndex.
+    let size = parts.length - 1
+    while (size >= 0 && !SIZE.test(parts[size])) size--
+    if (size === -1 || size === parts.length - 1) return undefined
+    return parts.slice(size + 1).join(' ')
+}
+
+/** ` (theme.css:12)`: the carrier the declaration was written in, which the bundler doesn't name. */
+const where = declaration => {
+    const file = declaration.source?.input.file
+    const line = declaration.source?.start?.line
+    return file ? ` (${basename(file)}${line ? `:${line}` : ''})` : ''
+}
+
+/**
+ * Where `source` starts, as LayoutError's location, leaving out what it doesn't know.
+ * @param {import('postcss').Declaration['source']} source
+ */
+const locationOf = source => {
+    /** @type {{ file?: string, line?: number, column?: number }} */
+    const location = {}
+    if (source?.input.file !== undefined) location.file = source.input.file
+    if (source?.start !== undefined) {
+        location.line = source.start.line
+        location.column = source.start.column
+    }
+    return location
+}
+
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const fontsPlugin = {
+    name: 'fonts',
+    // Only checks; it reads the tokens as authored, before spx rewrites the sizes the family follows.
+    order: 5,
+    transform(root) {
+        /** @type {import('postcss').Declaration[]} */
+        const declarations = []
+        root.walkDecls(FONT_TOKEN, declaration => {
+            declarations.push(declaration)
+        })
+        const violations = []
+        let first
+        for (const declaration of declarations) {
+            const family = familyOf(declaration.value)
+            if (family === undefined || FONT_IDS.has(family)) continue
+            first ??= declaration.source
+            violations.push(
+                `${declaration.prop}${where(declaration)} must name exactly one Wix font id from the catalog; found ` +
+                    `${family}. Run \`origami search-font --font <name>\` for the id.`
+            )
+        }
+        if (violations.length) {
+            throw new LayoutError(violations, locationOf(first))
+        }
+    },
+}

package/src/cssPlugins/index.js

@@ -0,0 +1,32 @@
+// The CSS stage's plugins, in the order they run. DM authors its CSS in features no browser implements yet, or only
+// Chromium does; these compile them away so a generated site renders everywhere. A caller can still pass its own
+// list through `createSiteViteConfig({ cssPlugins })`.
+//
+// A descriptor needs a `name`, an `order`, and `transform(root, context)`, where `root` is the PostCSS Root for the
+// stylesheet; see `../transform/types.js` for the contract and `../transform/css/postcssPlugin.js` for what the
+// stage guarantees a plugin sees. The order matters once: mixin bodies are copied into their calling rules before
+// layout routes declarations to wrappers and SPX converts calls using the browser's active settings. stack-children
+// only checks, and runs between mixins and layout: it needs the mixins' declarations and the stack rules as authored,
+// before layout compiles them away. presets runs after mixins too, so a `--preset` a mixin body carries is moved
+// like an authored one. fonts only checks the theme's font tokens, as authored.
+//
+// `@layer` needs no plugin: cascade layers have been in every browser since March 2022.
+
+import { customMediaPlugin } from './customMedia.js'
+import { fontsPlugin } from './fonts.js'
+import { mixinsPlugin } from './mixins.js'
+import { presetsPlugin } from './presets.js'
+import { layoutPlugin } from './layout/index.js'
+import { spxPlugin } from './spx/index.js'
+import { stackChildrenPlugin } from './stackChildren.js'
+
+/** @type {readonly import('../transform/types.js').CssTransformPlugin[]} */
+export const cssPlugins = Object.freeze([
+    customMediaPlugin,
+    fontsPlugin,
+    mixinsPlugin,
+    stackChildrenPlugin,
+    presetsPlugin,
+    layoutPlugin,
+    spxPlugin,
+])