CSS files are not processed after the whole site is built

[antoinevth]

Hi !

Thank you for this plugin ! I was trying to use it with PurgeCSS. However, PurgeCSS requires the whole site (especially HTML files) to be built before modifying the CSS files. Which is not the case, actually. In fact, in my case I have to build my website a first time to get all the HTML files generated, and then a second time to get correct CSS files based on the generated HTML files.

I've tried to modify the hook in lib/jekyll-postcss-v2/hook.rb :

Jekyll::Hooks.register :site, :post_write do |site|
 site.pages do |page|
    if %r!\.css$! =~ page.url
      engine = PostCssV2::Engine.new(page.site.source)
      engine.process(page)
    end
  end
end

However, in this case, site.pages does not list generated CSS files, but only source SCSS files.

Do you have any lead to solve my issue ?

[bglw]

👋 Hi @antoinevth

Sorry for the delay, this slipped my radar. Have you had any further luck on this?

I do recall using this with PurgeCSS in the past with success, and I don't see conceptually why it wouldn't work — PostCSS here is running after the entire site has been built to disk.

Let me know and I can have a little bit of a further look.

[bglw]

Sorry, accidental close

[antoinevth]

Hi @bglw ! Thanks for your reply. Sorry for the delay.

I do still have this issue. In fact, when I build my site for the first time, my css file is around 11kB and PurgeCSS has removed too many things. When I build it a second time I get a css file of 24kB.

My workaround actually is to build the site two times.

[woodcox]

I have had similar issues where too much css is removed but only when I use jekyll-postcss-v2 in conjunction with the gem jekyll-remote-theme. If I remove the Jekyll-remote-theme purgecss does run last and removes unused css correctly. But when I use Jekyll-remote-theme the purgecss does not run last and removes far too much css. Are you using remote themes? Or could another gem be affecting things?

[antoinevth]

I'm not using remote themes and the only other gem I'm using is jekyll_picture_tag. However, I'm using scss and imports, maybe it's related...

[leppert]

In my case, this issue arose from pointing a postcss plugin (in my case tailwindcss) to the jekyll source files rather than the built _site files. Configuring the plugin to process against the _site files fixed the issue.

[dsillman2000]

Hi, Just notifying here that I too was experiencing issues using TailwindCSS with Jekyll using the jekyll-postcss-v2 plugin but figured out a way to fix it.

My experience Some custom TailwindCSS classes were not being compiled to the _site CSS files, until I run jekyll build a second time (at which point the missing CSS classes get included). So whenever deploying to GitHub pages / CloudFlare pages I needed to run jekyll build twice, but it felt like a weird workaround.

Unlike @leppert, my tailwind.config.js file does point to HTML files in the _site directory, so that wasn't my issue.

My solution Looking at the Tailwind CSS docs, they recommend that your custom CSS classes be defined outside of a @layer directive. This was my mistake - after moving the custom CSS classes outside of a @layer directive, they were compiled into the _site directory on the first build. Hope this helps someone!