how to pass different attributes for dev environment and production environment

[Ankitb09]

Hello All,

Could you please help me to pass different attributes for dev environment and production environment, for example:-

I have a very simple spacer component:-

<tr>
  <td>
        <hr attributes class="border-0 text-white min-h-full" />
  </td>
</tr>

this is how i am consuming this:-
<x-spacer class="{variables.spacer}" />

But i want to pass a class name for example "margin-top-x2" for dev environment and a variable for production environment:-
for Dev i need <x-spacer class="DESIRED_CLASSNAME_HERE" /> and
for Prod i need <x-spacer class="{variables.spacer}" />

Could you guys please help me with this?

[cossssmin]

Try this:

<x-spacer class="{{ page.env === 'local' ? 'DESIRED_CLASSNAME_HERE' : '{variables.spacer}' }}" />

Note that these classes won't actually exist so removeUnusedCSS will remove them - you'll need to whitelist them.