Skip to content

Commit 0bec5ff

Browse files
authored
Migrate css-has-pseudo (#21)
* css-has-pseudo : monorepo migration * migrate * more docs * use exports field
1 parent 81216bb commit 0bec5ff

17 files changed

+280
-429
lines changed

plugins/css-has-pseudo/.editorconfig

-15
This file was deleted.

plugins/css-has-pseudo/.gitignore

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
node_modules
2-
/browser.*
3-
/cli.*
4-
/index.*
5-
/postcss.*
2+
dist
63
package-lock.json
74
yarn.lock
85
*.log*
96
*.result.css
10-
.*
7+
*.result.css.map
118
!.editorconfig
129
!.gitignore
1310
!.rollup.js

plugins/css-has-pseudo/.rollup.js

-73
This file was deleted.

plugins/css-has-pseudo/.travis.yml

-10
This file was deleted.

plugins/css-has-pseudo/CONTRIBUTING.md

-65
This file was deleted.

plugins/css-has-pseudo/INSTALL-POSTCSS.md

+8-16
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,11 @@ Add [CSS Has Pseudo] to your project:
1313
npm install css-has-pseudo --save-dev
1414
```
1515

16-
Use [CSS Has Pseudo] to process your CSS:
17-
18-
```js
19-
const postcssHasPseudo = require('css-has-pseudo/postcss');
20-
21-
postcssHasPseudo.process(YOUR_CSS /*, processOptions, pluginOptions */);
22-
```
23-
24-
Or use it as a [PostCSS] plugin:
16+
Use it as a [PostCSS] plugin:
2517

2618
```js
2719
const postcss = require('postcss');
28-
const postcssHasPseudo = require('css-has-pseudo/postcss');
20+
const postcssHasPseudo = require('css-has-pseudo');
2921

3022
postcss([
3123
postcssHasPseudo(/* pluginOptions */)
@@ -43,7 +35,7 @@ npm install postcss-cli --save-dev
4335
Use [CSS Has Pseudo] in your `postcss.config.js` configuration file:
4436

4537
```js
46-
const postcssHasPseudo = require('css-has-pseudo/postcss');
38+
const postcssHasPseudo = require('css-has-pseudo');
4739

4840
module.exports = {
4941
plugins: [
@@ -63,7 +55,7 @@ npm install postcss-loader --save-dev
6355
Use [CSS Has Pseudo] in your Webpack configuration:
6456

6557
```js
66-
const postcssHasPseudo = require('css-has-pseudo/postcss');
58+
const postcssHasPseudo = require('css-has-pseudo');
6759

6860
module.exports = {
6961
module: {
@@ -100,7 +92,7 @@ file:
10092

10193
```js
10294
const reactAppRewirePostcss = require('react-app-rewire-postcss');
103-
const postcssHasPseudo = require('css-has-pseudo/postcss');
95+
const postcssHasPseudo = require('css-has-pseudo');
10496

10597
module.exports = config => reactAppRewirePostcss(config, {
10698
plugins: () => [
@@ -121,7 +113,7 @@ Use [CSS Has Pseudo] in your Gulpfile:
121113

122114
```js
123115
const postcss = require('gulp-postcss');
124-
const postcssHasPseudo = require('css-has-pseudo/postcss');
116+
const postcssHasPseudo = require('css-has-pseudo');
125117

126118
gulp.task('css', () => gulp.src('./src/*.css').pipe(
127119
postcss([
@@ -143,7 +135,7 @@ npm install grunt-postcss --save-dev
143135
Use [CSS Has Pseudo] in your Gruntfile:
144136

145137
```js
146-
const postcssHasPseudo = require('css-has-pseudo/postcss');
138+
const postcssHasPseudo = require('css-has-pseudo');
147139

148140
grunt.loadNpmTasks('grunt-postcss');
149141

@@ -161,7 +153,7 @@ grunt.initConfig({
161153
});
162154
```
163155

164-
[CSS Has Pseudo]: https://github.com/csstools/css-has-pseudo
156+
[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
165157
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
166158
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
167159
[PostCSS]: https://github.com/postcss/postcss

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

+29-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
# CSS Has Pseudo for Browsers [<img src="http://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][CSS Has Pseudo]
22

33
[![NPM Version][npm-img]][npm-url]
4-
[![Build Status][cli-img]][cli-url]
54
[![Support Chat][git-img]][git-url]
65

76
[CSS Has Pseudo] lets you style elements relative to other elements in CSS,
@@ -28,17 +27,42 @@ npm install css-has-pseudo
2827
Then include and initialize it on your document:
2928

3029
```js
31-
const cssHasPseudo = require('css-has-pseudo');
30+
const cssHasPseudo = require('css-has-pseudo/browser');
3231

3332
cssHasPseudo(document);
3433
```
3534

36-
[cli-img]: https://img.shields.io/travis/csstools/css-has-pseudo/master.svg
37-
[cli-url]: https://travis-ci.org/csstools/css-has-pseudo
35+
```html
36+
<link rel="stylesheet" href="TRANSFORMED.css">
37+
<script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>
38+
<script>cssHasPseudo(document)</script>
39+
```
40+
41+
## Dependencies
42+
43+
Web API's:
44+
45+
- [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
46+
- [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
47+
- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) with support for post CSS 2.1 selectors
48+
49+
ECMA Script:
50+
51+
- `Array.prototype.filter`
52+
- `Array.prototype.forEach`
53+
- `Array.prototype.indexOf`
54+
- `Array.prototype.join`
55+
- `Array.prototype.map`
56+
- `Array.prototype.splice`
57+
- `RegExp.prototype.exec`
58+
- `String.prototype.match`
59+
- `String.prototype.replace`
60+
- `String.prototype.split`
61+
3862
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
3963
[git-url]: https://gitter.im/postcss/postcss
4064
[npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg
4165
[npm-url]: https://www.npmjs.com/package/css-has-pseudo
4266

43-
[CSS Has Pseudo]: https://github.com/csstools/css-has-pseudo
67+
[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
4468
[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has

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

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
# CSS Has Pseudo for PostCSS [<img src="http://jonathantneal.github.io/postcss-logo.svg" alt="" width="90" height="90" align="right">][CSS Has Pseudo]
22

33
[![NPM Version][npm-img]][npm-url]
4-
[![Build Status][cli-img]][cli-url]
54
[![Support Chat][git-img]][git-url]
65

76
[CSS Has Pseudo] lets you style elements relative to other elements in CSS,
@@ -38,7 +37,7 @@ npm install css-has-pseudo --save-dev
3837
Use [CSS Has Pseudo] to process your CSS:
3938

4039
```js
41-
const postcssHasPseudo = require('css-has-pseudo/postcss');
40+
const postcssHasPseudo = require('css-has-pseudo');
4241

4342
postcssHasPseudo.process(YOUR_CSS /*, processOptions, pluginOptions */);
4443
```
@@ -47,7 +46,7 @@ Or use it as a [PostCSS] plugin:
4746

4847
```js
4948
const postcss = require('postcss');
50-
const postcssHasPseudo = require('css-has-pseudo/postcss');
49+
const postcssHasPseudo = require('css-has-pseudo');
5150

5251
postcss([
5352
postcssHasPseudo(/* pluginOptions */)
@@ -83,12 +82,10 @@ body[\:has\(\:focus\)] {
8382
}
8483
```
8584

86-
[cli-img]: https://img.shields.io/travis/csstools/css-has-pseudo/master.svg
87-
[cli-url]: https://travis-ci.org/csstools/css-has-pseudo
8885
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
8986
[git-url]: https://gitter.im/postcss/postcss
9087
[npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg
9188
[npm-url]: https://www.npmjs.com/package/css-has-pseudo
9289

93-
[CSS Has Pseudo]: https://github.com/csstools/css-has-pseudo
90+
[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
9491
[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has-pseudo

0 commit comments

Comments
 (0)