PlumeriaInstallation
It is plumeria's installing, compiler, integration setup
Installing core
The core package is type definitions only. bundle and runtime are not included.
Skip to your bundler: Next.js / Vite
npm i -D @plumeria/coreyarn add -D @plumeria/corepnpm i -D @plumeria/coreESLint Setup
By implementing ESLint, you can automatically organize the order of CSS properties and format line breaks, creating a more efficient environment than manual maintenance.
The plumerialint command installs @plumeria/eslint-plugin.
Setting languageOptions.parserOptions.projectService to true enables "@plumeria/no-invalid-selector-nesting" by utilizing TypeScript type information.
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import { defineConfig } from 'eslint/config';
import { plumeria } from '@plumeria/eslint-plugin';
export default defineConfig(
eslint.configs.recommended,
tseslint.configs.recommended,
plumeria.flatConfigs.recommended,
{
files: ['**/*.{ts,tsx}'],
languageOptions: {
parserOptions: { projectService: true },
},
}
);oxlint is required to run the plumerialint command.
Integrating plumerialint into your build pipeline allows for proactive error detection.
pnpm i -D oxlint rimrafFor Next, we recommend running rimraf to clean up the cache to accommodate the differences between versions:
"scripts": {
"predev": "rimraf .next",
"prebuild": "rimraf .next",
"dev": "next dev",
"build": "plumerialint && next build",
"start": "next start",
}, "scripts": {
"dev": "vite",
"build": "plumerialint && tsc -b && vite build",
},Next.js
npm i -D @plumeria/next-plugin @plumeria/postcss-pluginyarn add -D @plumeria/next-plugin @plumeria/postcss-pluginpnpm add -D @plumeria/next-plugin @plumeria/postcss-pluginpostcss.config.js
Reduce build times by narrowing the scope using include and exclude.
/* application root */
module.exports = {
plugins: {
'@plumeria/postcss-plugin': {
// use src directory
include: ['./src/**/*.{ts,tsx}'],
exclude: ['**/node_modules/**', '**/.next/**'],
},
},
};CSS extraction marke
Inclulde css file @plumeria mark.
Atomic css is aggregated at build time into marked css files.
/* app/global.css */
/* import in app/layout.tsx */
@plumeria;
...next.config.ts
It 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);Vite
npm i -D @plumeria/unpluginyarn add -D @plumeria/unpluginpnpm add -D @plumeria/unpluginvite.config
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import plumeria from '@plumeria/unplugin';
export default defineConfig({
plugins: [react(), plumeria.vite()],
});