HubL doesn't parse in CSS files?

[balibriant]

I'm working on a module right now which requires me to use different CSS rules according to which fields of the module are being used. My plan was to use HubL for a basic if/else control structure in the CSS file.

I thought I would be able to do this based on the fact that there are several examples of using HubL with CSS in the HubL documentation itself. For example, HubL Syntax, where the following example, among others, is shown:

{% set primaryColor = '#F7761F' %} {# defines variable and assigns HEX color #}
        
a {
  color: {{ primaryColor }}; {# prints variable HEX value #}
}

But as soon as I tried to do it, I got a warning that "HubL in your CSS or JavaScript won’t be parsed, except for the module_asset_url function" and, indeed, the HubL didn't parse, it came through to the client side still sitting in the CSS file.

This is the relevent section of my module.css file:

{% if module.hero_section.webinar_form %}

.hero-section-module .hero-text{
    text-align: left;
    padding: 2em 2em 0em;
    margin: 0 auto;
}

.hero-section-module .hero-text h1{
    margin-top: 0.75rem;
}

.hero-form {
    max-width: 450px;
    padding: 1em 2em 2em;
}

.hs_recaptcha {
    display: none;
}

.hs_cos_wrapper_type_form form .hs-button {
    margin: 0 auto 0;
    max-width: 100%;
}

.hs_cos_wrapper_type_form .actions {
    text-align: left;
}

.hs_cos_wrapper.form-title {
	display: none;
}

.end-text {
    font-size: 0.8em;
    padding-top: 1em;
}

{% else %}

.hero-section-module .hero-text{
    text-align: left;
    max-width: 1230px;
    padding: 8rem 40px;
    margin: 0 auto;
}

.hero-section-module .hero-text h1{
    margin-top: 0.75rem;
}

{% endif %}

So I'm a bit confused. Can HubL be used with CSS or not? If not, why not, and why does the documentation include several examples of using HubL with CSS?

If yes, how?

[SandyG1]

Another way to add styles into your module.html file is by using 

{% require_css %} and {% end_require_css %}

This can make your output html cleaner. For example:

{% require_css %}

/* name will get the name of the module row (this is unique) */
  <style id="{{ name ~ '__styles'}}">

/* create a class using an ID dynamically based on the module row name */

    {{ '#EXAMPLEIDSELECTOR--target_' ~ name }} {
        color: {{ module.primaryColor.color }}
    }


  </style>
{% end_require_css %}

This code then appears in your HEAD having created a new class for each row

your row then needs to match with it's ID and that's easily done like so:

<div id="{{'EXAMPLEIDSELECTOR--target_' ~ name }}">
...
...
...
...

</div>

This way is cleaner html, but most of the time it doesn't matter which way it's done 🙂

ps, I learnt this from reading HubSpots code on their modules. You learn a lot from them 🙂 

Sandy

[Chris-M · Accepted solution]

Hello @balibriant,

since, the module.css will be pasted to it own css file, it doesn't know about your module items like the hero_section.webinar_form.

But you can put CSS on the Hubl + HTML section, like that:

{% if module.hero_section.webinar_form %}
<style>
.hero-section-module .hero-text{
    text-align: left;
    padding: 2em 2em 0em;
    margin: 0 auto;
}

.hero-section-module .hero-text h1{
    margin-top: 0.75rem;
}

.hero-form {
    max-width: 450px;
    padding: 1em 2em 2em;
}

.hs_recaptcha {
    display: none;
}

.hs_cos_wrapper_type_form form .hs-button {
    margin: 0 auto 0;
    max-width: 100%;
}

.hs_cos_wrapper_type_form .actions {
    text-align: left;
}

.hs_cos_wrapper.form-title {
	display: none;
}

.end-text {
    font-size: 0.8em;
    padding-top: 1em;
}

{% else %}

.hero-section-module .hero-text{
    text-align: left;
    max-width: 1230px;
    padding: 8rem 40px;
    margin: 0 auto;
}

.hero-section-module .hero-text h1{
    margin-top: 0.75rem;
}
</style>
{% endif %}

- Chris