Separately output script and css tags from manifest

dyerc commented 2 years ago

Is your feature request related to a problem? Please describe.

Thank you for Craft Vite 🎉, it does everything absolutely by the textbook and my feature request is to achieve a slightly sub-optimal result.

Describe the solution you would like

I would like to use something like this in my twig layout:

<html>
<head>
    {% if not craft.vite.devServerRunning() %}
        {{ craft.vite.css("src/main.js", false) }}
    {% endif %}
</head>
<body>
    <div>Site here</div>

    {# Javascript #}
    {{ craft.vite.script("src/main.js") }}
</body>
</html>

This would output a link to the CSS file included from main.js in the head section and the rest of the JS loading code at the end of the site body.

Describe alternatives you have considered

Although from the docs I could use the .entry method I don't see how I can stop .script from also outputting the CSS files.

Additional context

I don't have the scope to go down a proper critical CSS setup and I want the CSS to block rendering until it loads so that there isn't a flash of unstyled content.

Is this a feature/functionality you would be open to adding? I would be more than happy to submit a PR if it is?

khalwat commented 2 years ago

Any reason you don't just put the {{ craft.vite.script("src/main.js", false) }} in your <head>?

That's really where it is intended to go anyway... and it outputs the scripts as modules, so they automatically have the defer set.

dyerc commented 2 years ago

Thanks for such a quick reply @khalwat

I didn't realize that module scripts automatically had defer applied to them. My instinct was just to have as few script tags as possible in the head section.

If {{ craft.vite.script("src/main.js", false) }} is intended to go in the <head> section that's great and I'll follow that route. Thanks very much!

nystudio107 / craft-vite