PlumeriaNext
Learn more about @plumeria/next-plugin.
@plumeria/next-plugin is the Next plugin for Plumeria.
It compiles styles into CSS via AST parsing, with HMR support.
Using @plumeria/turbopack-loader and @plumeria/webpack-plugin.
Installation
npm i --save-dev @plumeria/next-plugin @plumeria/postcss-pluginyarn add -D @plumeria/next-plugin @plumeria/postcss-pluginpnpm i --save-dev @plumeria/next-plugin @plumeria/postcss-pluginnext.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);postcss.config.js
Reduce build times by narrowing the scope using include and exclude.
module.exports = {
plugins: {
'@plumeria/postcss-plugin': {
include: [
'./app/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./lib/**/*.{ts,tsx}'
],
exclude: ['**/node_modules/**', '**/.next/**'],
},
},
};CSS extraction marker
Include css file @plumeria marker.
Atomic css is aggregated at build time into marked css files.
/* app/global.css */
/* import in app/layout.tsx */
@plumeria;
...