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

`url()`s containing file paths are not distinguishable from other arbitrary `Word` nodes

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

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

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
css, typescript
領域
frontend, tooling

調査の方向性

Start by reproducing the documented postcss-values-parser examples for absolute and relative paths, then inspect how Word, Func, and isUrl are assigned during parsing. Compare the result with css-tree's Url nodes and the Word.md URL-handling documentation; done means relative url(/images/image.png) is distinguishable from arbitrary Word values in the parser output.

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

説明

Expected Behavior / Situation

It is common in CSS to specify URLs as an absolute or relative path without a scheme, e.g. url(/images/image.png). css-tree parses these as unambiguous Url nodes:

> const csstree = await import("css-tree")
> csstree.parse("url(https://example.com/image.png)", { context: "value" }).children.head.data
{ type: 'Url', loc: null, value: 'https://example.com/image.png' }
> csstree.parse("url(/images/image.png)", { context: "value" }).children.head.data
{ type: 'Url', loc: null, value: '/images/image.png' }

It was my expectation that postcss-values-parser would yield Func nodes for both of these inputs, per this documentation.

Actual Behavior / Situation

In reality, postcss-values-parser yields Word nodes in both cases:

> const valuesParser = (await import("postcss-values-parser")).parse
> valuesParser.parse("url(https://example.com/image.png)").nodes[0]
<ref *1> Word {
  raws: {},
  value: 'https://example.com/image.png',
  source: [Object],
  isColor: false,
  isHex: false,
  isUrl: true,
  isVariable: false,
  type: 'word',
  parent: [Root],
  Symbol(isClean): false,
  Symbol(my): true
}
> valuesParser("url(/images/image.png)").nodes[0]
<ref *1> Word {
  raws: {},
  value: '/images/image.png',
  source: [Object],
  isColor: false,
  isHex: false,
  isUrl: false,
  isVariable: false,
  type: 'word',
  parent: [Root],
  Symbol(isClean): false,
  Symbol(my): true
}

In the first case, isUrl is set as expected, but in the second case, since the value is not actually a valid URL (at least according to is-url-superb, which just uses new URL()—TBH just using URL.parse() or URL.canParse() directly without the dependency would make more sense iff requiring a minimum of Node 18 is possible, IMHO), it remains false and the node is not distinguishable from other non-URL values despite being unambiguous in the css-tree parse.

Modification Proposal

I suggest that the parser should behave according to the documentation, which would result in a parse something like this (hypothetical, not real output):

> valuesParser("url(/images/image.png)").nodes[0]
<ref *1> Func {
  raws {},
  value: '',
  nodes: [
    Word {
      raws: {},
      value: '/images/image.png',
      source: [Object],
      isColor: false,
      isHex: false,
      isUrl: false,
      isVariable: false,
      type: 'word',
      parent: [Circular *1],
      Symbol(isClean): false,
      Symbol(my): true
    }
  ],
  source: [Object],
  isColor: false,
  isVar: false,
  name: 'url',
  params: '',
  type: 'func',
  parent: [Root],
  Symbol(isClean): false,
  Symbol(my): true
}

Or, failing that, set isUrl to true for Word nodes created from css-tree Url nodes regardless of whether the contents look like a URL.

[!NOTE]
My use case is similar to that of rollup-plugin-styler's URL loader, which parses URL and partial URL values in order to perform lookup resolution for bundling.

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

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

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

はじめの一歩

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

似ている issue

TypeScript の issue をもっと見る

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

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