# Rollup

Source: https://plumeria.dev/docs/integration/rollup





[`examples/rollup`](https://github.com/zss-in-js/plumeria/tree/main/examples/example-rollup) shows how to use [`@plumeria/unplugin`](https://www.npmjs.com/package/@plumeria/unplugin) in rollup.\
The unplugin compiles Plumeria styles into the CSS asset produced by rollup.

## Installation [#installation]

<Tabs items="['npm', 'yarn', 'pnpm']">
  <Tab>
    ```sh title="Terminal"
    npm i -D @plumeria/unplugin
    ```
  </Tab>

  <Tab>
    ```sh title="Terminal"
    yarn add -D @plumeria/unplugin
    ```
  </Tab>

  <Tab>
    ```sh title="Terminal"
    pnpm i -D @plumeria/unplugin
    ```
  </Tab>
</Tabs>

## Usage [#usage]

```js title="rollup.config.js"
import plumeria from '@plumeria/unplugin';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import esbuild from 'rollup-plugin-esbuild';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.tsx',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    plumeria.rollup(),
    postcss({ extract: true }),
    resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
    commonjs(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('development'),
      preventAssignment: true,
    }),
    esbuild({
      include: /\.[jt]sx?$/,
      sourceMap: false,
      minify: false,
      target: 'es2022',
      jsx: 'automatic',
    }),
  ],
};
```

<Cards>
  <Card title="Shipping this as a component library" href="/docs/integration/component-library" />

  <Card title="See more about Installation unplugin" href="/docs/getting-started/installation" />
</Cards>