Handlebars inside class tag removed even with raw tag

[tettoffensive]

For some reason the handlebars inside the class tag get removed. I've tried both <raw> and using the @{} syntax. <div class="{{name}}" id="{{name}}"> becomes <div class="name" id="{{name}}">

<raw>
        <amp-list layout="container" src="json/items.json">
          <template type="amp-mustache">
            <div class="grid">
              {{#items}}
              <div class="{{name}}" id="{{name}}"> <!-- LOOK HERE -->
                <button class="day-label">{{name}}</button>
              </div>
              {{/items}}
              {{^items}}
              <div>No items found.</div>
              {{/items}}
            </div>
          </template>
          <div placeholder>Loading ...</div>
          <div fallback>Failed to load data.</div>
        </amp-list>
      </raw>

<amp-list layout="container" src="json/items.json">
          <template type="amp-mustache">
            <div class="grid">
              {{#items}}
              <div class="name" id="{{name}}"> <!-- LOOK HERE -->
                <button class="day-label">{{name}}</button>
              </div>
              {{/items}}
              {{^items}}
              <div>No items found.</div>
              {{/items}}
            </div>
          </template>
          <div placeholder="">Loading ...</div>
          <div fallback="">Failed to load data.</div>
        </amp-list>

[cossssmin]

Hi, if this is when building for production with removeUnusedCSS enabled, you might be running into this:

https://maizzle.com/docs/transformers/remove-unused-css#backend

Right now we're not adding those heads/tails by default, but we probably should... I'll look into it today.

EDIT: fixed in #801

[cossssmin]

Dug further and realized the default safeClassNames replacements strategy also played a role in this, so it was fixed in #802.

These and many other fixes will be available in the next release (4.2.3), we just need to wait for a dependency to release a fix these days and we'll publish the new version right away.

[tettoffensive]

For now, I've done: safeClassNames: false, but I'll check out the next release when it's available

[cossssmin]

OK, but keep in mind that escaped class names like w-3\/4 will break your layout in Gmail (it throws away the entire style tag or style attribute where it finds CSS that it doesn't support). So I'd advise to not go into production with safeClassNames completely disabled :)

[tettoffensive]

@cossssmin I'm also running into this issue where it's trying to change the disabled attribute in my button to have an ="":

{{^available_times}}disabled="disabled"{{/available_times}}
{{^available_times}}="" disabled="disabled" {{="" available_times}}=""

<button class="
                day 
                col-start-{{day_start}} 
                {{^available_times}}disabled{{/available_times}} 
                {{#today}}today-dot{{/today}}" 
                aria-label="{{month}} {{dd}}"
                autocomplete="off"
                {{^available_times}}
                disabled="disabled"
                {{/available_times}}
                ></button>

I'm guessing this is from some post processing, but not sure where or how to configure?

[cossssmin]

In PostHTML, the parser Maizzle uses, you cannot add attributes in that way to a tag. Each string is considered an attribute and that's why you're seeing the ="" added.

My suggestion is to use a placeholder and replaceStrings, as this happens at the very end after all PostHTML processing.

Note this had to be fixed and only works in ^4.2.4 that was just released.

In your template:

<button data-available-times></button>

In config.js:

module.exports = {
  replaceStrings: {
    'data-available-times': `class="
    day
    col-start-{{day_start}}
    {{^available_times}}disabled{{/available_times}}
    {{#today}}today-dot{{/today}}"
    aria-label="{{month}} {{dd}}"
    autocomplete="off"
    {{^available_times}}disabled="disabled"{{/available_times}}`
  }
}

[cossssmin]

By the way, the original issue should also be fixed in 4.2.4, so you should now just be able to write this in a template:

<div class="@{{ name }}"></div>

... and have it compile to this:

<div class="{{ name }}"></div>

[tettoffensive]

I upgraded to 4.2.5 but some of my css that was working before is now being removed.

The today-dot class is no longer making it. Nor is this block which uses a :not()

.day:not(.disabled) {
  @apply bg-blue-700/10 text-blue-700 hover:bg-blue-700/5 active:bg-blue-700/20 cursor-pointer font-semibold;
  @apply focus:bg-blue-700 focus:text-white focus:cursor-initial
}

Here's how I'm using it which was working in 4.2.2 with safeClassNames as false (which I still have on)

<raw>
        <amp-list layout="container" src="json/calendar.json">
          <template type="amp-mustache">
            <div class="date-grid">
              {{#date_items}}
              {{#available_times}}
              <button class="
                day 
                col-start-{{day_start}}" aria-label="{{month}} {{dd}} - Times available">
                {{/available_times}}
                {{^available_times}}
                <button class="
                  day 
                  col-start-{{day_start}} 
                  disabled" aria-label="{{month}} {{dd}} - No times available" disabled>
                  {{/available_times}}
                  {{dd}}
                  <span class="{{#today}}today-dot{{/today}}"></span>
                </button>

                {{/date_items}}
                {{^date_items}}
                <div>No calendar found.</div>
                {{/date_items}}
            </div>
          </template>
          <div placeholder>Loading ...</div>
          <div fallback>Failed to load data.</div>
        </amp-list>
      </raw>

[cossssmin]

I'm seeing <span class="{{#today}}today-dot{{/today}}"></span> being output as-is in 4.2.5.

The .day:not() selector will be removed as expected if you have removeUnusedCSS: true in your Maizzle config. To preserve it you need to whitelist it:

module.exports = {
  removeUnusedCSS: {
    whitelist: ['*day*']
  }
}

However there is an unexpected behavior with removeUnusedCSS: it will always run unless you explicitly set it to false. So even if you don't have it in the config, it will run and clean up CSS and classes that you don't use. I'll push a fix for this later today.

[cossssmin]

@tettoffensive have you tried v4.3.0 with whitelisting that selector as above?