esbuild-plugin-postcss2-esbuild1101
v0.0.9
Published
Use postcss with esbuild
Downloads
1
Readme
esbuild-plugin-postcss2
This plugin is an optimized, type-friendly version of esbuild-plugin-postcss. It supports CSS preprocessors and CSS modules.
Install
yarn add -D esbuild-plugin-postcss2
or
npm i -D esbuild-plugin-postcss2
Usage
Add the plugin to your esbuild plugins:
const esbuild = require("esbuild");
const postCssPlugin = require("esbuild-plugin-postcss2");
esbuild.build({
...
plugins: [
postCssPlugin()
]
...
});
PostCSS plugins
Add your desired PostCSS plugin to the plugins array:
const autoprefixer = require("autoprefixer");
esbuild.build({
...
plugins: [
postCssPlugin({
plugins: [autoprefixer]
})
]
...
});
CSS modules
PostCSS modules are enabled by default. You can pass in a config or disable it with the modules
field:
postCssPlugin({
// pass in `postcss-modules` custom options
// set to false to disable
modules: {
getJSON(cssFileName, json, outputFileName) {
const path = require("path");
const cssName = path.basename(cssFileName, ".css");
const jsonFileName = path.resolve("./build/" + cssName + ".json");
fs.writeFileSync(jsonFileName, JSON.stringify(json));
}
}
});
Preprocessors
To use preprocessors (sass
, scss
, stylus
, less
), just add the desired preprocessor as a devDependency
:
yarn add -D sass