postcss-focus - npm Package Compare versions

Comparing version 5.0.1 to 6.0.0

index.js

		@@ -1,2 +0,2 @@
		function hasAlready (parent, selector) {
		function hasAlready(parent, selector) {
		return parent.some(i => {
		@@ -7,3 +7,5 @@ return i.type === 'rule' && i.selectors.includes(selector)

		module.exports = () => {
		module.exports = (opts = {}) => {
		let pseudoClass = opts.oldFocus ? ':focus' : ':focus-visible'

		return {
		@@ -16,3 +18,3 @@ postcssPlugin: 'postcss-focus',
		if (selector.includes(':hover')) {
		let replaced = selector.replace(/:hover/g, ':focus')
		let replaced = selector.replace(/:hover/g, pseudoClass)
		if (!hasAlready(rule.parent, replaced)) {
		@@ -19,0 +21,0 @@ focuses.push(replaced)

package.json

		{
		"name": "postcss-focus",
		"version": "5.0.1",
		"version": "6.0.0",
		"description": "PostCSS plugin to add :focus selector to every :hover for keyboard accessibility",
		@@ -5,0 +5,0 @@ "keywords": [

README.md

		@@ -7,3 +7,3 @@ # PostCSS Focus

		[PostCSS] plugin to add `:focus` selector to every `:hover`
		[PostCSS] plugin to add `:focus-visible` selector to every `:hover`
		for keyboard accessibility.
		@@ -17,3 +17,3 @@
		```css
		*:focus {
		*:focus-visible {
		outline: 0;
		@@ -27,6 +27,6 @@ }
		```css
		*:focus {
		*:focus-visible {
		outline: 0;
		}
		.button:hover, .button:focus {
		.button:hover, .button:focus-visible {
		background: red;
		@@ -36,3 +36,4 @@ }

		If there is a `:focus` selector, it will be excluded from the processing.
		If there is a `:focus-visible` selector, it will be excluded
		from the processing.

		@@ -43,3 +44,3 @@ ```css
		}
		.b:focus {
		.b:focus-visible {
		background: red;
		@@ -50,6 +51,6 @@ }
		```css
		.a:hover, .b:hover, .a:focus {
		.a:hover, .b:hover, .a:focus-visible {
		outline: 0;
		}
		.b:focus {
		.b:focus-visible {
		background: red;
		@@ -64,29 +65,3 @@ }


		## Usage

		Step 1: Install plugin:

		```sh
		npm install --save-dev postcss postcss-focus
		```

		Step 2: Check you project for existed PostCSS config: `postcss.config.js`
		in the project root, `"postcss"` section in `package.json`
		or `postcss` in bundle config.

		If you do not use PostCSS, add it according to [official docs]
		and set this plugin in settings.

		Step 3: Add the plugin to plugins list:

		```diff
		module.exports = {
		plugins: [
		+ require('postcss-focus'),
		require('autoprefixer')
		]
		}
		```

		[official docs]: https://github.com/postcss/postcss#usage
		## Docs
		Read full docs [here](https://github.com/postcss/postcss-focus#readme).

CHANGELOG.md

New alerts