Loki_CssUtils

This Magento 2 module is part of the core packages for Loki Components, as is being used by the Loki Checkout, Loki Admin Components and Loki Theme for Luma. This module allows a Magento 2 template to call $css() and $style() to generate CSS classes and CSS styles, that are easily overwritten via XML layout and/or PHP parser classes - without template overrides.

Installation

Install this package via composer:

composer require loki/magento2-css-utils

Next, enable this module:

bin/magento module:enable Loki_CssUtils

Basic usage

Add the CSS utility to the PHP-section of your PHTML template:

<?php
use Loki\CssUtils\Util\CssClass;

/** @var CssClass $css */
?>
<div class="<?= $css('') ?>">
    <h3 class="<?= $css('', 'heading') ?>">
        Hello World
    </h3>
</div>

Next, allow overriding CSS styles via XML layout. For instance, the following makes use of TailwindCSS utility classes:

<referenceBlock name="example">
    <arguments>
        <argument name="css_classes" xsi:type="array">
            <item name="block" xsi:type="array">
                <item name="default" xsi:type="string">m-4</item>
            </item>
            <item name="heading" xsi:type="array">
                <item name="default" xsi:type="string">text-4xl</item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

See for more usage https://loki-checkout.com/

Support

For getting support, create an Issue under the following project URL:

https://github.com/LokiExtensions/Loki_CssUtils