Question about parsing with comments in selectors
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 25/100
- Issue type
- Bug
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript
- Domain
- frontend
Research direction
Start by running the example from the issue with postcss-js and inspect the resulting rule.selector and rule.selectors values. Compare that behavior with postcss-selector-parser's handling of comments and selector updates. Done means determining whether the reported comment form is supported and, if so, preserving the comment without splitting comma-containing comments into selector entries.
Written by the indexing model from the issue text.
Description
The Problem
First off I know this is a bit odd but, when parsing a selector with a comment before it PostCSS will treat it as a comment node. These can show up in IDEs (like VSCode for example) with information about the class. When using postcss-js the only way to do this, that I know of, is to add a comment to the selector itself. This seems to work okay-ish as long as the comment does not contain commas. If it does, any code relying on rule.selectors can break because it recieves pieces of a comment along with the other pieces of the selector.
Example Code
So, given the following:
import postcssJs from "postcss-js"
import postcss from "postcss"
const result = postcss().process({
'/* this, is, a, test */ .test': {
'color': 'blue'
}
}, {
parser: postcssJs,
}).sync()
console.log({
selector: result.root.nodes[0].selector,
selectors: result.root.nodes[0].selectors
})
You'll see that selector turns out to be: /* this, is, a, test */ .test instead of having a comment node before the rule.
The main problem though is that rule.selectors becomes an array with 4 items:
/* thisisatest */ .test
My Question
Is this something postcss-js is just not intended to support? If not, is there another possible solution? I noticed that postcss-selector-parser seems to handle comments in selectors fine — at least on some level. Though it doesn't clean out the selector of a rule when using updateSelector. I'd be happy to prep a PR that uses the selector parser to clean them but I have a feeling this might be a bit complicated because comments can technically appear in between parts of a selector which would require updating raws.
- Dominant language
- JavaScript
- Stars
- 667
- Forks
- 24
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from postcss/postcss-js
-
.sync API Open
Difficulty 1/5 Under an hour Newbie friendliness 48/100
postcss/postcss-js#72 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 38/100
postcss/postcss-js#69 · 7 comments ·
All issues in postcss/postcss-js
Similar issues
-
bug confirmed issue
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
open-webui/open-webui#30750 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Mend: dependency security vulnerability untriaged
Difficulty 2/5 1-3 hours Newbie friendliness 70/100