prefixSelectors does not prefix selectors inside @media queries

[Andi Neck]

Example:

rework.prefixSelectors('.hack')

source:

@media print {
  .visible-print {
    display: block !important;
  }
}

expected:

@media print {
  .hack .visible-print {
    display: block !important;
  }
}

result: untouched source, without .hack prefix.

[Andi Neck]

Never mind. I just wrote a plugin that handles "nested" selectors as well: rework-prefix-all-selectors

[TJ Holowaychuk]

definitely still a bug with our visiting

[Andi Neck]

I didn't find a way to fix it without breaking the existing visit implementation. That's why I modified rework-visit into a rework-walk plugin (now I think it's a stupid name :-) that calls the callback function with rule/keyframe instead of their declarations, and implemented rework-prefix-all-selectors on top of it (even worse naming...).

Any Ideas how to fix it with the existing rework-visit implementation, without breaking other stuff?

[Nicolas Gallagher]

I think it would be worth moving more of these plugins out of the rework core.

[jongleberry]

I think it would be worth moving more of these plugins out of the rework core.

+1

[Eric Ferraiuolo]

I've created rework-mutate-selectors which does selector prefixing and find/replace. I also created a grunt-css-selectors which is a Grunt wrapper around this.

I think rework-mutate-selectors can serve this role, and it's already has some decent usage.

[Nicolas Gallagher]

Moved to reworkcss/rework-plugin-prefix-selectors#1