PostCSS

A plugin for loading PostCSS (opens in a new window) configuration and plugins and applying it to your CSS. See the plugin's README (opens in a new window) 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);
  }
}

Types

Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.

/** @type {import('@greenwood/plugin-postcss').PostCssPlugin} */

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

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference