feature request: "map" option

bholloway commented 6 years ago

Thanks for this plugin!

My use case

I am generating static HTML with css modules. I will be inserting this HTML+CSS a "host" page that does not have a "reset css".

I would like to use postcss-autoreset on all my hashed class names, so that it is specific only to my static HTML only and does not effect my host page.

However I need to match the selectors of resetcss, which include the element.

Currently supported

The class names are collated.

Before

._a6e3a4244 { font-size: 10px; }
._b93c883f { font-size: 8px; }

After

._a6e3a4244,
._b93c883f {
  /* reset declarations */
}
._a6e3a4244 { font-size: 10px; }
._b93c883f { font-size: 8px; }

What I need

An arbitrary string that I specify (e.g. "div"), prepended to the collated class names.

After

div._a6e3a4244,
div._b93c883f {
  /* reset declarations */
}
._a6e3a4244 { font-size: 10px; }
._b93c883f { font-size: 8px; }

What I propose

New option mapSelector : function.

The mapSelector performs a flat-map of matchedSelectors before this invocation.

Default value is identity function x => x, which gives unchanged behaviour.

In my case I would use:

mapSelector: (selector) => `div.${selector}`

Would you be open to a PR that implements this?

maximkoretskiy commented 6 years ago

Hi! PR is possible. But right now I see a problem in wanted CSS code. The reset block has higher specificity than implementation

Here is an example how it would work in a browser. Replaced font on color to make problem more visible http://jsbin.com/napivudoyo/edit?html,css,output

maximkoretskiy commented 6 years ago

BTW reset.css could be applied to your styles anyway. And You don't need to change the behavior of this plugin to match reset.css. But usually, it is not required to use both postcss-autoreset and reset.css on the same project.

bholloway commented 6 years ago

Ah yes of course. I :facepalm: myself. I will close this.

However I am not seeing how reset.css could be applied to my styles without potentially regressing the host page.

The best solution I can see right now is to use a subset of the reset.css styles and apply it using postcss-autoreset to my classes (same specificity, per the existing functionality).

maximkoretskiy commented 6 years ago

You can nest the content of reset.css in the root CSS rule of your app widget. Good luck!

maximkoretskiy / postcss-autoreset