Next.js

examples/nextjs shows how to use @plumeria/next-plugin in Next.js.
The plugin compiles Plumeria styles into CSS, with HMR in development.

npx @plumeria/init detects Next.js and writes this setup for you; see @plumeria/init. The rest of this page is the same setup by hand.

Installation

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

yarn add -D @plumeria/next-plugin

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

next.config.ts

withPlumeria works with both Turbopack and Webpack.

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

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'.

These are the options a project usually sets. withoutLogicalProperties and withoutPhysicalProperties reject one spelling of a property that carries both names, so the pair cannot be written; see @plumeria/next-plugin for every option and its type.

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 that name instead, and keep it the same as the one in next.config.ts; see Declaring the styling prop.