Bug #82636
closed
concatenation changes include order of CSS files, breaks CSS.
0%
Description
I have some cssInline, which is automatically externalized into a css file (via config.removeDefaultJS = external).
And I have some CSS files, included via default page.includeCSS.
In the source code, they show up like:
<link rel="stylesheet" type="text/css" href="/fileadmin/site/framework/css/bootstrap.min.css?1506943541" media="all">
<link rel="stylesheet" type="text/css" href="/fileadmin/site/framework/css/main.css?1506943541" media="all">
<link rel="stylesheet" type="text/css" href="/fileadmin/site/framework/css/additions.css?1506943541" media="all">
<link rel="stylesheet" type="text/css" href="/fileadmin/site/framework-nc/css/main.css?1506694395" media="all">
<link rel="stylesheet" type="text/css" href="https://somedomain.tld/css/main.css" media="all">
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/css/436ba33024.css?1506927672" media="all">
You see the externalized one at the bottom.
The externalized one is automatically "excludeFromConcatenation", because that's how things are done in \TYPO3\CMS\Frontend\Page\PageGenerator::addCssToPageRenderer() when called from \TYPO3\CMS\Frontend\Page\PageGenerator::renderContentWithHeader():
self::addCssToPageRenderer($cssPageStyle, true, 'InlinePageCss');
Now when concatenating the other files, suddenly this external file (page.cssInline) which is used to override some CSS of the above files, appears at the TOP of the list. Why?
Because this does not work in \TYPO3\CMS\Core\Resource\ResourceCompressor::concatenateCssFiles():
// place the merged stylesheet on top of the stylesheets
$cssFiles = array_merge($cssFiles, [$targetFile => $concatenatedOptions]);
At this point, $cssFiles is this:
Array
(
[typo3temp/assets/css/edc1a6c625.css] => Array
(
[file] => typo3temp/assets/css/edc1a6c625.css
[rel] => stylesheet
[media] => all
[title] =>
[compress] =>
[forceOnTop] =>
[allWrap] =>
[excludeFromConcatenation] => 1
[splitChar] => |
)
)
And [$targetFile => $concatenatedOptions] is this:
Array
(
[typo3temp/assets/compressed/merged-9e3a4540615f81c720077bca7cad010d.css] => Array
(
[file] => typo3temp/assets/compressed/merged-9e3a4540615f81c720077bca7cad010d.css
[rel] => stylesheet
[media] => all
[compress] => 1
[excludeFromConcatenation] => 1
[forceOnTop] =>
[allWrap] =>
)
)
after the $cssFiles = array_merge($cssFiles, [$targetFile => $concatenatedOptions]), you get this:
Array
(
[typo3temp/assets/css/edc1a6c625.css] => Array
(
[file] => typo3temp/assets/css/edc1a6c625.css
[rel] => stylesheet
[media] => all
[title] =>
[compress] =>
[forceOnTop] =>
[allWrap] =>
[excludeFromConcatenation] => 1
[splitChar] => |
)
[typo3temp/assets/compressed/merged-9e3a4540615f81c720077bca7cad010d.css] => Array
(
[file] => typo3temp/assets/compressed/merged-9e3a4540615f81c720077bca7cad010d.css
[rel] => stylesheet
[media] => all
[compress] => 1
[excludeFromConcatenation] => 1
[forceOnTop] =>
[allWrap] =>
)
)
So, now the concatenated file is below the page.cssInline file - the previous include order is not preserved.
Therefore, array_merge() is not the right method here - or the array_merge() parameters need to be exchanged.
The comment line above the array_merge() even says:
// place the merged stylesheet on top of the stylesheets
But that's not happening - it is placed below the stylesheets, not no top.
Could it be that this is a regression?
Updated by
Updated by Julian Hofmann about 6 years ago
Maybe a workaround: includeCSSLibs stay on top of the CSS includes.
Updated by Wolfgang Wagner about 5 years ago
- TYPO3 Version changed from 8 to 9
- PHP Version changed from 7.1 to 7.2
Bug still exists in TYPO3 9.5.8
Updated by Wolfgang Wagner about 5 years ago
- TYPO3 Version changed from 9 to 8
- PHP Version changed from 7.2 to 7.1
Ups, sorry, accidently changed TYPO3 and PHP-Version...
Updated by David Bruchmann about 4 years ago
I also have some problems to sort the files in the desired order, the file with the default styles is not sorted at the correct position in TYPO3 version 10.
I expect it being after includeCSSLibs but before includeCSS, so that I can override default styles but the default styles are sorted at the bottom of the list.
Currently I (mis)used headerData to place references to individual stylesheets at last, they are then after the JavaScript-files.
Updated by Riccardo De Contardi 14 days ago
Is this related or even a duplicate of #93184 ?
Updated by Garvin Hicking 10 days ago
- Status changed from New to Closed
I would like to close this issue mainly because if specific ordering plus concatenation and compression is involved, it is recommended these days to create a sitepackage extension and use dedicated bundling/merging/compilation tools in a frontend buildchain. This way you have total control over the order and processing of all involved assets.
Since TYPO3v12, assets are also no longer recommended to be placed without EXT:... notation syntax, so this bundling process becomes more natural in conjunction with an extension.
Regarding frontend performance and reliability and todays availability of HTTP/2, this "old school" way of PHP-side/application-level compression and concatenation will unlikely receive more bugfixes or changes, also because of the regression impact it could have. A lot of TYPO3-level caching and middlewares and TypoScript configuration is involved here - which is also likely the reason this issue has not been addressed over the years.
I hope you can understand the need to close older issues like this to clean up the issue system and setting a focus.
Updated by Garvin Hicking 10 days ago
- Has duplicate Bug #91263: disableCompression is not respected when CSS are concatenated added