Question about parsing with comments in selectors

[thecrypticace]

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:

• /* this
• is
• a
• test */ .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.

[zephraph]

Thanks for reporting this @thecrypticace. I reported this originally on tailwindlabs/tailwindcss#7420. When I first ran into the issue I thought it was related to postcss-selector-parser as well. I cloned that repo down and added the selector string w/ a comment that was failing in tailwind but it passed fine.

[ai]

When I created postcss-js I never thought that somebody will add comments to JS content.

My idea is that you will use JS comments to comments.

Do you need this comment for some control instructions?

[thecrypticace]

The idea is that you'd be able to add comments to the resulting CSS. Though, it's entirely understandable if this isn't a supported use case.