Biome PostCSS Bridge

Use the Biome formatter in VS Code when a document's language mode is postcss.

The official Biome extension supports the css language identifier, but does not register itself as a formatter for postcss. This bridge fills that gap by sending the current document to the project's own Biome binary:

biome format --stdin-file-path=<document>

No source code is sent over the network.

Requirements

• VS Code 1.80 or newer.
• @biomejs/biome installed in the project.
• An extension or file association that assigns the postcss language mode.

For syntax highlighting, you can use PostCSS Language Support.

Configuration

Associate the relevant files with PostCSS and select this extension as their formatter:

{
    "files.associations": {
        "*.module.css": "postcss"
    },
    "[postcss]": {
        "editor.defaultFormatter": "Kastuell.biome-postcss",
        "editor.formatOnSave": true
    }
}

The bridge searches from the document directory towards the workspace root for:

1. The platform-specific @biomejs/cli-* binary.
2. The nearest biome.json or biome.jsonc.

To override binary discovery, set an absolute path or a path relative to the workspace:

{
    "biomePostcss.bin": "node_modules/@biomejs/cli-win32-x64/biome.exe"
}

The default formatting timeout is 10 seconds. It can be changed with:

{
    "biomePostcss.timeout": 20000
}

Formatting errors are written to the Biome PostCSS output channel.

Scope

This extension only provides formatting. Syntax highlighting, completion, linting, and PostCSS compilation remain the responsibility of their respective extensions and build tools.

The formatter only runs for files inside a trusted filesystem workspace.

Development

npm install
npm test
npm run check
npm run package

License

MIT