diff --git a/plugins/css-blank-pseudo/INSTALL.md b/plugins/css-blank-pseudo/INSTALL.md index ebd68c169..1cc2e5d88 100644 --- a/plugins/css-blank-pseudo/INSTALL.md +++ b/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,10 +145,10 @@ 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'); @@ -156,7 +156,7 @@ 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 diff --git a/plugins/css-blank-pseudo/README.md b/plugins/css-blank-pseudo/README.md index ab8ccb475..4179bd424 100644 --- a/plugins/css-blank-pseudo/README.md +++ b/plugins/css-blank-pseudo/README.md @@ -1,104 +1,8 @@ - - - - - - - - - - - - - - - -
- -[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 - +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 ``` -[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. - +[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 diff --git a/plugins/css-blank-pseudo/docs/README.md b/plugins/css-blank-pseudo/docs/README.md index 3fd3d9aed..fbd96f626 100644 --- a/plugins/css-blank-pseudo/docs/README.md +++ b/plugins/css-blank-pseudo/docs/README.md @@ -2,6 +2,7 @@ + diff --git a/plugins/css-blank-pseudo/package.json b/plugins/css-blank-pseudo/package.json index 26deb9dc2..b62161050 100644 --- a/plugins/css-blank-pseudo/package.json +++ b/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": { diff --git a/plugins/css-blank-pseudo/test/_browser.html b/plugins/css-blank-pseudo/test/_browser.html index 2e607e51b..b81a0a58e 100644 --- a/plugins/css-blank-pseudo/test/_browser.html +++ b/plugins/css-blank-pseudo/test/_browser.html @@ -3,7 +3,7 @@ - + diff --git a/plugins/css-blank-pseudo/test/_browser.mjs b/plugins/css-blank-pseudo/test/_browser.mjs index 781bb123b..b8fc7dad4 100644 --- a/plugins/css-blank-pseudo/test/_browser.mjs +++ b/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 { diff --git a/plugins/css-blank-pseudo/test/_browser_replace.html b/plugins/css-blank-pseudo/test/_browser_replace.html index ee8e42a0d..07d8fb633 100644 --- a/plugins/css-blank-pseudo/test/_browser_replace.html +++ b/plugins/css-blank-pseudo/test/_browser_replace.html @@ -3,7 +3,7 @@ - + diff --git a/plugins/css-blank-pseudo/test/_valid-replacements.mjs b/plugins/css-blank-pseudo/test/_valid-replacements.mjs index a83567da8..bcc4d294d 100644 --- a/plugins/css-blank-pseudo/test/_valid-replacements.mjs +++ b/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 = [