[Feature] Remove !important that is auto added

[sisheng1998]

Hi there, this extension is the best for adding CSS code while developing a website.

But the extension will auto add !important to every CSS property that we wrote, this might be a problem because the !important will definitely override the other same selector with the properties that without !important. This might cause us to write a selector not specific enough to override the existing specific selector because of !important.

So when I copy-paste the CSS code to update my website, some of the properties won't show because the existing specific selectors override the new selector that we wrote.

I hope this extension can have an option to let us turn off the auto-add !important to the stylesheet. We can add it ourselves when needed.

Thanks.

[BobVarioa]

maybe a !unimportant, or just a option of some sort?

[8p-design]

In fact it would be better to have an option in Stylebot to remove !important in a specific stylesheet delivery.

A-In the case I want to permanently modify a layout for my own usage, I would leave the "IMPORTANT" override ON for that site.

B-But it the case I use stylebot to make local tests for something that will go live one day in my developments, I would toggle it OFF. So that my styles apply in the context, as expected. And if really I need !important on a class, I would add it myself to the class.

I believe this "per site toggle" would be an easy fix and would really help developers prepare changes.

[JonasKalkman]

While a toggle per site is definitely a good idea, I personally would like to see the option to turn it off for specific lines. I have some css variables that I wanted to do some calculations over, but calculations don't really work when stylebot will add !important:

calc(var(--number) + var(--number)) calc(100 !important + 100 !important) causes an error

[pl0xy]

calc(100 !important + 100 !important) causes an error

Have you made an issue for this specific problem?

[JonasKalkman]

I was going to, but it seems to have been fixed already. I can't reproduce it on Chrome anyways.

[doitian]

According to the source code, !important is not added in the at-rule block.

https://github.com/ankit/stylebot/blob/bc9d8108f4cd4570ce4bf2fe32f189d09adbaf3e/src/css/declaration.ts#L76-L78

Here is an exmaple to use @media all, which is effective always.

@media all {
    pre {
        font-family: "My Fancy Mono", monospace;
    }
}