@plumeria/next-plugin

@plumeria/next-plugin is a plugin for using Plumeria with Next.js. It supports both Turbopack and Webpack for Next.js and provides style compilation and HMR (Hot Module Replacement) at build time.

Installation

npm i -D @plumeria/next-plugin

yarn add -D @plumeria/next-plugin

pnpm i -D @plumeria/next-plugin

Usage

Wrap your configuration using withPlumeria in next.config.ts or next.config.js.

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

const nextConfig: NextConfig = {
  // Existing configuration
};

export default withPlumeria(nextConfig);

API

withPlumeria(nextConfig, options)

Takes a Next.js configuration object and returns a new configuration object with the necessary Turbopack or Webpack configurations added for Plumeria.

• nextConfig: Next.js configuration object.
• options: Compiler options, passed through to the loader.

function withPlumeria(nextConfig: NextConfig, options?: LoaderOptions): NextConfig;

Options

export default withPlumeria(nextConfig, {
  include: ['./src/**/*.{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'.

interface LoaderOptions {
  include?: string[];
  exclude?: string[];
  styleProp?: string;
}

styleProp

Renaming the prop takes two steps, and they have to agree. Tell the plugin:

export default withPlumeria(nextConfig, { styleProp: 'sx' });

and declare the same name for TypeScript instead of referencing the default:

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

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

For the default name, reference the declaration that ships with the package instead:

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

If the two disagree, the prop type-checks but is never compiled away. @plumeria/eslint-plugin reads the same name from settings.plumeria.styleProp.