Problem/Motivation
If your project uses Canvas, and you enable and configure critical_css, then you can no longer edit cavas pages.
In the ui you'll see a permanent loader, and in console you can see errors like these (it's Dutch, my apologies):
De bron van ‘https://starterkit.ddev.site/canvas/editor/canvas_page/undefined’ is geblokkeerd vanwege een niet-overeenkomend MIME-type (‘text/html’) (X-Content-Type-Options: nosniff).
meaning something like: the source is blocked because of unmatched MIME-type
Fout bij brontoewijzing: Error: URL constructor: is not a valid URL.
Stack in the worker:resolveSourceMapURL@resource://devtools/client/shared/source-map-loader/utils/fetchSourceMap.js:56:22
getOriginalURLs@resource://devtools/client/shared/source-map-loader/source-map.js:74:24
workerHandler/</<@resource://devtools/client/shared/worker-utils.js:115:52
workerHandler/<@resource://devtools/client/shared/worker-utils.js:113:13
Bron-URL: about:srcdocmeaning something like: error in source assignment
Steps to reproduce
- Have a project that uses canvas where you successfully create and edit a canvas page
- Install and enable critical_css
- Try to edit your canvas page again: it wont work
Proposed resolution
critical css assets should not be loaded on canvas routes. A part of the problem is that the canvas edit page itself returns FALSE for AdminContext::isAdminRoute. This causes it to return TRUE for the isEnabled() function on critical_css/src/Asset/CriticalCssProvider.php:
public function isEnabled() {
$route = $this->currentRouteMatch->getRouteObject();
$canViewAdmin = $this->currentUser->hasPermission('view the administration theme');
$isAjaxRequest = $this->request->isXmlHttpRequest();
if (($route && $this->adminContext->isAdminRoute($route) && $canViewAdmin) || $isAjaxRequest) {
return FALSE;
}
return (bool) $this->config->get('enabled');
}I created issue #3562587 for that in the canvas module.
But the canvas editor page itself also makes API calls, like the route canvas.api.layout.get. Critical_css gets enabled on those api routes as well, hence causing the canvas edit page to not work.
A global/general fix would be to expand the settings form on /admin/config/development/performance/critical-css and add a new 'Exclude pages from Critical CSS processing' option where you can enter paths with wildcards so one could disable critical-css on all /canvas/* paths for example. Just like how you can disable blocks on certain pages on /admin/structure/block when you edit a block.
I have created an MR that does exactly this and it works on my project. I think all is needed is to add an extra test for this.
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | canvas-page-exclude.png | 30.7 KB | flyke |
Issue fork critical_css-3562579
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
flyke commentedComment #4
flyke commented