Purging issues

[dominikmayer]

Hi,

I ran into purging issues when publishing to Netlify.

I'll try to create a PR.

[dirkolbrich]

Please describe you purging issues reproducible.

What did you expect? What commands and setup didi you use. What did you get? Please share your config setting, for the package as well as for Netlify.

[dominikmayer]

I am using a TailwindUI component that needs TailwindCSS Forms. Everything is fine in dev mode but in production the base classes that the form relies upon, get purged. If I exclude the base classes from purging then everything works.

tailwind.config.json

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ]
}

config.yaml

…
build:
  writeStats: true
…

netlify.toml

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.79.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.79.0"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.79.0"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.79.0"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

postcss.config.js unchanged.

[dirkolbrich]

OK, thanks. I try to test with @tailwindcss/forms integrated.

[dirkolbrich]

I think I found the reason for this bug. I could reproduce the problem by adding a simple form site, see the verify-issue30 branch.

This package uses the hugo_stats.json file to look for used classes on build time. Unfortunately, the writeStats option within Hugo parses the generated HTML for tags, classes and id's only. But not for HTML input types, e.g. if you have an input <input type="text">, it will list the tag input but not the type type="text".

The @tailwind/forms package on the other side uses the css selector [type='text'] to reset the base styles of the input elements. As the selector [type='text'] is not listed in the hugo_stats.json file, these base styles will get purged.

The only solution I can think of is to add searching for HTML input types to the Hugo HTML parser and add these to the hugo_stats.json file. For the time being, your work around by adding the /* purgecss start ignore */ clause should fix it.

I will start a discussion about this at the Hugo forum. Maybe someone can add this to the Hugo repo.

[dirkolbrich]

see https://github.com/gohugoio/hugo/issues/7560

[dominikmayer]

Great. Thanks for all the research. Let me know if there is anything I can do to help.