Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Support for styling elements #7

Open
shirakaba opened this issue Jan 30, 2021 · 2 comments
Open

Support for styling elements #7

shirakaba opened this issue Jan 30, 2021 · 2 comments

Comments

@shirakaba
Copy link
Collaborator

shirakaba commented Jan 30, 2021

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;
}
@mrsauravsahu
Copy link
Collaborator

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?

@mrsauravsahu
Copy link
Collaborator

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants