Next.js

examples/nextjs shows how to use @plumeria/next-plugin in Next.js.
It compiles styles into CSS via AST parsing, with HMR support.

Installation

npm i --save-dev @plumeria/next-plugin

yarn add -D @plumeria/next-plugin

pnpm i --save-dev @plumeria/next-plugin

next.config.ts

If you do not add turbopack to the end of the path, it will be webpack.

import type { NextConfig } from "next";
import { withPlumeria } from "@plumeria/next-plugin/turbopack";

const nextConfig: NextConfig = {
  /* config options here */
};

export default withPlumeria(nextConfig);

withPlumeria accepts a second argument for compiler options:

export default withPlumeria(nextConfig, {
  include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  exclude: ['**/node_modules/**', '**/.next/**'],
  styleProp: 'sx',
});

• include — Globs the stylesheet is compiled from. The default is every js/jsx/ts/tsx file.
• exclude — Globs excluded from that compilation. The default is node_modules, dist and .next.
• styleProp — The JSX prop that carries styles. The default is 'classStyle'.

plumeria.d.ts

@plumeria/core ships no prop declaration of its own, so name the styling prop your project compiles with.

For the default name (classStyle), reference the declaration that ships with the package:

/// <reference types="@plumeria/core/class-style" />

If you set a custom styleProp (such as 'sx'), declare the same name for TypeScript instead:

import type { Style } from '@plumeria/core';

declare global {
  namespace React {
    interface HTMLAttributes<T> {
      sx?: Style;
    }
    interface SVGAttributes<T> {
      sx?: Style;
    }
  }
}

The styleProp in next.config.ts and the property name in plumeria.d.ts must match. If they disagree, the prop type-checks but is never compiled away.