[JIT] Add support for "raw" purge content

[cossssmin]

What version of Tailwind CSS are you using?

v2.1.1

What build tool (or framework if it abstracts the build tool) are you using?

Maizzle v3.3.1

What version of Node.js are you using?

v14.15.1

What browser are you using?

Chrome

What operating system are you using?

Windows 10

Reproduction repository

https://github.com/maizzle/maizzle

Describe your issue

Configuring the purge option in your build chain instead of tailwind.config.js results in:

TypeError: expected path to be a string

Sounds like it expects it to be in the tailwind.config.js file.

What I'm doing is definining a base config in the file where I compile Tailwind, like this:

const coreConfig = {
  purge: {
    enabled: true,
    content: [
      'src/**/*.*',
    ],
  },
}

I then merge that with the config read from my tailwind.config.js and use it to compile Tailwind with PostCSS:

// merge() is from lodash
// `tailwindConfigObject` is the contents of `tailwind.config.js`

return postcss([
  tailwindcss(merge(coreConfig, tailwindConfigObject)),
])
  .process(css, {from: undefined})
  .then(result => result.css)

The resulting config is correct, and it works fine without JIT.

When I add mode: 'jit' in tailwind.config.js, it throws the error. As soon as I also add purge: ['src/**/*.*'] in tailwind.config.js, JIT works as expected.

[cossssmin]

Just tried to use an object config right in tailwind.config.js for purge:

module.exports = {
  mode: 'jit',
  // purge: [
  //   'src/**/*.*',
  // ],
  purge: {
    enabled: true,
    content: [
      'src/**/*.*',
    ],
  },
}

... and the same error is thrown. I suppose object syntax just isn't supported yet here, that also being one of the reasons purgecss options like safelist aren't supported?

Apologies if this has been covered somewhere, I couldn't find any issue/docs about it except the safelist thing.

[bradlc]

I suppose object syntax just isn't supported yet here

Providing an object with a content property is supported, and your example should work fine. Is there any chance you could provide a minimal reproduction? I can't see a purge config anywhere in the maizzle repo. Thanks!

[cossssmin]

The purge config is in the framework repo - my bad!

https://github.com/maizzle/framework/blob/0dabece8b036739a0bdd8ed83c31cf8b452a3e1f/src/generators/tailwindcss.js#L22-L29

I just merge whatever you have in tailwind.config.js on top of that.

So just adding mode: 'jit' in tailwind.config.js, without including a purge key with simplified array syntax (thus relying on the object syntax defined in the framework linked above), will hang 🤔

[cossssmin]

Created a repo that reproduces the issue, I've added instructions in the readme:

https://github.com/maizzle/jit-object-config

[bradlc]

Thanks! It's because you are using "raw" content, which isn't currently supported by JIT mode. We will probably add support for this at some point for consistency with PurgeCSS, but for now that's why it isn't working, sorry about that!

[cossssmin]

Ah, OK. Yeah I need raw when rendering templates programmatically so that Tailwind can purge based on the HTML string that I want to compile, since there are no file paths in that context.

Feel free to close the issue if you prefer, and thanks for looking into it! :)