Versions 1.0.15 and 1.0.16 are not published to the NPM repo. Is it possible to publish them?

Hello!

I've tried to use your plugin but unfortunately it does not inline all css and js resources. I've installed the plugin and then typed "parcel build index.html". It produced normal set of parcel files instead of one html. What's more, even the html file consisted of only html, not both html, css and js.

I use node 8.11.3, npm 6.2.0.

I want the favicon to turn into a data-url.
but I am getting just a .ico file next to the compiled html file

Hi!

There is currently no way to add custom transformations for the posthtml-inline-assets module.
As you wrote in the readme: "There are no configuration options".
I don't know if this is a function that will come in the future, or if you didn't want to make it configurable at all.
Either way, it would be great if the module was configurable for the poshtml plugin! :)

I am currently trying to build an web application using Windows.

I did the following things:

npm install --save parcel-plugin-inliner
$env:INLINE_ASSETS = 'true'
$env:ENV = 'development'
parcel .\web\index.html

I checked out the index.html file and its still links to the index.hash.css and index.hash.js instead of inlining the content.

My environment is:

npm -v
7.14.0

node -v
v16.2.0

parcel --version
2.0.0-beta.3.1

I had an index.html that references an adjacent index.css file. inliner was unable to resolve the CSS file; it just couldn't find it.

I think this stems from the need for this feature:

remy/inliner#171

Since the Parcel plugin is unable to thread the correct location to resolve those relative references from on the file system through to Inliner.

For reference, the log from Inliner looks something like this:

  inliner html: 1 +0ms
  inliner inlining file +1ms
  inliner inliner.get file: /Users/alafroscia/Code/netflix/launcher-page-html/dist/index.html +1ms
  inliner processing HTML +1ms
  inliner { images: true,
  inliner   compressCSS: true,
  inliner   compressJS: true,
  inliner   collapseWhitespace: true,
  inliner   nosvg: false,
  inliner   skipAbsoluteUrls: false,
  inliner   preserveComments: false,
  inliner   iesafe: false } +0ms
  inliner loaded DOM +5ms
  inliner links: 1 +4ms
  inliner start 1 links +0ms
  inliner inliner.get file: /src.b1a1520c.css +0ms
  inliner skipping videos +0ms
  inliner ENOENT: src.b1a1520c.css, trying decodeURI +2ms
  inliner adding 0 CSS assets +2ms
  inliner images: 0 +0ms
  inliner collapsing whitespace +2ms
  inliner completed: 432 bytes +1ms

so it seems like it identifies the CSS file to resolve, but just fails to do so.

After you install it, it automatically runs when you use ParcelJS: https://parceljs.org/plugins.html#using-plugins

Unfortunately I got TypeError: document.body is null when I tried to use it. (Edit: never mind, that was my mistake.)

I got it working; it doesn't support inlining images though. This seems to do the trick! https://github.com/remy/inliner

Steps to reproduce

1. Set up a simple index.html file referencing an index.ts file.

2. Put something in the index.ts file that affects page display.

3. Without parcel-plugin-inliner installed, run parcel watch --public-url . index.html.

4. Observe the thing from index.ts that affects page display, such as:

   document.body.append('XXX');

5. Comment out that thing in index.ts.

6. Reload the page, and observe that the thing is no longer visible.

7. Terminate the parcel watch process.

8. Reinstate the thing in index.ts.

9. With parcel-plugin-inliner installed, run parcel watch --public-url . index.html .

10. Observe the thing from index.ts that affects page display.

11. Comment out that thing in index.ts.

12. Observe that the page reloads, but the thing remains visible.

Expected result

Inlined assets update as the parcel watch process rebuilds them.

I like the ability to inline certain things, but often it makes little sense to inline everything, such as:

• favicon images (let the browser download the one it needs, it's not a critical item to render the page)
• script tags with the defer attribute

Is there a way to control the list of resources to inline ?

I tried to use this plugin for my project that uses scss, but using scss requires doing an import in index.js file as so: import './index.scss';, I cannot simply link in index.html

Is there a way to use this plugin with scss?

</script needs to be replaced with <\/script anywhere it is present during inlining as it breaks out of the script tag early.

I'm getting this error when trying to run it:

Cannot read property 'type' of null
    at Bundler.bundler.on (/home/ole/projects/dilbert/node_modules/parcel-plugin-inliner/index.js:6:69)
    at Bundler.emit (events.js:182:13)
    at Bundler.bundle (/home/ole/projects/dilbert/node_modules/parcel-bundler/src/Bundler.js:324:12)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)

I have a pretty simple setup with one .less file and one .js file referenced in index.html. I remembered to add public-url as well.

Hi :)

I tryed to inline some svg icons here : https://github.com/Shuunen/folio/tree/feat/inline-svg-via-parcel-plugin-inliner

But it produce weird base 64, here is the before after build :

Any ideas ?

• Does this plugin support parcel version >= 2.0.0-beta.1?
• If it doesn't: What would need to change so it does?

Are PRs welcome?

I would like to retain comments in my index.js file. I do this using a .terserrc file:
{ "output": { "comments": true } }

However, when using the plugin the comments are stripped from the inline file. Is there a way to preserve them?

Both of these links 404 for me.

• Using link tags: https://gist.github.com/shff/8bf4606ecf1e3ee3ccee2a568d704c52
• Using import in JS: https://gist.github.com/shff/cdcaa31275c8ba9a8e2e230f445654a3

It would be nice if this plugin would inline asserts in HTML files generates from, say, pug templates.

This plugin is great.

I would like to utilize some more options of posthtml-inline-assets to inline only certain resources.

My use case is that I need to inline CSS for a splash screen or above the fold content only.

Proposal

• Either allow to configure filters e.g. with resolve option
• Or use a declarative approach at the HTML node, e.g. with a data-inline boolean attribute

  <--! will be inlined -->
  <link rel="stylesheet" href="./foo.css" data-inline />
  <script src="./foo.js" data-inline></script>
  <--! will not be inlined -->
  <link rel="stylesheet" href="./bar.css" />
  <script src="./bar.js"></script>

Alternatively if it would work the same as in Parcel V2, that would be great too.
https://parceljs.org/languages/html/#inline-script-and-style-tags

parcel-plugin-ogimage uses --public-url for URL transforming but parcel-plugin-inliner uses this option for local files resolving. So I cannot use both plugins.

lukechilds/parcel-plugin-ogimage#7