[RFC] A way to include stylesheets/scripts in html without bundling them #1087

samsch · 2018-03-28T14:41:30Z

RFC

Right now, Parcel will attempt to bundle all files referenced in <link href=""/> or <script src=""> tags in your html.

I think it would be useful to have a way to have Parcel ignore some linked files. Specifically, cases where you are building or otherwise sourcing stylesheets separately from your Parcel build, but served from the same folder (or folder tree) as the bundled files. (Files served from other domains or referenced with https:// are already ignored.)

💁 Possible Solution

A possibly naive solution might be to add an identifying character (such as a "#") to the start of any paths/files Parcel should ignore, e.g.:

<html>
  <head>
    <link href="#/bootstrap.css" />
  </head>
</html>

Parcel would simply strip the "#" out when building.

Another possible solution would be ignore comments:

<html>
  <head>
    <!-- parcel-ignore -->
    <link href="/bootstrap.css" />
    <!-- parcel-ignore-end -->
  </head>
</html>

I really don't have an opinion on the specific identifying character or comment format, these were just the first that I thought of to get the idea down.

🔦 Context

I came across this situation while attempting to work around using bootstrap.scss in a project with css-modules. More on that here. However, another reason might be needing to share a local stylesheet between the front and backend, and have it cache for both. You might do this if you have something like a custom Bootstrap build used on all pages (mostly rendered by the backend), including just a single page built with Parcel.

The text was updated successfully, but these errors were encountered:

fathyb · 2018-03-28T14:45:11Z

I really like the #/ syntax proposal, it's clean and easy to parse 👍.

juank11memphis · 2018-03-28T23:36:01Z

I like this, I think it would be super useful

teabyii · 2018-03-30T06:37:53Z

A way to have Parcel ignore some linked files is needed.

However, I don't think it is a good way to add info in HTML files for this. Just keep HTML for you business, without anything for building.

Consider other ways，maybe:

Add .parcelignore to tell parcel to ignore some paths
Add option for this，like --ignore <path> or parcel: { ignore: [] } in package.json

Joe-Withey · 2019-06-17T12:24:13Z

I had a need to ignore some script tags that were pointing the absolute path and found this issue.
For anyone looking to solve this problem I created a plugin, it allows for the use of the # prefix as described above.

https://github.com/Joe-Withey/parcel-plugin-html-root-syntax

stale · 2020-01-17T12:56:16Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

RussCoder · 2020-01-21T18:16:19Z

@Joe-Withey

The plugin doesn't work for me (with parcel 1.12.4), there is an error:

‼ Plugin parcel-plugin-change-file failed to initialize: ReferenceError: configFilePath is not defined

For my need, I found the following solution:

Instead of

<link rel="icon" href="/favicon.png">

I write

<script>document.write(`<link rel="icon" href="/favicon.png">`)</script>

Not good, but works.

samsch · 2020-07-20T13:19:41Z

Could a member/author close either this issue with wontfix or add it a roadmap, and maybe add a comment for whether this feature will exist in v2?

mischnic · 2020-07-20T13:55:00Z

I think something like <link href="/bootstrap.css" data-parcel-ignore/> (the attribute would be removed by Parcel) or

<script data-parcel-ignore>
	 // ...
</script>

would make sense

VladimirMikulic · 2021-06-05T14:38:42Z

I've made a plugin that excludes assets from bundling in Parcel 2.
Check it out https://www.npmjs.com/package/parcel-resolver-ignore

npm i parcel-resolver-ignore -D
.parcelrc

{
  "extends": "@parcel/config-default",
  "resolvers": ["parcel-resolver-ignore", "..."]
}

package.json

{
  "parcelIgnore": [
    "bootstrap.css"
  ]
}

Good to go! No need to modify source files!
Let me all know what you think!

fregante · 2021-06-27T11:10:21Z

Since there's a similar example above, here's a solution for who wants to include favicon.ico without changing its name:

How to copy favicon.ico with Parcel 2

Don't include the favicon meta tag in your HTML
Add favicon.ico to the list of entry points:

parcel build index.html favicon.ico

Set a raw transformer for the favicon.ico

{
  "extends": "@parcel/config-default",
  "transformers": {
    "favicon.ico": ["@parcel/transformer-raw"]
  }
}

And voilà:

✨ Built in 2.30s

dist/index.html                         33.65 KB    396ms
dist/index.90c1f53b.css                  5.79 KB    1.45s
dist/index.2ee6019c.js                    1.4 KB    157ms
dist/favicon.ico                         2.37 KB    143ms

fregante · 2021-06-27T11:15:25Z

@mischnic I think a more generic solution is to use comments:

the minifier already takes care of removing them
they're easily translatable to any language:

<!-- parcel-ignore -->
<script src="some-static-file.js"></script>

<!-- parcel-ignore -->
<link href="bootstrap.css"></script>

<!-- parcel-ignore -->
<iframe src="../status.php"></iframe>

But also:

/* parcel-ignore */
@import '/some-external-file.css';

html {
	background: papayawhip;
}

/* parcel-ignore */
import('../my-local-file.js');

console.log('Loading from server');

marcysutton · 2022-04-26T22:04:06Z

Really glad I found this issue, as Parcel was having trouble with an HTML5 video source element despite saying videos are supported. I kept getting an error about "No transformer found for mp4" files. This worked in case anyone else lands here:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.mp4": ["@parcel/transformer-raw"]
  }
}

Parcel was trying to process the Plausible script (causing a build error), so we had to ignore it using a Parcel plugin. See parcel-bundler/parcel#1087

fregante · 2022-07-16T06:59:20Z

I've probably been waiting for a solution to this since the early days of Parcel. There is a number of reasons why I'd want a specific URL to be ignored by Parcel (i.e. left untouched) but there isn't.

Today's attempt was to have Parcel ignore a call to a "local" dynamic API endpoint, like /api/do-something but I just can't do it. The closest I can come is a ridiculous use of form, which is not advised 😅

- <a href="/api/do-something">Do</a>
+ <form action="/api/do-something" method="get"><button>Do</button></form>

I'm glad that parcel-resolver-ignore exists, which works in this case, but for more dynamic URLs they'd need to be set every time in the configuration rather than inline, which means they might get out of sync.

jdanyow · 2023-11-12T14:03:50Z

I recently encountered an issue where a third-party javascript dependency wouldn't parcel build correctly in production. The file output seemed to be mangled incorrectly by @parcel/optimizer-swc, resulting in duplicate variable declarations and errors at runtime.

The file causing this issue had already been minified by the library maintainer. I really didn't need parcel to make any transforms, just copy the raw file to the dist folder.

After a bit of digging, it turned out to be pretty easy to configure a raw: named pipeline. I got the idea from the config in pr 7050. Depending on your use-case, you may only need a subset of the transformers/packagers/optimizers sections below.

{
  "extends": "@parcel/config-default",
  "transformers": {
    "raw:*": [
      "@parcel/transformer-raw"
    ]
  },
  "packagers": {
    "raw:*": "@parcel/packager-raw"
  },
  "optimizers": {
    "raw:*": []
  }
}

This allows you to reference json, scripts, etc without changing them.

<html>
  <head>
    <link rel="preload" href="raw:emoji.json" as="fetch" />
    <script src="raw:./a/b/c.js"></script>
    ...

Hopefully this helps others. We could create a shared configuration distributed on npm if folks think this is a good way of handling this type of issue.

fathyb added 💬 RFC Request For Comments HTML Preprocessing labels Mar 28, 2018

DeMoorJasper mentioned this issue Mar 29, 2018

Suggestion: myurl?static should tell parcel to copy the file as-is #1084

Closed

DeMoorJasper mentioned this issue May 17, 2018

How can i ignore bundling of images? #1379

Closed

foobarbecue mentioned this issue Aug 7, 2019

Ignore certain link targets in HTML href #1186

Open

mischnic mentioned this issue Aug 10, 2019

How can I make sass ignore url() paths? #3313

Closed

stale bot added the Stale Inactive issues label Jan 17, 2020

github-actions bot removed the Stale Inactive issues label Jan 21, 2020

mischnic mentioned this issue Apr 22, 2020

I don't want to bundle the images referenced in the scss file. #4457

Closed

github-actions bot added the Stale Inactive issues label Jul 20, 2020

github-actions bot removed the Stale Inactive issues label Jul 20, 2020

mischnic added 🙋‍♀️ Feature ✨ Parcel 2 and removed 💬 RFC Request For Comments labels Jul 20, 2020

mischnic mentioned this issue Nov 27, 2020

Parcel 2: A way to avoid processing <link href> #5397

Closed

EyMaddis mentioned this issue Apr 30, 2021

[Parcel 2] build breaks inline script tag for external library #6213

Closed

mischnic mentioned this issue May 4, 2021

Need a way to escape {{ }} characters. #6233

Closed

folknor mentioned this issue Dec 4, 2021

add demo css and js files in index.html #7388

Closed

mischnic mentioned this issue Mar 22, 2022

Parcel cannot handle scripts with type="plain/text" #7696

Closed

dguo added a commit to dguo/dailylore that referenced this issue Jul 7, 2022

Set up Plausible proxying

1df29b9

Parcel was trying to process the Plausible script (causing a build error), so we had to ignore it using a Parcel plugin. See parcel-bundler/parcel#1087

dguo mentioned this issue Jul 7, 2022

Set up Plausible proxying dguo/dailylore#89

Merged

dguo added a commit to dguo/dailylore that referenced this issue Jul 7, 2022

Set up Plausible proxying

583946d

Parcel was trying to process the Plausible script (causing a build error), so we had to ignore it using a Parcel plugin. See parcel-bundler/parcel#1087

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RFC] A way to include stylesheets/scripts in html without bundling them #1087

[RFC] A way to include stylesheets/scripts in html without bundling them #1087

samsch commented Mar 28, 2018

fathyb commented Mar 28, 2018

juank11memphis commented Mar 28, 2018

teabyii commented Mar 30, 2018

Joe-Withey commented Jun 17, 2019

stale bot commented Jan 17, 2020

RussCoder commented Jan 21, 2020

samsch commented Jul 20, 2020

mischnic commented Jul 20, 2020

VladimirMikulic commented Jun 5, 2021

fregante commented Jun 27, 2021

fregante commented Jun 27, 2021

marcysutton commented Apr 26, 2022

fregante commented Jul 16, 2022 •

edited

Loading

jdanyow commented Nov 12, 2023

[RFC] A way to include stylesheets/scripts in html without bundling them #1087

[RFC] A way to include stylesheets/scripts in html without bundling them #1087

Comments

samsch commented Mar 28, 2018

RFC

💁 Possible Solution

🔦 Context

fathyb commented Mar 28, 2018

juank11memphis commented Mar 28, 2018

teabyii commented Mar 30, 2018

Joe-Withey commented Jun 17, 2019

stale bot commented Jan 17, 2020

RussCoder commented Jan 21, 2020

samsch commented Jul 20, 2020

mischnic commented Jul 20, 2020

VladimirMikulic commented Jun 5, 2021

fregante commented Jun 27, 2021

How to copy favicon.ico with Parcel 2

fregante commented Jun 27, 2021

marcysutton commented Apr 26, 2022

fregante commented Jul 16, 2022 • edited Loading

jdanyow commented Nov 12, 2023

fregante commented Jul 16, 2022 •

edited

Loading