postcss-color-hct v0.0.3

postcss-color-hct

PostCSS plugin to transform hct() color to compatible CSS (#hex or rgba()).

Overview

Using the new HCT color space for Material 3 this plugin convert the hct color syntax to compatible CSS.

Implementation based on the postcss-color-hcl plugin.

CSS Custom properties are not supported as input for values:

body {
  --hue: 20;
  color: hct(var(--hue), 70%, 50%, 0.5);
}

Using the HCT color space at runtime can be done with the Material Color Utilities package for use in javascript.

Installation

$ npm install postcss-color-hct

Usage

// dependencies
var fs = require("fs");
var postcss = require("postcss");
var colorHct = require("postcss-color-hct");

// css to be processed
var css = fs.readFileSync("input.css", "utf8");

// process css
var output = postcss().use(colorHct()).process(css).css;

Using this input.css:

body {
  color: hct(21, 70%, 50%, 0.5);
  background: hct(0, 0%, 50%);
}

you will get:

body {
  color: rgb(221 52 80 / 0.5);
  background: rgb(119, 119, 119);
}

Checkout tests for more examples.

Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

$ git clone https://github.com/rodydavis/postcss-color-hct.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License