feature request: smarter CSS evals

[bling]

right now the eval works by continuing appending new style tags to the bottom of the document. unfortunately, this means that every new style that gets applied must also define a whole bunch of none, auto, 0 values to clear out any previous experiments.

i have some local changes where i delete all style tags before adding one in the skewer.js file, but it'd be nice if this is supported officially, perhaps keyed to the CSS selector.

thanks.

[skeeto]

What do you local changes look like? What sort of additional support from Skewer are you looking for?

[bling]

literally just $(document.body).find('style').remove()....nothing too fancy.

as for the official support, i was thinking something like this....given the following CSS block:

.foo .bar {
  background: red;
  font-size: 10px;
}

if i eval that block, it should key off the selector .foo .bar and add that to the body. then i add a new line and eval:

.foo .bar {
  background: red;
  font-size: 10px;
  position: relative;
}

let's say the position relative was a bad idea. now i delete the line, and eval again. currently, i have to add a position: static to cancel out the previous eval. it'd be nice if skewer knows that .foo .bar is outdated and replace the style tag without adding a duplicate.

in my local change since i just clear everything, this works. but unfortunately, if i make a ton of changes to various places then previous evals that i want to keep get deleted as well.

[skeeto]

literally just $(document.body).find('style').remove()....nothing too fancy.

I like this idea. I just added skewer-css-clear-all (bound to C-c C-c) to do this. It strictly removes only Skewer's style tags (cd54357).

If i eval that block, it should key off the selector .foo .bar

Since the user is part of the loop, I don't want the rules about updating the styles to get complicated. I'm afraid of users to evaluating some CSS and not getting what they're expecting because Skewer was trying to be smart about it. They shouldn't have to learn a complicated set of style-building rules to use the minor mode. The "append the style to the end of the page" is a simple rule that is easy to reason about on the fly.

In your particular situation where you've got a lot of styles appended, perhaps you could clear out all the styles, as you've been doing, but also do a skewer-css-eval-buffer to put all the "good" rules back in.

[bling]

my particular situation is probably more unique than others, since i'm using stylus. i wrote a blog post about it here, where basically i have a stylus buffer, i compile it to CSS, and then run that through skewer.

so in my situation, i don't really have a "master" css file to eval, because i'm always working on small stylus files localized to a particular part of the application i'm testing. and then once in a while, i would do a full reload of the full compiled CSS file to "reset" it.

so for me, i need the granular "keying off selector", but i can see how it wouldn't be very useful for people who use straight CSS. implementing this properly would touch "the full stack" so the speak, so i figured maybe you would have a better idea of how it could be done.