vite-plugin-b13

Opinionated Vite plugin for b13 TYPO3 projects. Bundles a standard PostCSS pipeline, SVG loader and image optimizer into a single dependency — so all projects stay in sync without manual configuration drift.

What's included

| Feature | Package | |---|---| | CSS nesting | postcss-nested | | Modern CSS + polyfills | postcss-preset-env | | Vendor prefixes | autoprefixer | | SVG imports | vite-svg-loader | | Image optimization | vite-plugin-image-optimizer |

Browser targets are read automatically from .browserslistrc or the "browserslist" key in package.json. No extra configuration needed.

Installation

npm install --save-dev vite-plugin-b13

Usage

// vite.config.js
import { defineConfig } from 'vite'
import b13 from 'vite-plugin-b13'

export default defineConfig({
    plugins: [b13()],
})

Works alongside vite-plugin-typo3:

import typo3 from 'vite-plugin-typo3'
import b13 from 'vite-plugin-b13'

export default defineConfig({
    plugins: [typo3(), b13()],
})

Options

All three features can be disabled or fine-tuned individually. The defaults are designed to work out of the box.

b13({
    postcss: { ... },  // PostCSS pipeline options, or false to disable
    svg: true,         // vite-svg-loader options, or false to disable
    images: true,      // vite-plugin-image-optimizer options, or false to disable
})

postcss

b13({
    postcss: {
        // postcss-nested — enable CSS nesting syntax
        nesting: true,

        // postcss-preset-env — modern CSS features and polyfills
        // Pass any postcss-preset-env options, or false to disable
        presetEnv: {
            stage: 2,
        },

        // autoprefixer — vendor prefixes based on browserslist
        // Pass any autoprefixer options, or false to disable
        autoprefixer: {},

        // Additional PostCSS plugins appended at the end of the pipeline
        additional: [],
    },
})

Disable PostCSS entirely:

b13({ postcss: false })

svg

Delegates to vite-svg-loader. By default SVGs are imported as URLs. Pass { defaultImport: 'raw' } to import as strings instead.

b13({
    svg: {
        defaultImport: 'raw',
    },
})

Disable:

b13({ svg: false })

images

Delegates to vite-plugin-image-optimizer. Default quality settings:

b13({
    images: {
        jpg:  { quality: 80 },
        jpeg: { quality: 80 },
        png:  {},
        webp: { lossless: true },
        avif: { lossless: false },
        gif:  {},
        tiff: {},
    },
})

Overrides are merged into the defaults, so passing { jpg: { quality: 60 } } only changes JPEG quality and leaves everything else untouched.

Disable:

b13({ images: false })

Peer dependencies

• vite >= 5.0.0