skewer-css-eval-buffer won't delete rules already applied

[L42y]

For example, if I wrote these rules:

header {
    height: 44px;
    background: red;
}

but then I changed the rules:

header {
    height: 44px;
}

the red background is still here, is there a way to get rid of this problem?

[skeeto]

How it works is the CSS "expression" you send over just becomes a new stylesheet appended to the end of the body, so that its rules supersede all others. If you inspect the DOM you can see these stylesheets building up as you use skewer-css. As a result, rules are never deleted, just masked-over. It's conceptually different than having the page reflect your current stylesheet.

There may be a way to implement the behavior you want but I never figured out a clean, portable way to do it. I also think it has a significant undesirable property: if you have the same selector on another stylesheet those declarations would be wiped out as well, even though you're not working with them at the moment. I think that kind of behavior would be too surprising.

Because of both of those issues I don't have any plans to change the current behavior. I think if you have the right mental model of that's going on -- new stylesheets being appended -- this isn't much of a problem.