Using PostCSS

Enabling PostCSS

To use PostCSS, you just need to set the configuration option postcss.use to true:

import esb from 'esbuild';
import sassModules from '@squirrelnetwork/esbuild-sass-modules-plugin';

await esb.build(
	{ bundle: true
	, sourceRoot: 'src/'
	, entryPoints: [ 'src/index.js' ]
	, outfile: 'build/app.js'
	, plugins: [ sassModules({ postcss: { use: true } }) ]
	}
);

By default it is set to false and will chain SASS's source map to produce a valid map after the transformation.

PostCSS options

{ use: false
, plugins: []
, custom:
	{ parser: undefined
	, stringifier: undefined
	, syntax: undefined
	}
}

You can use the postcss.custom property to set PostCSS's options, like so:

import esb from 'esbuild';
import sassModules from '@squirrelnetwork/esbuild-sass-modules-plugin';
import MyParser from './MyParser.js';

await esb.build(
	{ bundle: true
	, sourceRoot: 'src/'
	, entryPoints: [ 'src/index.js' ]
	, outfile: 'build/app.js'
	, plugins:
		[ sassModules(
			{ postcss:
				{ use: true
				, custom:
					{ parser: MyParser
					}
				}
			}
		)
		]
	}
);

PostCSS plugins

You can use the postcss.plugins property to chain plugins to PostCSS, like below:

import esb from 'esbuild';
import sassModules from '@squirrelnetwork/esbuild-sass-modules-plugin';
import autoprefixer from 'autoprefixer';

await esb.build(
	{ bundle: true
	, sourceRoot: 'src/'
	, entryPoints: [ 'src/index.js' ]
	, outfile: 'build/app.js'
	, plugins:
		[ sassModules(
			{ postcss:
				{ use: true
				, plugins: [ autoprefixer ]
				}
			}
		)
		]
	}
);