Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resolve node_modules from html tags #2808

Closed
nevir opened this issue Mar 16, 2019 · 7 comments
Closed

Resolve node_modules from html tags #2808

nevir opened this issue Mar 16, 2019 · 7 comments
Labels
🐛 Bug ✨ Parcel 2 Resolver

Comments

@nevir
Copy link

nevir commented Mar 16, 2019 •
edited
Loading

🙋 feature request

I think it'd be pretty helpful to support resolution of scripts/css/etc from HTML sources, following node's resolution rules.

For example, with https://github.com/necolas/normalize.css as a node dependency

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="normalize.css">
</html>

I'd expect:

<link rel="stylesheet" href="normalize.css">

to be equivalent to

<link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">

(This also implies support for the style key in package.json to figure out which file to resolve in a link rel="stylesheet" context)
@mischnic
Copy link
Member

<link rel="stylesheet" href="normalize.css">

These links in browsers are resolved as relative urls. There is no way for Parcel to distinguish relative imports of local files (other than forcing the use of ./) or packages.

The only syntax Parcel resolves specially is this (~ will always be the folder with node_modules, might be useful if you have html files in subfolders):
<link rel="stylesheet" href="~/node_modules/normalize.css/normalize.css">

This also implies support for the style key in package.json

-> #432

@nevir
Copy link
Author

nevir commented Mar 18, 2019 •
edited
Loading

Ah! Hmm, I wonder if introducing something like a uri scheme might satisfy? (or is just getting too fancy—it's still potentially ambiguous…)

<link rel="stylesheet" href="npm:normalize.css">

@ric2b
Copy link

ric2b commented Apr 1, 2019

The only syntax Parcel resolves specially is this (~ will always be the folder with node_modules, might be useful if you have html files in subfolders):
<link rel="stylesheet" href="~/node_modules/normalize.css/normalize.css">

This isn't working for me, if I have an entry point in a src directory (parcel build src/index.html), ~ refers to the src directory, not the parent that also contains node_modules.

@mischnic
Copy link
Member

mischnic commented Apr 2, 2019 •
edited
Loading

@ric2b Actually, that's "per spec": https://parceljs.org/module_resolution.html (also happens with an JS file in src)

~/foo resolves foo relative to the nearest package root or, if not found, the entry root.

entry root: the directory of the entrypoint specified to Parcel, or the shared root (common parent directory) when multiple entrypoints are specified.

In your case, the entry root is src (Parcel never searches "above" the entry root). Though I'm not sure why it does that.
@devongovett ?
REPL Link

@bbenne10
Copy link

bbenne10 commented Aug 13, 2019 •
edited
Loading

I have managed to resolve this issue by specifying ~/../node_modules/normalize.css/normalize.css rather than ~/node_modules/normalize.css/normalize.css. I suspect that this is biting those of us with src/ subdirectories in our projects more than others. I fully support a specific manner in which we can address the nearest node_modules subdirectory directly, but am unsure how one would implement such a scheme. For now, walking a directory upin my <link /> isn't any trouble.

EDIT:

(~ will always be the folder with node_modules, might be useful if you have html files in subfolders)

This isn't true and I'm afraid that not addressing this misconception will cause further problems. ~ resolves to the directory containing your entry point. In my case it's the directory BELOW the node_modules directory since I have a src/ folder.

@devongovett
Copy link
Member

For Parcel 2, we are considering supporting an npm: URL protocol to resolve node_modules instead of as a relative path. For example:

<link rel="stylesheet" href="npm:normalize.css">

Without the npm:, it would resolve the same as ./normalize.css, since it is a URL.

See #3492 (comment) for more details.

@mischnic
Copy link
Member

Please follow #3492 for updates

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug ✨ Parcel 2 Resolver
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@devongovett @nevir @bbenne10 @mischnic @ric2b