PostCSS Rules for Bazel

Rules

• postcss_binary
• postcss_multi_binary
• postcss_plugin
• autoprefixer

Overview

These build rules are used for post-processing CSS files via PostCSS with Bazel.

Setup

Using npm and Node.js rules

We recommend you use npm to install the PostCSS build rules if you use the Node.js build rules, and strongly recommend using npm if you also depend or plan to depend on PostCSS in your local package.json. (For example, if PostCSS plugin(s) will form part of your repository's build pipeline.)

Installing the PostCSS build rules via npm allows you to rely on its native package management functionality. If you depend on PostCSS in your local package.json, using npm also helps avoid version skew between PostCSS in your repository and these build rules.

Add the @bazel/postcss npm package to your devDependencies in package.json.

Your WORKSPACE should declare a yarn_install or npm_install rule named npm. See https://github.com/bazelbuild/rules_nodejs/#quickstart

This causes the build rules to be made available under @npm//@bazel/postcss:index.bzl.

Lastly, in your WORKSPACE file, add rules_postcss dependencies:

load("@npm//@bazel/postcss:package.bzl", "rules_postcss_dependencies")
rules_postcss_dependencies()

TODO: Compare to using PostCSS directly using rules_nodejs.

Using repository rules

Add the following to your WORKSPACE file to add the external repositories for PostCSS, making sure to use the latest published versions:

http_archive(
    name = "build_bazel_rules_postcss",
    # Make sure to check for the latest version when you install
    url = "https://github.com/bazelbuild/rules_postcss/archive/0.5.0.tar.gz",
    strip_prefix = "rules_postcss-0.5.0",
    sha256 = "3f0c754f97e3940ea90f4d6408bfb2aefb3850e7941572b22b1b88579c428ff9",
)
load("@build_bazel_rules_postcss//:package.bzl", "rules_postcss_dependencies")
rules_postcss_dependencies()

This causes the build rules to be made available under @build_bazel_rules_postcss//:index.bzl.

Basic Example

To be documented.