esbuild-plugin-postcss-literal

esbuild-plugin-postcss-literal

PostCSS tagged template literals plugin for esbuild.

Install

npm install esbuild-plugin-postcss-literal --save-dev

Use

button.css.js

const styles = css`
    .button {
        &.-primary {
            background: var(--primary);
        }
    }
`;

esbuild.config.json

import esbuild from 'esbuild';
import postcssLiteral from 'esbuild-plugin-postcss-literal';

esbuild
    .build({
        entryPoints: ['index.js'],
        bundle: true,
        outfile: 'main.js',
        plugins: [postcssLiteral()]
    })
    .catch(() => process.exit(1));

package.json

{
    "type": "module",
    "scripts": {
        "start": "node esbuild.config.js"
    }
}

Configure

esbuild.config.json

postcssLiteral({
    filter: /.*/,
    namespace: '',
    tag: 'css',
    minify: false, // esbuild is used to minify and parse errors
    config: {} // postcss config here or in .postcssrc
});

.postcssrc

{
    "plugins": {
        "postcss-nesting": {}
    }
}

Check

esbuild-serve   →   Serve with live reload for esbuild.

esbuild-plugin-pipe   →   Pipe esbuild plugins output.

esbuild-plugin-babel   →   Babel plugin for esbuild.