[4.x]: Email previews load CP resources which overwrite mail CSS.

Antimated commented 7 months ago

What happened?

Description

Previewing e-mails made in System settings > Emails have unexpected output. Because multiple CP resource stylesheets are loaded in (which probably shouldn't happen) some CSS gets overwritten.

Here you can see that the anchor rule gets overwritten by tailwind_reset.css and then by _main.scss which both are CP resources Screenshot 2024-03-28 at 14 27 16

Steps to reproduce

Create an e-mail template for e.g. an order
Preview the e-mail in System settings > Emails

Expected behavior

No CP js or css should be loaded here. Especially the CSS because it overwrites certain styles. If any css modifying happens in the injected js files, it could also overwrite css that way

Actual behavior

CP resource assets (js and css) are loaded

Craft CMS version

4.8.5

Craft Commerce version

4.5.2

PHP version

8.1.5

Operating system and version

Darwin 22.2.0

Database type and version

MySQL 5.7.34

Image driver and version

GD 8.1.5

Installed plugins and versions

Back In Stock: 2.1.1
CKEditor: 3.8.2
Cloner: 2.0.4
Cookies: 4.0.1
CP Field Inspect: 1.4.4
Craft Commerce: 4.5.2
Element API: 4.1.0
Feed Me: 5.4.0
Formie: 2.1.7
Hyper: 1.1.25
Icon Picker: 2.0.17
Inventory: 3.2.0
Knock Knock: 2.0.11
Maps: 4.0.4
MatrixMate: 2.1.4
Mollie for Craft Commerce: 4.2.0
Ray: 2.0
Read-only Field: 2.0.1
SEO: 4.0.45
Smith: 2.0.0
Store Hours: 3.1.0
Super Table: 3.0.12
Translations: 3.2.3
Vite: 4.0.9
Wishlist: 2.0.9

linear[bot] commented 7 months ago

PT-1532 [4.x]: Email previews load CP resources which overwrite mail CSS.

lukeholder commented 7 months ago

Hi @Antimated

I can’t seem to reproduce. When the preview tab is opened with this template:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Boilerplate</title>
</head>

<body>
<h1></h1>
{{ order.reference }}
</body>

</html>

I get this:

CleanShot 2024-04-03 at 21 52 47@2x

There is no CSS included. Let me know if I missed something.

Antimated commented 7 months ago

Were any plugins installed in your tests or are you starting from a bare project?

EDIT: I have no idea why but for some reason the issue seems to be gone. Not sure if something like the vite plugin interfered or not, but last week I had this issue persisting. Now opening the project and previewing the test mails gives me no injected cp resources anymore... Weird. Or could some kind of caching be the culprit?

Antimated commented 7 months ago

Now I have it again... I have no idea why it displays now. I did add &number={reference} to the end of the url though. but after removing that iI still have cpresource urls...

lukeholder commented 7 months ago

Were any plugins installed in your tests or are you starting from a bare project?

Pretty bare project. I will play around with using different twig/plugin functions to see if I can trigger it. Can you share your template easily?

Antimated commented 7 months ago

Hmmm not really, it's a private project for the company I work for. I'll see what I can do.

lukeholder commented 7 months ago

We render the template with:

https://github.com/craftcms/commerce/blob/develop/src/controllers/EmailPreviewController.php#L71

View::TEMPLATE_MODE_SITE so it shouldn't include backed resources.

Could you be viewing the preview error response?

https://github.com/craftcms/commerce/blob/develop/src/controllers/EmailPreviewController.php#L79

https://github.com/craftcms/commerce/blob/develop/src/templates/settings/emails/_previewError.twig

It would include the CP resources since we render it from the CP and don't pass View::TEMPLATE_MODE_SITE.

Antimated commented 7 months ago

Doesn't look like it shows an error as far as I can see. Just added a quick log statement before line 71 and that displays in the logging software we use (we use Ray).

This is the url we use http://jules-2024.test/index.php?p=craft%2Factions%2Fcommerce%2Femail-preview%2Frender&site=julesNl&emailId=1

lukeholder commented 6 months ago

@Antimated any luck figuring this one out? I can't seem to reproduce it.

Could you email composer.json composer.lock DB backup modules/ folder templates/ folder config/ folder

in a zip to support@craftcms.com and reference this issue, and we can see if reproduce with your project.

Antimated commented 6 months ago

@Antimated any luck figuring this one out? I can't seem to reproduce it.

Could you email composer.json composer.lock DB backup modules/ folder templates/ folder config/ folder

in a zip to support@craftcms.com and reference this issue, and we can see if reproduce with your project.

Just sent the e-mail. Let me know if you guys received it on your end! The mail subject is: Files for issue: [4.x]: Email previews load CP resources which overwrite mail CSS.. ~~If it doesn't go through I might have to send it again using something like wetransfer.~~

EDIT: Had to send it via Wetransfer, wouldn't let me send it directly from my work e-mail for some reason!

lukeholder commented 6 months ago

I believe this issue was resolved in support and was due to custom module code.

craftcms / commerce