Skip to content

Commit 7aabe28

Browse files
romainmenkeromainmenke
authored
css-blank-pseudo : code review (#501)
1 parent 851e2ea commit 7aabe28

File tree

8 files changed

+66
-130
lines changed

8 files changed

+66
-130
lines changed

‎plugins/css-blank-pseudo/INSTALL.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
# Installing Blank Pseudo
1+
# Installing PostCSS Blank Pseudo
22

3-
[Blank Pseudo] runs in all Node environments, with special instructions for:
3+
[PostCSS Blank Pseudo] runs in all Node environments, with special instructions for:
44

55
| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
66
| --- | --- | --- | --- | --- | --- |
77

88
## Node
99

10-
Add [Blank Pseudo] to your project:
10+
Add [PostCSS Blank Pseudo] to your project:
1111

1212
```bash
1313
npm install postcss css-blank-pseudo --save-dev
@@ -17,10 +17,10 @@ Use it as a [PostCSS] plugin:
1717

1818
```js
1919
const postcss = require('postcss');
20-
const blankPseudo = require('css-blank-pseudo');
20+
const postcssBlankPseudo = require('css-blank-pseudo');
2121

2222
postcss([
23-
blankPseudo(/* pluginOptions */)
23+
postcssBlankPseudo(/* pluginOptions */)
2424
]).process(YOUR_CSS /*, processOptions */);
2525
```
2626

@@ -32,14 +32,14 @@ Add [PostCSS CLI] to your project:
3232
npm install postcss-cli css-blank-pseudo --save-dev
3333
```
3434

35-
Use [Blank Pseudo] in your `postcss.config.js` configuration file:
35+
Use [PostCSS Blank Pseudo] in your `postcss.config.js` configuration file:
3636

3737
```js
38-
const blankPseudo = require('css-blank-pseudo');
38+
const postcssBlankPseudo = require('css-blank-pseudo');
3939

4040
module.exports = {
4141
plugins: [
42-
blankPseudo(/* pluginOptions */)
42+
postcssBlankPseudo(/* pluginOptions */)
4343
]
4444
}
4545
```
@@ -54,7 +54,7 @@ Add [PostCSS Loader] to your project:
5454
npm install postcss-loader css-blank-pseudo --save-dev
5555
```
5656

57-
Use [Blank Pseudo] in your Webpack configuration:
57+
Use [PostCSS Blank Pseudo] in your Webpack configuration:
5858

5959
```js
6060
module.exports = {
@@ -98,16 +98,16 @@ Add [React App Rewired] and [React App Rewire PostCSS] to your project:
9898
npm install react-app-rewired react-app-rewire-postcss css-blank-pseudo --save-dev
9999
```
100100

101-
Use [React App Rewire PostCSS] and [Blank Pseudo] in your
101+
Use [React App Rewire PostCSS] and [PostCSS Blank Pseudo] in your
102102
`config-overrides.js` file:
103103

104104
```js
105105
const reactAppRewirePostcss = require('react-app-rewire-postcss');
106-
const blankPseudo = require('css-blank-pseudo');
106+
const postcssBlankPseudo = require('css-blank-pseudo');
107107

108108
module.exports = config => reactAppRewirePostcss(config, {
109109
plugins: () => [
110-
blankPseudo(/* pluginOptions */)
110+
postcssBlankPseudo(/* pluginOptions */)
111111
]
112112
});
113113
```
@@ -120,15 +120,15 @@ Add [Gulp PostCSS] to your project:
120120
npm install gulp-postcss css-blank-pseudo --save-dev
121121
```
122122

123-
Use [Blank Pseudo] in your Gulpfile:
123+
Use [PostCSS Blank Pseudo] in your Gulpfile:
124124

125125
```js
126126
const postcss = require('gulp-postcss');
127-
const blankPseudo = require('css-blank-pseudo');
127+
const postcssBlankPseudo = require('css-blank-pseudo');
128128

129129
gulp.task('css', function () {
130130
var plugins = [
131-
blankPseudo(/* pluginOptions */)
131+
postcssBlankPseudo(/* pluginOptions */)
132132
];
133133

134134
return gulp.src('./src/*.css')
@@ -145,18 +145,18 @@ Add [Grunt PostCSS] to your project:
145145
npm install grunt-postcss css-blank-pseudo --save-dev
146146
```
147147

148-
Use [Blank Pseudo] in your Gruntfile:
148+
Use [PostCSS Blank Pseudo] in your Gruntfile:
149149

150150
```js
151-
const blankPseudo = require('css-blank-pseudo');
151+
const postcssBlankPseudo = require('css-blank-pseudo');
152152

153153
grunt.loadNpmTasks('grunt-postcss');
154154

155155
grunt.initConfig({
156156
postcss: {
157157
options: {
158158
processors: [
159-
blankPseudo(/* pluginOptions */)
159+
postcssBlankPseudo(/* pluginOptions */)
160160
]
161161
},
162162
dist: {
@@ -171,6 +171,6 @@ grunt.initConfig({
171171
[PostCSS]: https://github.com/postcss/postcss
172172
[PostCSS CLI]: https://github.com/postcss/postcss-cli
173173
[PostCSS Loader]: https://github.com/postcss/postcss-loader
174-
[Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
174+
[PostCSS Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
175175
[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
176176
[React App Rewired]: https://github.com/timarney/react-app-rewired

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

Lines changed: 39 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,8 @@
1-
<!-- Available Variables: -->
2-
<!-- Blank Pseudo PostCSS Your Plugin -->
3-
<!-- blankPseudo postcssYourPlugin -->
4-
<!-- css-blank-pseudo @csstools/postcss-your-plugin -->
5-
<!-- plugins/css-blank-pseudo plugins/postcss-your-plugin -->
6-
<!-- blank-pseudo-class your-feature -->
7-
<!-- https://www.w3.org/TR/selectors-4/#blank https://www.w3.org/TR/css-color-4/#funcdef-color -->
8-
<!-- input:blank {
9-
background-color: yellow;
10-
} file contents for examples/example.css -->
11-
<!-- # Blank Pseudo [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
12-
13-
[<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] -->
14-
<!-- ## Usage
15-
16-
Add [Blank Pseudo] to your project:
17-
18-
```bash
19-
npm install postcss css-blank-pseudo --save-dev
20-
```
21-
22-
Use it as a [PostCSS] plugin:
23-
24-
```js
25-
const postcss = require('postcss');
26-
const blankPseudo = require('css-blank-pseudo');
27-
28-
postcss([
29-
blankPseudo(/* pluginOptions */)
30-
]).process(YOUR_CSS /*, processOptions */);
31-
``` usage instructions -->
32-
<!-- [Blank Pseudo] runs in all Node environments, with special
33-
instructions for:
34-
35-
| [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) |
36-
| --- | --- | --- | --- | --- | --- | -->
37-
<!-- ## CORS
38-
39-
⚠️ Applies to you if you load CSS from a different domain than the page.
40-
41-
In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
42-
The polyfill will not work without applying the correct configuration for CORS.
43-
44-
Example :
45-
46-
| page | css | CORS applies |
47-
| --- | --- | --- |
48-
| https://example.com/ | https://example.com/style.css | no |
49-
| https://example.com/ | https://other.com/style.css | yes |
50-
51-
52-
**You might see one of these error messages :**
53-
54-
Chrome :
55-
56-
> DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
57-
58-
Safari :
59-
60-
> SecurityError: Not allowed to access cross-origin stylesheet
61-
62-
Firefox :
63-
64-
> DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
65-
66-
To resolve CORS errors you need to take two steps :
67-
68-
- add an HTTP header `Access-Control-Allow-Origin: <your-value>` when serving your CSS file.
69-
- add `crossorigin="anonymous"` to the `<link rel="stylesheet">` tag for your CSS file.
70-
71-
In a node server setting the HTTP header might look like this :
72-
73-
```js
74-
// http://localhost:8080 is the domain of your page!
75-
res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
76-
```
77-
78-
You can also configure a wildcard but please be aware that this might be a security risk.
79-
It is better to only set the header for the domain you want to allow and only on the responses you want to allow.
1+
# PostCSS Blank Pseudo [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
802

81-
HTML might look like this :
3+
[<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]
824

83-
```html
84-
<link rel="stylesheet" href="https://example.com/styles.css" crossorigin="anonymous">
85-
```
86-
-->
87-
<!-- [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
88-
[css-url]: https://cssdb.org/#blank-pseudo-class
89-
[discord]: https://discord.gg/bUadyRwkJS
90-
[npm-url]: https://www.npmjs.com/package/css-blank-pseudo
91-
92-
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
93-
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
94-
[PostCSS]: https://github.com/postcss/postcss
95-
[PostCSS Loader]: https://github.com/postcss/postcss-loader
96-
[Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo -->
97-
<!-- to generate : npm run docs -->
98-
99-
<header>
100-
101-
[Blank Pseudo] lets you style form elements when they are empty, following
5+
[PostCSS Blank Pseudo] lets you style form elements when they are empty, following
1026
the [Selectors Level 4] specification.
1037

1048
```pcss
@@ -116,9 +20,30 @@ input:blank {
11620
}
11721
```
11822

119-
<usage>
23+
## Usage
12024

121-
<envSupport>
25+
Add [PostCSS Blank Pseudo] to your project:
26+
27+
```bash
28+
npm install postcss css-blank-pseudo --save-dev
29+
```
30+
31+
Use it as a [PostCSS] plugin:
32+
33+
```js
34+
const postcss = require('postcss');
35+
const postcssBlankPseudo = require('css-blank-pseudo');
36+
37+
postcss([
38+
postcssBlankPseudo(/* pluginOptions */)
39+
]).process(YOUR_CSS /*, processOptions */);
40+
```
41+
42+
[PostCSS Blank Pseudo] runs in all Node environments, with special
43+
instructions for:
44+
45+
| [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) |
46+
| --- | --- | --- | --- | --- | --- |
12247

12348
## Options
12449

@@ -128,7 +53,7 @@ The `preserve` option determines whether the original notation
12853
is preserved. By default, it is preserved.
12954

13055
```js
131-
blankPseudo({ preserve: false })
56+
postcssBlankPseudo({ preserve: false })
13257
```
13358

13459
```pcss
@@ -149,7 +74,7 @@ The `replaceWith` option determines the selector to use when replacing
14974
the `:blank` pseudo. By default is `[blank]`
15075

15176
```js
152-
blankPseudo({ replaceWith: '.css-blank' })
77+
postcssBlankPseudo({ replaceWith: '.css-blank' })
15378
```
15479

15580
```pcss
@@ -188,7 +113,7 @@ or
188113
<script>cssBlankPseudoInit()</script>
189114
```
190115

191-
[Blank Pseudo] works in all major browsers, including Safari 6+ and
116+
[PostCSS Blank Pseudo] works in all major browsers, including Safari 6+ and
192117
Internet Explorer 9+ without any additional polyfills.
193118

194119
This plugin conditionally uses `MutationObserver` to ensure recently inserted
@@ -225,5 +150,14 @@ cssBlankPseudoInit({ replaceWith: '.css-blank' });
225150

226151
This option should be used if it was changed at PostCSS configuration level.
227152

228-
<linkList>
153+
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
154+
[css-url]: https://cssdb.org/#blank-pseudo-class
155+
[discord]: https://discord.gg/bUadyRwkJS
156+
[npm-url]: https://www.npmjs.com/package/css-blank-pseudo
157+
158+
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
159+
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
160+
[PostCSS]: https://github.com/postcss/postcss
161+
[PostCSS Loader]: https://github.com/postcss/postcss-loader
162+
[PostCSS Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
229163
[Selectors Level 4]: https://www.w3.org/TR/selectors-4/#blank

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<!-- <humanReadableName> PostCSS Your Plugin -->
33
<!-- <exportName> postcssYourPlugin -->
44
<!-- <packageName> @csstools/postcss-your-plugin -->
5+
<!-- <packageVersion> 1.0.0 -->
56
<!-- <packagePath> plugins/postcss-your-plugin -->
67
<!-- <cssdbId> your-feature -->
78
<!-- <specUrl> https://www.w3.org/TR/css-color-4/#funcdef-color -->

‎plugins/css-blank-pseudo/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@
9595
],
9696
"csstools": {
9797
"cssdbId": "blank-pseudo-class",
98-
"exportName": "blankPseudo",
99-
"humanReadableName": "Blank Pseudo",
98+
"exportName": "postcssBlankPseudo",
99+
"humanReadableName": "PostCSS Blank Pseudo",
100100
"specUrl": "https://www.w3.org/TR/selectors-4/#blank"
101101
},
102102
"volta": {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title></title>
6-
<link rel="help" href=https://www.w3.org/TR/selectors-4/#blank">
6+
<link rel="help" href="https://www.w3.org/TR/selectors-4/#blank">
77
<link rel="stylesheet" href="/test/browser.expect.css">
88
<script src="/dist/browser-global.js"></script>
99
<script>self._cssBlankPseudoInit = cssBlankPseudoInit</script>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global window,requestAnimationFrame */
12
import puppeteer from 'puppeteer';
23
import http from 'http';
34
import { promises as fsp } from 'fs';
@@ -61,7 +62,7 @@ import { promises as fsp } from 'fs';
6162
const input = await page.$(selector);
6263
await input.click({ clickCount: 3 });
6364
await page.keyboard.press('Backspace');
64-
}
65+
};
6566

6667
// Default
6768
{

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title></title>
6-
<link rel="help" href=https://www.w3.org/TR/selectors-4/#blank">
6+
<link rel="help" href="https://www.w3.org/TR/selectors-4/#blank">
77
<link rel="stylesheet" href="/test/browser.replacewith.expect.css">
88
<script src="/dist/browser-global.js"></script>
99
<script>self._cssBlankPseudoInit = cssBlankPseudoInit</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import isValidReplacement from '../src/is-valid-replacement.mjs';
44
const valid = [
55
'[some-attribute]',
66
'[data-blank]',
7-
'.class'
7+
'.class',
88
];
99

1010
const invalid = [

0 commit comments

Comments
 (0)