INTRODUCTION
Installation
It is plumeria's installing, compiler, integration setup
One command
npx @plumeria/init reads the project, asks what it cannot read, and writes the
rest: the packages, the bundler plugin, plumeria.d.ts, the ESLint config and
the plumerialint build guard.
npx @plumeria/initIt shows the plan before it writes anything, and --dry-run stops at the plan.
See @plumeria/init for every question it asks and
every file it touches. The rest of this page is the same setup by hand.
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.configs.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-pluginyarn add -D @plumeria/next-pluginpnpm add -D @plumeria/next-pluginplumeria.d.ts
@plumeria/core ships no prop declaration of its own, so name the styling prop your project compiles with.
/* application root */
/// <reference types="@plumeria/core/class-style" />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()],
});