Plumeria logoPlumeria

Next

It is the plumeria @plumeria/next-plugin package
AST parse compiles plumeria styles into CSS (HMR) use:
@plumeria/turbopack-loader and @plumeria/webpack-plugin

Installation

Terminal
npm i --save-dev @plumeria/next-plugin @plumeria/postcss-plugin
Terminal
yarn add -D @plumeria/next-plugin @plumeria/postcss-plugin
Terminal
pnpm i --save-dev @plumeria/next-plugin @plumeria/postcss-plugin

next.config.ts

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

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

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

export default withPlumeria(nextConfig);

postcss.config.js

Reduce build times by narrowing the scope using include and exclude.

postcss.config.js
module.exports = {
  plugins: {
    '@plumeria/postcss-plugin': {
      include: [
        './app/**/*.{ts,tsx}',
        './components/**/*.{ts,tsx}',
        './lib/**/*.{ts,tsx}'
      ],
      exclude: ['**/node_modules/**', '**/.next/**'],
    },
  },
};

CSS extraction marke

Inclulde css file @plumeria marke.
Atomic css is aggregated at build time into marked css files.

css
/* app/global.css */ 
/* import in app/layout.tsx */
@plumeria;
...

On this page