Project

General

Profile

Actions

Defect #29625

closed

application.css imported by themes not covered by cache control versioning

Added by T Goeg about 6 years ago. Updated about 1 month ago.

Status:
Closed
Priority:
Normal
Assignee:
-
Category:
Themes
Target version:
-
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed
Affected version:

Description

The subject and #24617-12 pretty much says it all.

After an update, the old application.css still gets used by browsers' caches, with no means other than renaming the file and its import statements in the used theme to force cache invalidation.

Partial workaround:
public/themes/<activetheme>/stylesheets/application.css

Change import statement
@import url(../../../stylesheets/application.css);

to some other name (e.g. application_v2.css)

Rename public/stylesheets/application.css to e.g. application_v2.css

Also apply the cache control hack in the mentioned ticket.

However, you can still never go back to application.css as browsers will still keep it cached forever. A fix is needed that makes the filename unique on every update, much like all other resources.
This may also affect other resources delivered by themes (e.g. images), so a best practice should be given for how to avoid that as well.


Related issues

Related to Redmine - Defect #24617: Browser js/css cache remains after upgradeClosedJean-Philippe Lang

Actions
Related to Redmine - Feature #39111: Enable Asset Pipeline Integration using PropshaftClosedMarius BÄ‚LTEANU

Actions
Actions #1

Updated by Go MAEDA about 6 years ago

  • Subject changed from application.css not covered by cache control versioning to application.css imported by themes not covered by cache control versioning
  • Category set to Themes
Actions #2

Updated by Go MAEDA about 6 years ago

  • Related to Defect #24617: Browser js/css cache remains after upgrade added
Actions #3

Updated by Yuuki NARA over 5 years ago

+1

I think this information should be known more.

Actions #4

Updated by Jonathan Cormier about 3 years ago

Change import statement
@import url(../../../stylesheets/application.css);

to some other name (e.g. application_v2.css)

Rename public/stylesheets/application.css to e.g. application_v2.css

A "better" workaround is to append a ?version tag instead of renaming the file, that way you don't have to modify redmine internal files. The downside still being that you have to remember to update your theme everytime you upgrade redmine..

Example:

 @import url(../../../stylesheets/application.css?4.3.2);

So I also modified the cache directive from https://www.redmine.org/projects/redmine/wiki/BrowserCaching#The-work-round-for-RedMine

I decided to stop caching any files which don't have the ?version tags. At least on redmine 4.2.3, the vast majority of the files have this tag. Only leaving out a few images which are loaded from application.css

-  # the regex logic: after either /javascripts/ or /stylesheets/ find the suffixes we want, followed by any quantity of numbers 0-9
+  # the regex logic: after either /javascripts/ or /stylesheets/ find the suffixes we want, followed by one or more numbers 0-9
   # This works because the files we want to cache always appear after one of those 2 directories:  but not the files we want to ignore
   # /journals/edit/24174.js  and /uploads.js?attachment_id=1&filename=my-file-to-upload.png
-  location ~* {{REDMINE_RELATIVE_URL_ROOT}}(?<file>/(?:(?:plugin_assets/|themes/).+)?(?:javascripts|stylesheets|images|favicon)/.+(?:css|js|jpe?g|gif|ico|png|html)(\?[0-9]+)?$) {
+  location ~* {{REDMINE_RELATIVE_URL_ROOT}}(?<file>/(?:(?:plugin_assets/|themes/).+)?(?:javascripts|stylesheets|images|favicon)/.+(?:css|js|jpe?g|gif|ico|png|html)(\?[0-9]+)$) {
Actions #5

Updated by Go MAEDA about 1 month ago

  • Status changed from New to Closed
  • Resolution set to Fixed

I am closing this issue as it has been addressed with the introduction of Propshaft in #39111.

The file name for application.css now includes a unique hash, such as application-d6f7411e86b2ce8420acd27cf33d18c838c5f975.css. The hash will change whenever application.css is updated, ensuring that outdated cached files are not improperly used. Third-party themes that import application.css via @import URL(...) will also benefit from this versioning behavior.

Actions #6

Updated by Go MAEDA about 1 month ago

  • Related to Feature #39111: Enable Asset Pipeline Integration using Propshaft added
Actions

Also available in: Atom PDF