nystudio107/craft-vite

CSS Link tag not rendering for craft.vite.script

acalvino4 opened this issue · 5 comments

acalvino4 commented

Describe the bug

When I include {{ craft.vite.script(src/ts/index.ts) }} in my twig template, and dev server is not running, no <link rel="stylesheet" ...> tag is generated in my markup.

To reproduce

Steps to reproduce the behaviour:

  1. npm run build - assets and manifest are generated correctly
  2. include {{ craft.vite.script(src/ts/index.ts) }} in page template
  3. ensure dev server is not running
  4. load page containing craft.vite.script tag

Expected behaviour

scripts and styles are linked and loaded as described in docs: https://nystudio107.com/docs/vite/#production

Actual behavior

scripts are loaded and executed (no console errors), but style tag does not appear in page markup

Code Examples

The rendered head code:
image

Minimal template example:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>{{ (pageTitle is defined ? pageTitle ~ ' - ' ~ site.siteTitle : site.siteTitle)|title }}</title>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     {{ craft.vite.script("src/ts/index.ts", false) }}
  </head>
  <body class='flex flex-col min-h-screen'>
    {% include 'site/header'%}
    <main class='grow flex flex-col'>
      {% block main %}
      {% endblock %}
    </main>
    {% include 'site/footer' %}
  </body>
</html>

My index.ts does include an import of the css

import Alpine from 'alpinejs'
import '../css/index.css'

// Accept HMR as per: https://vitejs.dev/guide/api-hmr.html
if (import.meta.hot) {
  import.meta.hot.accept(() => {
    console.log("HMR")
  });
}

window.Alpine = Alpine
Alpine.start()

And here's my manifest.json

{
  "src/ts/index.ts": {
    "file": "assets/app.e48127f3.js",
    "src": "src/ts/index.ts",
    "isEntry": true
  },
  "style.css": {
    "file": "assets/style.92e9556c.css",
    "src": "style.css"
  }
}

Vite is generating my minified, processed css files correctly, hence why I think this is on the Plugin side.

Versions

  • Plugin version: 4.0.2
  • Craft version: 4.2.0.2
acalvino4 commented

Alright, after digging into the source code, I see that my src/ts/index.ts key in manifest.json should have a css key that refers to the style.css asset in order for that asset to be loaded in my template. This seems to not be a bug with this plugin, but some failure of my vite build process to generate that key in manifest.json.

khalwat commented

What version of Vite are you running?

acalvino4 commented

vite 3.0.3. Though it was happening with 2.9.5 as well.

I found that if I have build.cssCodeSplit: true (was previously false), then all works well! So I can at least move forward, though I am curious why disabling code splitting changes the manifest.json in that particular way.

khalwat commented

That is pretty interesting. I do plan to add a way to manually include CSS tags for people who really want to do that, which is something that support was only added for in Vite 3.x

What is the default setting for build.cssCodeSplit? I'm assuming it is true?

acalvino4 commented

Yes, the default is true. I had manually set it to false, but I would have expected the only difference to be that all css is never split into multiple files, not a change in the manifest pattern.

https://vitejs.dev/config/build-options.html#build-csscodesplit