postcss-all-link-colors
PostCSS plugin to insert colors for all link-related pseudo-classes.
Last updated 4 years ago by jedmao .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-all-link-colors 
SYNC missed versions from official npm registry.

postcss-all-link-colors

NPM version npm license Travis Build Status codecov Dependency Status

npm

PostCSS plugin to insert colors for link-related pseudo-classes.

Introduction

Adding link-related pseudo-classes can be a total pain. Just look at how much garbage we have to write!

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:

a {
	@link-colors all red;
}

You can override individual pseudo-classs like so:

a {
	@link-colors all red {
		focus: white;
		hover: blue;
	}
}

This transpiles into:

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:

a {
	@link-colors red {
		hover: white;
	}
}

This transpiles into:

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

postcss([ require('postcss-all-link-colors') ]);

TypeScript

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 command:

$ npm run watch

This will build scripts, run tests and watch for changes.

Similar projects

Current Tags

  • 2.0.0                                ...           latest (4 years ago)

7 Versions

  • 2.0.0                                ...           4 years ago
  • 1.0.1                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
  • 0.0.5                                ...           6 years ago
  • 0.0.4                                ...           6 years ago
  • 0.0.3                                ...           6 years ago
  • 0.0.1                                ...           6 years ago
Maintainers (1)
Downloads
Total 1,014
Today 0
This Week 10
This Month 17
Last Day 0
Last Week 3
Last Month 18
Dependencies (1)
Dev Dependencies (6)
Dependents (1)

Copyright 2014 - 2021 © npmmirror.com |