Vite plugin for rics CSS preprocessor
npm install vite-plugin-rics
Vite plugin for the rics CSS preprocessor. Enables importing .rics files directly in your Vite projects.
``bash`
npm install vite-plugin-rics
`typescript
// vite.config.ts
import { defineConfig } from "vite";
import { ricsPlugin } from "vite-plugin-rics";
export default defineConfig({
plugins: [ricsPlugin()],
});
`
Import .rics files in your code:
`typescript`
// main.ts
import "./styles.rics"; // Compiled to CSS and injected
Use ?raw to import the source content without compilation:
`typescript`
import source from "./styles.rics?raw"; // Raw rics source as string
This is useful for editors, playgrounds, or when you need the unprocessed source.
`typescript`
ricsPlugin({
// Compilation options passed to rics compiler
minify: false,
timeout: 5000,
maxIterations: 10000,
});
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| minify | boolean | false | Minify compiled CSS |timeout
| | number | 5000 | Max compilation time (ms) |maxIterations
| | number | 10000 | Max loop iterations |
The plugin transforms .rics files to CSS during Vite's build process:
1. Intercepts imports of .rics files
2. Compiles the rics source to CSS using the core compiler
3. Returns the CSS for Vite's CSS pipeline to handle
In development mode, changes to .rics files trigger hot module replacement.
Add type declarations for .rics imports:
`typescript
// vite-env.d.ts or global.d.ts
declare module "*.rics" {
const css: string;
export default css;
}
declare module "*.rics?raw" {
const source: string;
export default source;
}
``
MIT
---
Built by Better Lyrics