Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants