the purge.transform API works only if the file extension (given in the keys of the object) has the period character

[paulovieira]

What version of Tailwind CSS are you using?
2.2.19

What build tool (or framework if it abstracts the build tool) are you using?
None. I'm using tailwind CLI directly.

What version of Node.js are you using?
12.22.6

What browser are you using?
Doesn't matter for this issue.

What operating system are you using?
Doesn't matter for this issue.

Reproduction URL
Sorry but, as far as I know, it's impossible to reproduce this problem in Tailwind Play.

Describe your issue

The purge.transform API was added in #4469. The documentation shows an example where the user should give the file extension without the period, like this:

// tailwind.config.js
let remark = require('remark')

module.exports = {
  purge: {
    content: ['./src/**/*.{html,md}'],
    transform: {
      md: (content) => remark().process(content)
    }
  }
}

But this doesn't actually work! To have it working we must prepend the period character to the extension, like this:

// tailwind.config.js
let remark = require('remark')

module.exports = {
  purge: {
    content: ['./src/**/*.{html,md}'],
    transform: {
      '.md': (content) => remark().process(content)
    }
  }
}

After investigating a bit I found that the file extension is retrieved with a call to path.extname. This method "returns the extension of the path, from the last occurrence of the . (period) character to end of string", and it looks like tailwind doesn't remove the period in any other place.

The tests don't catch this problem because the file extension is hardcoded in the respective test.

This bug can be solved with a bit of string processing in getTransformer: https://github.com/tailwindlabs/tailwindcss/blob/master/src/lib/expandTailwindAtRules.js#L51-L60

[adamwathan]

This is surprising to me because we used this API ourselves in our blog and it works as expected 🤔

https://github.com/tailwindlabs/blog.tailwindcss.com/blob/master/tailwind.config.js#L10

I've updated the tests to use real files instead of hard-coding the extension and everything is passing:

9749e34

Any chance you can create a reproduction project or a failing test?

[paulovieira]

I've created a minimal reproduction setup here: https://github.com/paulovieira/tailwindcss-issue-6266

You should be able to verify it in 1 minute.

After a bit of trial and error I verified that the error happens only in JIT mode (in "legacy" mode it works as described in the docs). But this is also confusing because the example you gave (for the blog) is actually using JIT mode...

[adamwathan]

Alright so just tested and it's broken like you mentioned in 2.2.19, but on master (v3) it is working, so this has already been fixed somewhere in the codebase 👍🏻

For JIT stuff we don't backport fixes to v2, instead people are just encouraged to move to the v3 pre-release. v3 stable will be out in like 3-4 days so it's in a good spot 👍🏻

[paulovieira]

Great, thanks for taking the time to see this.

Since this is a good time for breaking changes, I'd like to make a related suggestion: Rename purge.transform to purge.preprocess. More details here: #6268

This issue can be closed now I guess.