webpack

Add @postcss-go/webpack-loader to your CSS rule. It calls the Go engine directly and does not depend on postcss or the official postcss-loader. By default it discovers postcss.config.js from the input file, same as the CLI.

Open live playground →

terminal

pnpm add -D @postcss-go/core @postcss-go/webpack-loader autoprefixer webpack webpack-cli css-loader style-loader

postcss.config.js

export default {
  plugins: {
    autoprefixer: {},
  },
};

webpack.config.js

export default {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', '@postcss-go/webpack-loader'],
      },
    ],
  },
};

Pass postcssOptions inline when you want to disable config lookup or set plugins in the webpack config. postcssOptions can also be a function that receives mode,env, file, and the loader context.

webpack.config.js

import autoprefixer from 'autoprefixer';

export default {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: '@postcss-go/webpack-loader',
            options: {
              sourceMap: true,
              postcssOptions: {
                config: false,
                plugins: [autoprefixer()],
              },
            },
          },
        ],
      },
    ],
  },
};

src/styles.css

.button {
  display: flex;
  gap: 0.5rem;
}

You can still run the CLI for a bundler-free CSS pass:

package.json

{
  "scripts": {
    "build": "webpack --mode production",
    "build:css": "postcss-go src/**/*.css --base src --dir dist/css --no-map"
  }
}