Include style .css file as a variable

[glodov]

Is there a way to make include of css file with dynamic value?

head
  title= page.title
  meta(charset='utf-8')
  meta(name='viewport', content='width=device-width, initial-scale=1')
  each item in pugStyles
    if item.inline
      style
        include item.path
    else if item.attributes
      link(item.attributes)
    else 
      link(href= item.src, rel='stylesheet')

item.path equals the same string I tried with #{item.path} & ${item.path} it did not help

If I use

style
  include ../../assets/css/inline.css

it does work

but if I use with quotes:

style
  include '../../assets/css/inline.css'

it does not work

[kylekatarnls]

include is a compile-time feature, that means you can't pass to it dynamic values (anything containing variables). We handle this exactly the same as pugjs. This allow better performance, however we can imagine a custom keyword to handle dynamic includes.

$pug = new Pug();
$pug->addKeyword('dyninclude', function ($args) {
    return array(
        'beginPhp' => 'include ' . $args . ';',
    );
});

Else the less filter can help you to easily inject style with variables: https://github.com/pug-php/pug-filter-less It also allow you to have nested style, mixins and all sweet stuff less provide, but as less is CSS-compatible, you use just for variables and write CSS as you usually do.

[glodov]

Thanks, I already did the same but with another name of keyword 😄 and through render() function, so it is just include for .css, but it is correct render() function for .pug.

[kylekatarnls]

Prefer use the API (->addKeyword or filters) over hacking the render() method. There is no guarantee such a hack won't break in next versions.

If you have something else going wrong with this issue, feel free to re-open.

[glodov]

I did it like this:

    private function processPug()
    {
        $pug = new \Pug\Pug(['prettyprint' => DEV_MODE]);
        $this->render = $pug;
        $pug->addKeyword('insert', [$this, 'pugTagInsert']);

        return $pug->render($this->getTplFile(), $this->getApplicationData());
    }

    public function pugTagInsert($args, $block, $tag)
    {
        $file = trim($args, '()');
        $dir = $this->devDir . '/tpl/';
        if ('/' == substr($file, 0, 1)) {
            $dir = $this->devDir;
        }
        $file = $dir . $file;
        if ('.css' == substr($file, -4)) {
            return file_get_contents($file);
        }
        return $this->render->render($file, $this->getApplicationData());
    }

More source codes here: https://github.com/glodov/html-compiler later there will be documentation with video howto :)

[kylekatarnls]

Indeed, it's a good way to do it.

You might be interested in https://github.com/pug-php/pug-assets an all-in-one plugin for JS, CSS, Stylus, LESS, minify, Coffee, React (filters and static assets)

[glodov]

Thanks. Nice keywords, but I minify complete page. How can I catch rendering errors?

[kylekatarnls]

You should enable minification only on production environment but not in your local development environment, it's a common practice.

pug-minify will automatically understand you're in dev if you use:

$pug->setCustomOption('environment', 'development');