search

maizzle / framework

Quickly build HTML emails with Tailwind CSS.
https://maizzle.com
MIT License
1.21k stars 48 forks source link

Escaping content in class attribute doesn't work. #1026

Closed abishekrsrikaanth closed 12 months ago

abishekrsrikaanth commented 1 year ago

Found an issue when using the markdown starter kit. on the main layout file here https://github.com/maizzle/starter-markdown/blob/main/src/layouts/main.html#L41, I am trying to replace the class attribute

<!-- FROM   -->
class="sm:px-4 {{ page.bodyClass || 'bg-[#f1f5f9]' }}"

<!-- TO  -->
class="sm:px-4 @{{$backgroundColor}}"

after compiling, the output on the html file is

class="sm-px-4 {{-backgroundColor}}"

can you please advice how to fix this? I also tried to replace it with

class="sm:px-4 @{{$backgroundColor || 'bg-[#f1f5f9]'}}"

and the output was

class="sm-px-4 {{-backgroundColor or-or- -bg-_f1f5f9-}}"
cossssmin commented 1 year ago

Thanks for spotting this, it's an issue with the safeClassNames transformer.

Normally you would simply redefine the replacements mapping to keep $ as-is, like this:

// config.production.js
module.exports = {
  // ...
  safeClassNames: {
    '{': '{',
    '}': '}',
    '$': '$',
  },
}

However, safeClassNames also runs inside Filters, and the issue is that it's not using the mappings defined in your config:

https://github.com/maizzle/framework/blob/4aba7ba7547b368b0c37af921da3786c601ebd83/src/transformers/filters/index.js#L44-L55

If you're not using filters, you can just disable them and it'll work:

// config.production.js
module.exports = {
  // ...
  safeClassNames: {
    '{': '{',
    '}': '}',
    '$': '$',
  },
  filters: false,
}

Will fix in the next release so that filters use any safeClassNames mappings defined in the config.

abishekrsrikaanth commented 1 year ago

Thank you, i tried the above configuration, one issue is fix but still have another issue I mentioned above with setting defaults.

on the layout file I have

class="sm:px-4 @{{$backgroundColor || 'bg-[#f1f5f9]' }}"

after compilation this is the output

class="sm-px-4 {{$backgroundColor or-or- -bg-_f1f5f9- }}"

Another issue I noticed was, I tried to add @{{$backgroundColor}} to the body tag like below

<body class="m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased]" @{{$backgroundColorStyle}}>

and the output after compliation was 

<body class="m-0 p-0 w-full word-break-break-word -webkit-font-smoothing-antialiased" @{{$backgroundColorStyle}}>

Can you advice on how I can fix both these issues?

cossssmin commented 1 year ago

Define the mappings for those too:

// config.production.js
module.exports = {
  // ...
  safeClassNames: {
    '{': '{',
    '}': '}',
    '[': '[',
    ']': ']',
    '$': '$',
    '#': '#',
    '|': '|',
    '\'': '\'',
  },
  filters: false,
}

That will output class="{{$backgroundColor || 'bg-[#f1f5f9]' }} [] []" - those [] are there because of the other arbitrary classes, which can't be cleaned up properly. For now this is as close as it gets, since the safeClassNames transformer does not yet support ignoring expression blocks (addded it to the backlog though).

For the other issue, can you write it with spaces inside the {{ }}? That would allow you to write it like this:

<body class="..." {{ $backgroundColorStyle }}>