@fluixi-css/core

The Fluixi CSS engine — a fast, CSS-first utility engine. Define your design in CSS with @theme / @utility / @custom-variant / @source, mark where the output goes with @fluixi;, and the engine compiles the utility classes your templates use into CSS (with source maps).

npm install @fluixi-css/core

Most projects use it through a bundler plugin — @fluixi-css/vite or @fluixi-css/postcss — rather than calling the API directly.

CSS

@theme {
  --color-brand: #2563eb;
  --spacing: 0.25rem;
}
@source "./src/**/*.{html,tsx}";

/* generated tokens + utilities are spliced in here */
@fluixi;

API

import { compile, transform } from '@fluixi-css/core';

// Generate only the utilities for a set of classes.
const { css } = compile('@theme { --spacing: 0.25rem; }', { classes: ['p-4', 'flex'] });

// Process a whole stylesheet: author CSS passes through (mapped to source),
// directives are consumed, and `@fluixi;` is replaced by tokens + utilities.
const out = transform(cssText, { from: 'app.css', sourceMap: true });
// out.css, out.map, out.classes, out.sources

Notes

• Reset: the engine does not inject a reset. Add one explicitly if you want it, e.g. @import "@fluixi-css/core/reset.css";.
• UI tokens: pass emitUiTokens: true to also emit the --flx-ui-* bridge that drives the Fluixi UI components from your theme.

License

MIT