Extending a nested &:hover in a @define-placeholder is ignored.

davidtheclark / postcss-simple-extend

A PostCSS plugin for extending placeholder selectors

MIT License

34 stars 3 forks source link

Extending a nested &:hover in a @define-placeholder is ignored. #9

Open peterdillon opened 9 years ago

peterdillon commented 9 years ago

@define-placeholder icon-holder {
  color: #999;
  &:hover { color: red; }
}

OUTPUT:

.icon-test1,
.icon-test2 {
  color:#999
}

davidtheclark commented 9 years ago

Is postcss-nested running before or after extend? I think (not sure) you'll to run it before, so that the selectors are modified by postcss-nested and then extended with this plugin. Does that work for you?

On Mon, Aug 17, 2015 at 11:42 AM, Peter notifications@github.com wrote:

@define-placeholder icon-holder { color: #999; &:hover { color: red; } }

OUTPUT:

.icon-test1, .icon-test2 { color:#999 }

— Reply to this email directly or view it on GitHub https://github.com/davidtheclark/postcss-simple-extend/issues/9.

peterdillon commented 9 years ago

I just thought this - but it has the same results:

require('postcss-nested')(),
require('postcss-simple-extend')(),

davidtheclark commented 9 years ago

Oh yeah, sorry -- wasn't thinking clearly. That shouldn't work. And at this point I don't think I'm going to complexify this particular plugin to allow for that syntax.

You have options, though:

You can use a mixin with https://github.com/postcss/postcss-mixins
You can see https://github.com/travco/postcss-extend (a fuller extend implementation) will support it
You create two placeholders, one for the normal state and one for hover

Next time I have a chance, though, I might look into this and see what it would take to allow that syntax.

peterdillon commented 9 years ago

Okay! And thank you for your quick replies and awesome work! This plugin is fantastic regardless.