diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9bf6deb --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Marton Lederer + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..abb67f4 --- /dev/null +++ b/README.md @@ -0,0 +1,78 @@ +# esbuild-plugin-postcss2 + +This plugin is an optimized, type-friendly version of [esbuild-plugin-postcss](https://github.com/deanc/esbuild-plugin-postcss). It supports CSS preprocessors and CSS modules. + +## Install + +```sh +yarn add -D esbuild-plugin-postcss2 +``` + +or + +```sh +npm i -D esbuild-plugin-postcss2 +``` + +## Usage + +Add to the plugin to your esbuild plugins: + +```js +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: + +```js +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: + +```js +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`: + +```sh +yarn add -D sass +```