By catch on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
10.1.X
Introduced in version: 
10.1.0
Issue links: 
https://www.drupal.org/node/1014086
Description: 

hook_css_alter() and hook_js_alter()

hook_css_alter() and hook_js_alter() now receive an explicit $language argument. If altering CSS based on the language (as in locale module), your implementation should be updated to take the language from this argument instead of getting the current language from the language manager.

In general, hook_css_alter() and hook_js_alter() may now be called from a separate HTTP request from the one rendering the HTML (this was already the case with some contributed modules), and as such cannot vary on all information from the request such as route.

Asset system deprecations and additions

Several classes in the asset aggregation system have been deprecated. New classes and interfaces have been added.

This enables assets aggregates to be built when the file is requested, instead of during page rendering itself.

New interfaces:

Drupal\Core\Asset\AssetCollectionGroupOptimizerInterface
Drupal\Core\Asset\AssetDumperUriInterface

New classes:

Drupal\Core\Asset\AssetGroupSetHashTrait
Drupal\Core\Asset\CssCollectionOptimizerLazy
Drupal\Core\Asset\JsCollectionOptimizerLazy
Drupal\Core\Asset\AssetControllerBase

Deprecated:

Drupal\Core\Asset\CssCollectionOptimizer
Drupal\Core\Asset\JsCollectionOptimizer

Sites using nginx and php-fpm

Sites using nginx/php-fpm may need to update their nginx.conf file to pass through the css/js path to Drupal.

Before

# Passes style generation to PHP.
location ~ ^/sites/.*/files/styles/ {
  try_files $uri @rewrite;
}

After

# Passes image style and asset generation to PHP.
location ~ ^/sites/.*/files/(css|js|styles)/ {
  try_files $uri @rewrite;
}
Impacts: 
Module developers
Themers

Comments

andypost’s picture

andypost
he/him
Primary language Russian
commented

CSS and JavaScript aggregation performance improvements

merilainen’s picture

merilainen commented

Having trouble with multilingual sites and the proposed fix? This fix in Lando drupal10 recipe should work better:

# Fighting with Styles? This little gem is amazing.
# location ~ ^/sites/.*/files/imagecache/ { # For Drupal <= 6
location ~ ^(/[a-z\-]+)?/sites/.*/files/(css|js|styles)/ { # For Drupal >= 7
    try_files $uri @rewrite;
}
sd123’s picture

sd123 commented

I have altered my configuration as follows:

    # Serve images that do not need compression
    location ~* \.(png|jpg|jpeg|gif|ico)$ {
        add_header Cache-Control 'public, max-age=31536000, immutable';
        try_files $uri @rewrite;
        expires max;
        log_not_found off;
    }
    # Serve static compressed versions of files
    location ~* \.(js|css|svg|webmanifest)$ {
        add_header Cache-Control 'public, max-age=31536000, immutable';
        try_files $uri @rewrite;
        expires max;
        log_not_found off;
        brotli_static on;
        gzip_static on;
    }

This works with Drupal 9.5 (not yet tested with 10.x as I am still preparing the upgrade).

This looks better to me as what is proposed here, as it looks for all files independent of the directory. For instance, I have the Matomo plugin installed. This plugins creates ^/sites/.*/files/matomo/matomo.(js|js.gz) which is not intercepted with the proposed config (the static brotli version was created manually).

Or am I mistaken and has my configuration disadvantages or will it not work with Drupal 10.x?

marvs5’s picture

marvs5 commented

I changed the Nginx configuration as above. The JS aggregation works fine. The CSS aggregation still breaks the CSS. Ideas?

marvs5’s picture

marvs5 commented

Upon further review, the JS was still broken. I had to turn of JS aggregation. This solution didn't work for me.

mt-i-1’s picture

mt-i-1 commented

this worked for me : https://www.drupal.org/project/drupal/issues/3368769#comment-15118911