Output CMS data to a .css file

[a-ok]

Pretty sure this is a daft question but thought I’d ask anyway!

Is it possible to include data from PW into a .css file? I have a client adding some webfonts via the admin but don’t want them to be added as <style></style> tags and rather within a separate .css file? I basically want to make finding the webfonts a little harder!

Any thoughts?

[Robin S]

2 hours ago, a-ok said:

I basically want to make finding the webfonts a little harder!

I have my doubts about how effective that strategy will be, but you have a few options:

1. Create a PW template and page that outputs the CSS. Use a "text/css" content-type header, either using the "Content-Type" select on the Files tab of the template, or by using header().

header('content-type: text/css; charset: UTF-8');

Add this page to your markup in a <link> tag:

<link rel="stylesheet" type="text/css" href="/path/to/page/">

2. Similar to the above, but rather than create a template and page instead create a PHP file in the site root (PHP files are blocked inside /site/) that bootstraps ProcessWire.

3. Use $files->filePutContents() to actually write a CSS file that you load in your markup.

In all of these cases you will probably want to use a cache-busting query string based on the time the CSS was last modified.

[joer80]

I added a module for this that hooks on page save.  Added an ace css text field for color coded markup and when I save, if that page has a css field, it creates the .css file on the server using a timestamp name. 

public function init() {
		$this->pages->addHookBefore('save', $this, 'updateThisPage'); 
		$this->pages->addHookAfter('save', $this, 'makeMergeFiles'); 
	}

and something like

$myfile = fopen('../assets/css/' . $newAssetFilename . '.css', "w");
fwrite($myfile, $allCSS);
fclose($myfile);

For some reason if I move a page it doesnt work right.  Have to save it to fix, but it hasnt bothered me enough to research it. lol

I usually add one to my template page, and the individual page and it finds all pages with this field and merges everything into one file.  I do one for js also.

[a-ok]

11 hours ago, Robin S said:

In all of these cases you will probably want to use a cache-busting query string based on the time the CSS was last modified.

Thanks so much, @Robin S ? Can I ask what you mean by the quoted text? Are you saying that if it's updated regularly then it'll need to use a cache-busting query string?

Thanks @joer80 also! This is also a great idea!

[Robin S]

8 hours ago, a-ok said:

Can I ask what you mean by the quoted text?

You want browsers to reload the CSS any time that it changes, instead of going to the browser cache. Appending a query string to the CSS URL that changes every time the CSS changes is a reliable way to achieve this.

You can see an example of this approach in the PW admin, where the file modified timestamp is used in the query string:

[a-ok]

On 4/26/2020 at 2:31 AM, Robin S said:

I have my doubts about how effective that strategy will be, but you have a few options:

1. Create a PW template and page that outputs the CSS. Use a "text/css" content-type header, either using the "Content-Type" select on the Files tab of the template, or by using header().

header('content-type: text/css; charset: UTF-8');

Add this page to your markup in a <link> tag:

<link rel="stylesheet" type="text/css" href="/path/to/page/">

2. Similar to the above, but rather than create a template and page instead create a PHP file in the site root (PHP files are blocked inside /site/) that bootstraps ProcessWire.

3. Use $files->filePutContents() to actually write a CSS file that you load in your markup.

In all of these cases you will probably want to use a cache-busting query string based on the time the CSS was last modified.

I'm sorry it's taken me ages to get back to this!

Thanks so much @Robin S – I went with the first option but I'm unsure whether the third option is the best. Any preference from your end?

 

 

[Robin S]

9 hours ago, a-ok said:

I went with the first option but I'm unsure whether the third option is the best. Any preference from your end?

Third option creates a static file so it can be cached by the browser, but the first option could also create a static file if you are using ProCache. Probably not much impact no matter which option you use.

[a-ok]

Just back to this, sorry.

I've set up a template file which is outputting the CSS and all seems okay on that front BUT the file itself seems to take an age to load and thus makes the load time of the whole site super slow.

Any thoughts if I'm implementing this wrong?

[a-ok]

I set up a wireCache for it and runs super fast so maybe just the process itself and then the fact that it's loading it as a CSS file.