@airframeui/build

Optional Node toolchain for Airframe. Most apps do not need this package.

Install @airframeui/core and import the CSS. Default breakpoints, typography, and @sm / @md utilities already ship in that stylesheet. Override --af-* in CSS at runtime — Theming.

Use @airframeui/build when you need a build step:

• Custom breakpoint pixels (media queries cannot read var(--af-bp-*))
• @af bp() / @af-apply in your CSS
• af theme to map a foreign token file into --af-*
• af init --agents to drop agent bootstrap docs (names from @airframeui/core/catalog)

See Build Tool · Changelog. Working apps in the repo: examples/build (PostCSS / breakpoints), examples/theme (af theme export → DTCG).

Install

npm install -D @airframeui/build

Requires Node 24+. Same version as @airframeui/core. Do not install postcss-import — it is already a dependency.

What depends on what

| Package | Role | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @airframeui/tokens | Token CSS/JSON. Source for default --af-bp-* values. | | @airframeui/core | Runtime CSS. Ships default responsive.css. Does not publish a generator. | | @airframeui/theme | Library: map/lint/export tokens. declsFromConfig / emitConfigTokenCss is the only config → --af-* mapping. | | @airframeui/build | Consumer CLI + PostCSS plugin. Bundles buildResponsiveCss from the unpublished core-repo generator. Does not invent a second responsive.css or token mapping. |

@import "@airframeui/core/core.css"
        │
        └── PostCSS plugin (in memory)
              ├── emitConfigTokenCss  → patch inlined --af-bp-*
              └── buildResponsiveCss  → replace inlined @layer af.responsive

af theme is a CLI facade over @airframeui/theme. The library API stays in theme; you can call it without this package.

PostCSS

Install @airframeui/build only. It depends on postcss-import — do not install that package or list it in PostCSS config.

Vite, Next.js, Angular, and Webpack pick up postcss.config.js automatically. One plugin:

module.exports = {
  plugins: {
    '@airframeui/build/postcss': {},
  },
};

The plugin inlines @import, compiles @af directives, and replaces core’s default @md media queries. Keep a single @import "@airframeui/core/core.css" — do not add generated CSS on top of core.css.

import: false skips inlining if you already run postcss-import yourself. Pass import: { resolve } only when you need a custom resolver.

The plugin loads airframe.config.js from the project root. Pass options inline to override.

module.exports = {
  breakpoints: {
    md: '900px',
  },
  useDefaultBreakpoints: true, // default; keep xs/sm/lg/… and override md
  // theme: {
  //   files: ['./src/tokens.css', './src/brands/*.css'],
  //   outputDir: '.airframeui', // af theme export (default); CLI -o overrides
  // },
  // outputDir: '.airframeui', // optional generated CSS; omit to keep @import core.css only
};

App CSS stays one import:

@import '@airframeui/core/core.css';

@af bp()

Wraps a local class in a min-width query (HTML still uses af-grid-2@md):

@af bp(md) {
  .hero {
    padding: var(--af-space-8);
  }
}

Compiles to @media (min-width: 900px) { … } when md is 900px in config.

@af-apply

Inlines an af-* utility into a local class. Import core first so the class is in the tree:

.scroll-demo {
  @af-apply af-scrollbar;
  max-height: 8rem;
  overflow-y: auto;
}

Also valid: @af apply(af-scrollbar). Prefer structure classes in HTML; this is for a local class you cannot put af-* on.

CLI

npx af doctor                        # versions + agent file vs installed core
npx af init                          # airframe.config.js
npx af build                         # no-op unless outputDir or --input
npx af build --input src/app.css --output dist/app.css
npx af theme generate --from ./tokens.json -o theme.css
npx af theme lint theme.css
npx af theme export                  # DTCG into theme.outputDir (default .airframeui)
npx af init --agents                 # AIRFRAME.md from @airframeui/core/catalog + package.json "af" script

af theme export writes tokens/<palette>/{light,dark,hc-light,hc-dark}.tokens.json into theme.outputDir (default .airframeui). CLI -o / --out overrides. That is not top-level outputDir, which is optional generated CSS for PostCSS / af build.

module.exports = {
  theme: {
    files: ['./src/tokens.css', './src/brands/*.css'],
    outputDir: '.airframeui',
  },
};

Working app: examples/theme. Docs: Theme package. Release notes: Changelog.

License

MIT