Skip to content
This repository has been archived by the owner on May 12, 2024. It is now read-only.

feat: update to postcss@8 #4

Merged
merged 1 commit into from
Apr 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion INSTALL.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
110 changes: 59 additions & 51 deletions index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
9 changes: 4 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down