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 i -D @greenwood/plugin-postcss

yarn add @greenwood/plugin-postcss --dev

pnpm add -D @greenwood/plugin-postcss

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, just create a postcss.config.js file at the root of your project, by which you can provide your own custom plugins / settings that you've installed.

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

Usage

Now you can write CSS

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

.image {
  background-image: url(image@1x.png);
}

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

and see the results of the plugin in the generated styles

/* 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