This package has been deprecated

    Author message:

    Please update to postcss-focus-visible per the specification

    postcss-focus-ring

    1.0.0 • Public • Published

    PostCSS Focus Ring PostCSS Logo

    NPM Version Linux Build Status Windows Build Status Gitter Chat

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

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

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

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

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

    require('postcss-focus-ring')({
      exportAs: 'json'
    });
    [
      ".focus-ring",
      ".x-component-outside .focus-ring",
      ".focus-ring .x-component-inside",
    ]

    Or as a JavaScript export:

    require('postcss-focus-ring')({
      exportAs: 'js'
    });
    export default [
      ".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:

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

    PostCSS

    Add PostCSS to your build tool:

    npm install postcss --save-dev

    Use PostCSS Focus Ring as a plugin:

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

    Gulp

    Add Gulp PostCSS to your build tool:

    npm install gulp-postcss --save-dev

    Use PostCSS Focus Ring in your Gulpfile:

    var postcss = require('gulp-postcss');
     
    gulp.task('css', function () {
      return gulp.src('./src/*.css').pipe(
        postcss([
          require('postcss-focus-ring')()
        ])
      ).pipe(
        gulp.dest('.')
      );
    });

    Grunt

    Add Grunt PostCSS to your build tool:

    npm install grunt-postcss --save-dev

    Use PostCSS Focus Ring in your Gruntfile:

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

    Advanced Options

    These options may be passed directly into the plugin.

    require('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.

    Install

    npm i postcss-focus-ring

    DownloadsWeekly Downloads

    136

    Version

    1.0.0

    License

    CC0-1.0

    Last publish

    Collaborators

    • jonathantneal