Skip to content

Commit 658e036

Browse files
romainmenkeAntonio-Laguna
romainmenke
and
Antonio-Laguna
authored
add : disablePolyfillReadyClass (#558)
* add : disablePolyfillReadyClass * Apply suggestions from code review Co-authored-by: Antonio Laguna <[email protected]> Co-authored-by: Antonio Laguna <[email protected]>
1 parent 2b27d1f commit 658e036

23 files changed

+571
-16
lines changed

‎plugins/css-blank-pseudo/.tape.mjs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ postcssTape(plugin)({
2424
replaceWith: '#css-blank'
2525
}
2626
},
27+
'basic:disable-polyfill-ready-class': {
28+
message: 'supports { disablePolyfillReadyClass: true } usage',
29+
options: {
30+
disablePolyfillReadyClass: true
31+
}
32+
},
2733
'examples/example': {
2834
message: 'minimal example',
2935
},
@@ -39,6 +45,12 @@ postcssTape(plugin)({
3945
replaceWith: '.css-blank'
4046
}
4147
},
48+
'examples/example:disable-polyfill-ready-class': {
49+
message: 'minimal example',
50+
options: {
51+
disablePolyfillReadyClass: true
52+
}
53+
},
4254
'browser': {
4355
message: 'css for browser tests',
4456
},

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to CSS Blank Pseudo
22

3+
### Unreleased
4+
5+
- Added: `disablePolyfillReadyClass` plugin option to prevent `.js-blank-pseudo` from being added.
6+
37
### 4.0.0 (July 8, 2022)
48

59
- Updated: The polyfill now only attaches a single listener to the body so it's

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,33 @@ input:blank {
9797
Note that changing this option implies that it needs to be passed to the
9898
browser polyfill as well.
9999

100+
### disablePolyfillReadyClass
101+
102+
The `disablePolyfillReadyClass` option determines if selectors are prefixed with an indicator class.
103+
This class is only set on your document if the polyfill loads and is needed.
104+
105+
By default this option is `false`.
106+
Set this to `true` to prevent the class from being added.
107+
108+
```js
109+
postcssBlankPseudo({ disablePolyfillReadyClass: true })
110+
```
111+
112+
```pcss
113+
input:blank {
114+
background-color: yellow;
115+
}
116+
117+
/* becomes */
118+
119+
input[blank], input[blank] {
120+
background-color: yellow;
121+
}
122+
input:blank {
123+
background-color: yellow;
124+
}
125+
```
126+
100127
## Browser
101128

102129
```js
@@ -109,7 +136,7 @@ or
109136

110137
```html
111138
<!-- When using a CDN url you will have to manually update the version number -->
112-
<script src="https://unpkg.com/css-blank-pseudo@3.0.3/dist/browser-global.js"></script>
139+
<script src="https://unpkg.com/css-blank-pseudo@4.0.0/dist/browser-global.js"></script>
113140
<script>cssBlankPseudoInit()</script>
114141
```
115142

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,26 @@ the `:blank` pseudo. By default is `[blank]`
7070
Note that changing this option implies that it needs to be passed to the
7171
browser polyfill as well.
7272

73+
### disablePolyfillReadyClass
74+
75+
The `disablePolyfillReadyClass` option determines if selectors are prefixed with an indicator class.
76+
This class is only set on your document if the polyfill loads and is needed.
77+
78+
By default this option is `false`.
79+
Set this to `true` to prevent the class from being added.
80+
81+
```js
82+
<exportName>({ disablePolyfillReadyClass: true })
83+
```
84+
85+
```pcss
86+
<example.css>
87+
88+
/* becomes */
89+
90+
<example.disable-polyfill-ready-class.expect.css>
91+
```
92+
7393
## Browser
7494

7595
```js

‎plugins/css-blank-pseudo/src/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { PluginCreator } from 'postcss';
22
import parser from 'postcss-selector-parser';
33
import isValidReplacement from './is-valid-replacement.mjs';
44

5-
type pluginOptions = { preserve?: boolean, replaceWith?: string };
5+
type pluginOptions = { preserve?: boolean, replaceWith?: string, disablePolyfillReadyClass?: boolean };
66

77
const POLYFILL_READY_CLASSNAME = 'js-blank-pseudo';
88
const PSEUDO = ':blank';
@@ -13,6 +13,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
1313
{
1414
preserve: true,
1515
replaceWith: '[blank]',
16+
disablePolyfillReadyClass: false,
1617
},
1718
// Provided options
1819
opts,
@@ -80,7 +81,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
8081
// becomes:
8182
// html.js-blank-pseudo > .foo:focus-within,
8283
// .js-blank-pseudo html > .foo:focus-within
83-
{
84+
if (!options.disablePolyfillReadyClass) {
8485
if (selectorAST.nodes?.[0]?.nodes?.length) {
8586
for (let i = 0; i < selectorAST.nodes[0].nodes.length; i++) {
8687
const node = selectorAST.nodes[0].nodes[i];

‎plugins/css-blank-pseudo/test/basic.disable-polyfill-ready-class.expect.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
[blank], [blank] {
2+
order: 1;
3+
}
4+
5+
:blank {
6+
order: 1;
7+
}
8+
9+
[blank],
10+
[blank],
11+
[blank] test,
12+
[blank] test,
13+
test [blank],
14+
test [blank],
15+
test test[blank],
16+
test test[blank],
17+
test [blank] test,
18+
test [blank] test,
19+
test test[blank] test,
20+
test test[blank] test,
21+
test [blank] [blank] test,
22+
test [blank] [blank] test,
23+
test :matches([blank]) test,
24+
test :matches([blank]) test,
25+
test :matches([blank] test) test,
26+
test :matches([blank] test) test,
27+
test :matches(test [blank]) test,
28+
test :matches(test [blank]) test,
29+
test :matches(test test[blank]) test,
30+
test :matches(test test[blank]) test,
31+
test :matches(test [blank] test) test,
32+
test :matches(test [blank] test) test,
33+
test :matches(test test[blank] test) test,
34+
test :matches(test test[blank] test) test,
35+
test :matches(test [blank] [blank] test) test,
36+
test :matches(test [blank] [blank] test) test {
37+
order: 2;
38+
}
39+
40+
:blank,
41+
:blank test,
42+
test :blank,
43+
test test:blank,
44+
test :blank test,
45+
test test:blank test,
46+
test :blank :blank test,
47+
test :matches(:blank) test,
48+
test :matches(:blank test) test,
49+
test :matches(test :blank) test,
50+
test :matches(test test:blank) test,
51+
test :matches(test :blank test) test,
52+
test :matches(test test:blank test) test,
53+
test :matches(test :blank :blank test) test {
54+
order: 2;
55+
}
56+
57+
:ignore-blank,
58+
:blank-ignore,
59+
:ignoreblank,
60+
:blankignore {
61+
order: 3;
62+
}
63+
64+
:blank(ignore) {
65+
order: 4;
66+
}
67+
68+
test:not([blank]), test:not([blank]) {
69+
order: 5;
70+
}
71+
72+
test:not(:blank) {
73+
order: 5;
74+
}
75+
76+
uppercase [blank], uppercase [blank] {
77+
order: 6;
78+
}
79+
80+
uppercase :BLaNK {
81+
order: 6;
82+
}

‎plugins/css-blank-pseudo/test/examples/example.disable-polyfill-ready-class.expect.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
input[blank], input[blank] {
2+
background-color: yellow;
3+
}
4+
input:blank {
5+
background-color: yellow;
6+
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
1212
/* becomes */
1313
14-
[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
14+
.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
1515
margin-bottom: 1.5rem;
1616
}
1717
.title:has(+ p) {
@@ -62,7 +62,7 @@ postcssHasPseudo({ preserve: false })
6262
6363
/* becomes */
6464
65-
[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
65+
.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
6666
margin-bottom: 1.5rem;
6767
}
6868
```
@@ -143,11 +143,11 @@ or
143143

144144
```html
145145
<!-- When using a CDN url you will have to manually update the version number -->
146-
<script src="https://unpkg.com/css-has-pseudo@3.0.4/dist/browser-global.js"></script>
146+
<script src="https://unpkg.com/css-has-pseudo@4.0.0/dist/browser-global.js"></script>
147147
<script>cssHasPseudo(document)</script>
148148
```
149149

150-
⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@3.0.4/dist/browser-global.js`
150+
⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@4.0.0/dist/browser-global.js`
151151
Without the version, you might unexpectedly get a new major version of the library with breaking changes.
152152

153153
[PostCSS Has Pseudo] works in all major browsers, including
@@ -277,7 +277,7 @@ replacing them with an alternative `[csstools-has-]` selector.
277277
278278
/* becomes */
279279
280-
[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
280+
.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
281281
margin-bottom: 1.5rem;
282282
}
283283
.title:has(+ p) {

‎plugins/css-prefers-color-scheme/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,11 +133,11 @@ or
133133

134134
```html
135135
<!-- When using a CDN url you will have to manually update the version number -->
136-
<script src="https://unpkg.com/css-prefers-color-scheme@6.0.3/dist/browser-global.js"></script>
136+
<script src="https://unpkg.com/css-prefers-color-scheme@7.0.0/dist/browser-global.js"></script>
137137
<script>prefersColorSchemeInit()</script>
138138
```
139139

140-
⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@6.0.3/dist/browser-global.js`
140+
⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@7.0.0/dist/browser-global.js`
141141
Without the version, you might unexpectedly get a new major version of the library with breaking changes.
142142

143143
[Prefers Color Scheme] works in all major browsers, including Safari 6+ and
@@ -211,7 +211,7 @@ const prefersColorScheme = prefersColorSchemeInit('light', { debug: true });
211211
```
212212

213213
```html
214-
<script src="https://unpkg.com/css-prefers-color-scheme@6.0.3/dist/browser-global.js"></script>
214+
<script src="https://unpkg.com/css-prefers-color-scheme@7.0.0/dist/browser-global.js"></script>
215215
<script>prefersColorSchemeInit('light', { debug: true })</script>
216216
```
217217

‎plugins/postcss-focus-visible/.tape.mjs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ postcssTape(plugin)({
1111
replaceWith: '[data-focus-visible-added]'
1212
}
1313
},
14+
'basic:disable-polyfill-ready-class': {
15+
message: 'supports { disablePolyfillReadyClass: true } usage',
16+
options: {
17+
disablePolyfillReadyClass: true
18+
}
19+
},
1420
'basic:preserve': {
1521
message: 'supports { preserve: false } usage',
1622
options: {
@@ -42,4 +48,10 @@ postcssTape(plugin)({
4248
replaceWith: '[focus-visible]'
4349
}
4450
},
51+
'examples/example:disable-polyfill-ready-class': {
52+
message: 'minimal example',
53+
options: {
54+
disablePolyfillReadyClass: true
55+
}
56+
},
4557
});

0 commit comments

Comments
 (0)