Twig sometimes breaks JavaScript or CSS Sometimes when your javascripts or stylesheets are formatted a certain way, twig seems to try and render those snippets (whom always include curly brackets in some way).

For example, if you end you're CSS stylesheet with something like this;

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}


(I can't remember the exact case off the top of my head, but I believe this is it)

The stylesheet won't render, as twig throws an exception giving you a 500 error. It seems to be that the curly brackets (two next to each other in the flow) gets interpreted as twig.

The same goes for JavaScript, where a concrete example is instafeed.js if you import and compile with Parcel or Webpack or the likes, there's a line of code in that library that makes the .js file throw a 500 error because twig interprets the file. Specifically this line;

pattern = /(?:\{{2})([\w\[\]\.]+)(?:\}{2})/;


Again the curly brackets breaks the loading of the .js file.

I actually haven't gotten around to simply loading the javascript and css though basic tags in the html, so it might be that the issue is only present when loading through {% do view.registerCssFile(url) %} or {% do view.registerJsFile(url) %}.

Any simple workaround for this (maybe just loading with html like &lt;script src="{{ path-to-file }}"&gt;)?
Don't put your CSS and JS files in the /templates folder. Store them on the front-end in the /web folder.

If they're not in the templates folder, Twig won't try to parse them.