Category: regex

Screenshot of some Tailwind colors

Tell purgeCSS to ignore purging all Tailwind colours

   

For my photography site where I sell prints (https://fortunavista.com), I have been working on building out the eCommerce portion of it and found myself in a very precarious position: I needed the ability to store references to Tailwind colors in the database and then dynamically load them on the page at render time. This is a problem (as the Tailwind docs will tell you) because purgeCSS needs to see the classes you’re using in the raw PHP or HTML to determine whether it should purge them from it’s compiled CSS file. So, how can we tell purgeCSS to ignore purging all Tailwind colours?

Well, thankfully the purgeCSS developers foresaw a similar situation and so they added the safelist option which you can pass in as a regular expression to tell purgeCSS to leave them alone.

In your tailwind.config.js file, just update your purge block with:

purge: {
    content: [
        ...
    ],
    options: {
        safelist: [/(from|via|to|border|bg|text)-(.*)-(\\d{1}0{1,2})/]
    }
},

The only thing you will need to keep in mind is that this will necessarily increase the size of your CSS file, and likely by a lot. This may be acceptable for you or it may not be. If you’re not using gradients, you can remove the from|via|to| part so that those get purged. But if you can handle the size increase, just tell purgeCSS to ignore purging all Tailwind colours.

CHANGELOG

Feb 18, 2021 – Updated regex with simplified e-mailed suggestion from Joseph

Find old-style interpolations in your Terraform code

 

I just recently started a new job and the codebase that I inherited is…not great. One of the main problems is that it was written for Terraform 0.11 and was never fully upgraded to 0.12 and the goodies that HCL2 and 0.13 brought with them. Of course this means that I needed to find all of the old-style interpolations in our Terraform code base and replace them with the new format. Luckily with VS Code and a little regex, this is a super easy task. This regex is PCRE so you can also use it with sed/awk too if you prefer the command line.

  1. Open the Find and Replace panel
  2. Next to the Find box, click the box that looks like: .*
  3. Search for: "\${([a-zA-Z0-9_.]+)}" (you can visit https://regex101.com/r/K8E5xc/2 for an explanation of how it works along with some examples)
  4. In the Replace box, enter: $1
  5. Now when you actually run the search and replace, it’ll pull the interpolated data out of the old-style interpolation by removing the opening "${ and closing }"

Hopefully this helps some of you who might not be as comfortable with regex clean up your code base and find those old-style interpolations in your Terraform code, since I believe 0.14 will start throwing actual errors and not just warnings on these issues.