rename :focus-ring and .focus-ring as :focus-visible and .focus-visible

Author: Yvain Liechti

plugins/postcss-focus-visible/.tape.js

@@ -11,7 +11,7 @@ module.exports = {
 				assignTo: cache
 			},
 			after: () => {
-				const expectJSON = '[".focus-ring",".focus-ring test","test .focus-ring","test test.focus-ring","test .focus-ring test","test test.focus-ring test","test .focus-ring .focus-ring test","test :matches(.focus-ring) test","test :matches(.focus-ring test) test","test :matches(test .focus-ring) test","test :matches(test test.focus-ring) test","test :matches(test .focus-ring test) test","test :matches(test test.focus-ring test) test","test :matches(test .focus-ring .focus-ring test) test"]';
+				const expectJSON = '[".focus-visible",".focus-visible test","test .focus-visible","test test.focus-visible","test .focus-visible test","test test.focus-visible test","test .focus-visible .focus-visible test","test :matches(.focus-visible) test","test :matches(.focus-visible test) test","test :matches(test .focus-visible) test","test :matches(test test.focus-visible) test","test :matches(test .focus-visible test) test","test :matches(test test.focus-visible test) test","test :matches(test .focus-visible .focus-visible test) test"]';
 				const resultJSON = JSON.stringify(cache);
 
 				if (expectJSON !== resultJSON) {

plugins/postcss-focus-visible/README.md

@@ -5,20 +5,20 @@
 [![Windows Build Status][win-img]][win-url]
 [![Gitter Chat][git-img]][git-url]
 
-[PostCSS Focus Ring] lets you use the `:focus-ring` pseudo-selector in CSS,
+[PostCSS Focus Ring] lets you use the `:focus-visible` pseudo-selector in CSS,
 following the [Selectors Level 4] specification.
 
 ```css
-:focus:not(:focus-ring) {
+:focus:not(:focus-visible) {
   outline: none;
 }
 ```
 
-Use PostCSS Focus Ring alongside the [focus-ring polyfill] to swap the
+Use PostCSS Focus Ring alongside the [focus-visible polyfill] to swap the
 pseudo-selector for a class, which maintains the same selector weight.
 
 ```css
-:focus:not(.focus-ring) {
+:focus:not(.focus-visible) {
   outline: none;
 }
 ```
@@ -35,9 +35,9 @@ require('postcss-focus-ring')({
 
 ```json
 [
-  ".focus-ring",
-  ".x-component-outside .focus-ring",
-  ".focus-ring .x-component-inside",
+  ".focus-visible",
+  ".x-component-outside .focus-visible",
+  ".focus-visible .x-component-inside",
 ]
 ```
 
@@ -51,14 +51,14 @@ require('postcss-focus-ring')({
 
 ```js
 export default [
-  ".focus-ring",
-  ".x-component-outside .focus-ring",
-  ".focus-ring .x-component-inside",
+  ".focus-visible",
+  ".x-component-outside .focus-visible",
+  ".focus-visible .x-component-inside",
 ];
 ```
 
 With these variables synchronized to JavaScript, they can be used alongside the
-[focus-ring polyfill].
+[focus-visible polyfill].
 
 ## Usage
 
@@ -154,15 +154,15 @@ require('postcss-focus-ring')({ /* options */ });
 #### exportAs
 
 `exportAs` is used to export transformed selectors originally containing the
-`:focus-ring` pseudo-selector.
+`:focus-visible` 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`
+default, it is the CSS source file with an additional `focus-visible-selectors`
 and `.js` or `.json` extension.
 
 #### assignTo
@@ -183,5 +183,5 @@ be useful if running the plugin on the client side.
 [PostCSS]: https://github.com/postcss/postcss
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
-[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#the-focusring-pseudo
-[focus-ring polyfill]: https://github.com/WICG/focus-ring
+[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+[focus-visible polyfill]: https://github.com/WICG/focus-ring

plugins/postcss-focus-visible/index.js

@@ -4,23 +4,23 @@ const postcss = require('postcss');
 const parser  = require('postcss-selector-parser');
 
 // plugin
-module.exports = postcss.plugin('postcss-focus-ring', (opts) => (root) => { // eslint-disable-line consistent-return
+module.exports = postcss.plugin('postcss-focus-visible', (opts) => (root) => { // eslint-disable-line consistent-return
 	// transformed cache
 	const transformed = [];
 
 	// walk each matching rule
-	root.walkRules(/:focus-ring\b/, (rule) => {
+	root.walkRules(/:focus-visible\b/, (rule) => {
 		// original selector
 		const originalSelector = rule.selector;
 
 		// transformed selector
 		const transformedSelector = parser((selectors) => {
 			// for each selector part
 			selectors.walk((selector) => {
-				// if the selector part is a :focus-ring pseudo
-				if (selector.type === 'pseudo' && selector.value === ':focus-ring') {
-					// change it to a .focus-ring class
-					selector.value = '.focus-ring';
+				// if the selector part is a :focus-visible pseudo
+				if (selector.type === 'pseudo' && selector.value === ':focus-visible') {
+					// change it to a .focus-visible class
+					selector.value = '.focus-visible';
 					selector.type = 'class';
 				}
 			});
@@ -50,7 +50,7 @@ module.exports = postcss.plugin('postcss-focus-ring', (opts) => (root) => { // e
 		// destination path
 		const destination = `${ opts.destination || `${
 			root.source && root.source.input && root.source.input.file && root.source.input.file || 'css'
-		}.focus-ring-selectors.${ opts.exportAs === 'js' ? 'js' : 'json' }` }`;
+		}.focus-visible-selectors.${ opts.exportAs === 'js' ? 'js' : 'json' }` }`;
 
 		// stringified contents
 		const json = JSON.stringify(transformedClean, null, '  ');