Menu icon Foundation
SASS ignoring Handlebars generated content

Hi everyone,

After trying to reproduce a bug for hours, I finally found out what my problem is.

When I pass Handlebar {{ argument="class" }} as classes, SASS ignores those classes when compiling the project. Consider this example :

// Base page
<div>
  {{> nav status="super-nav"}}
</div>


// Nav partial
<nav class="my-nav {{status}}">
  ...
</nav>

And the CSS

.super-nav {background: pink;}

 

Now, everything works using "foundation watch", but when I compile everything for production, the .super-nav class is completely ignored, it's not added to the production app.css.

My understanding is that .super-nav is not in the component html by default, so SASS just ignores that class for production, as it's not considered "in use".

Is there a way around this?

Sassscsshandlebarpaninibug

Hi everyone,

After trying to reproduce a bug for hours, I finally found out what my problem is.

When I pass Handlebar {{ argument="class" }} as classes, SASS ignores those classes when compiling the project. Consider this example :

// Base page
<div>
  {{> nav status="super-nav"}}
</div>


// Nav partial
<nav class="my-nav {{status}}">
  ...
</nav>

And the CSS

.super-nav {background: pink;}

 

Now, everything works using "foundation watch", but when I compile everything for production, the .super-nav class is completely ignored, it's not added to the production app.css.

My understanding is that .super-nav is not in the component html by default, so SASS just ignores that class for production, as it's not considered "in use".

Is there a way around this?

Rafi Benkual about 3 years ago

Just looking through the Panini helpers, I don't see a status helper. https://github.com/zurb/panini/tree/master/helpers

Am I missing something?

Félix-Antoine Brunet about 3 years ago

I found the problem was with UnCSS that excludes classes that are not present in the html code

So classes created by user interaction or templating (like Handlebars) are not included.

The solution is to name your classes with the .is- prefix, so that it's considered by UnCSS.

You can also change the configuration inside config.yml. Here I also want UnCSS to ignore my animation module:

# UnCSS will use these settings
UNCSS_OPTIONS:
  html:
    - "src/**/*.html"
  ignore:
    - !!js/regexp .foundation-mq
    - !!js/regexp .is-.*
    - !!js/regexp ^animation\..*