# postcss-hyperform2

> Rewrite CSS pseudo-classes into Hyperform classes

Latest version **0.1.1** (published 2021-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-hyperform2
pnpm add postcss-hyperform2
yarn add postcss-hyperform2
bun add postcss-hyperform2
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-10-23 |
| First published | 2021-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Author | Manuel Strehl |
| Maintainers | isour |

## Links

- npm: https://www.npmjs.com/package/postcss-hyperform2
- npm.io page: https://npm.io/package/postcss-hyperform2

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^5.0.14

## Recent versions

- 0.1.1 (latest) — 2021-10-23
- 0.1.0 — 2021-10-23

## README

# ![Text “Hyperform - Insert Form” in 80s arcade game style](https://github.com/hyperform/hyperform/raw/master/stuff/header.png)

## Rewrite CSS pseudo-classes into Hyperform classes

This [PostCSS](https://github.com/postcss/postcss)-Plugin allows you to convert
advanced CSS pseudo-classes for form handling into their
[Hyperform](https://hyperform.js.org) counterparts.

Currently supported pseudo-classes and their transformation:

| CSS selector    | Class applied by Hyperform |
| --------------- | -------------------------- |
| `:user-error`   | `.hf-validated.hf-invalid` |
| `:user-invalid` | `.hf-validated.hf-invalid` |
| `:invalid`      | `.hf-invalid`              |
| `:valid`        | `.hf-valid`                |

## Installation and Usage

Install via `npm`:

    npm install postcss-hyperform2

Then use it:

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

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

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

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

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

## Problems and Todos

- The specificity of `:user-invalid` is lower than that of the two
  replacement classes
- Missing support for `:in-range`, `:out-of-range`, `:required`, `:optional`.
  They will be added when [this accompanying
  issue](https://github.com/hyperform/hyperform/issues/23) is fixed.

## Authors

Written by Manuel Strehl, based on code by [Kevin
Suttle](https://github.com/kevinSuttle).

## License

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

---
_Source: https://npm.io/package/postcss-hyperform2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._