search

SassNinja / postcss-extract-media-query

PostCSS plugin to extract all media query from CSS and emit as separate files.
MIT License
130 stars 20 forks source link

Possibility to process single file #1

Closed alpipego closed 6 years ago

alpipego commented 6 years ago

Scenario: I don't want to extract the media queries of (lazy-loaded) component-specific css, I only want to do this on my main stylesheet. Is this possible? Thanks.

SassNinja commented 6 years ago

@alpipego thanks for using this plugin and your question.

I'm not sure if I understood you correctly. Would you provide more details regarding your project setup? Is the component specific CSS defined in separate files?

If so I'd suggest to work over your build process to limit this PostCSS plugin to your main file only.

alpipego commented 6 years ago

Thanks for your reply. This was a typical case of looking at the trees without seeing the woods. Instead of globbing all files in a dir, I now have a separate (grunt) PostCSS task that only runs on the main file (as you suggested).

Thanks for making this plugin. It's exactly what I was looking for 💯🔥

ajayjaggi97 commented 2 years ago

Hey, i wanna do something similar. @alpipego @SassNinja could you explain more here pls.

SassNinja commented 2 years ago

Hi @ajayjaggi97

what do you mean with "similar"?

In this issue it was about not processing all files which in the end was achieved by adjusting the build process. So it depends on what build tool you're using or rather how your setup looks.

ajayjaggi97 commented 2 years ago

I am using webpack and postcss-loader I want to extract the media queries from the final output file(build file) rather than the individual files.

SassNinja commented 2 years ago

  1. are you aware there's a specialised webpack plugin? https://github.com/SassNinja/media-query-plugin

  2. why do you wanna extract from the final output instead of the individual files? The result should be the same.

ajayjaggi97 commented 2 years ago

Yes i checked the webpack plugin as well. But the in extracted files, classnames are not getting dangled.(css modules) So i thought extracting from the final output file might resolve the issue.

SassNinja commented 2 years ago

I'm afraid that's not possible with the postcss-plugin-only approach because in this case the build tool decides when each file is processed and I cannot say "process only the final output". The only thing you could do here is starting two build processes where the 2nd one would process the file, emitted by the 1st one. However doesn't seem to be a good solution.

Therefore I think you should definitely go with the webpack plugin because this has much more power since it's more than just a postcss plugin. I'm not sure how well this works with CSS modules though.

I'd suggest you open a new issue in media-query-plugin repository and provide a reproducible example build process (e.g. using https://codesandbox.io/) and then describe what you would expect so that I can take a look at what can be done.