PostCSS Focus Ring
PostCSS Focus Ring lets you use the :focus-ring
pseudo-selector in CSS,
following the Selectors Level 4 specification.
Use PostCSS Focus Ring alongside the focus-ring polyfill to swap the pseudo-selector for a class, which maintains the same selector weight.
Additionally, transformed selectors can be exported to a JSON file.
exportAs: 'json';
Or as a JavaScript export:
exportAs: 'js';
".focus-ring" ".x-component-outside .focus-ring" ".focus-ring .x-component-inside";
With these variables synchronized to JavaScript, they can be used alongside the focus-ring polyfill.
Usage
Add PostCSS Focus Ring to your build tool:
npm install postcss-focus-ring --save-dev
Node
Use PostCSS Focus Ring to process your CSS:
;
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS Focus Ring as a plugin:
;
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS Focus Ring in your Gulpfile:
var postcss = ; gulp;
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS Focus Ring in your Gruntfile:
grunt; grunt;
Advanced Options
These options may be passed directly into the plugin.
/* options */ ;
exportAs
exportAs
is used to export transformed selectors originally containing the
:focus-ring
pseudo-selector.
- If a
js
string is passed, the selectors will be exported as JavaScript. - If a
json
string is passed, the selectors will be exported as JSON.
exportTo
exportTo
is the path to where your JSON or JavaScript will be saved. By
default, it is the CSS source file with an additional focus-ring-selectors
and .js
or .json
extension.
assignTo
assignTo
is an Array you may push your transformed selectors to. This can
be useful if running the plugin on the client side.