This PostCSS-Plugin allows you to convert advanced CSS pseudo-classes for form handling into their Hyperform counterparts.

Currently supported pseudo-classes and their transformation:

Install via npm:

npm install postcss-hyperform

Then use it:

postcss([ require('postcss-hyperform') ])

or on the command-line:

$ postcss --use postcss-hyperform < input.css > output.css

This will transform this perfectly standards-conform code (that is, unfortunately, not fully supported by any browser as of 2018)

.input:valid {
  background: green;
}
.input:user-invalid {
  background: red;
}

into this stylesheet, that works like a charm, if you also happen to use Hyperform:

.input:valid, .input.hf-valid {
  background: green;
}
.input:user-invalid, .input.hf-validated.hf-invalid {
  background: red;
}

• Missing support for :required and :optional. They will be added when this accompanying issue is fixed.

• Note, that the specificity of some selectors will change. Where you had a blue colored field on focus with this CSS before,

  .input:user-invalid { color: red; }
  .input:focus { color: blue; }

  you now need to crank up the specificity of the :focus rule,

  .input:user-invalid { color: red; }
  /* :user-invalid will become two helper classes in postprocessing. Therefore
   * enlarge specificity: */
  .input:focus:focus { color: blue; }

Written by Manuel Strehl, based on code by Kevin Suttle.

This code is published under the terms of the MIT license.