PostCSS Pseudo Class Any Link
PostCSS Pseudo Class Any Link lets you :any-link
pseudo-class in CSS,
following the Selectors specification.
nav :any-link > span {
background-color: yellow;
}
/* becomes */
nav :link > span, nav :visited > span {
background-color: yellow;
}
nav :any-link > span {
background-color: yellow;
}
From the proposal:
The :any-link
pseudo-class represents an element that acts as the source
anchor of a hyperlink. It matches an element if the element would match
:link
or :visited
.
Usage
Add PostCSS Pseudo Class Any Link to your build tool:
npm install postcss-pseudo-class-any-link --save-dev
Node
Use PostCSS Pseudo Class Any Link to process your CSS:
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
postcssPseudoClassAnyLink.process(YOUR_CSS, , );
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS Pseudo Class Any Link as a plugin:
import postcss from 'gulp-postcss';
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
postcss([
postcssPseudoClassAnyLink()
]).process(YOUR_CSS);
Webpack
Add PostCSS Loader to your build tool:
npm install postcss-loader --save-dev
Use PostCSS Pseudo Class Any Link in your Webpack configuration:
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssPseudoClassAnyLink()
]
} }
]
}
]
}
}
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS Pseudo Class Any Link in your Gulpfile:
import postcss from 'gulp-postcss';
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssPseudoClassAnyLink()
])
).pipe(
gulp.dest('.')
));
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS Pseudo Class Any Link in your Gruntfile:
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssPseudoClassAnyLink()
]
},
dist: {
src: '*.css'
}
}
});
Options
preserve
The preserve
option determines whether the original :any-link
rule is
preserved. By default, it is preserved.
postcssPseudoClassAnyLink({ preserve: false })
nav :any-link > span {
background-color: yellow;
}
/* becomes */
nav :link > span, nav :visited > span {
background-color: yellow;
}