Support HTML Preprocessors by using a custom PurgeCSS Extractor

mustardamus / nuxt-bulma-slim

Nuxt.js module to automatically make a slim Bulma build of used features with Purgecss

https://www.npmjs.com/package/nuxt-bulma-slim

MIT License

46 stars 7 forks source link

Support HTML Preprocessors by using a custom PurgeCSS Extractor #4

Open andrevandal opened 6 years ago

andrevandal commented 6 years ago

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&nbsp;
    a(href="https://fb.com/idepead") Facebook
    | &nbsp;enquanto isso 😅

Screenshot on production.

Could anyone help me?

mustardamus commented 6 years ago

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

codebender828 commented 5 years ago

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