postcss-focus-visible
Advanced tools
Comparing version 3.0.0 to 4.0.0
# Changes to PostCSS Focus Visible | ||
### 4.0.0 (September 17, 2018) | ||
- Updated: Support for PostCSS v7+ | ||
- Updated: Support for Node v6+ | ||
### 3.0.0 (April 7, 2018) | ||
@@ -4,0 +9,0 @@ |
@@ -7,25 +7,25 @@ 'use strict'; | ||
var selectorRegExp = /:focus-visible([^\w-]|$)/gi; | ||
const selectorRegExp = /:focus-visible([^\w-]|$)/gi; | ||
var index = postcss.plugin('postcss-focus-visible', opts => { | ||
const replaceWith = String(Object(opts).replaceWith || '.focus-visible'); | ||
const preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true); | ||
return root => { | ||
root.walkRules(selectorRegExp, rule => { | ||
const selector = rule.selector.replace(selectorRegExp, ($0, $1) => { | ||
return `${replaceWith}${$1}`; | ||
}); | ||
const clone = rule.clone({ | ||
selector | ||
}); | ||
var index = postcss.plugin('postcss-focus-visible', function (opts) { | ||
var replaceWith = String(Object(opts).replaceWith || '.focus-visible'); | ||
var preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true); | ||
return function (root) { | ||
root.walkRules(selectorRegExp, function (rule) { | ||
var selector = rule.selector.replace(selectorRegExp, function ($0, $1) { | ||
return `${replaceWith}${$1}`; | ||
}); | ||
var clone = rule.clone({ selector }); | ||
if (preserve) { | ||
rule.before(clone); | ||
} else { | ||
rule.replaceWith(clone); | ||
} | ||
}); | ||
}; | ||
if (preserve) { | ||
rule.before(clone); | ||
} else { | ||
rule.replaceWith(clone); | ||
} | ||
}); | ||
}; | ||
}); | ||
module.exports = index; | ||
//# sourceMappingURL=index.cjs.js.map |
{ | ||
"name": "postcss-focus-visible", | ||
"version": "3.0.0", | ||
"version": "4.0.0", | ||
"description": "Use the :focus-visible pseudo-selector in CSS", | ||
@@ -11,6 +11,8 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"main": "index.cjs.js", | ||
"module": "index.es.js", | ||
"module": "index.es.mjs", | ||
"files": [ | ||
"index.cjs.js", | ||
"index.es.js" | ||
"index.cjs.js.map", | ||
"index.es.mjs", | ||
"index.es.mjs.map" | ||
], | ||
@@ -25,17 +27,17 @@ "scripts": { | ||
"engines": { | ||
"node": ">=4.0.0" | ||
"node": ">=6.0.0" | ||
}, | ||
"dependencies": { | ||
"postcss": "^6.0" | ||
"postcss": "^7.0.2" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^6.26", | ||
"babel-eslint": "^8.2", | ||
"babel-preset-env": "^1.6", | ||
"eslint": "^4.19", | ||
"@babel/core": "^7.0.0", | ||
"@babel/preset-env": "^7.0.0", | ||
"babel-eslint": "^9.0", | ||
"eslint": "^5.6", | ||
"eslint-config-dev": "2.0", | ||
"postcss-tape": "2.2", | ||
"pre-commit": "^1.2", | ||
"rollup": "^0.57", | ||
"rollup-plugin-babel": "^3.0" | ||
"rollup": "^0.66", | ||
"rollup-plugin-babel": "^4.0.1" | ||
}, | ||
@@ -42,0 +44,0 @@ "eslintConfig": { |
128
README.md
# PostCSS Focus Visible [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
[![NPM Version][npm-img]][npm-url] | ||
[![CSS Standard Status][css-img]][css-url] | ||
[![Build Status][cli-img]][cli-url] | ||
[![Windows Build Status][win-img]][win-url] | ||
[![Gitter Chat][git-img]][git-url] | ||
[![Support Chat][git-img]][git-url] | ||
@@ -37,3 +37,3 @@ [PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in | ||
Add [PostCSS Focus Visible] to your build tool: | ||
Add [PostCSS Focus Visible] to your project: | ||
@@ -44,115 +44,27 @@ ```bash | ||
#### Node | ||
Use [PostCSS Focus Visible] to process your CSS: | ||
```js | ||
import focusVisible from 'postcss-focus-visible'; | ||
const postcssFocusVisible = require('postcss-focus-visible'); | ||
focusVisible.process(YOUR_CSS); | ||
postcssFocusVisible.process(YOUR_CSS /*, processOptions, pluginOptions */); | ||
``` | ||
#### PostCSS | ||
Or use it as a [PostCSS] plugin: | ||
Add [PostCSS] to your build tool: | ||
```bash | ||
npm install postcss --save-dev | ||
``` | ||
Use [PostCSS Focus Visible] as a plugin: | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import focusVisible from 'postcss-focus-visible'; | ||
const postcss = require('postcss'); | ||
const postcssFocusVisible = require('postcss-focus-visible'); | ||
postcss([ | ||
focusVisible() | ||
]).process(YOUR_CSS); | ||
postcssFocusVisible(/* pluginOptions */) | ||
]).process(YOUR_CSS /*, processOptions */); | ||
``` | ||
#### Webpack | ||
[PostCSS Focus Visible] runs in all Node environments, with special | ||
instructions for: | ||
Add [PostCSS Loader] to your build tool: | ||
| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | ||
| --- | --- | --- | --- | --- | --- | | ||
```bash | ||
npm install postcss-loader --save-dev | ||
``` | ||
Use [PostCSS Focus Visible] in your Gulpfile: | ||
```js | ||
import focusVisible from 'postcss-focus-visible'; | ||
module.exports = { | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.css$/, | ||
use: [ | ||
'style-loader', | ||
{ loader: 'css-loader', options: { importLoaders: 1 } }, | ||
{ loader: 'postcss-loader', options: { | ||
ident: 'postcss', | ||
plugins: () => [ focusVisible() ] | ||
} } | ||
] | ||
} | ||
] | ||
} | ||
} | ||
``` | ||
#### Gulp | ||
Add [Gulp PostCSS] to your build tool: | ||
```bash | ||
npm install gulp-postcss --save-dev | ||
``` | ||
Use [PostCSS Focus Visible] in your Gulpfile: | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import focusVisible from 'postcss-focus-visible'; | ||
gulp.task('css', () => gulp.src('./src/*.css').pipe( | ||
postcss([ | ||
focusVisible() | ||
]) | ||
).pipe( | ||
gulp.dest('.') | ||
)); | ||
``` | ||
#### Grunt | ||
Add [Grunt PostCSS] to your build tool: | ||
```bash | ||
npm install grunt-postcss --save-dev | ||
``` | ||
Use [PostCSS Focus Visible] in your Gruntfile: | ||
```js | ||
import focusVisible from 'postcss-focus-visible'; | ||
grunt.loadNpmTasks('grunt-postcss'); | ||
grunt.initConfig({ | ||
postcss: { | ||
options: { | ||
use: [ | ||
focusVisible() | ||
] | ||
}, | ||
dist: { | ||
src: '*.css' | ||
} | ||
} | ||
}); | ||
``` | ||
## Options | ||
@@ -206,10 +118,10 @@ | ||
[npm-url]: https://www.npmjs.com/package/postcss-focus-visible | ||
[npm-img]: https://img.shields.io/npm/v/postcss-focus-visible.svg | ||
[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-focus-visible.svg | ||
[cli-url]: https://travis-ci.org/jonathantneal/postcss-focus-visible | ||
[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-focus-visible.svg | ||
[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-focus-visible | ||
[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-focus-visible.svg | ||
[css-img]: https://cssdb.org/badge/focus-within-pseudo-class.svg | ||
[css-url]: https://cssdb.org/#focus-visible-pseudo-class | ||
[git-img]: https://img.shields.io/badge/support-chat-blue.svg | ||
[git-url]: https://gitter.im/postcss/postcss | ||
[git-img]: https://img.shields.io/badge/support-chat-blue.svg | ||
[npm-img]: https://img.shields.io/npm/v/postcss-focus-visible.svg | ||
[npm-url]: https://www.npmjs.com/package/postcss-focus-visible | ||
@@ -216,0 +128,0 @@ [focus-visible polyfill]: https://github.com/WICG/focus-visible |
17380
8
48
132
+ Addedpicocolors@0.2.1(transitive)
+ Addedpostcss@7.0.39(transitive)
- Removedansi-styles@3.2.1(transitive)
- Removedchalk@2.4.2(transitive)
- Removedcolor-convert@1.9.3(transitive)
- Removedcolor-name@1.1.3(transitive)
- Removedescape-string-regexp@1.0.5(transitive)
- Removedhas-flag@3.0.0(transitive)
- Removedpostcss@6.0.23(transitive)
- Removedsupports-color@5.5.0(transitive)
Updatedpostcss@^7.0.2