diff --git a/INSTALL.md b/INSTALL.md index a6ee62b..108b243 100644 --- 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 index 057f8ae..b617474 100644 --- 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 index c67b9a5..da95381 100644 --- 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 index dd07fc7..daef044 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,9 @@ "engines": { "node": ">=8.0.0" }, - "dependencies": { - "postcss": "^7" - }, "peerDependencies": { - "browserslist": "^4" + "browserslist": "^4", + "postcss": "^8.2.8" }, "devDependencies": { "@babel/core": "^7.4.5", @@ -38,7 +36,8 @@ "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"