Purge never stops (memory issue?)

[kctdfh]

Hey!

So I have the following in my purge configs

purge: { content: [ './components/*.html', './dist/*.js'], defaultExtractor: content => content.match(/[A-Za-z0-9-_:!\/]+/g) || [], options: { safelist: [/read-only$/] } },

I have around 30 html files in /components and 10 js files in /dist. Yesterday I had maybe 27 files in html. Yesterday my purge command was running fine and would take 50 seconds. Here it is:

cross-env NODE_ENV=production postcss src/pre-compiled-styles.css -o dist/css/styles.purged.css

Today it's giving me errno 134 which is a memory allocation issue.

I adjusted the command to this, as per suggested on SO - which allocates 6GB to Node (I have 8GB on my machine):

cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=6144 postcss src/pre-compiled-styles.css -o dist/css/styles.purged.css

Now my command is running forever. Granted, I haven't waited more than 15 minutes but it's safe to assume that even if it does end after 15 minutes, it's untenable since I'm designing a component library and would need to compile often as my components all have their own CSS files with @apply and @import.

Any ideas?

[simonswiss]

Hey 👋

Would you be able to share this code repo?

[kctdfh]

Absolutely!

Here's the repo.
I solved it by commenting out some of the CSS @imports in the pre-compiled-styles.css that were there for backwards compatibility and it works now. When I remove those comments, the source CSS (i.e. every class, no purge) won't even finish compiling.

Thanks for making the time!

[simonswiss]

Hey!

So, I managed to run the purged command with all the CSS imports enabled (I uncommented them all) - it ran in ~20 seconds:

The purged styles end up at 464kb, while the unpurged file is a whopping 11.22MB 😅

Here's the catch - the full file is not much smaller if I remove everything else than the 3 @tailwind directives. In other words, you are generating a lot of utility classes.

The main culprit here is the number of values you have in the spacing scale. These generate utilities for margin, padding, height, width, translate and a lot of different use cases.

Even if these get purged, they are all generated for dev time and I would look into removing a bunch of them, unless you really use all these granular increments for spacing.

Hope it helps!

[kctdfh]

Thank you so much for putting the time!

Size aside, it seems to be my hardware then. I suspected that but it seems strange to go from 40 seconds to over a dozen minutes after adding around 100 lines of CSS. Seems like the straw that finally broke the camel's back, I guess!

Now the spacing decision. The component system is 150+ elements or so and at first I found myself adding to the config constantly. I actually use maybe 10 of those spacing values on 80+ percent of the cases but was getting bored of adding to the list in the beginning and thought what'd be the harm in making an overly permissive spacing scale just in case.

I think the harm has been identified 🙃 Now that I'm a day away from finishing the project, I may go in and slim down that list based on the purged file.

Though it'd be cool to not have to recompile the utility classes that don't change. Maybe instead of adding @tailwind/utilities we could have @tailwind/utilities/spacing that compiles only if that part of the config changes from build to build. On Twitter there's been murmurs of something official like that in the works and honestly can't wait to try it.

[simonswiss]

Yes, stay tuned because something pretty exciting is brewing right now: https://twitter.com/adamwathan/status/1366509825186795524 🎉