Skip to content

Commit b565e3d

Browse files
jonathantnealromainmenke
jonathantneal
authored and
romainmenke
committed
4.0.0
1 parent 0448434 commit b565e3d

File tree

8 files changed

+204
-137
lines changed

8 files changed

+204
-137
lines changed

‎plugins/postcss-focus-visible/.appveyor.yml

-18
This file was deleted.

‎plugins/postcss-focus-visible/.gitignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
node_modules
2-
index.*.js
2+
index.*.*
33
package-lock.json
44
*.log*
55
*.result.css
66
.*
7-
!.appveyor.yml
87
!.editorconfig
98
!.gitignore
109
!.rollup.js

‎plugins/postcss-focus-visible/.rollup.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import babel from 'rollup-plugin-babel';
33
export default {
44
input: 'index.js',
55
output: [
6-
{ file: 'index.cjs.js', format: 'cjs' },
7-
{ file: 'index.es.js', format: 'es' }
6+
{ file: 'index.cjs.js', format: 'cjs', sourcemap: true },
7+
{ file: 'index.es.mjs', format: 'es', sourcemap: true }
88
],
99
plugins: [
1010
babel({
1111
presets: [
12-
['env', { modules: false, targets: { node: 4 } }]
12+
['@babel/env', { modules: false, targets: { node: 6 } }]
1313
]
1414
})
1515
]

‎plugins/postcss-focus-visible/.travis.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
language: node_js
44

55
node_js:
6-
- 4
6+
- 6
77

88
install:
99
- npm install --ignore-scripts

‎plugins/postcss-focus-visible/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changes to PostCSS Focus Visible
22

3+
### 4.0.0 (September 17, 2018)
4+
5+
- Updated: Support for PostCSS v7+
6+
- Updated: Support for Node v6+
7+
38
### 3.0.0 (April 7, 2018)
49

510
- Changed: default functionality to preserve the original rule

‎plugins/postcss-focus-visible/INSTALL.md

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# Installing PostCSS Focus Visible
2+
3+
[PostCSS Focus Visible] runs in all Node environments, with special instructions for:
4+
5+
| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
6+
| --- | --- | --- | --- | --- | --- |
7+
8+
## Node
9+
10+
Add [PostCSS Focus Visible] to your project:
11+
12+
```bash
13+
npm install postcss-focus-visible --save-dev
14+
```
15+
16+
Use [PostCSS Focus Visible] to process your CSS:
17+
18+
```js
19+
const postcssFocusVisible = require('postcss-focus-visible');
20+
21+
postcssFocusVisible.process(YOUR_CSS /*, processOptions, pluginOptions */);
22+
```
23+
24+
Or use it as a [PostCSS] plugin:
25+
26+
```js
27+
const postcss = require('postcss');
28+
const postcssFocusVisible = require('postcss-focus-visible');
29+
30+
postcss([
31+
postcssFocusVisible(/* pluginOptions */)
32+
]).process(YOUR_CSS /*, processOptions */);
33+
```
34+
35+
## PostCSS CLI
36+
37+
Add [PostCSS CLI] to your project:
38+
39+
```bash
40+
npm install postcss-cli --save-dev
41+
```
42+
43+
Use [PostCSS Focus Visible] in your `postcss.config.js` configuration file:
44+
45+
```js
46+
const postcssFocusVisible = require('postcss-focus-visible');
47+
48+
module.exports = {
49+
plugins: [
50+
postcssFocusVisible(/* pluginOptions */)
51+
]
52+
}
53+
```
54+
55+
## Webpack
56+
57+
Add [PostCSS Loader] to your project:
58+
59+
```bash
60+
npm install postcss-loader --save-dev
61+
```
62+
63+
Use [PostCSS Focus Visible] in your Webpack configuration:
64+
65+
```js
66+
const postcssFocusVisible = require('postcss-focus-visible');
67+
68+
module.exports = {
69+
module: {
70+
rules: [
71+
{
72+
test: /\.css$/,
73+
use: [
74+
'style-loader',
75+
{ loader: 'css-loader', options: { importLoaders: 1 } },
76+
{ loader: 'postcss-loader', options: {
77+
ident: 'postcss',
78+
plugins: () => [
79+
postcssFocusVisible(/* pluginOptions */)
80+
]
81+
} }
82+
]
83+
}
84+
]
85+
}
86+
}
87+
```
88+
89+
## Create React App
90+
91+
Add [React App Rewired] and [React App Rewire PostCSS] to your project:
92+
93+
```bash
94+
npm install react-app-rewired react-app-rewire-postcss --save-dev
95+
```
96+
97+
Use [React App Rewire PostCSS] and [PostCSS Focus Visible] in your
98+
`config-overrides.js` file:
99+
100+
```js
101+
const reactAppRewirePostcss = require('react-app-rewire-postcss');
102+
const postcssFocusVisible = require('postcss-focus-visible');
103+
104+
module.exports = config => reactAppRewirePostcss(config, {
105+
plugins: () => [
106+
postcssFocusVisible(/* pluginOptions */)
107+
]
108+
});
109+
```
110+
111+
## Gulp
112+
113+
Add [Gulp PostCSS] to your project:
114+
115+
```bash
116+
npm install gulp-postcss --save-dev
117+
```
118+
119+
Use [PostCSS Focus Visible] in your Gulpfile:
120+
121+
```js
122+
const postcss = require('gulp-postcss');
123+
const postcssFocusVisible = require('postcss-focus-visible');
124+
125+
gulp.task('css', () => gulp.src('./src/*.css').pipe(
126+
postcss([
127+
postcssFocusVisible(/* pluginOptions */)
128+
])
129+
).pipe(
130+
gulp.dest('.')
131+
));
132+
```
133+
134+
## Grunt
135+
136+
Add [Grunt PostCSS] to your project:
137+
138+
```bash
139+
npm install grunt-postcss --save-dev
140+
```
141+
142+
Use [PostCSS Focus Visible] in your Gruntfile:
143+
144+
```js
145+
const postcssFocusVisible = require('postcss-focus-visible');
146+
147+
grunt.loadNpmTasks('grunt-postcss');
148+
149+
grunt.initConfig({
150+
postcss: {
151+
options: {
152+
use: [
153+
postcssFocusVisible(/* pluginOptions */)
154+
]
155+
},
156+
dist: {
157+
src: '*.css'
158+
}
159+
}
160+
});
161+
```
162+
163+
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
164+
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
165+
[PostCSS]: https://github.com/postcss/postcss
166+
[PostCSS CLI]: https://github.com/postcss/postcss-cli
167+
[PostCSS Loader]: https://github.com/postcss/postcss-loader
168+
[PostCSS Focus Visible]: https://github.com/jonathantneal/postcss-focus-visible
169+
[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
170+
[React App Rewired]: https://github.com/timarney/react-app-rewired

‎plugins/postcss-focus-visible/README.md

+12-103
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
[![NPM Version][npm-img]][npm-url]
44
[![CSS Standard Status][css-img]][css-url]
55
[![Build Status][cli-img]][cli-url]
6-
[![Windows Build Status][win-img]][win-url]
76
[![Support Chat][git-img]][git-url]
87

98
[PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in
@@ -35,124 +34,36 @@ rule can be disabled using the `preserve` option.
3534

3635
## Usage
3736

38-
Add [PostCSS Focus Visible] to your build tool:
37+
Add [PostCSS Focus Visible] to your project:
3938

4039
```bash
4140
npm install postcss-focus-visible --save-dev
4241
```
4342

44-
#### Node
45-
4643
Use [PostCSS Focus Visible] to process your CSS:
4744

4845
```js
49-
import focusVisible from 'postcss-focus-visible';
50-
51-
focusVisible.process(YOUR_CSS);
52-
```
53-
54-
#### PostCSS
46+
const postcssFocusVisible = require('postcss-focus-visible');
5547

56-
Add [PostCSS] to your build tool:
57-
58-
```bash
59-
npm install postcss --save-dev
48+
postcssFocusVisible.process(YOUR_CSS /*, processOptions, pluginOptions */);
6049
```
6150

62-
Use [PostCSS Focus Visible] as a plugin:
51+
Or use it as a [PostCSS] plugin:
6352

6453
```js
65-
import postcss from 'gulp-postcss';
66-
import focusVisible from 'postcss-focus-visible';
54+
const postcss = require('postcss');
55+
const postcssFocusVisible = require('postcss-focus-visible');
6756

6857
postcss([
69-
focusVisible()
70-
]).process(YOUR_CSS);
71-
```
72-
73-
#### Webpack
74-
75-
Add [PostCSS Loader] to your build tool:
76-
77-
```bash
78-
npm install postcss-loader --save-dev
79-
```
80-
81-
Use [PostCSS Focus Visible] in your Gulpfile:
82-
83-
```js
84-
import focusVisible from 'postcss-focus-visible';
85-
86-
module.exports = {
87-
module: {
88-
rules: [
89-
{
90-
test: /\.css$/,
91-
use: [
92-
'style-loader',
93-
{ loader: 'css-loader', options: { importLoaders: 1 } },
94-
{ loader: 'postcss-loader', options: {
95-
ident: 'postcss',
96-
plugins: () => [ focusVisible() ]
97-
} }
98-
]
99-
}
100-
]
101-
}
102-
}
58+
postcssFocusVisible(/* pluginOptions */)
59+
]).process(YOUR_CSS /*, processOptions */);
10360
```
10461

105-
#### Gulp
62+
[PostCSS Focus Visible] runs in all Node environments, with special
63+
instructions for:
10664

107-
Add [Gulp PostCSS] to your build tool:
108-
109-
```bash
110-
npm install gulp-postcss --save-dev
111-
```
112-
113-
Use [PostCSS Focus Visible] in your Gulpfile:
114-
115-
```js
116-
import postcss from 'gulp-postcss';
117-
import focusVisible from 'postcss-focus-visible';
118-
119-
gulp.task('css', () => gulp.src('./src/*.css').pipe(
120-
postcss([
121-
focusVisible()
122-
])
123-
).pipe(
124-
gulp.dest('.')
125-
));
126-
```
127-
128-
#### Grunt
129-
130-
Add [Grunt PostCSS] to your build tool:
131-
132-
```bash
133-
npm install grunt-postcss --save-dev
134-
```
135-
136-
Use [PostCSS Focus Visible] in your Gruntfile:
137-
138-
```js
139-
import focusVisible from 'postcss-focus-visible';
140-
141-
grunt.loadNpmTasks('grunt-postcss');
142-
143-
grunt.initConfig({
144-
postcss: {
145-
options: {
146-
use: [
147-
focusVisible()
148-
]
149-
},
150-
dist: {
151-
src: '*.css'
152-
}
153-
}
154-
});
155-
```
65+
| [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) |
66+
| --- | --- | --- | --- | --- | --- |
15667

15768
## Options
15869

@@ -210,8 +121,6 @@ focusVisible({ replaceWith: '[focus-visible]' });
210121
[git-url]: https://gitter.im/postcss/postcss
211122
[npm-img]: https://img.shields.io/npm/v/postcss-focus-visible.svg
212123
[npm-url]: https://www.npmjs.com/package/postcss-focus-visible
213-
[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-focus-visible.svg
214-
[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-focus-visible
215124

216125
[focus-visible polyfill]: https://github.com/WICG/focus-visible
217126
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss

0 commit comments

Comments
 (0)