Skip to content

Updating Focus Visible #513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 1, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion plugins/css-blank-pseudo/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { PluginCreator } from 'postcss';
import parser from 'postcss-selector-parser';
import isValidReplacement from './is-valid-replacement.mjs';

type pluginOptions = { color?: string, preserve?: boolean };
type pluginOptions = { preserve?: boolean, replaceWith?: string };
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realised this was a leftover which would have exported the wrong types, this hasn't been published yet so it's not a big concern


const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
const options = Object.assign(
Expand Down
8 changes: 1 addition & 7 deletions plugins/postcss-focus-visible/.gitignore
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
node_modules
dist
package-lock.json
yarn.lock
*.log*
*.result.css
*.result.css.map
!.editorconfig
!.gitignore
!.rollup.js
!.tape.js
!.travis.yml
dist/*
20 changes: 19 additions & 1 deletion plugins/postcss-focus-visible/.tape.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ postcssTape(plugin)({
'basic:replacewith': {
message: 'supports { replaceWith: "[focus-visible]" } usage',
options: {
replaceWith: '[focus-visible]'
replaceWith: '[data-focus-visible-added]'
}
},
'basic:preserve': {
Expand All @@ -24,4 +24,22 @@ postcssTape(plugin)({
preserve: false
}
},
'browser': {
message: 'css for browser tests',
},
'examples/example': {
message: 'minimal example',
},
'examples/example:preserve-false': {
message: 'minimal example',
options: {
preserve: false
}
},
'examples/example:replacewith': {
message: 'minimal example',
options: {
replaceWith: '[focus-visible]'
}
},
});
83 changes: 40 additions & 43 deletions plugins/postcss-focus-visible/README.md
Original file line number Diff line number Diff line change
@@ -1,63 +1,50 @@
# PostCSS Focus Visible [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]

[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-focus-visible.svg" height="20">][npm-url]
[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/focus-within-pseudo-class.svg" height="20">][css-url]
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-focus-visible.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/focus-visible-pseudo-class.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]

[PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in
CSS, following the [Selectors Level 4 specification].
[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].
It is the companion to the [focus-visible polyfill]. Note that this plugin
alone **is not** sufficient to polyfill for `:focus-visible` and that you need
the browser's polyfill as well.

[!['Can I use' table](https://caniuse.bitsofco.de/image/css-focus-visible.png)](https://caniuse.com/#feat=css-focus-visible)

```css

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

/* becomes */

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

:focus:not(:focus-visible) {
outline: none;
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.
[focus-visible polyfill].

## Usage

Add [PostCSS Focus Visible] to your project:

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

Use [PostCSS Focus Visible] to process your CSS:

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

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

Or use it as a [PostCSS] plugin:
Use it as a [PostCSS] plugin:

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

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

Expand All @@ -71,22 +58,27 @@ instructions for:

### preserve

The `preserve` option defines whether the original selector should remain. By
default, the original selector is preserved.
The `preserve` option determines whether the original notation
is preserved. By default, it is not preserved.

```js
focusVisible({ preserve: false });
postcssFocusVisible({ preserve: true })
```

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

/* becomes */

:focus:not(.focus-visible) {
outline: none;
.foo {
color: blue;
color: red;
}

.baz {
color: green;
}
```

Expand All @@ -96,34 +88,39 @@ The `replaceWith` option defines the selector to replace `:focus-visible`. By
default, the replacement selector is `.focus-visible`.

```js
focusVisible({ replaceWith: '[focus-visible]' });
postcssFocusVisible({ replaceWith: '.css-blank' })
```

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

/* becomes */

:focus:not([focus-visible]) {
outline: none;
.foo {
color: blue;
color: red;
}

:focus:not(:focus-visible) {
outline: none;
.baz {
color: green;
}
```

Note that if you want to keep using [focus-visible polyfill], the only
acceptable value would be `[data-focus-visible-addeddata-focus-visible-added]`,
given that the polyfill does not support arbitrary values.

[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[css-url]: https://cssdb.org/#focus-visible-pseudo-class
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/postcss-focus-visible

[focus-visible polyfill]: https://github.com/WICG/focus-visible
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Focus Visible]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible
[PostCSS Loader]: https://github.com/postcss/postcss-loader
[PostCSS Focus Visible]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible
[Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
[focus-visible polyfill]: https://github.com/WICG/focus-visible
88 changes: 88 additions & 0 deletions plugins/postcss-focus-visible/docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!-- Available Variables: -->
<!-- <humanReadableName> PostCSS Your Plugin -->
<!-- <exportName> postcssYourPlugin -->
<!-- <packageName> @csstools/postcss-your-plugin -->
<!-- <packageVersion> 1.0.0 -->
<!-- <packagePath> plugins/postcss-your-plugin -->
<!-- <cssdbId> your-feature -->
<!-- <specUrl> https://www.w3.org/TR/css-color-4/#funcdef-color -->
<!-- <example.css> file contents for examples/example.css -->
<!-- <header> -->
<!-- <usage> usage instructions -->
<!-- <envSupport> -->
<!-- <corsWarning> -->
<!-- <linkList> -->
<!-- to generate : npm run docs -->

<header>

[<humanReadableName>] 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]. Note that this plugin
alone **is not** sufficient to polyfill for `:focus-visible` and that you need
the browser's polyfill as well.

[!['Can I use' table](https://caniuse.bitsofco.de/image/css-focus-visible.png)](https://caniuse.com/#feat=css-focus-visible)

```css

```pcss
<example.css>

/* becomes */

<example.expect.css>
```

[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].

<usage>

<envSupport>

## Options

### preserve

The `preserve` option determines whether the original notation
is preserved. By default, it is not preserved.

```js
<exportName>({ preserve: true })
```

```pcss
<example.css>

/* becomes */

<example.preserve-true.expect.css>
```

### replaceWith

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

```js
<exportName>({ replaceWith: '[data-focus-visible-added]' })
```

```pcss
<example.css>

/* becomes */

<example.preserve-true.expect.css>
```

Note that if you want to keep using [focus-visible polyfill], the only
acceptable value would be `[data-focus-visible-added]`,
given that the polyfill does not support arbitrary values.

<linkList>
[Selectors Level 4 specification]: <specUrl>
[focus-visible polyfill]: https://github.com/WICG/focus-visible
22 changes: 19 additions & 3 deletions plugins/postcss-focus-visible/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,17 @@
"name": "postcss-focus-visible",
"description": "Use the :focus-visible pseudo-selector in CSS",
"version": "6.0.4",
"author": "Jonathan Neal <[email protected]>",
"contributors": [
{
"name": "Antonio Laguna",
"email": "[email protected]",
"url": "https://antonio.laguna.es"
},
{
"name": "Romain Menke",
"email": "[email protected]"
}
],
"license": "CC0-1.0",
"funding": {
"type": "opencollective",
Expand Down Expand Up @@ -33,15 +43,19 @@
"peerDependencies": {
"postcss": "^8.2"
},
"devDependencies": {
"puppeteer": "^15.1.1"
},
"scripts": {
"build": "rollup -c ../../rollup/default.js",
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
"docs": "node ../../.github/bin/generate-docs/install.mjs",
"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
"lint": "npm run lint:eslint && npm run lint:package-json",
"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
"prepublishOnly": "npm run clean && npm run build && npm run test",
"test": "node .tape.mjs && npm run test:exports",
"test:browser": "node ./test/_browser.mjs",
"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
},
Expand Down Expand Up @@ -80,8 +94,10 @@
"trackpad"
],
"csstools": {
"cssdbId": "focus-visible-pseudo-class",
"exportName": "postcssFocusVisible",
"humanReadableName": "PostCSS Focus Visible"
"humanReadableName": "PostCSS Focus Visible",
"specUrl": "https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo"
},
"volta": {
"extends": "../../package.json"
Expand Down
Loading