Override browser default tag based styles that use EM units

[kof]

Description

EM seems to be challenging to use and people tend to use PX or REM instead ... I changed those values that come with EM by default from browsers to the values Webflow is using.

I am not sure why webflow is doing certain things: e.g. paragraphs have marginTop 0, h1-3 have marginTop 20; marginBottom: 10, h4- have marginTop 10 ; marginBottom 20

These seem to be inconsistent and weird choices.

Code Review

• hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 5de6)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env.example and the builder/env-check.js if mandatory

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
webstudio-builder	✅ Ready (Inspect)	Visit Preview	Jul 3, 2023 5:38pm

[istarkov]

It doesn't look like normalize now. Its set of opinionated styles has nothing with initial behavior of normalize - makes browsers render all elements more consistently

[istarkov]

I think if we do changes which are different from notmalize.css we need to do them in other place

[kof]

It doesn't look like normalize now. Its set of opinionated styles has nothing with initial behavior of normalize - makes browsers render all elements more consistently

yes which is why the opinionated styles are in a separate file, but we use them from normalize ... should probably merge them together in a different way instead of using reset directly from normalize, but that's not new here .. this was done before ... may need to change this @TrySound

[taylornowotny]

• The font and height properties have an orange label with no Value source in the tooltip. Orange labels represent remote user-added values so they should always show the value source in the tooltip. But these orange labels show on a new project with no user styles. These properties should be gray labels (Webstudio default) instead.

• Why do we have a text element nested inside the heading? I would expect that the headings can not be containers.

[kof]

@taylornowotny separate problem, unrelated to this PR

[kof]

After a discussion we decided to not have margins by default at all

[TrySound]

this was done before ... may need to change this @TrySound

let's do it later

[kof]

might not need margins, but only vertical margins, need to check browser defaults there