PostCSS Focus Ring

PostCSS Focus Ring lets you use the :focus-ring pseudo-selector in CSS, following the Selectors Level 4 specification.

1:focus:not(:focus-ring) {
2  outline: none;
3}

Use PostCSS Focus Ring alongside the focus-ring polyfill to swap the pseudo-selector for a class, which maintains the same selector weight.

1:focus:not(.focus-ring) {
2  outline: none;
3}

---

Additionally, transformed selectors can be exported to a JSON file.

1require('postcss-focus-ring')({
2  exportAs: 'json'
3});

1[
2  ".focus-ring",
3  ".x-component-outside .focus-ring",
4  ".focus-ring .x-component-inside",
5]

Or as a JavaScript export:

1require('postcss-focus-ring')({
2  exportAs: 'js'
3});

1export default [
2  ".focus-ring",
3  ".x-component-outside .focus-ring",
4  ".focus-ring .x-component-inside",
5];

With these variables synchronized to JavaScript, they can be used alongside the focus-ring polyfill.

Usage

Add PostCSS Focus Ring to your build tool:

1npm install postcss-focus-ring --save-dev

Node

Use PostCSS Focus Ring to process your CSS:

1require('postcss-focus-ring').process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

1npm install postcss --save-dev

Use PostCSS Focus Ring as a plugin:

1postcss([
2  require('postcss-focus-ring')()
3]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

1npm install gulp-postcss --save-dev

Use PostCSS Focus Ring in your Gulpfile:

1var postcss = require('gulp-postcss');
2
3gulp.task('css', function () {
4  return gulp.src('./src/*.css').pipe(
5    postcss([
6      require('postcss-focus-ring')()
7    ])
8  ).pipe(
9    gulp.dest('.')
10  );
11});

Grunt

Add Grunt PostCSS to your build tool:

1npm install grunt-postcss --save-dev

Use PostCSS Focus Ring in your Gruntfile:

1grunt.loadNpmTasks('grunt-postcss');
2
3grunt.initConfig({
4  postcss: {
5    options: {
6      use: [
7        require('postcss-focus-ring')()
8      ]
9    },
10    dist: {
11      src: '*.css'
12    }
13  }
14});

Advanced Options

These options may be passed directly into the plugin.

1require('postcss-focus-ring')({ /* 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.