IllusionCMS
EN
Manual · 5

CSS and JavaScript

Delivered minified

Visitors receive CSS and JS minified (with esbuild): whitespace and comments are dropped, local variables get short names – the files become smaller and harder to read. In the admin, your source code stays unchanged. Global names (e.g. functions called by onclick="…") and license comments (/*! … */, @license) are preserved. If a file has a syntax error, it is delivered unchanged and the error is noted in the server log. This also applies to the static export.

Minifying doesn’t really protect the code – what runs in the browser can always be read, just with more effort.

The library

CSS and JS files are kept centrally under CSS & JS. There you can see how many pages and Snippets use a file, and you can edit, rename or delete it. With a Folder next to the name, you group the list, e.g. by project. Folders can be collapsed.

Assigning files to pages

In the page editor in the CSS and JS tabs:

  • New file – creates a file and assigns it to the page.
  • Add existing – assigns a file from the library.
  • inherit – the file is also loaded on all subpages. Ideal: the main stylesheet once on the home page, inherited.
  • Arrows – change the order (important for CSS that overrides itself).
  • ✕ – remove the assignment (the file stays in the library).

Inherited files appear with the note inherited from “…” and can also be edited directly. If a file is used on several pages, the editor points this out – every change applies everywhere.

Files can also be assigned to Snippets – then they load only on pages that actually include the Snippet, see CSS and JS on Snippets.

Load order

  1. Inherited files of the ancestors (from the home page downward),
  2. then the page’s own files in the configured order,
  3. then those of the Snippets used (in the order in which the Snippets first appear).

CSS ends up in the <head>, JavaScript at the end of <body>. Duplicate assignments are loaded only once.

Loading files at a specific position

If you need a file at an exact position – say, a script that has to come before an inline script –, include it in the HTML:

<script src="{{ asset_url(7) }}"></script>
<link rel="stylesheet" href="{{ asset_url(3) }}">

asset_url returns a versioned URL; after every change, the browser loads the new version. You can see the ID in the library in the address bar (#/assets/7).

CSS and JS files are not templates – {{ … }} in them is not evaluated.