-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
CSS "!important" not supported in Svelte "style" #7365
Comments
Ok, maybe this is not important. Plain HTML style works:
|
Hi, It seems to produce the following code : let style_background_color = `${/*color*/ ctx[0]} !important`;
// ...
set_style(h1, "background-color", style_background_color, false); => "!important" should not be present in the property argument, but should match the boolean's value of the 4th parameter. In this specific case, I think it should produce the following code instead : set_style(h1, "background-color", /*color*/ ctx[0], true); // important = true But this is not enought because the !important can be on the "color" variable, like this : <script>
export let color = 'red !important'
</script>
<h1 style:background-color="{color}">!important</h1> And in this case, set_style() should detect the presence of "!important" in the value... |
I prefer this to be not supported and documented. It should throw an error telling you should not put "!important" in the value. <h1 style:background-color|important={color}>works</h1> |
Could you please explain to me why the above syntax is better? Personally I prefer below. <!-- style:property -->
<h1 style:background-color="{color} !important">foo</h1>
<!-- natural style attribute -->
<h1 style="background-color: {color} !important">foo</h1> This is much similar to the natural style attribute. |
I can see the rationale behind it Also, taking a quick look through the PR it seems like it's a compile time check instead of a runtime check as mentioned in #7365 (comment) Going that route, a directive modifier would be cleaner and also could be easier to statically analyze than "!important" as part of the value itself. Although I don't know enough about the CSS spec so the pipe might be a valid character in custom property names, in which case the |
Thank you for explaining! I think controlling
Yeah, in this case, I think we need to modify around
I checked it and custom property name can not use |
This is supported now via an |
Describe the bug
It seems CSS
!important
is not support in the Sveltestyle
attribute.But it is of course important if you want to overwrite a style.
Reproduction
https://svelte.dev/repl/152608cb822e41e68ce43522ef96d875?version=3.46.4
Logs
System Info
Severity
blocking an upgrade
The text was updated successfully, but these errors were encountered: