nuxt-bulma-slim icon indicating copy to clipboard operation
nuxt-bulma-slim copied to clipboard

Published 20 hours ago • verified publisher icon mustardamus

Support HTML Preprocessors by using a custom PurgeCSS Extractor

Open andrevandal opened this issue 6 years ago • 2 comments

Hi,

I'm using nuxt-bulma-slim with Buefy and there're some components without style when combined with v-if.

b-notification(type='is-success' v-if="sended" has-icon)
    | Mensagem enviada com sucesso! Dentro de 48h úteis responderemos você 🤗
b-notification(type='is-danger' v-if="error" has-icon)
    | Vixi, aconteceu algum problema! 😵 Procure-nos no 
    a(href="https://fb.com/idepead") Facebook
    |  enquanto isso 😅

Screenshot on production.

Could anyone help me?

andrevandal avatar Mar 19 '18 07:03 andrevandal

That's mainly because PurgeCSS can not handle HTML preprocessors out of the box. It would need a custom extractor (https://www.purgecss.com/extractors.html) that compiles Pug (& others) to HTML first.

I'll tackle this in the future, when I have time. Or if anyone wants to give a hand, I think this is the way to go:

  • Write a custom extractor for *.vue files
  • Use https://www.npmjs.com/package/vue-template-compiler to compile the template to HTML
  • Use https://www.npmjs.com/package/purge-from-html to extract the CSS selectors
  • Win

mustardamus avatar Mar 23 '18 10:03 mustardamus

Hey, @mustardamus I'm interested in helping with contributing to this. Can I take this on?

codebender828 avatar Jul 23 '19 05:07 codebender828