projecte_ionic/node_modules/postcss-focus-visible
janmaroto b12369cb47 Conexio amb la api 2022-02-09 18:30:03 +01:00
..
node_modules Conexio amb la api 2022-02-09 18:30:03 +01:00
CHANGELOG.md Conexio amb la api 2022-02-09 18:30:03 +01:00
LICENSE.md Conexio amb la api 2022-02-09 18:30:03 +01:00
README.md Conexio amb la api 2022-02-09 18:30:03 +01:00
index.cjs.js Conexio amb la api 2022-02-09 18:30:03 +01:00
index.cjs.js.map Conexio amb la api 2022-02-09 18:30:03 +01:00
index.es.mjs Conexio amb la api 2022-02-09 18:30:03 +01:00
index.es.mjs.map Conexio amb la api 2022-02-09 18:30:03 +01:00
package.json Conexio amb la api 2022-02-09 18:30:03 +01:00

README.md

PostCSS Focus Visible PostCSS Logo

NPM Version CSS Standard Status Build Status Support Chat

PostCSS Focus Visible lets you use the :focus-visible pseudo-class in CSS, following the Selectors Level 4 specification.

It is the companion to the focus-visible polyfill.

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

/* becomes */

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

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

PostCSS Focus Visible duplicates rules using the :focus-visible pseudo-class with a .focus-visible class selector, the same selector used by the focus-visible polyfill. This replacement selector can be changed using the replaceWith option. Also, the preservation of the original :focus-visible rule can be disabled using the preserve option.

Usage

Add PostCSS Focus Visible to your project:

npm install postcss-focus-visible --save-dev

Use PostCSS Focus Visible to process your CSS:

const postcssFocusVisible = require('postcss-focus-visible');

postcssFocusVisible.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssFocusVisible = require('postcss-focus-visible');

postcss([
  postcssFocusVisible(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Focus Visible runs in all Node environments, with special instructions for:

Node PostCSS CLI Webpack Create React App Gulp Grunt

Options

preserve

The preserve option defines whether the original selector should remain. By default, the original selector is preserved.

focusVisible({ preserve: false });
:focus:not(:focus-visible) {
  outline: none;
}

/* becomes */

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

replaceWith

The replaceWith option defines the selector to replace :focus-visible. By default, the replacement selector is .focus-visible.

focusVisible({ replaceWith: '[focus-visible]' });
:focus:not(:focus-visible) {
  outline: none;
}

/* becomes */

:focus:not([focus-visible]) {
  outline: none;
}

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