Auto load Kirby Modules css

Is it possible to autoload the css for the kirby modules plugin?

Didn’t got any futher than this.

List all the modules

<?php $list = $page->moduleList(); ?>

Get the templates

<?php foreach($list as $mod): ?>
    <?php var_dump($mod->template())  ?>
<?php endforeach ?>
string(16) "module.accordion"
string(11) "module.text"
string(16) "module.accordion"
string(11) "module.text"

Filter and add the .css

<?php echo css(array(
)) ?>
 <?php echo css($result) ?>

Cheers, Maarten

I’d recommend combining your module CSS files to one CSS file, it’s easier and often does not make a difference in performance.

Of course it might still make sense to load only the ones that are actually on the page (when using HTTP/2 or if you have a lot of modules).

Something like this should work for your use-case (but untested):

// Get a list of all templates, make sure that each template is only included once
$templates = $page->moduleList()->pluck('template', null, true);

// Convert each template name to a CSS file path
$css = array_map(function($template) {
  return 'assets/css/modules/' . $template . '.css';
}, $templates);

// Output the CSS tags
echo css($css);
1 Like

Hello Lukas,

Thank you for the quick support! Your code works!
This is great help, thank you.

Cheers, Maarten

1 Like

How can you run a file_exists on the array and add ?v=’. filemtime()?

Cheers, Maarten

That would be:

$uri = 'assets/css/modules/' . $template . '.css';
$path = kirby()->roots()->index() . DS . $uri;

if(is_file($path)) $uri .= '?v=' . filemtime($path);

return $uri;

inside the map function.