Static Extraction

Static extraction is the production path. The source authoring model stays the same, but a bundler plugin transforms supported style chains and collects the generated CSS.

Why extract

Extraction improves production characteristics:

• less runtime rule generation;
• reusable atomic CSS in a CSS asset;
• deterministic CSS output from static chains;
• smaller amount of styling work during render;
• runtime fallback for dynamic or unsupported cases.

Entry imports

Import the virtual runtime module once near your app entry:

import 'virtual:fluentic-styles';

In Vite, Rollup, and Rolldown, the runtime module imports virtual:fluentic-styles.css, which becomes the collected CSS asset. Other bundlers may need an explicit CSS import or adapter-specific CSS handling.

Vite

import { plugin as stylePlugin } from '@fluentic/style/plugin/vite';

export default defineConfig({
  plugins: [stylePlugin()],
});

Extraction fallback

If a chain cannot be evaluated statically, keep it valid at runtime. Fluentic Style is designed so static extraction is an optimization path, not a separate language.

Dynamic values

Use runtime styles for values that truly depend on render-time data:

const styles = {
  meter: style.slot({
    width: `${progress}%`,
  }),
};

For values from design tokens or constants, prefer module-level styles so the compiler can evaluate them.