@greenwood/plugin-postcss v0.29.3

@greenwood/plugin-postcss

Overview

A Greenwood plugin for loading PostCSS configuration and applying it to your CSS.

This package assumes you already have @greenwood/cli installed.

Installation

You can use your favorite JavaScript package manager to install this package.

examples:

# npm
npm install @greenwood/plugin-postcss --save-dev

# yarn
yarn add @greenwood/plugin-postcss --dev

Usage

Add this plugin to your greenwood.config.js.

import { greenwoodPluginPostCss } from '@greenwood/plugin-postcss';

export default {
  ...

  plugins: [
    greenwoodPluginPostCss()
  ]
}

👉 If you are using this along with plugin-import-css, make sure plugin-postcss comes first. All non standard transformations need to come last.

Optionally, to use your own PostCSS configuration, you'll need to create two (2) config files in the root of your project, by which you can provide your own custom plugins / settings that you've installed.

• postcss.config.js
• postcss.config.mjs

Example

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-nested')
  ]
};

// postcss.config.mjs
export default {
  plugins: [
    (await import('postcss-nested')).default
  ]
};

Eventually once PostCSS adds support for ESM configuration files, then this will drop to only needing one file.

Options

This plugin provides a default postcss.config.js that includes support for postcss-preset-env using browserslist with reasonable default configs for each.

If you would like to use it with your own custom postcss.config.js, you will need to enable the extendConfig option

import { greenwoodPluginPostcss } from '@greenwood/plugin-postcss';

export default {
  // ...

  plugins: [
    greenwoodPluginPostcss({
      extendConfig: true
    })
  ]
};

By default, the configuration provided by this plugin is:

export default {
  plugins: [
    (await import('postcss-import')).default,
    (await import('postcss-preset-env')).default
  ]
};

This will then process your CSS with PostCSS using the configured plugins / settings you provide, merged after the default plugins listed above.