We've moved discussions to Discord

Join Discord

Haml breaks purgecss. How to fix?

Rob Jonson •
I just switched to haml. I love it.
However - in production, any class that is only used in a haml file is stripped out.

I have tried updating postcss.config.js using the following:

#from
#https://rubyyagi.com/tailwind-css-on-rails-6-intro/

let environment = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

// Only run PurgeCSS in production envrionment, you can also add other environment here
if (process.env.RAILS_ENV === "production") {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/*.html.erb',
        './app/**/*.html.haml',
        './app/helpers/**/*.rb',
        './app/javascript/**/*.js',
        './app/javascript/**/*.vue',
        './app/javascript/**/*.jsx',
      ],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}

module.exports = environment

Unfortunately this doesn't work. I can't even figure out how to disable postcss completely (though obviously I'd rather fix it)

Can anyone help?

thank you
Chris Oliver •
We only use the TailwindCSS purge functionality: https://tailwindcss.com/docs/optimizing-for-production

app/javascript/stylesheets/tailwind.config.js
  // Purge unused TailwindCSS styles
  purge: {
    enabled: ["production", "staging"].includes(process.env.NODE_ENV),
    content: [
      './**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },

You should try configuring that instead of using purgecss directly. 👍
Rob Jonson •
thanks.
now working with:

app/javascript/stylesheets/tailwind.config.js
  // Purge unused TailwindCSS styles
  purge: {
    enabled: ["production", "staging"].includes(process.env.NODE_ENV),
    content: [
      './**/*.html.erb',
      './**/*.html.haml',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },
JPW •
Very helpful, thanks for posting this Rob Jonson . I just really don't understand how folks have the patience to type - and then debug - all those closing brackets, handling that kind of repetitive typing is kind of what computers are for IMO ;) Although I suppose some IDEs and editors facilitate that. I just think HAML's indentation makes for bullet-proof and  obvious-at-a-glance nesting.
JPW •
A suggestion for anyone doing this, omit the .html. portion of the HAML url, they are superfluous (all you care about is the .haml extension). And if you have any partials without the .html. in the name for example "_mything.haml" it will work fine in Rails, but will not match .html.haml so if you use any unique tailwind style inside the partial that TW style will not be pushed to production.

So do this:

// Purge unused TailwindCSS styles
  purge: {
    enabled: ["production", "staging"].includes(process.env.NODE_ENV),
    content: [
      './**/*.erb',
      './**/*.haml',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },
My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.