Is it possible to create css using SWC in Next js?

help
1

I am creating a SWC plugin for Next js. I have no problem finding the "background" attribute.
<div background="red"></div>

Using SWC, I add a unique class to this element instead of an attribute.
<div class="uniqueStyle642"></div>

I need to create css using SWC.

.uniqueStyle642{
        background:red;
}

Any ideas how this can be done?

An empty css file may already be created and imported into the application.
I need to somehow add style.

2

I'm spotting cross-posts with bot-like efficiency these days:

3 Likes
3

This is my stackoverflow question. I will be very glad if you help me here or there

4

No idea how to do that. I can't even find documentation on how to write SWC plugins in Rust. In vanilla JS you could do something like this to create a new style and add it to your div:

// create style element
let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.red { background: #f00; }';
document.getElementsByTagName('head')[0].appendChild(style);

// assign it to the div with the `background="red"` attribute
let div = document.querySelector('[background="red"]');
div.classList.add("red");

(based on this SO answer)

But I have no idea how the SWC API works and if you can do the same. There is the web-sys crate that exposes the browser APIs to your Rust code. It contains the functions and types I used in the above JS snippet.

Then again you want to write a plugin for Next.js so you probably want to add the class during server side rendering and not on the client side. So what I just wrote is of no interest to you at all...

5

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.