Webpack plugin about dropcss HOT 8 CLOSED

Also, when I try to use .jsx files I get a OOM exception, so I was wondering if malformed markup could be handled more gracefully.

you're likely hitting an infinite loop in the css or html parser. there's a plan to throw in case either parser stops advancing (see #21).

having it work with jsx will probably not work since jsx is javascript with html sprinkles and not the other way around. the dynamic nature of a full programming language prevents the simple inference of resulting dom structures. i can think of a thousand imperfect ways to operate on jsx and other sources (eg like Purgecss does by id/className whitelisting all strings found by its extractors), but cannot think of anything as universal and complete as operating on the final rendered html.

where does that leave webpack? honestly, i'm not familiar enough to know. i changed the title of this issue with good reason, DropCSS is not designed to operate on source files (which is what loaders do), so i think it needs to be a plugin, but it's not clear to me if there is any consensus exactly how, when or even if the final html of pages is ever rendered out during a typical build process; perhaps during tests?

there are a lot of questions that need to be asked and answered. right now it's not clear to me how a webpack plugin can be made that is applicable to any meaningful amount of setups. i can make one that would work for my specific choices of tools and build sequence, but it would not be helpful to anyone else.

from dropcss.

https://old.reddit.com/r/javascript/comments/bb7im2/dropcss_v100_an_exceptionally_fast_thorough_and/ekh12k9/

from dropcss.

@leeoniya got it, i will see what i can do. Kudos on the library!

from dropcss.

thanks, if there's any movement on this front it'll probably make sense to move the dropcss repo into an org [1] and have a separate repo for the webpack loader plugin, which will have maintainers that are not me :)

[1] https://github.com/dropcss

from dropcss.

I've created a webpack loader and it works for HTML, but not for my use case (JSX) since dropcss doesn't support it. I'm trying to think of ideas to make this work without making the loader overly complex. Also, when I try to use .jsx files I get a OOM exception, so I was wondering if malformed markup could be handled more gracefully.

from dropcss.

Yea, it should be a plugin because it would be more efficient and useful to be executed in a compilation hook instead of just when the CSS source files are modified since the behavior also depends on the markup. You are right that the components will never be rendered to html during the Webpack build process so there is no opportunity for this to work as it is right now. I guess I’ll try adding my own matching logic via shouldDrop or is that dumb?

from dropcss.

I guess I’ll try adding my own matching logic via shouldDrop or is that dumb?

you could always give it 0% of the html and use shouldDrop for 100%, or 50% of the html and use shouldDrop for the other 50%, or 100% of the html and shouldDrop for 0%.

for each of those cases your shouldDrop shrinks progressively and accuracy increases. you'll eventually discover that writing a shouldDrop that can understand .jsx, .vue, etc. is much harder and slower than figuring out how to generate the needed html from some app state. worst case for the latter is going the puppeteer route with some UI automation scripts. worst case for the former is dealing with jsx/vue parsers, ASTs, extraction of relevent nodes, evaluating rendering conditions, etc.

here's an (imperfect) example of using shouldDrop after preparing a 'static strings' whitelist from a vue template: tailwindlabs/tailwindcss.com#161 (comment). the key here is whitelist prep and how complex your shouldDrop needs to be per source format you want to handle. can it be done? sure! is it worthwhile? i don't think it is.

from dropcss.

honestly, i don't think there's anything actionable here in terms of a generalized webpack plugin. most build scripts that are not explicitly static site gens are not doing SSR during their processing.

from dropcss.