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

Abierto
#157 13 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
css, typescript
Área
frontend, tooling

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
62
Forks
32
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.