https://github.com/deanc/esbuild-plugin-postcss

Plugin for esbuild to support SASS styles
https://github.com/deanc/esbuild-plugin-postcss

Last synced: about 2 months ago
JSON representation

Plugin for esbuild to support SASS styles

• Host: GitHub
• URL: https://github.com/deanc/esbuild-plugin-postcss
• Owner: deanc
• Created: 2021-01-31T13:06:06.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-04T18:05:08.000Z (4 months ago)
• Last Synced: 2024-07-29T12:39:17.853Z (about 2 months ago)
• Language: JavaScript
• Size: 286 KB
• Stars: 40
• Watchers: 2
• Forks: 14
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-esbuild - esbuild-plugin-postcss

README

        
(Huge thanks to https://github.com/koluch/esbuild-plugin-sass which this is based off)

# esbuild-plugin-postcss

![Node.js CI](https://github.com/deanc/esbuild-plugin-postcss/workflows/Node.js%20CI/badge.svg)

Plugin for [esbuild](https://esbuild.github.io/) to support PostCSS

## Install

```bash

npm i esbuild @deanc/esbuild-plugin-postcss

```

or yarn

```bash

yarn add esbuild @deanc/esbuild-plugin-postcss

```

## Usage example

Create file `src/test.css`:

```css

input[type="text"] {

  border-radius: 1px;

}

```

Create file `src/index.js`:

```js

import "./test.css";

```

Create file `build.js`:

```js

const esbuild = require("esbuild");

const autoprefixer = require("autoprefixer");

const postCssPlugin = require("@deanc/esbuild-plugin-postcss");

esbuild

  .build({

    entryPoints: ["src/index.js"],

    bundle: true,

    outfile: "bundle.js",

    plugins: [

      postCssPlugin({

        plugins: [autoprefixer],

      }),

    ],

  })

  .catch((e) => console.error(e.message));

```

Run:

```bash

node build.js

```

File named `bundle.css` with appropriate postcss plugins applied.