Installation
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-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()],
});