Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
#157 13 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
45/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
css, typescript
Lĩnh vực
frontend, tooling

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
62
Fork
32
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.