template specific index.css files won't get loaded if template index.js is empty

[elsonigo]

First of all, thanks a lot for this awesome vite plugin!

I have a Kirby project with multiple templates. Most of these templates only have a specific css file and no additional javascript. My folder structure looks like this src/templates/example/index.js and the index.js files only import the respective index.css file: import "./index.css".

When I run npm run dev, everything works fine. But as soon as I try to build my project with npm run build, these template specific css files won't get loaded.

But if I add an arbitrary console.log("hoi") into the index.js, the css files will get bundled:

Page loaded with index.js only having an import statement – no template index.css was bundled.

Same page loaded where index.js has arbitrary console.log added – the template specific css file get's loaded.

My header.php snippet contains the following vite setup (copied from your multipage example kit):

    <?php $template = $page->template(); ?>
    <?= vite()->js('index.js', ['defer' => true]); ?>
    <?= vite()->css('index.js'); ?>
    <?= vite()->js("templates/$template/index.js", ['defer' => true], try: true); ?>
    <?= vite()->css("templates/$template/index.js", try: true); ?>

Is this working as intended or am I missing something important?

[arnoson]

Which version are you using? I have a smilar setup (a js/ts file that only imports the css) and everything is working. On build vite generates an empty js file and the css file and adds an entry in the manifest.json.

[elsonigo]

TLDR: I got it to work by changing the name from angebote/index.css to angebote/angebote.css and importing it accordingly.

Long Version

My package.json dependencies look like this:

  "devDependencies": {
    "@vitejs/plugin-legacy": "^4.0.2",
    "autoprefixer": "^10.4.14",
    "glob": "^10.3.3",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.0",
    "terser": "^5.16.6",
    "vite": "^3.0.0 || ^4.0.0",
    "vite-plugin-kirby": "^4.0.3"
  }

If I only have a css import statement in the index.js, the assets get added to the manifest.json correctly (I assume). The css files that the manifest points to all exist and contain the desired code.

  "templates/angebote/index.css": {
    "css": [
      "assets/index-eb4fadef.css"
    ],
    "file": "assets/index-ca5a5584.js",
    "isEntry": true,
    "src": "templates/angebote/index.css"
  },
  "templates/angebote/index.js": {
    "file": "assets/index-f4c7b5d2.js",
    "imports": [
      "templates/angebote/index.css"
    ],
    "isEntry": true,
    "src": "templates/angebote/index.js"
  },

But the asset won't get loaded if I open the page. Instead of the css file it should load, it adds the index.js (index-f4c7):

If I add the arbitrary console.log to the index.js, I get the following manifest.json. As expected, the hash of the index-f4c7 changed:

  "templates/angebote/index.css": {
    "file": "assets/index-eb4fadef.css",
    "isEntry": true,
    "src": "templates/angebote/index.css"
  },
  "templates/angebote/index.js": {
    "css": [
      "assets/index-eb4fadef.css"
    ],
    "file": "assets/index-0bac519d.js",
    "isEntry": true,
    "src": "templates/angebote/index.js"
  },

The browser now loads the desired files:

– If I change the name of the angebote/index.css to angebote/angebote.css and import "./angebote.css" inside the template index.js it works!" –

But the manifest.json looks strange. The css src points to templates/angebote/index.css, which doesn't exist anymore (maybe that's an internal mechanic I don't understand).

  "templates/angebote/index.css": {
    "file": "assets/index-eb4fadef.css",
    "src": "templates/angebote/index.css"
  },
  "templates/angebote/index.js": {
    "css": [
      "assets/index-eb4fadef.css"
    ],
    "file": "assets/index-ca5a5584.js",
    "isEntry": true,
    "src": "templates/angebote/index.js"
  },

Could the problem be, that all my template files are called index.css and index.js and all the javascript files only contain the exact same import statement?

[arnoson]

Thanks for the detailed information! I think I have found the issue: in a recent change I experimented with treating css files as vite entries (so you don't have to use empty js files that only import css). This approach is not yet working correctly in dev, so I changed everything back, but I forgot to change the vite.config.js. I just pushed a commit which should solve your problem. Basically the input part in vite.config.js changes to:

const input = ["src/index.js", ...globSync("src/templates/*/index.js")].map(
  (path) => resolve(process.cwd(), path)
);