plugins/postcss-selector-not

Author: romainmenke

plugins/postcss-selector-not/.babelrc

@@ -1,2 +1,6 @@
 node_modules
-dist
+package-lock.json
+yarn.lock
+*.result.css
+*.result.css.map
+dist/*

plugins/postcss-selector-not/.editorconfig

@@ -0,0 +1 @@
+v16.13.1

plugins/postcss-selector-not/.eslintrc.yml

@@ -0,0 +1,11 @@
+import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
+import plugin from 'postcss-selector-not';
+
+postcssTape(plugin)({
+	basic: {
+		message: "supports basic usage",
+	},
+	'examples/example': {
+		message: 'minimal example',
+	},
+});

plugins/postcss-selector-not/.github/workflows/test.yml

@@ -0,0 +1,176 @@
+# Installing PostCSS Selector Not
+
+[PostCSS Selector Not] 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 [PostCSS Selector Not] to your project:
+
+```bash
+npm install postcss postcss-selector-not --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssSelectorNot = require('postcss-selector-not');
+
+postcss([
+	postcssSelectorNot(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+## PostCSS CLI
+
+Add [PostCSS CLI] to your project:
+
+```bash
+npm install postcss-cli postcss-selector-not --save-dev
+```
+
+Use [PostCSS Selector Not] in your `postcss.config.js` configuration file:
+
+```js
+const postcssSelectorNot = require('postcss-selector-not');
+
+module.exports = {
+	plugins: [
+		postcssSelectorNot(/* pluginOptions */)
+	]
+}
+```
+
+## Webpack
+
+_Webpack version 5_
+
+Add [PostCSS Loader] to your project:
+
+```bash
+npm install postcss-loader postcss-selector-not --save-dev
+```
+
+Use [PostCSS Selector Not] in your Webpack configuration:
+
+```js
+module.exports = {
+	module: {
+		rules: [
+			{
+				test: /\.css$/i,
+				use: [
+					"style-loader",
+					{
+						loader: "css-loader",
+						options: { importLoaders: 1 },
+					},
+					{
+						loader: "postcss-loader",
+						options: {
+							postcssOptions: {
+								plugins: [
+									[
+										"postcss-selector-not",
+										{
+											// Options
+										},
+									],
+								],
+							},
+						},
+					},
+				],
+			},
+		],
+	},
+};
+```
+
+## Create React App
+
+Add [React App Rewired] and [React App Rewire PostCSS] to your project:
+
+```bash
+npm install react-app-rewired react-app-rewire-postcss postcss-selector-not --save-dev
+```
+
+Use [React App Rewire PostCSS] and [PostCSS Selector Not] in your
+`config-overrides.js` file:
+
+```js
+const reactAppRewirePostcss = require('react-app-rewire-postcss');
+const postcssSelectorNot = require('postcss-selector-not');
+
+module.exports = config => reactAppRewirePostcss(config, {
+	plugins: () => [
+		postcssSelectorNot(/* pluginOptions */)
+	]
+});
+```
+
+## Gulp
+
+Add [Gulp PostCSS] to your project:
+
+```bash
+npm install gulp-postcss postcss-selector-not --save-dev
+```
+
+Use [PostCSS Selector Not] in your Gulpfile:
+
+```js
+const postcss = require('gulp-postcss');
+const postcssSelectorNot = require('postcss-selector-not');
+
+gulp.task('css', function () {
+	var plugins = [
+		postcssSelectorNot(/* pluginOptions */)
+	];
+
+	return gulp.src('./src/*.css')
+		.pipe(postcss(plugins))
+		.pipe(gulp.dest('.'));
+});
+```
+
+## Grunt
+
+Add [Grunt PostCSS] to your project:
+
+```bash
+npm install grunt-postcss postcss-selector-not --save-dev
+```
+
+Use [PostCSS Selector Not] in your Gruntfile:
+
+```js
+const postcssSelectorNot = require('postcss-selector-not');
+
+grunt.loadNpmTasks('grunt-postcss');
+
+grunt.initConfig({
+	postcss: {
+		options: {
+			processors: [
+			postcssSelectorNot(/* pluginOptions */)
+			]
+		},
+		dist: {
+			src: '*.css'
+		}
+	}
+});
+```
+
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS CLI]: https://github.com/postcss/postcss-cli
+[PostCSS Loader]: https://github.com/postcss/postcss-loader
+[PostCSS Selector Not]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-selector-not
+[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
+[React App Rewired]: https://github.com/timarney/react-app-rewired

plugins/postcss-selector-not/.gitignore

@@ -1,39 +1,57 @@
-# postcss-selector-not [![CSS Standard Status](https://cssdb.org/images/badges/not-pseudo-class.svg)](https://cssdb.org/#not-pseudo-class) [<img alt="build status" src="https://github.com/postcss/postcss-selector-not/workflows/test/badge.svg" height="20">][cli-url]
+# PostCSS Selector Not [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-> PostCSS plugin to transform `:not()` W3C CSS level 4 pseudo class to :not() CSS level 3 selectors
+[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-selector-not.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/not-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]
 
-http://dev.w3.org/csswg/selectors-4/#negation
+[PostCSS Selector Not] transforms :not() W3C CSS level 4 pseudo classes to :not() CSS level 3 selectors following the [Selectors 4 Specification].
 
-[!['Can I use' table](https://caniuse.bitsofco.de/image/css-not-sel-list.png)](https://caniuse.com/#feat=css-not-sel-list)
+```pcss
+p:not(:first-child, .special) {
+	color: red;
+}
 
-## Installation
+/* becomes */
 
-```console
-$ npm install postcss postcss-selector-not
+p:not(:first-child):not(.special) {
+	color: red;
+}
 ```
 
+⚠️ Only lists of simple selectors (`:not(.a, .b)`) will work as expected.
+Complex selectors (`:not(.a > .b, .c ~ .d)`) can not be downgraded.
+
 ## Usage
 
-Using this `input.css`:
+Add [PostCSS Selector Not] to your project:
 
-```css
-p:not(:first-child, .special) {
-  color: red;
-}
+```bash
+npm install postcss postcss-selector-not --save-dev
 ```
 
-you will get:
+Use it as a [PostCSS] plugin:
 
-```css
-p:not(:first-child):not(.special) {
-  color: red;
-}
+```js
+const postcss = require('postcss');
+const postcssSelectorNot = require('postcss-selector-not');
+
+postcss([
+	postcssSelectorNot(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
 ```
 
----
+[PostCSS Selector Not] runs in all Node environments, with special
+instructions for:
 
-## [Changelog](CHANGELOG.md)
+| [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) |
+| --- | --- | --- | --- | --- | --- |
 
-## [License](LICENSE)
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#not-pseudo-class
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-url]: https://www.npmjs.com/package/postcss-selector-not
 
-[cli-url]: https://github.com/postcss/postcss-selector-not/actions/workflows/test.yml?query=workflow/test
+[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 Selector Not]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-selector-not
+[Selectors 4 Specification]: https://www.w3.org/TR/selectors-4/#negation-pseudo