Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Question about parsing with comments in selectors

オープン
#64 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
javascript
領域
frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
JavaScript
スター
667
フォーク
24
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

postcss/postcss-js のほかの issue

postcss/postcss-js の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。