D
Deno

help

[fresh] injecting css into head in a component

/|\ /|\9/18/2023
When I inject css in the head of my html in a component, it works perfectly, but when I reuse the component somewhere in my html, it reinjects the css a second time @Deno AI Helper
DAHDeno AI Helper9/18/2023
Sure, I'd be happy to help! Could you please provide me with the question you'd like me to answer?
/|\ /|\9/18/2023
When I inject css in the head of my html in a component, it works perfectly, but when I reuse the component somewhere in my html, it reinjects the css a second time @Deno AI Helper
DAHDeno AI Helper9/18/2023
According to the documentation, when you use plugins in Fresh, you can inject CSS into the <head> of your page as inline CSS. This is done by adding the CSS to the styles array in the PluginRenderResult object that the render hook returns. Each entry in the styles array can define the CSS text to inject, as well as an optional id for the style tag, and an optional media attribute for the style tag. However, the documentation does not explicitly mention how Fresh handles the injection of CSS when a component is reused in the HTML. If the CSS is being injected each time the component is used, it might be due to the way the render hook is implemented in your plugin. One way to avoid this could be to check if the CSS has already been injected before adding it to the styles array. However, the documentation does not provide a clear answer on how to do this. If you're experiencing issues with this, it might be helpful to debug your render hook implementation to see why the CSS is being injected multiple times. 🦕
Mmarvinh.9/18/2023
@kamil.l Fresh maintainer here. I'd love to look into this. Do you have a repo or something I can take a look at?
/|\ /|\9/18/2023
I have a repo but the code is really to complicate for this, I can try to make a simple reproducable example My component looks like that:
import { JSX } from "preact";
import { Head } from "$fresh/runtime.ts";

interface props extends EventTarget {
title: string;
content: string;
linkText: string;
};

export default function Card(props: JSX.HTMLAttributes<props>) {

return (
<>
<Head>
<link rel="stylesheet" href="/css/card.css" />
</Head>
<div></div>
</>
);
}
import { JSX } from "preact";
import { Head } from "$fresh/runtime.ts";

interface props extends EventTarget {
title: string;
content: string;
linkText: string;
};

export default function Card(props: JSX.HTMLAttributes<props>) {

return (
<>
<Head>
<link rel="stylesheet" href="/css/card.css" />
</Head>
<div></div>
</>
);
}
If you need more information, don't hesitate to ask
Mmarvinh.9/18/2023
ah it looks like we don't de-duplicate tags added via <Head />
/|\ /|\9/18/2023
Is there any simple way to avoid this?
Mmarvinh.9/18/2023
The easiest way to work around this is to hoist the <Head /> tag to the route
/|\ /|\9/18/2023
Oh ok thank you, I was hopping to do it automatically
Mmarvinh.9/18/2023
not sure how to do that without fixing the bug fwiw: injecting the css style again doesn't affect the correctness of the page and the browser deduplicates the requests.
/|\ /|\9/18/2023
Is there a way to read the current head to check if it's already there?
Mmarvinh.9/18/2023
Currently it writes into as standard context value. It's exported as HEAD_CONTEXT. Be aware though that this will likely be removed with fixing this bug, so you might need to remove that workaround again when the next version of Fresh comes out
/|\ /|\9/18/2023
Ok ty I'll check that
Mmarvinh.9/18/2023
FYI: here is the PR that fixes this https://github.com/denoland/fresh/pull/1793
/|\ /|\9/18/2023
Ok amazing thank you May I ask when it'll become available in fresh?
DAHDeno AI Helper9/18/2023
It seems like you're experiencing an issue where CSS is being injected multiple times when a component is reused in your HTML. This could be due to the way the render hook is implemented in your plugin. According to the Fresh documentation, the render hook allows plugins to control the timing of the synchronous render of a page and inject additional CSS and JS into the rendered page. The CSS is injected into the <head> of the page as inline CSS. Each entry can define the CSS text to inject, as well as an optional id for the style tag, and an optional media attribute for the style tag. However, the documentation does not provide specific details on how Fresh handles the injection of CSS when a component is reused. If the CSS is being injected each time the component is used, it might be due to the way the render hook is implemented in your plugin. One way to avoid this could be to check if the CSS has already been injected before adding it to the styles array. However, the documentation does not provide a clear answer on how to do this. If you're experiencing issues with this, it might be helpful to debug your render hook implementation to see why the CSS is being injected multiple times. 🦕
Mmarvinh.9/19/2023
@kamil.l not sure when the next Fresh release is going to be, but you can always point the import map at any git commit sha. See https://fresh.deno.dev/docs/examples/using-fresh-canary-version
Using Fresh canary version | Fresh docs
For cases where the latest release doesn't fit your needs.
/|\ /|\9/19/2023
Ok thank you

Looking for more? Join the community!

Recommended Posts
Autosave firing on editing `.ts` files when a separate Deno enabled project is openHello, I am working on slack automation using deno. I'm developing with webstorm, but I'm having a pProblem with parsing `base64url` from a `Buffer (node)`help , it works in bun but not in Deno, I don't know if is a bug from them or it's not implemented hUUID of managed KV databaseHello, I am trying to follow [this doc](https://docs.deno.com/kv/manual/on_deploy#connect-to-managedError at the execution of a programmHey ! I have a problem when i run one of my programm with deno, is a programm made with typescript Can't import typescript moduleWhy can I only import the js file and not the ts file? ```js import * as zip from "https://deno.lanIs there a way to change the default Details of the compiled exeI esentialy want to change the comiling defaults of the details and the image of the resulting exe (Setting source map root with `deno_emit`Hello! I'm currently trying to use `deno_emit` so bundle some assets. The code bundles properly, howIn Deno, what is the best way to simply host static websites?What is the best way to simply host static/cached files? Without having to do a read file call everyzsh: command not found: deno on macOSplease send helpUsing esbuild with import mapsHello 👋 I'm attempting to migrate one of my front-end projects to using Deno for tooling instead ofproxy-agent not working on Deno DeployI'm trying to use a proxy for the node-fetch requests in a deno app. I chose proxy-agent npm packagExtremely high CPU usage in Windows running on Intel Pentium processorI have a simple app (about 300 lines of code, few deps). I compile it into a Windows executable. WheImpossible to use `"jsx": "preserve"` in deno.json...Well it seems that I can't use jsx preserve in deno.json, when I try to run any tasks in deno.json, integrating deno_webOk I seem to have poobrain today. Can't seem to get the deno_web extension working. The core versioCan I use Workers in an executable ?Everything is in the questions, on the doc site, it is mention that we can't use Workers when creatiWalkSync dosnt get filesIm trying to read all files of a folder with WalkSync from the deno STD libary but it dosnt see thedeno behaving differently in local dev env and production docker buildsI'm currently trying to switch from using node+yarn 2 for my blogs static files to deno. however theFront end dev needed for 6 months.Hello. I am in need of a frontend developer. dm me pls.Include platform and version in compiled binary filenameRight now when i run `deno compile --output bin/myprogram`, it works as expected. Is is possible to How to handle a user abort by Deno.serveHello, I have a question and discovered this Discord channel now. The Deno website has an example at