Skip to content

Commit 8c6e68f

Browse files
authored
fix : css-has-pseudo (#101)
* fix : css-has-pseudo * wip * wip * wip * simplify the css encoder * more fixes * more fixes * better hover * wip browser tests * wip browser tests * wip browser tests * wip browser tests * wip browser tests * cleanup * more tests and fixes * fix * fix * cleanup * wip * move to experimental * labeler * cleanup * fix * fix * docs * docs * docs * cleanup * more docs and option to force the browser polyfill * more docs * more docs * observe javascript setters * cleanup
1 parent 773d0cb commit 8c6e68f

36 files changed

+5667
-3
lines changed

.github/labeler.yml

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,96 +10,130 @@
1010
- cli/csstools-cli/**
1111
- packages/base-cli/**
1212

13+
"experimental":
14+
- experimental/**
15+
1316
"plugins/css-all-property":
1417
- plugins/css-all-property/**
18+
- experimental/css-all-property/**
1519

1620
"plugins/css-blank-pseudo":
1721
- plugins/css-blank-pseudo/**
22+
- experimental/css-blank-pseudo/**
1823

1924
"plugins/css-has-pseudo":
2025
- plugins/css-has-pseudo/**
26+
- experimental/css-has-pseudo/**
2127

2228
"plugins/css-prefers-color-scheme":
2329
- plugins/css-prefers-color-scheme/**
30+
- experimental/css-prefers-color-scheme/**
2431

2532
"plugins/postcss-attribute-case-insensitive":
2633
- plugins/postcss-attribute-case-insensitive/**
34+
- experimental/postcss-attribute-case-insensitive/**
2735

2836
"plugins/postcss-color-functional-notation":
2937
- plugins/postcss-color-functional-notation/**
38+
- experimental/postcss-color-functional-notation/**
3039

3140
"plugins/postcss-color-hex-alpha":
3241
- plugins/postcss-color-hex-alpha/**
42+
- experimental/postcss-color-hex-alpha/**
3343

3444
"plugins/postcss-color-mod-function":
3545
- plugins/postcss-color-mod-function/**
46+
- experimental/postcss-color-mod-function/**
3647

3748
"plugins/postcss-custom-media-queries":
3849
- plugins/postcss-custom-media-queries/**
50+
- experimental/postcss-custom-media-queries/**
3951

4052
"plugins/postcss-custom-properties":
4153
- plugins/postcss-custom-properties/**
54+
- experimental/postcss-custom-properties/**
4255

4356
"plugins/postcss-custom-selectors":
4457
- plugins/postcss-custom-selectors/**
58+
- experimental/postcss-custom-selectors/**
4559

4660
"plugins/postcss-dir-pseudo-class":
4761
- plugins/postcss-dir-pseudo-class/**
62+
- experimental/postcss-dir-pseudo-class/**
4863

4964
"plugins/postcss-double-position-gradients":
5065
- plugins/postcss-double-position-gradients/**
66+
- experimental/postcss-double-position-gradients/**
5167

5268
"plugins/postcss-env-function":
5369
- plugins/postcss-env-function/**
70+
- experimental/postcss-env-function/**
5471

5572
"plugins/postcss-focus-visible":
5673
- plugins/postcss-focus-visible/**
74+
- experimental/postcss-focus-visible/**
5775

5876
"plugins/postcss-focus-within":
5977
- plugins/postcss-focus-within/**
78+
- experimental/postcss-focus-within/**
6079

6180
"plugins/postcss-font-variant":
6281
- plugins/postcss-font-variant/**
82+
- experimental/postcss-font-variant/**
6383

6484
"plugins/postcss-gap-properties":
6585
- plugins/postcss-gap-properties/**
86+
- experimental/postcss-gap-properties/**
6687

6788
"plugins/postcss-image-set-function":
6889
- plugins/postcss-image-set-function/**
90+
- experimental/postcss-image-set-function/**
6991

7092
"plugins/postcss-lab-function":
7193
- plugins/postcss-lab-function/**
94+
- experimental/postcss-lab-function/**
7295

7396
"plugins/postcss-logical":
7497
- plugins/postcss-logical/**
98+
- experimental/postcss-logical/**
7599

76100
"plugins/postcss-media-query-ranges":
77101
- plugins/postcss-media-query-ranges/**
102+
- experimental/postcss-media-query-ranges/**
78103

79104
"plugins/postcss-nesting":
80105
- plugins/postcss-nesting/**
106+
- experimental/postcss-nesting/**
81107

82108
"plugins/postcss-overflow-shorthand":
83109
- plugins/postcss-overflow-shorthand/**
110+
- experimental/postcss-overflow-shorthand/**
84111

85112
"plugins/postcss-page-break":
86113
- plugins/postcss-page-break/**
114+
- experimental/postcss-page-break/**
87115

88116
"plugins/postcss-place":
89117
- plugins/postcss-place/**
118+
- experimental/postcss-place/**
90119

91120
"plugins/postcss-pseudo-class-any-link":
92121
- plugins/postcss-pseudo-class-any-link/**
122+
- experimental/postcss-pseudo-class-any-link/**
93123

94124
"plugins/postcss-rebeccapurple":
95125
- plugins/postcss-rebeccapurple/**
126+
- experimental/postcss-rebeccapurple/**
96127

97128
"plugins/postcss-replace-overflow-wrap":
98129
- plugins/postcss-replace-overflow-wrap/**
130+
- experimental/postcss-replace-overflow-wrap/**
99131

100132
"plugins/postcss-selector-not":
101133
- plugins/postcss-selector-not/**
134+
- experimental/postcss-selector-not/**
102135

103136
"plugins/postcss-system-ui-font-family":
104137
- plugins/postcss-system-ui-font-family/**
138+
- experimental/postcss-system-ui-font-family/**
105139

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
name: test in browser
2+
on:
3+
push:
4+
5+
concurrency:
6+
group: branch-node-test-in-browser-${{ github.ref }}
7+
cancel-in-progress: true
8+
9+
jobs:
10+
test_in_browser:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v2
14+
- uses: actions/setup-node@v2
15+
with:
16+
node-version: 16
17+
18+
- run: npm ci
19+
- run: npm run build --workspaces --if-present
20+
- run: npm run test:browser --workspaces --if-present
21+

experimental/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Experimental plugins
2+
3+
## Why
4+
5+
When we create plugins for very early specifications we often make the wrong assumptions.
6+
This does not mean your CSS won't work today but we aim to match the specification as closely as possible.
7+
8+
To resolve these issues we want to iterate quickly along side browser vendors.
9+
We can do this on a git branch but that means we can't give you a working example.
10+
11+
The experimental plugins are intended to expose ongoing work to users for feedback.
12+
13+
14+
## Limits
15+
16+
The scope of the experimental plugins is limited in time.
17+
Once the implementation is stable in browsers we move over the final version to the real plugin.
18+
19+
At this time the experimental plugin will be deprecated.
20+
What then happens with the plugin might differ from case to case.
21+
But you should remove it as soon as possible to avoid surprises.
22+
23+
We might need another experimental track for a different issue in the same plugin.
24+
This means the logic of the experimental plugin will change.
25+
26+
It's best to think of these as debugging tools and not as production ready plugin.
27+
28+
## PostCSS Preset Env
29+
30+
When you use `postcss-preset-env` and want to combine with an experimental plugin you should disable the regular plugin.
31+
32+
The order can be important but this will be detailed in the experimental plugin docs.
33+
34+
```js
35+
plugins: [
36+
postcssPresetEnv({
37+
features: {
38+
'css-has-pseudo': false
39+
}
40+
}),
41+
cssHasPseudoExperimental(),
42+
]
43+
```
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
node_modules
2+
dist
3+
package-lock.json
4+
yarn.lock
5+
browser.js
6+
!src/browser.js
7+
*.log*
8+
*.result.css
9+
*.result.css.map
10+
!.editorconfig
11+
!.gitignore
12+
!.rollup.js
13+
!.tape.js
14+
!.travis.yml

experimental/css-has-pseudo/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v16.13.1
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = {
2+
'basic': {
3+
message: 'supports basic usage'
4+
},
5+
'basic:preserve': {
6+
message: 'supports { preserve: false } usage',
7+
options: {
8+
preserve: false
9+
}
10+
},
11+
'generated-selector-cases': {
12+
message: 'correctly handles generated cases',
13+
warnings: 1,
14+
options: {
15+
preserve: false
16+
}
17+
},
18+
'browser': {
19+
message: 'prepare CSS for chrome test',
20+
options: {
21+
preserve: false
22+
}
23+
},
24+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Changes to CSS Has Pseudo
2+
3+
### Unreleased
4+
5+
Tracking initial implementation of `:has()` pseudo-class in Safari Technology Preview.
6+
This is a breaking change and affects both the generated CSS and the client side polyfill.
7+
8+
- Added : 'hover' options for browser polyfill
9+
- Added : 'observedAttributes' options for browser polyfill
10+
- Added : 'forcePolyfill' options for browser polyfill
11+
- Changed : selector encoding (this requires you to re-run your build steps for your CSS)
12+
13+
Improved support for :
14+
15+
- hover styles through the 'hover' option. (`label:has(~ input:hover)`)
16+
- more complex selectors. (`figure:has(> figcaption) img`)

0 commit comments

Comments
 (0)