1.0.3
A Deno library by @codemonument to help integrating openprops with Deno's web framework 'fresh'.
Attributes
Includes Deno configuration
Repository
Current version released
2 years ago
Dependencies
deno.land/x
esm.sh
std
Readme

A Deno library by @codemonument to help integrating openprops with Deno’s web framework ‘fresh’.
Links
GitHub | Deno.Land/x | Example Deployment
Usage
- Create a folder called
csson the top level of your repo, for all your css files which should have openprops available - Download the necessary openprops css files via
https://deno.land/x/fresh_openprops/download-openprops.ts- Pass the version you want to download as first param, for example 1.5.8
- Find the newest version by going to https://unpkg.com/open-props and reading the version off the url bar
- Optional: You can adjust the output folder for this script via the
--outPathoption - This will create the folder
css_deps/open-props(if you did not use the –outPath option)
- Create a route file under
routes/postcsscalled[...path].ts- The
...pathis important, since this path variable will be used by the generated route handler - In this file, add the following:
import { generatePostcssHandler, prefillCssCache } from "../../../mod.ts"; export const handler = await generatePostcssHandler(); await prefillCssCache();
- If you used the
--outPathoption when downloading openprops or named your top level folder something other than css, you can adjust this route handler file like this:import { generatePostcssHandler, prefillCssCache } from "../../../mod.ts"; export const handler = await generatePostcssHandler({ cssInputPath: "example/css", postcssModuleDirs: ["example/css_deps"], }); await prefillCssCache({ cssInputPath: "example/css", });
- Note: The
await prefillCssCache()call is optional, but recommended. It walks through yourcssfolder, runns all css files it finds through postcss and caches the results.
- The
- Use your new route in any of your pages (for example in index.tsx): Note: The path after
<Head> <title>OpenProps in Deno Fresh</title> <link rel="stylesheet" href="/postcss/global.css" /> </Head>
/postcss/will directly map into yourcss/directory
When having issues
Please report all of your issues at GitHub here: https://github.com/codemonument/deno_fresh_openprops/issues