We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.

CSS modules

Hi.
If you want to use cssModules but don't want to load your json file each time your server get a request or you don't want to <?= $map['className'] ?> for each className or #id you can use this:

<?php
// @author     Pedro Costa < [email protected]  >

namespace library\View;

use Phalcon\Mvc\View\Engine\Volt;
use Phalcon\Mvc\View\Engine\Volt\Compiler;

class custom_compiler extends Compiler {

    private $_classMap = [];

    // all my classNames are in the same file.
    private function loadClassMap(){
            $str = file_get_contents(ROOT_DIR.'/build/classMap.json');
            $this->_classMap = json_decode($str, true); 
    }

    private function replaceClassNames(&$classNames){
        $this->loadClassMap();
        $newClassNames = [];
        // onlu one space
        $classNames = preg_replace(array('/\s{2,}/', '/[\t\n]/'), ' ', $classNames);
        $classNames = explode(" ", $classNames);
        foreach($classNames as $className){
            if(isset($this->_classMap[$className])){
                $newClassNames[] =$this->_classMap[$className];
            }else{
                $newClassNames[] =$className;
            }
        }

        return $classNames = implode(" ", $newClassNames);
        }

    protected function _compileSource($viewCode, $extendsMode = false){

        $viewCode = preg_replace_callback('/class=\"([^\"]+)\"/m', function ($matches) {
            return 'class="'.$this->replaceClassNames($matches[1]).'"';
        },$viewCode);

        $viewCode = preg_replace_callback('/id=\"([^\"]+)\"/m', function ($matches) {
            return 'id="'.$this->replaceClassNames($matches[1]).'"';
        },$viewCode);

        // form elementes form.render('name', ['class':'something', 'id':'somethingelese'])

        $viewCode = preg_replace_callback('/\'class\'[ ]?:[ ]?\'([^\"]+)\'/m', function ($matches) {
            return '"class":"'.$this->replaceClassNames($matches[1]).'"';
        },$viewCode);

        $viewCode = preg_replace_callback('/\'id\'[ ]?:[ ]?\'([^\"]+)\'/m', function ($matches) {
            return '"id":"'.$this->replaceClassNames($matches[1]).'"';
        },$viewCode);

        return parent:: _compileSource($viewCode, $extendsMode);
    }

}

class Engine extends Volt{

    function getCompiler() {

        $compiler = $this->_compiler;
        if (gettype($compiler != "object")) {

            /*if(APPLICATION_ENV === APP_PRODUCTION){*/
                $compiler = new custom_compiler($this->_view);
            /*}else{
                $compiler = new Compiler($this->_view);
            }*/

            /**
             * Pass the IoC to the compiler only of it's an object
             */
            $dependencyInjector = $this->_dependencyInjector;
            if (gettype($dependencyInjector) == "object") {
                $compiler->setDi($dependencyInjector);
            }

            /**
             * Pass the options to the compiler only if they're an array
             */
            $options = $this->_options;
            if (gettype($options) == "array") {
                $compiler->setOptions($options);
            }

            $this->_compiler = $compiler;
        }
        return $compiler;
    }
}

<div class="test multiclass globalClass" id="idTest"> => <div class="_24dw _w23 globalClass" id="_23d">

Hey its a very nicely explained CSS module. Thanks