Skip to content
@staticbolt/core

Transform CSS Plugin

A staticbolt plugin that runs PostCSS plugins against all CSS in your project, including stylesheets and inline <style> tags in HTML. You can pass the plugins directly in the configuration or load them from a postcss.config.* file.

Installation

The plugin ships as part of @staticbolt/core. You do not need to install anything else.

Usage

In your .staticbolt.ts configuration file:

import { defineConfig } from "@staticbolt/core";
import { transformCssPlugin } from "@staticbolt/core/plugins";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";


export default defineConfig({
  plugins: [
    transformCssPlugin({
      plugins: [tailwindcss(), autoprefixer()],
    }),
  ],
});

Loading a PostCSS config file

Set loadConfig: true to have the plugin read from a postcss.config.* file in your project root instead of, or in addition to, the plugins you pass directly. When you provide both, they are merged and the inline plugins run first.

transformCssPlugin({
  loadConfig: true,
});

The config file receives the current environment ("production" or "development") and the project browserslist as context. Use those values to adjust how your plugins behave.

postcss.config.js
export default ctx => ({
  plugins: [ctx.env === "production" ? cssnano() : null],
});

Plugin Options

plugins

  • Type: postcss.AcceptedPlugin[]
  • Default: []

PostCSS plugins to apply to all CSS in the project.

loadConfig

  • Type: boolean
  • Default: false

When true, the plugin loads PostCSS plugins from a postcss.config.* file in the project root.