Rollup

import { plugin as stylePlugin } from '@fluentic/style/plugin/rollup';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.tsx',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    stylePlugin(),
    nodeResolve({ extensions: ['.tsx', '.ts', '.jsx', '.js'] }),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
      presets: [
        ['@babel/preset-react', {
          runtime: 'automatic',
          importSource: '@fluentic/style',
        }],
        ['@babel/preset-typescript', {
          isTSX: true,
          allExtensions: true,
        }],
      ],
    }),
  ],
};

Import the virtual runtime module once in your app entry:

import 'virtual:fluentic-styles';

If your Rollup pipeline does not emit CSS imports by default, add a small plugin that turns the virtual CSS module into an emitted asset.