Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jednano/postcss-all-link-colors
PostCSS plugin to insert colors for all link-related pseudo-classes.
https://github.com/jednano/postcss-all-link-colors
active colors focus hover link postcss postcss-plugin visited
Last synced: 3 months ago
JSON representation
PostCSS plugin to insert colors for all link-related pseudo-classes.
- Host: GitHub
- URL: https://github.com/jednano/postcss-all-link-colors
- Owner: jednano
- License: mit
- Created: 2015-07-23T23:38:20.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-11-02T16:42:17.000Z (about 7 years ago)
- Last Synced: 2024-10-18T04:14:42.162Z (3 months ago)
- Topics: active, colors, focus, hover, link, postcss, postcss-plugin, visited
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 17
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-all-link-colors
[](https://www.npmjs.org/package/postcss-all-link-colors)
[](https://www.npmjs.org/package/postcss-all-link-colors)
[](https://travis-ci.org/jedmao/postcss-all-link-colors)
[](https://codecov.io/gh/jedmao/postcss-all-link-colors)
[](https://gemnasium.com/github.com/jedmao/postcss-all-link-colors)
[](https://nodei.co/npm/postcss-all-link-colors/)
[PostCSS](https://github.com/postcss/postcss) plugin to insert colors for link-related pseudo-classes.
## Introduction
Adding [link-related](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover) [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) can be a total pain. Just look at how much garbage we have to write!
```css
a {
color: red;
}
a:visited {
color: red;
}
a:focus {
color: red;
}
a:hover {
color: red;
}
a:active {
color: red;
}
```
This plugin allows you to simplify the above syntax into the following:
```css
a {
@link-colors all red;
}
```
You can override individual pseudo-classs like so:
```css
a {
@link-colors all red {
focus: white;
hover: blue;
}
}
```
This transpiles into:
```css
a {
color: red;
}
a:visited {
color: red;
}
a:focus {
color: white;
}
a:hover {
color: blue;
}
a:active {
color: red;
}
```
Of course, you don't have to color _all_ link-related pseudo-classes if you don't want. Just get rid of the `all` parameter to make the colors inclusive:
```css
a {
@link-colors red {
hover: white;
}
}
```
This transpiles into:
```css
a {
color: red;
}
a:hover {
color: white;
}
```
Link-related pseudo-classes are written in _LVHA-order:_ `:link` — `:visited` — `:hover` — `:active` with the following variations:
- The `:link` pseudo-class is replaced by just `color`, as it covers not only links, but buttons and other elements as well.
- The `:focus` pseudo-class is placed before or after `:hover`, depending on the order in which you specify it; thus, the desired effect.
## Installation
```
$ npm install postcss-all-link-colors
```
## Usage
### JavaScript
```js
postcss([ require('postcss-all-link-colors') ]);
```
### TypeScript
```ts
import * as postcssAllLinkColors from 'postcss-all-link-colors';
postcss([ postcssAllLinkColors ]);
```
## Options
None at this time.
## Testing
Run the following command:
```
$ npm test
```
This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.
### Watching
For much faster development cycles, run the following commands in 2 separate processes:
```
$ npm run build:watch
```
Compiles TypeScript source into the `./dist` folder and watches for changes.
```
$ npm run watch
```
Runs the tests in the `./dist` folder and watches for changes.
## Similar projects
- [`postcss-link-colors`](https://github.com/steffenmllr/postcss-link-colors)