css-blank-pseudo : code review

plugins/css-blank-pseudo/INSTALL.md

@@ -1,13 +1,13 @@
-# Installing Blank Pseudo
+# Installing PostCSS Blank Pseudo
 
-[Blank Pseudo] runs in all Node environments, with special instructions for:
+[PostCSS Blank Pseudo] runs in all Node environments, with special instructions for:
 
 | [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
 | --- | --- | --- | --- | --- | --- |
 
 ## Node
 
-Add [Blank Pseudo] to your project:
+Add [PostCSS Blank Pseudo] to your project:
 
 ```bash
 npm install postcss css-blank-pseudo --save-dev
@@ -17,10 +17,10 @@ Use it as a [PostCSS] plugin:
 
 ```js
 const postcss = require('postcss');
-const blankPseudo = require('css-blank-pseudo');
+const postcssBlankPseudo = require('css-blank-pseudo');
 
 postcss([
-	blankPseudo(/* pluginOptions */)
+	postcssBlankPseudo(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
@@ -32,14 +32,14 @@ Add [PostCSS CLI] to your project:
 npm install postcss-cli css-blank-pseudo --save-dev
 ```
 
-Use [Blank Pseudo] in your `postcss.config.js` configuration file:
+Use [PostCSS Blank Pseudo] in your `postcss.config.js` configuration file:
 
 ```js
-const blankPseudo = require('css-blank-pseudo');
+const postcssBlankPseudo = require('css-blank-pseudo');
 
 module.exports = {
 	plugins: [
-		blankPseudo(/* pluginOptions */)
+		postcssBlankPseudo(/* pluginOptions */)
 	]
 }
 ```
@@ -54,7 +54,7 @@ Add [PostCSS Loader] to your project:
 npm install postcss-loader css-blank-pseudo --save-dev
 ```
 
-Use [Blank Pseudo] in your Webpack configuration:
+Use [PostCSS Blank Pseudo] in your Webpack configuration:
 
 ```js
 module.exports = {
@@ -98,16 +98,16 @@ Add [React App Rewired] and [React App Rewire PostCSS] to your project:
 npm install react-app-rewired react-app-rewire-postcss css-blank-pseudo --save-dev
 ```
 
-Use [React App Rewire PostCSS] and [Blank Pseudo] in your
+Use [React App Rewire PostCSS] and [PostCSS Blank Pseudo] in your
 `config-overrides.js` file:
 
 ```js
 const reactAppRewirePostcss = require('react-app-rewire-postcss');
-const blankPseudo = require('css-blank-pseudo');
+const postcssBlankPseudo = require('css-blank-pseudo');
 
 module.exports = config => reactAppRewirePostcss(config, {
 	plugins: () => [
-		blankPseudo(/* pluginOptions */)
+		postcssBlankPseudo(/* pluginOptions */)
 	]
 });
 ```
@@ -120,15 +120,15 @@ Add [Gulp PostCSS] to your project:
 npm install gulp-postcss css-blank-pseudo --save-dev
 ```
 
-Use [Blank Pseudo] in your Gulpfile:
+Use [PostCSS Blank Pseudo] in your Gulpfile:
 
 ```js
 const postcss = require('gulp-postcss');
-const blankPseudo = require('css-blank-pseudo');
+const postcssBlankPseudo = require('css-blank-pseudo');
 
 gulp.task('css', function () {
 	var plugins = [
-		blankPseudo(/* pluginOptions */)
+		postcssBlankPseudo(/* pluginOptions */)
 	];
 
 	return gulp.src('./src/*.css')
@@ -145,18 +145,18 @@ Add [Grunt PostCSS] to your project:
 npm install grunt-postcss css-blank-pseudo --save-dev
 ```
 
-Use [Blank Pseudo] in your Gruntfile:
+Use [PostCSS Blank Pseudo] in your Gruntfile:
 
 ```js
-const blankPseudo = require('css-blank-pseudo');
+const postcssBlankPseudo = require('css-blank-pseudo');
 
 grunt.loadNpmTasks('grunt-postcss');
 
 grunt.initConfig({
 	postcss: {
 		options: {
 			processors: [
-			blankPseudo(/* pluginOptions */)
+			postcssBlankPseudo(/* pluginOptions */)
 			]
 		},
 		dist: {
@@ -171,6 +171,6 @@ grunt.initConfig({
 [PostCSS]: https://github.com/postcss/postcss
 [PostCSS CLI]: https://github.com/postcss/postcss-cli
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
-[Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
+[PostCSS Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
 [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
 [React App Rewired]: https://github.com/timarney/react-app-rewired

plugins/css-blank-pseudo/README.md

@@ -1,104 +1,8 @@
-<!-- Available Variables: -->
-<!-- Blank Pseudo PostCSS Your Plugin -->
-<!-- blankPseudo postcssYourPlugin -->
-<!-- css-blank-pseudo @csstools/postcss-your-plugin -->
-<!-- plugins/css-blank-pseudo plugins/postcss-your-plugin -->
-<!-- blank-pseudo-class your-feature -->
-<!-- https://www.w3.org/TR/selectors-4/#blank https://www.w3.org/TR/css-color-4/#funcdef-color -->
-<!-- input:blank {
-	background-color: yellow;
-} file contents for examples/example.css -->
-<!-- # Blank Pseudo [<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/css-blank-pseudo.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/blank-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] -->
-<!-- ## Usage
-
-Add [Blank Pseudo] to your project:
-
-```bash
-npm install postcss css-blank-pseudo --save-dev
-```
-
-Use it as a [PostCSS] plugin:
-
-```js
-const postcss = require('postcss');
-const blankPseudo = require('css-blank-pseudo');
-
-postcss([
-	blankPseudo(/* pluginOptions */)
-]).process(YOUR_CSS /*, processOptions */);
-``` usage instructions -->
-<!-- [Blank Pseudo] runs in all Node environments, with special
-instructions for:
-
-| [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) |
-| --- | --- | --- | --- | --- | --- | -->
-<!-- ## CORS
-
-⚠️ Applies to you if you load CSS from a different domain than the page.
-
-In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
-The polyfill will not work without applying the correct configuration for CORS.
-
-Example :
-
-| page | css | CORS applies |
-| --- | --- | --- |
-| https://example.com/ | https://example.com/style.css | no |
-| https://example.com/ | https://other.com/style.css | yes |
-
-
-**You might see one of these error messages :**
-
-Chrome :
-
-> DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
-
-Safari :
-
-> SecurityError: Not allowed to access cross-origin stylesheet
-
-Firefox :
-
-> DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
-
-To resolve CORS errors you need to take two steps :
-
-- add an HTTP header `Access-Control-Allow-Origin: <your-value>` when serving your CSS file.
-- add `crossorigin="anonymous"` to the `<link rel="stylesheet">` tag for your CSS file.
-
-In a node server setting the HTTP header might look like this :
-
-```js
-// http://localhost:8080 is the domain of your page!
-res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
-```
-
-You can also configure a wildcard but please be aware that this might be a security risk.
-It is better to only set the header for the domain you want to allow and only on the responses you want to allow.
+# PostCSS Blank Pseudo [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-HTML might look like this :
+[<img alt="npm version" src="https://img.shields.io/npm/v/css-blank-pseudo.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/blank-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]
 
-```html
-<link rel="stylesheet" href="https://example.com/styles.css" crossorigin="anonymous">
-```
- -->
-<!-- [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
-[css-url]: https://cssdb.org/#blank-pseudo-class
-[discord]: https://discord.gg/bUadyRwkJS
-[npm-url]: https://www.npmjs.com/package/css-blank-pseudo
-
-[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
-[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
-[PostCSS]: https://github.com/postcss/postcss
-[PostCSS Loader]: https://github.com/postcss/postcss-loader
-[Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo -->
-<!-- to generate : npm run docs -->
-
-<header>
-
-[Blank Pseudo] lets you style form elements when they are empty, following 
+[PostCSS Blank Pseudo] lets you style form elements when they are empty, following 
 the [Selectors Level 4] specification.
 
 ```pcss
@@ -116,9 +20,30 @@ input:blank {
 }
 ```
 
-<usage>
+## Usage
 
-<envSupport>
+Add [PostCSS Blank Pseudo] to your project:
+
+```bash
+npm install postcss css-blank-pseudo --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssBlankPseudo = require('css-blank-pseudo');
+
+postcss([
+	postcssBlankPseudo(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+[PostCSS Blank Pseudo] runs in all Node environments, with special
+instructions for:
+
+| [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) |
+| --- | --- | --- | --- | --- | --- |
 
 ## Options
 
@@ -128,7 +53,7 @@ The `preserve` option determines whether the original notation
 is preserved. By default, it is preserved.
 
 ```js
-blankPseudo({ preserve: false })
+postcssBlankPseudo({ preserve: false })
 ```
 
 ```pcss
@@ -149,7 +74,7 @@ The `replaceWith` option determines the selector to use when replacing
 the `:blank` pseudo. By default is `[blank]`
 
 ```js
-blankPseudo({ replaceWith: '.css-blank' })
+postcssBlankPseudo({ replaceWith: '.css-blank' })
 ```
 
 ```pcss
@@ -188,7 +113,7 @@ or
 <script>cssBlankPseudoInit()</script>
 ```
 
-[Blank Pseudo] works in all major browsers, including Safari 6+ and
+[PostCSS Blank Pseudo] works in all major browsers, including Safari 6+ and
 Internet Explorer 9+ without any additional polyfills.
 
 This plugin conditionally uses `MutationObserver` to ensure recently inserted 
@@ -225,5 +150,14 @@ cssBlankPseudoInit({ replaceWith: '.css-blank' });
 
 This option should be used if it was changed at PostCSS configuration level.
 
-<linkList>
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#blank-pseudo-class
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-url]: https://www.npmjs.com/package/css-blank-pseudo
+
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Loader]: https://github.com/postcss/postcss-loader
+[PostCSS Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
 [Selectors Level 4]: https://www.w3.org/TR/selectors-4/#blank

plugins/css-blank-pseudo/docs/README.md

@@ -2,6 +2,7 @@
 <!-- <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 -->

plugins/css-blank-pseudo/package.json

@@ -95,8 +95,8 @@
 	],
 	"csstools": {
 		"cssdbId": "blank-pseudo-class",
-		"exportName": "blankPseudo",
-		"humanReadableName": "Blank Pseudo",
+		"exportName": "postcssBlankPseudo",
+		"humanReadableName": "PostCSS Blank Pseudo",
 		"specUrl": "https://www.w3.org/TR/selectors-4/#blank"
 	},
 	"volta": {

plugins/css-blank-pseudo/test/_browser.html

@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title></title>
-	<link rel="help" href=https://www.w3.org/TR/selectors-4/#blank">
+	<link rel="help" href="https://www.w3.org/TR/selectors-4/#blank">
 	<link rel="stylesheet" href="/test/browser.expect.css">
 	<script src="/dist/browser-global.js"></script>
 	<script>self._cssBlankPseudoInit = cssBlankPseudoInit</script>

plugins/css-blank-pseudo/test/_browser.mjs

@@ -1,3 +1,4 @@
+/* global window,requestAnimationFrame */
 import puppeteer from 'puppeteer';
 import http from 'http';
 import { promises as fsp } from 'fs';
@@ -61,7 +62,7 @@ import { promises as fsp } from 'fs';
 			const input = await page.$(selector);
 			await input.click({ clickCount: 3 });
 			await page.keyboard.press('Backspace');
-		}
+		};
 
 		// Default
 		{

plugins/css-blank-pseudo/test/_browser_replace.html

@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title></title>
-	<link rel="help" href=https://www.w3.org/TR/selectors-4/#blank">
+	<link rel="help" href="https://www.w3.org/TR/selectors-4/#blank">
 	<link rel="stylesheet" href="/test/browser.replacewith.expect.css">
 	<script src="/dist/browser-global.js"></script>
 	<script>self._cssBlankPseudoInit = cssBlankPseudoInit</script>

plugins/css-blank-pseudo/test/_valid-replacements.mjs

@@ -4,7 +4,7 @@ import isValidReplacement from '../src/is-valid-replacement.mjs';
 const valid = [
 	'[some-attribute]',
 	'[data-blank]',
-	'.class'
+	'.class',
 ];
 
 const invalid = [