Forum

Thread tagged as: Question, Error, Feathers

Output multiple stylesheets with Feathers

Hi, I'd like to output two different CSS files in my development environment using Feathers but I'm having difficulty.

Outputting one stylesheet is fine but the following causes a blank page:

Code in runtime.php:

<?php
PerchSystem::register_feather('Default');

class PerchFeather_Default extends PerchFeather
{
  public function get_css($opts, $index, $count)
    {
      return $this->_single_tag('link', array(
        'rel'=>'stylesheet',
        'href'=>$this->path.'/css/style.css',
        'type'=>'text/css'
      ));
    }

  public function get_devcss($opts, $index, $count)
    {
      return $this->_single_tag('link', array(
        'rel'=>'stylesheet',
        'href'=>$this->path.'/css/style-dev.css',
        'type'=>'text/css'
      ));
    }
}
?>

Code in head.php:

<?php perch_get_css(); ?>
<?php perch_get_devcss(); ?>

Am I doing something wrong?

Jay George

Jay George 2 points

  • 5 years ago

This is how I do it...

    public function get_css($opts, $index, $count)
    {   
        $out = array();

        $out[] = $this->_single_tag('link', array(
                    'rel'=>'stylesheet',
                    'href'=>$this->path.'/css/style.css',
                    'type'=>'text/css'
                ));

        $out[] = $this->_single_tag('link', array(
                    'rel'=>'stylesheet',
                    'href'=>$this->path.'/css/style-dev.css',
                    'type'=>'text/css'
                ));

        return implode("\n\t", $out)."\n";
    }

Thanks for the reply but it's not quite what I need.

I omitted the following from my question because I didn't want to complicate things but what I'm really trying to do is output different stylesheets based on my environment e.g.

<?php
  if ( isset( $_SERVER["DEVELOPER_ENV"]) && $_SERVER["DEVELOPER_ENV"] == 'development' ) {
    /* If we are in a development environment then load dev css */
    perch_get_cssdev();
  } else {
    /* Else load production css */
    perch_get_css();
  }
?>

When the environment is not set to "development" the perch_get_css(); outputs fine but as soon as it tries to load perch_get_cssdev(); I get a blank page.

Is it possible to output different CSS stylesheets on a page?

Did you add the custom feather to the config?

They are both within the same feather e.g.

in perch/config/feathers.php:

<?php
    include(PERCH_PATH.'/addons/feathers/default/runtime.php');
?>

then in the runtime.php:

<?php
PerchSystem::register_feather('Default');

class PerchFeather_Default extends PerchFeather
{
  public function get_css($opts, $index, $count)
    {
      return $this->_single_tag('link', array(
        'rel'=>'stylesheet',
        'href'=>$this->path.'/css/style.css',
        'type'=>'text/css'
      ));
    }

  public function get_cssdev($opts, $index, $count)
    {
      return $this->_single_tag('link', array(
        'rel'=>'stylesheet',
        'href'=>$this->path.'/css/style.css',
        'type'=>'text/css'
      ));
    }
}
?>

I know it's correct because when I call perch_get_css(); I have no problems. But when I call perch_get_cssdev(); I get a blank screen

There is no such method as perch_get_cssdev

get_css is an extended method of perch_get_css but there is no method perch_get_cssdev

Excuse me if I am wrong... :(

when you call perch_get_css() it combines all the get_css() methods into one from all the registered feathers. Since there is no defined method in the perch/core/inc/feather.php of perch_get_cssdev() your getting a blank page... i.e PHP error.

Ohhh I understand now. I stupidly thought I could make up my own function. It makes sense now.

So I guess my next question is… do you know if it's possible to output different stylesheets depending on an environmental variable?

I can do this with plain php but wanted to do it via Feather if possible.

to explain why I want this…

I develop using advanced CSS features such as CSS variables and save this to style-dev.css

I then use Grunt to run through this, adding fallbacks, then outputting as style.css

I use MAMP to locally develop and it should load style-dev.css, but when in production it should load style.css

Jay George said:

Ohhh I understand now. I stupidly thought I could make up my own function. It makes sense now.

So I guess my next question is… do you know if it's possible to output different stylesheets depending on an environmental variable?

I can do this with plain php but wanted to do it via Feather if possible.

Sorry, I do not have an answer here, but I know when Drew or Rachel comes online they will have an answer.

OK thank you very much for your help though Robert.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I'd take Robert's example, and add the env test in there:

public function get_css($opts, $index, $count)
    {   
        $out = array();

        if ( isset( $_SERVER["DEVELOPER_ENV"]) && $_SERVER["DEVELOPER_ENV"] == 'development' ) {

        $out[] = $this->_single_tag('link', array(
                    'rel'=>'stylesheet',
                    'href'=>$this->path.'/css/style.css',
                    'type'=>'text/css'
                ));

        }

        $out[] = $this->_single_tag('link', array(
                    'rel'=>'stylesheet',
                    'href'=>$this->path.'/css/style-dev.css',
                    'type'=>'text/css'
                ));

        return implode("\n\t", $out)."\n";
    }

Amazing that works. Thanks so much for your help.