Add support for PostCSS 8

Author: niksy

README.md

@@ -35,13 +35,13 @@ From the [proposal]:
 Add [PostCSS Enter Pseudo Class] to your project:
 
 ```bash
-npm install postcss-pseudo-class-enter --save-dev
+npm install postcss postcss-pseudo-class-enter --save-dev
 ```
 
 Use [PostCSS Enter Pseudo Class] to process your CSS:
 
 ```js
-const postcssPseudoClassEnter = require('postcss-pseudo-class-enter');
+const { default: postcssPseudoClassEnter } = require('postcss-pseudo-class-enter');
 
 postcssPseudoClassEnter.process(YOUR_CSS /*, processOptions, pluginOptions */);
 ```

package.json

@@ -26,20 +26,23 @@
     "node": ">=6.0.0"
   },
   "dependencies": {
-    "postcss": "^7.0.14",
-    "postcss-selector-parser": "^5.0.0"
+    "postcss-selector-parser": "^6.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.12.1",
     "eslint-config-dev": "^2.0.0",
-    "postcss-tape": "^4.0.0",
+    "postcss": "^8.1.2",
+    "postcss-tape": "^6.0.0",
     "pre-commit": "^1.2.2",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.3.2"
   },
+  "peerDependencies": {
+    "postcss": "^8.1.2"
+  },
   "eslintConfig": {
     "extends": "dev",
     "parser": "babel-eslint"

src/index.js

@@ -1,41 +1,46 @@
-import postcss from 'postcss';
 import parser from 'postcss-selector-parser';
 
-export default postcss.plugin('postcss-pseudo-class-enter', opts => {
+const plugin = opts => {
 	// add conditional prefix
 	const pseudoClass = `:${Object(opts).prefix ? `-${opts.prefix}-` : ''}enter`;
 	const pseudoClassRegExp = new RegExp(pseudoClass, 'i');
 
 	// add outline declaration
 	const shouldUseOutline = Object(opts).outline !== null && Object(opts).outline !== undefined;
 
-	return root => {
-		// transform :enter selectors to :focus and :hover
-		root.walkRules(pseudoClassRegExp, rule => {
-			const originalSelector = rule.selector;
+	return {
+		postcssPlugin: 'postcss-pseudo-class-enter',
+		Once: root => {
+			// transform :enter selectors to :focus and :hover
+			root.walkRules(pseudoClassRegExp, rule => {
+				const originalSelector = rule.selector;
 
-			const modifiedSelector = parser(selectors => {
-				transform(selectors, pseudoClass);
-			}).processSync(originalSelector);
+				const modifiedSelector = parser(selectors => {
+					transform(selectors, pseudoClass);
+				}).processSync(originalSelector);
 
-			if (originalSelector !== modifiedSelector) {
-				rule.selector = modifiedSelector;
-			}
+				if (originalSelector !== modifiedSelector) {
+					rule.selector = modifiedSelector;
+				}
 
-			if (shouldUseOutline) {
-				// check for an existing outline declaration
-				const hasOutline = rule.nodes.some(decl => decl.prop === 'outline');
+				if (shouldUseOutline) {
+					// check for an existing outline declaration
+					const hasOutline = rule.nodes.some(decl => decl.prop === 'outline');
 
-				// if an outline declaration does not exist, prepend it
-				if (!hasOutline) {
-					const outlineValue = !opts.outline || opts.outline === true ? 0 : opts.outline;
+					// if an outline declaration does not exist, prepend it
+					if (!hasOutline) {
+						const outlineValue = !opts.outline || opts.outline === true ? 0 : opts.outline;
 
-					rule.prepend({ prop: 'outline', value: outlineValue });
+						rule.prepend({ prop: 'outline', value: outlineValue });
+					}
 				}
-			}
-		});
+			});
+		}
 	};
-});
+}
+plugin.postcss = true;
+
+export default plugin;
 
 function transform(selectors, pseudoClass) {
 	selectors.walk(selector => {