postcss-all-link-colors

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

• postcss-link-colors