How to use cached css

[JaydeepGo]

Hi, I am using @11ty/eleventy-cache-assets to cache CSS file. this will generate the file in .cache directory.

// prismjscss.js in global data directory 
const Cache = require("@11ty/eleventy-cache-assets");


module.exports = async function() {
    return Cache('https://unpkg.com/[email protected]/themes/prism-okaidia.css', {
        duration: "1d", 
        type: "text"    
      }); 
}

How can I use this file in template?

I tried passing it as global data file but luck. <link href="{{ prismjscss }} " rel="stylesheet">

[pdehaan]

You might get more/better responses in the https://github.com/11ty/eleventy-cache-assets repo, but I'm a bit confused.

Wouldn't the above cache the CONTENTS of the remote CDN'd CSS file locally?
What is being output in the {{ prismjscss }} block? The entire CSS file contents, or undefined/empty string?

[pdehaan]

Quickly tested this locally w/ the following:

<!-- ./src/index.njk -->
<pre data-debug>
{{ prismjscss | safe }}
</pre>

And it seems to output the raw CSS:

<pre data-debug>
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
...
</pre>

Not sure I understand what you're trying to do, but one option might be just writing the CSS file contents locally and then referring to your local version (if you don't want to use the CDN for some reason):

---
# ./src/prism-theme-css.njk
permalink: prism-theme.css
---

{{ prismjscss | safe }}

This will convert ./src/prism-theme-css.njk to ./_site/prism-theme.css, which you can then refer to in your in your layout file:

<link href="/prism-theme.css" rel="stylesheet" />

But I haven't used the eleventy-cache-assets for this stuff before myself (mostly just for API caching). There might be better solutions, like https://www.11ty.dev/docs/plugins/cache/#cache-directory where you override the cache directory and then cached assets over using passthrough file copy instead of using a global data file and intermediate Nunjucks/Liquid template w/ permalink.

[JaydeepGo]

@pdehaan Thanks for the reply.
In Cache Assets documentation there is no description for how to use CSS body response in a template, as we have for image (sharp plugin).
The above solution works for my case where I want to save the cache callout response body as a specific file.

I was not using the passthrough file copy method because I thought the file name will change when there is a change In context (I was wrong. Cache Assets uses URL to generate hash).

I was using CDN'd CSS just for ref.