[PAGES-411] Pages app preview adds CSS styles that modify basic elements e.g. h1 Created: 14/Aug/19  Updated: 09/Feb/22  Resolved: 03/Feb/22

Status: Closed
Project: Magnolia pages module
Component/s: None
Affects Version/s: 6.1.1
Fix Version/s: 6.2.16

Type: Bug Priority: High
Reporter: Bartosz Staryga Assignee: Robert Šiška
Resolution: Fixed Votes: 0
Labels: maintenance, quickwin, tech-debt
Remaining Estimate: Not Specified
Time Spent: 0.5d
Original Estimate: Not Specified

Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[X]* Steps to reproduce, expected, and actual results filled
[X]* Affected version filled
Date of First Response:
Sprint: DevX 2, DevX 3
Story Points: 3

 Description   

Steps to reproduce

Open a page in page-editor.

Expected results

Basic HTML elements are not styled.

Actual results

Basic HTML elements are styled.

Workaround

Development notes

In Pages app inside preview iframe Magnolia injects following CSS file:
<link type="text/css" rel="stylesheet" href="/magnoliaAuthor/VAADIN/themes/pages-app/page-editor.css">
Inside file we can find it does not only affect green bars but also some basic elements like headings e.g: 
h1, .heading-1, .h1

{     font-size: 50px;     font-weight: 300;     letter-spacing: -1.2px; }

and has some very generic named classes e.g.:
text-medium, text-regular
As well as loading Roboto font with again generic font-family name: Roboto

All styles within that file should have Magnolia specific prefix/suffix/name to avoid conflicts with template styles and elements.



 Comments   
Comment by Christopher Zimmermann [ 02/Dec/21 ]

This was also reported by partner Dotfusion today.

Comment by Arjuna Shankar [ 03/Dec/21 ]

Yes. Upvote for sorting this.

Un-scoped styles are not cool in any container frontend applications. Ideally, i would suggest using inline styles for your magnolia items as they will not interfere at all - maybe not the most elegant, but most sound from a front end architecture perspective. Also recommend setting `unset:all;` on the html tags you insert and handling them with proper full rule sets so there is no interference.

Generated at Mon Feb 12 06:18:41 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.