Is there a way to inline all JS and CSS files into HTML file?

[szimek]

Hi! I'm working on a plugin for a headless CMS that we use - it expects a single index.html file that is hosted by the headless CMS and loaded in an iframe on their page. That's why I need to inline all my JS and CSS files into the generated index.html file. How to do it with Parcel 2?

[mischnic]

Importing in inline scripts inlines the whole thing:

<script>
   import "./index.js";
</script>

[jnm2]

Is this a v2 capability? I'm getting "Imports and requires are not supported inside inline <script> tags yet" with this syntax.

[mischnic]

Yes, Parcel 2 only

[sekoyo]

Very nice. Just needs type="module" too.

@parcel/transformer-js: Browser scripts cannot have imports or exports.

  .../dialog.html:10:7
     9 |     <script>
  > 10 |       import './dialog.ts'
  >    |       ^^^^^^^^^^^^^^^^^^^^
    11 |     </script>
    12 |   </body>

  💡 Add the type="module" attribute to the <script> tag.
  📝 Learn more

[szimek]

@mischnic Thanks! Seems pretty obvious when I look at it ;)

Just a note to others and my future self: if you import any CSS file in JS, Parcel will generate a CSS file and add a <link> tag with href pointing to it. Importing CSS in a similar way to JS - <style>@import './style.css'</style> - solves this problem.