[4.x]: css and js tag: support for gzip files

[rauwebieten]

What happened?

Description

The template tags css and js do not support gzipped file URL's (unless using absolute url's)

{% "/build/vendor.dist.css.gz" %}
{% "/build/main.dist.css.gz" %}

In the docs: To register a CSS file, the URL must begin with https:// or http://, or end in .css
(https://craftcms.com/docs/4.x/dev/tags.html#css)

In our project we have some CSS and JS files which are manually gzip encoded.
They have the extension .css.gz and .js.gz

Maybe the tag could support these files by allowing the file to end in ".css.gz" and ".js.gz".

Our workaround now is using a absolute path in the template tag:

{% css alias('@web') ~ "/build/vendor.dist.css.gz" %}
{% css alias('@web') ~ "/build/main.dist.css.gz" %}

Craft CMS version

4.7.0

PHP version

8.1

Operating system and version

Debian

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[brandonkelly]

This seems like a bit of a bad idea performance-wise…

[rauwebieten]

Hi Brandon,
What is bad idea, and why?

[brandonkelly]

Sorry, I misread and thought you were asking for Craft to be able to serve gzipped files.

I’ve just added support for .js.gz and .css.gz for Craft 4.8 and the next Craft 5 alpha release. (f52cbee)

Craft 4.8 is in development, but it’s safe to switch to now if you want to get the change early. To do that, change your craftcms/cms requirement in composer.json to "4.8.x-dev as 4.8.0-alpha", and run composer update.

[brandonkelly]

Craft 4.8.0 is out now with that change :)

[proimage]

Is there any documentation on serving pre-gzipped files to the browser? Wouldn't the browser be at the mercy of the server being configured to serve .css.gz and .js.gz with CSS and JS mime-types? The only information I could find on the topic seemed to indicate that this was something a server would have to be configured to do manually: https://stackoverflow.com/questions/9076752/how-to-force-apache-to-use-manually-pre-compressed-gz-file-of-css-and-js-files/9158330#9158330

I'm not against Craft supporting this ... atypical usage, mind you... just curious if it's more widely accepted or used than I've thought.

BTW, as an alternative solution to using {% css %} and {% js %} with non-.css or .js extensions (such as often found on CDNs, eg example.com/path/to/cssWithNoExtension), I've used query strings as a simple bypass before: {% css 'example.com/path/to/cssWithNoExtension' ~ '?fakeExt=.css' %}

[brandonkelly]

@proimage I’m guessing it’s something that happens in the artifact build process, hence the .gz file extensions.