search

dylanirlbeck / tailwind-ppx

A Reason/OCaml Pre-Processor eXtension (PPX) that validates your Tailwind classes at compile-time.
MIT License
152 stars 15 forks source link

Add extractor function #45

Closed zth closed 4 years ago

zth commented 4 years ago

Fixes #41

As a continuation of the discussions in https://github.com/dylanirlbeck/tailwind-ppx/issues/4, here's an example of how an extractor function for use with Purgecss could be added to this package.

Unsure if I put the code + tests at reasonable places. Also unsure whether the additions I did to the release step are enough, so maybe consider this a draft more than anything ;)

zth commented 4 years ago

Hey @dylanirlbeck !

1: Re must use tailwind-ppx, then yes, using the extractor from this PR would work the way you describe. But it's all opt in, so if that's not suitable for the user they can just write their own extractor to account for what they need locally for their project.

2: No, that's a separate thing that's unrelated to this.

3: I haven't been able to test this the way I'd like yet. Specifically, I don't know how to produce the full release package for testing this end-to-end. Maybe you know a way for me to do that? Basically produce the .tgz that would get released.

dylanirlbeck commented 4 years ago

Gotcha, thanks for those answers. Could you try just using a tar file from the releases page: https://github.com/dylanirlbeck/tailwind-ppx/releases? If not, looking at how the CI generates the release tar files could provide some insight: https://github.com/dylanirlbeck/tailwind-ppx/blob/ed952420f45f45575c3722b0ae26302a763e3374/.github/workflows/release.yml#L48.

If it's too much of a burden, I'm okay with merging this in since the code looks sound. Once we deploy to NPM and pull it down we'll know if this really works.

zth commented 4 years ago

Oh no, I'll definitely test it fully before merge, no worries. Let me get back to you as soon as I can.

zth commented 4 years ago

Ok, after some hassle (😅 ) I've managed to test this locally, and it seems to be working. Here's a rundown of what I tested:

One of my files has this: image And that's the only place I use the PPX.

My postcss.config.js has this: image

And running this through the postcss-cli to produce an optimized CSS file, results in: image Notice those are the only 3 classes that remains, the rest of the Tailwind classes not used via the extension node won't be accounted for in this example. This file is minified by default but I've formatted it so the output can be made sense of here. The code above is from the CSS reset and other "standard" CSS that Tailwind ships regardless of classes you may or may not use.

So all and all this feels like it's working as intended! What do you think?

dylanirlbeck commented 4 years ago

Nice!! That test makes perfect sense.