PostCSS

A plugin for loading PostCSS configuration and plugins and applying it to your CSS. See the plugin's README for complete usage information.

Installation

You can use your favorite JavaScript package manager to install this plugin:

# npm
npm i -D @greenwood/plugin-postcss

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

Then add this plugin to your greenwood.config.js.

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

export default {
  // ...

  plugins: [greenwoodPluginPostCss()],
};

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

// postcss.config.mjs
export default {
  plugins: [(await import("autoprefixer")).default],
};

// postcss.config.js
module.exports = {
  plugins: [require("autoprefixer")],
};

Usage

Now you can write the CSS and see the results of the plugin in the generated styles

/* input */
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

/* output */
::-moz-placeholder {
  color: gray;
}

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference