unplugin-gem

Universal plugin for Gem element transformations.

Supports Vite, Webpack, Rollup, esbuild, Rspack and Rolldown through a single unified API.

Features

• 🔄 Auto Import - Automatically import Gem APIs
• 🎨 CSS Minification - Minify CSS in `css`` template literals
• 🔍 Selector Compatible - Transform &:hover for Shadow DOM compatibility
• 📦 Resource Preload - Preload resources with ?preload query
• 🔥 HMR Support - Hot module replacement (experimental)
• 🛠️ Universal - Works with all major bundlers

Installation

npm install unplugin-gem
# or
pnpm add unplugin-gem
# or
yarn add unplugin-gem

Usage

Vite

// vite.config.ts
import gemPlugin from 'unplugin-gem/vite'

export default {
  plugins: [
    gemPlugin({
      autoImport: true,
      selectorCompatible: true,
      styleMinify: true,
    }),
  ],
}

Webpack

// webpack.config.js
const gemPlugin = require('unplugin-gem/webpack')

module.exports = {
  plugins: [
    gemPlugin({
      autoImport: true,
      selectorCompatible: true,
    }),
  ],
}

Rollup

// rollup.config.js
import gemPlugin from 'unplugin-gem/rollup'

export default {
  plugins: [
    gemPlugin({
      autoImport: true,
      selectorCompatible: true,
    }),
  ],
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import gemPlugin from 'unplugin-gem/esbuild'

build({
  plugins: [
    gemPlugin({
      autoImport: true,
      selectorCompatible: true,
    }),
  ],
})

How It Works

This plugin wraps swc-plugin-gem and uses unplugin to provide universal bundler support.

License

MIT