Does this support webpack?

mrnocreativity / postcss-critical-split

A PostCSS plugin that takes existing CSS files and splits out the annotated critical styles into a seperate file.

MIT License

89 stars 6 forks source link

Does this support webpack? #4

Closed hulkish closed 6 years ago

hulkish commented 7 years ago

If so, how does this behave with extract-text-webpack-plugin?

mrnocreativity commented 7 years ago

I don't know, I haven't worked with webpack yet. Since it behaves like a normal postcss plugin, I suppose any workflow that supports postcss should be supported. However, not knowing in which way people use this, I might be wrong :)

Feel free to let me know if you tried it and find out it doesn't work the way you expect. Let me know what goes wrong and how you'd like to see it work. Maybe I can work out a way around that :)

podlebar commented 7 years ago

i don't think.. i tried now but there are some problems:

webpack LoaderOptionsPlugin has a minimize option that is often used for production and this one removes all comments unless they are licence comments (/*! critical:start */)but postcss-critical-split does not recognize those comments.
there would be a need to collect the critical rules and pipe into one file.. so a option like 'outputFile' would be needed together with a option to append or overwrite.
if you are using some plugins like css-mqpacker comments from the same selector get ripped so you loose some classes.

to be said.. i tried to integrate this with webpack and failed. but i also use gulp for some tasks.. so my Approach was to start with webpack with current setup and than take generated files and extract the critical css... did not work.. i guess to make it usable with webpack some different solutions would be needed.

mrnocreativity commented 7 years ago

It is supposed to be working as a generic postcss plugin, however webpack being one of those special build tools, it seems this could come with a few caveats like mentioned by Podlebar. I personally use this with gulp in all my (tiny/large/enterprise) projects and it works as expected. However, I can imagine that some people might be using build tools/build flows/plugins that conflict with how Postcss-Critical-Split works. Webpack seems to be one of those. You're welcome to attempt to make it work and send me pull requests. i'd be more than happy to support this but since I have no experience with webpack, I might not be the ideal person to offer a suggestion on how to make this work.

mrnocreativity commented 6 years ago

Hey guys,

I just published an update in the example repo to show how this can be used. Props to Vladimir Kuznetsov for helping out!

I'll close this as it's now working in Webpack so the question should be answered. Let me know if you have any other questions :)