nodegui/svelte-nodegui

Support for styling elements

shirakaba opened this issue · 2 comments

This is possible, as long as you don't write it into a <style> element (Svelte compiles it out, as it finds no element in your HTML tree):

QLabel {
    color: red;
}

This would be preferred, as we use elements with names like :

text {
    color: red;
}

To achieve this, we'd need to implement a Svelte postprocessor that renames text to the corresponding underlying component, i.e. QLabel.

We could work around this using global styles, with the natural caveat that they would be unscoped. For now, the best we can do is:

:global(QLabel) {
    color: red;
}

I was thinking about picking this. However, not sure if a postprocessor will help. It should be svelte that writes the css, don't you think? Once svelte compiles our code, we won't be able to go back in add the styling. Thoughts?

Thought about this issue and I see changing the text selector to QLabel webpack output makes the css work. I think we can write a webpack loader to parse the output that Svelte produces and make necessary changes.