Plugins Overview

Plugins extend Pencel’s compiler to add features like CSS preprocessing, type generation, and framework bindings. There are two plugin categories:

Core Plugins – Enhance component authoring (styling, preprocessors)
Output Plugins – Generate framework-specific bindings (React, Angular, Vue). See Outputs for more details.

By default, only the CSS plugin is enabled. Additional core plugins like SCSS are opt-in. Output plugins must be explicitly configured in your pencel.config.ts.

Available Plugins

• CSS – Inline, optimize, and minify component styles (enabled by default)
• SCSS – Sass support for advanced styling
• Custom Plugins – Build your own plugins (API still in development)

Configuration

Plugins are configured in your pencel.config.ts:

import { defineConfig } from '@pencel/core';

export default defineConfig({
  plugins: [
    // String format (uses default options)
    'css',
    'scss',

    // Object format (with custom options)
    {
      name: 'scss',
      options: { enabled: true }
    }
  ]
});