# postcss-pseudoelements

> PostCSS plugin to add single-colon CSS 2.1 syntax pseudo selectors (i.e. :before)

Latest version **5.0.0** (published 2017-07-09) · MIT license · 160.5K weekly downloads

## Install

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

## Health

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

Positive: moderate downloads; no vulnerabilities.

Warnings: no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2017-07-09 |
| First published | 2014-12-05 |
| Weekly downloads | 160.5K |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Sven Tschui |
| Maintainers | sventschui |
| Keywords | postcss, postcss-plugin, pseudoelements, before, after |

## Links

- npm: https://www.npmjs.com/package/postcss-pseudoelements
- Repository: https://github.com/axa-ch/postcss-pseudoelements
- Issues: https://github.com/axa-ch/postcss-pseudoelements/issues
- npm.io page: https://npm.io/package/postcss-pseudoelements

## Dependencies (1)

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

## Recent versions

- 5.0.0 (latest) — 2017-07-09
- 4.0.0 — 2017-03-23
- 3.0.0 — 2015-09-07
- 2.2.0 — 2015-05-24
- 2.1.1 — 2015-03-24
- 2.1.0 — 2015-03-23
- 2.0.0 — 2015-03-23
- 1.0.0 — 2014-12-05

## README

# postcss-pseudoelements

postcss helper for pseudo element colons, it handles double -> single and single -> double.

## Usage

### Double to Single (default)
```javascript
var pe = require('postcss-pseudoelements');
var postcss = require('postcss');
var options = {
	single: true, // default
	selectors: ['before','after','first-letter','first-line'], // default
};

var processor = postcss(pe(options));

console.log(processor.process('a:before {}').css) // outputs: a:before {}
console.log(processor.process('a::before {}').css) // outputs: a:before {}
```

### Single to Double

```javascript
var pe = require('postcss-pseudoelements');
var postcss = require('postcss');
var options = {
	single: false,
	selectors: ['before','after','first-letter','first-line'], // default
};

var processor = postcss(pe(options));

console.log(processor.process('a:before {}').css) // outputs: a::before {}
console.log(processor.process('a::before {}').css) // outputs: a::before {}
```

## Options

`single`: Boolean
* `true` (default) if you want to move from double colon to colon for backwards compatibility
* `false` if you need double colons

`selectors`: `Array` of pseudo-element selectors to rewrite with single and double colons. Note that these values will be used in a regexp without escaping. Defaults to `['before','after','first-letter','first-line']`

example selectors:
```
var options = {
  selectors: [
    'hover',
    'focus',
    'active',
    'after',
    'ms-expand',
    'not',
    'first-child',
    'last-child'
  ],
};
```

### Defaults
```javascript
var options = {
  single: true,
  [
    'before',
    'after',
    'first-letter',
    'first-line'
  ]
};
```

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