search

SparkPost / heml

HEML is an open source markup language for building responsive email.
https://heml.io
MIT License
4.33k stars 157 forks source link

Compiler dublicate class names and styles inside <block> element #20

Open birdkiwi opened 6 years ago

birdkiwi commented 6 years ago

https://heml.io/editor/

<heml>
  <head>
    <subject>Welcome to HEML!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
      .text-block {
          border: 2px solid #cecece;
          padding: 10px;
      }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Explore the world of email! 💌</h1></marquee>
      <block class="text-block">
        Test text block
      </block>
    </container>
  </body>
</heml>

Border and paddings dublicates inside element.

screen shot 2017-10-31 at 16 36 08

avigoldman commented 6 years ago

Hey @birdkiwi, Thanks for catching this! I did a little digging and there is a bug with how aliasing selectors with elements works. While I dig into a fix around this, an easy fix is change the selector to block.text-block. This will skip the aliasing step and all should work!

birdkiwi commented 6 years ago

Thanks for your response.

This workaround not really helped me. Seems like all nested blocks inherits all properties from their parents.

Take a look:

<heml>
  <head>
    <subject>Welcome to HEML!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
      block.text-block {
          border: 2px solid #cecece;
          padding: 10px;
      }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Explore the world of email! 💌</h1></marquee>
      <block class="text-block">
        <block class="another-text-block">
          Test text
        </block>
      </block>
    </container>
  </body>
</heml>
avigoldman commented 6 years ago

First off, thank you for catching these. I've been digging into this a bit over the past few days. Honestly, I didn't plan for nested elements of the same type. I have a couple of solutions I'm going to play with that will hopefully fix both of these issues. I'll have a fix for this early next week and cut a release right after.

birdkiwi commented 6 years ago

I don't understand. What's the point of <block> element then if it couldn't be nested in each other? Should i use <div> instead?