csstools/postcss-role

Use a :role pseudo-class in CSS

PostCSS Role

PostCSS Role lets you use a :role pseudo-class in CSS.

/* before */

:role(button)

/* after */

[role="button"]

Options

replace

Type: String | Function
Default: '[role="$&"]'

Allows you to decide how the roles should be replaced, either by string or replace function.

Usage

Add PostCSS Role to your build tool:

npm install postcss-role --save-dev

Node

Use PostCSS Role to process your CSS:

require('postcss-role').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Role as a plugin:

postcss([
	require('postcss-role')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Role in your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
	return gulp.src('./src/*.css').pipe(
		postcss([
			require('postcss-role')({ /* options */ })
		])
	).pipe(
		gulp.dest('.')
	);
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Role in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			use: [
				require('postcss-role')({ /* options */ })
			]
		},
		dist: {
			src: '*.css'
		}
	}
});