Custom CSS Helpers

Kirby 3 Questions 🤔
1

Where is the documentation to create my own version of this?

2
3

Hmm, ok.

How would I duplicate this?

I copy the code from the helper I posted, into a plugin from the link that you posted and I get an error of Class 'App' not found

<?php

Kirby::plugin('my/css', [
    'components' => [
        'css' => function($url, $options = null): ?string {
            if (is_array($url) === true) {
                $links = array_map(function ($url) use ($options) {
                    return css($url, $options);
                }, $url);
                return implode(PHP_EOL, $links);
            }
            if (is_string($options) === true) {
                $options = ['media' => $options];
            }
            $kirby = App::instance();
            if ($url === '@auto') {
                if (!$url = Url::toTemplateAsset('css/templates', 'css')) {
                    return null;
                }
            }
            $url  = $kirby->component('css')($kirby, $url, $options);
            $url  = Url::to($url);
            $attr = array_merge((array)$options, [
                'href' => $url,
                'rel'  => 'stylesheet'
            ]);
            return '<link ' . attr($attr) . '>';
        }
    ]
]);

I need to edit the output of the link tag.

4

You can add different classes or other attributes via the $options array (the third parameter), see the docs.

'css' => function (App $kirby, string $url, $options = null): string {

You cannot change the number of options or the return value here…

5

So I won’t be able to change the rel output?

Because the current css function I can add options to anyway as such <?= css('assets/css/print.css', ['media' => 'print']) ?>

But I need to change rel like this <link rel="preload" href="<?= url('assets/css/index.css') ?>" as="style" onload="this.onload=null;this.rel='stylesheet'">.

6

I currently don’t have an answer for you and can’t test it. If all else fails, you can create your own custom helper function.

7

You don’t have to use the css()-helper.

You can also directly use <link rel="preload" href="<?= url('assets/css/index.css') ?>" as="style" onload="this.onload=null;this.rel='stylesheet'"> in your template (or snippet).

Or as @texnixe mentioned, you can create your own helper function, as I did here: https://github.com/bvdputte/kirby-fingerprint

1 Like
8

I know I can use it directly, but I want to utilize the @auto feature that the css helper has, and my original question was asking for the documentation to create my own css helper in the first place.

9

Out of curiosity, may I ask you what’s the purpose of that onload call?

1 Like
10

It’s just a way of allowing stylesheets to load in the background so that they don’t block the rendering of a document. As everyone should be, you should inline critial css and then defer stylesheets in some sort of way. So this is the most simplest, dirtiest form of doing this.

11

There are pros and cons of doing this. Inline CSS is not cached by the browser, after all.

1 Like
12

Don’t get me started on cachespecs… I’m already ripping my hair out over our IBM websphere commerce performance issues…

13

I see. Was asking because that exact code doesn’t render at all in firefox for example (at least not on my test site).

I never bothered looking into this type of optimisation since the site I personally work on are usually very minimal but it’s an interesting topic.

14

It possibly doesn’t work on firefox. I want to integrate it into my development kirby site, just to satisfy my performance numbers inside lighthouse, but rather than try and say for homepage output these files, for notes output these files etc… I thought it would be simpler to create/duplicate the current css helper and change the output link tag.

15

Make sense.
Good luck with that and remember to post a solution if you decide to code one.
Always nice to have an extra tool available :wink:

16

Out of curiosity, may I ask you what’s the purpose of that onload call?

Read up more about that pattern here: GitHub - filamentgroup/loadCSS: Load CSS asynchronously