DEV Community

Paboda Hettiarachchi
Paboda Hettiarachchi

Posted on

Add CSS on a custom module with Hyva

app/code/Vendor/Module/Observer/RegisterModuleForHyvaConfig

<?php
declare(strict_types=1);

namespace Vendor\Module\Observer;

use Magento\Framework\Component\ComponentRegistrar;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;

class RegisterModuleForHyvaConfig implements ObserverInterface
{
    /**
     * RegisterModuleForHyvaConfig constructor
     *
     * @param ComponentRegistrar $componentRegistrar
     */
    public function __construct(
        private readonly ComponentRegistrar $componentRegistrar
    ) {
    }

    /**
     * @inheritdoc
     */
    public function execute(Observer $event): void
    {
        $config = $event->getData('config');
        $extensions = $config->hasData('extensions') ? $config->getData('extensions') : [];

        $moduleName = implode('_', array_slice(explode('\\', __CLASS__), 0, 2));

        $path = $this->componentRegistrar->getPath(ComponentRegistrar::MODULE, $moduleName);

        $extensions[] = ['src' => substr($path, strlen(BP) + 1)];

        $config->setData('extensions', $extensions);
    }
}
Enter fullscreen mode Exit fullscreen mode

app/code/Vendor/Module/etc/frontend/events.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="hyva_config_generate_before">
        <observer name="Vendor_Module" instance="Vendor\Module\Observer\RegisterModuleForHyvaConfig"/>
    </event>
</config>
Enter fullscreen mode Exit fullscreen mode

app/code/Vendor/Module/view/frontend/tailwind/components/category-widgets.css

.category-nav-ul {
    ul.level3 {
        > li {
            @apply border-l-2 border-gray-300 hover:border-blue-700;
            a {
                @apply block py-2.5 pl-4 text-slate-600 hover:text-blue-700;
            }
        }
    }
    > li {
        > a.level3, > a.level4 {
            @apply py-2.5 block text-slate-600 hover:text-blue-700;
        }
        > a.level4 {
            @apply border-l-2 pl-4 border-gray-300 hover:border-blue-700;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

app/code/Vendor/Module/view/frontend/tailwind/tailwind.config.js

module.exports = {
    content: [
        '../templates/**/*.phtml',
    ]
}
Enter fullscreen mode Exit fullscreen mode

app/code/Vendor/Module/view/frontend/tailwind/tailwind-source.css

@import "components/category-widgets.css";
Enter fullscreen mode Exit fullscreen mode

Top comments (0)