JS files in src directory mess up the build

[eidens-design]

Hey, love the kit. I'm having issues building the site, when I start including Javascript files. I import them in the entry point index.js file and run the build command. For some reason it renames the shared.css file that is generated into one of the JS files I import in my index.js file

/* Entry point / import '/scss/styles.scss';

import '../public/js/anti-spam';

Generates a shared.js file, but also a anti-spam.css file (with hashes of course, but still, why does it create a CSS file from it? This is not a file in the template dir) and NO shared.css file.

And this: import '../public/js/anti-spam';

/* Entry point / import '/scss/styles.scss';

Generates a shared.js file which includes styles.js which has the contents of anti-spam.js Am I doing something incredibly obviously wrong here?

[arnoson]

Glad you like the kit! I can't see an obvious error, but it is hard to judge without an example, can you create a repository demonstrating the issue?

[eidens-design]

Maybe I explained it weirdly. There are css files generated, that have JS content. And that messes up the manifest, so Kirby won't load. https://github.com/eidens-design/goeran-eidens

See the public/dist contents.

I include the js files through my Kirby Layout now, but they are not minimized obviously. I'm sure it worked at some point. Maybe something I did messed it up.

[arnoson]

Thanks, I just did a quick test and the issue seems to be related to the vite-plugin-sass-glob-import plugin. I'm not familiar with it, but when the plugin is disabled no anti-spam[hash].css file was created. So maybe you can open an issue there?

[eidens-design]

I just removed all globbing related things, and it is still building the files that way. Pushed it to the repo for you to check out.. :/

[arnoson]

Okay my bad, the plugin wasn't the issue. I did some more testing and it seems that the problem is your way of mixing ES modules and normale js files. For example the index.js module imports another file (like /js/anti-spam.js) but it doesn't import anything from it. I don't think vite is meant to work this way and therefore results in weird quirks.

I've you rewrite your anti spam as a module that exports something like this:

// js/anti-spam.js

function decode(a) {
  return a.replace(/[a-zA-Z]/g, function (c) {
    return String.fromCharCode(
      (c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26
    );
  });
}

function openMailer(element) {
  var y = decode(element.dataset.key);
  element.setAttribute("href", y);
  element.firstChild.nodeValue = "E-Mail-Software öffnet sich";
}

export function antiSpam() {
  var emailField = document.getElementById("email");

  if (emailField !== null) {
    emailField.href = "#";
    emailField.innerHTML = "bitte klicken";
    emailField.addEventListener(
      "click",
      function () {
        // anonyme Funktion
        openMailer(emailField);
      },
      false
    );
  }
}

and than import it and use it:

import "/scss/styles.scss";
import { antiSpam } from "./js/anti-spam";

document.addEventListener("DOMContentLoaded", antiSpam);

the bundle works as expected. So if you want to use vite you should only use ES modules.

[eidens-design]

Oh that makes sense!