esbuild-postcss-inline-styles v1.0.1

Description

Postcss plugin for esbuild with support of injecting css styles into js bundle file. \ The plugin will process the styles with postcss and inject them into the out.js bundle file, so you will get a single bundle file with the styles inside.

Install

npm i -D esbuild-postcss-inline-styles

or yarn

yarn add esbuild-postcss-inline-styles --dev

Usage

The example below shows usage plugin with tailwind and autoprefixer. \ Create and configure postcss.config.js file.

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

Create main.css file:

/** main.css **/

@tailwind base;
@tailwind components;
@tailwind utilities;

Import main.css to index.js:

// index.js

import 'main.css'

Import plugin to your esbuild.config.js

// esbuild.config.js

import * as esbuild from 'esbuild'
import postcssInlineStyles from 'esbuild-postcss-inline-styles'

await esbuild.build({
    entryPoints: ['index.js'],
    bundle: true,
    outfile: 'out.js',
    plugins: [postcssInlineStyles()],
  })

It is not necessary to pass additional parameters to the plugin, all plugins for postcss are described in postcss.config.js.