feat: update to postcss@8

csstools · Apr 28, 2021 · 701fc71 · 701fc71
1 parent 1e373b8
commit 701fc71
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 58 deletions.
diff --git a/INSTALL.md b/INSTALL.md
@@ -11,7 +11,7 @@ instructions for:
 Add [PostCSS Browser Comments] to your project:
 
 ```bash
-npm install postcss-browser-comments --save-dev
+npm install postcss postcss-browser-comments --save-dev
 ```
 
 Use [PostCSS Browser Comments] to process your CSS:

diff --git a/README.md b/README.md
@@ -63,7 +63,7 @@ then the entire rule and comment are also removed.
 Add [PostCSS Browser Comments] to your project:
 
 ```bash
-npm install postcss-browser-comments --save-dev
+npm install postcss postcss-browser-comments --save-dev
 ```
 
 Use [PostCSS Browser Comments] to process your CSS:

diff --git a/index.js b/index.js
@@ -1,69 +1,77 @@
 import browserslist from 'browserslist';
-import postcss from 'postcss';
-
-export default postcss.plugin('postcss-browser-comments', opts => root => {
-	// client browserslist
-	const clientBrowserList = browserslist(
-		Object(opts).browsers || null,
-		{ path: root.source && root.source.input && root.source.input.file }
-	);
-
-	// root children references
-	const references = root.nodes.slice(0);
-
-	// for each child node of the root children references
-	for (let node of references) {
-		// if the node is a comment browser comment node
-		if (isBrowserCommentNode(node)) {
-			// rule following the browser comment
-			const rule = node.next();
-
-			// browser data
-			const browserdata = getBrowserData(node.text);
-
-			if (browserdata.isNumbered) {
-				rule.nodes.filter(isBrowserReferenceCommentNode).map(
-					comment => {
-						const browserdataIndex = parseFloat(comment.text) - 1;
-						const browserslistPart = browserdata.browserslist[browserdataIndex];
 
+const plugin = opts => {
+	return {
+		postcssPlugin: 'postcss-browser-comments',
+		Once(root) {
+			// client browserslist
+			const clientBrowserList = browserslist(
+				Object(opts).browsers || null,
+				{ path: root.source && root.source.input && root.source.input.file }
+			);
+
+			// root children references
+			const references = root.nodes.slice(0);
+
+			// for each child node of the root children references
+			for (let node of references) {
+				// if the node is a comment browser comment node
+				if (isBrowserCommentNode(node)) {
+					// rule following the browser comment
+					const rule = node.next();
+
+					// browser data
+					const browserdata = getBrowserData(node.text);
+
+					if (browserdata.isNumbered) {
+						rule.nodes.filter(isBrowserReferenceCommentNode).map(
+							comment => {
+								const browserdataIndex = parseFloat(comment.text) - 1;
+								const browserslistPart = browserdata.browserslist[browserdataIndex];
+
+								// whether to remove the rule if the comment browserslist does not match the client browserslist
+								const removeRule = !clientBrowserList.some(
+									clientBrowser => browserslist(browserslistPart).some(
+										commentBrowser => commentBrowser === clientBrowser
+									)
+								);
+
+								// conditionally remove the declaration and reference comment
+								if (removeRule) {
+									comment.prev().remove();
+									comment.remove();
+								}
+							}
+						);
+
+						// conditionally remove the empty rule and comment
+						if (!rule.nodes.length) {
+							rule.remove();
+							node.remove();
+						}
+					} else {
 						// whether to remove the rule if the comment browserslist does not match the client browserslist
 						const removeRule = !clientBrowserList.some(
-							clientBrowser => browserslist(browserslistPart).some(
+							clientBrowser => browserslist(browserdata.browserslist).some(
 								commentBrowser => commentBrowser === clientBrowser
 							)
 						);
 
-						// conditionally remove the declaration and reference comment
+						// conditionally remove the rule and comment
 						if (removeRule) {
-							comment.prev().remove();
-							comment.remove();
+							rule.remove();
+							node.remove();
 						}
 					}
-				);
-
-				// conditionally remove the empty rule and comment
-				if (!rule.nodes.length) {
-					rule.remove();
-					node.remove();
-				}
-			} else {
-				// whether to remove the rule if the comment browserslist does not match the client browserslist
-				const removeRule = !clientBrowserList.some(
-					clientBrowser => browserslist(browserdata.browserslist).some(
-						commentBrowser => commentBrowser === clientBrowser
-					)
-				);
-
-				// conditionally remove the rule and comment
-				if (removeRule) {
-					rule.remove();
-					node.remove();
 				}
 			}
 		}
 	}
-});
+};
+
+plugin.postcss = true;
+
+export default plugin;
 
 // returns whether a node is a browser comment
 const isBrowserCommentNode = node => node.type === 'comment' && isBrowserCommentNodeRegExp.test(node.text) && node.next().type === 'rule';

diff --git a/package.json b/package.json
@@ -26,19 +26,18 @@
   "engines": {
     "node": ">=8.0.0"
   },
-  "dependencies": {
-    "postcss": "^7"
-  },
   "peerDependencies": {
-    "browserslist": "^4"
+    "browserslist": "^4",
+    "postcss": "^8.2.8"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "babel-eslint": "^10.0.1",
     "browserslist": "^4.1.1",
     "eslint": "^5.16.0",
-    "postcss-tape": "^5.0.0",
+    "postcss": "^8.2.8",
+    "postcss-tape": "^6.0.1",
     "pre-commit": "^1.2.2",
     "rollup": "^1.12.3",
     "rollup-plugin-babel": "^4.3.2"