webpack-contrib / purifycss-webpack

UNMAINTAINED, use https://github.com/FullHuman/purgecss-webpack-plugin
MIT License
772 stars 37 forks source link

custom templates? #48

Closed beckend closed 7 years ago

beckend commented 8 years ago

Like .jade?

IngwiePhoenix commented 8 years ago

If it would usually work with plain PurifyCSS - it'll work here too. For instance, PurifyCSS recognizes constraints like class="foo" or className="foo" and some other. So if you really want to make sure your jade templates work, try to convert them to html using html-loader. Just an idea, not guaranteed - I don't use Jade myself. I have used EJS, but I switched to JSX - and that works just fine.

beckend commented 8 years ago

Usually they look like:

p#elementIdName.classOne.classTwo my text here

Sometimes the classnames are dynamic variables, it would work just fine if this plugin can target emitted files, then the jade have been converted to html files. And it would mean any templates frameworks in webpack would have been converted.

IngwiePhoenix commented 8 years ago

The plugin scans over the files to be emitted and uses the captured ones as input to PurifyCSS. You could play around with providing it with extensions to use to pick up. Because with the jade format itself, PurifyCSS likely won’t work as it wouldn’t know where the CSS names start or end (class names, ids, other specifiers that are valid constraints to create selectors, etc…). So it’ll likely use the finalized HTML.

beckend commented 8 years ago

That's interesting, so if emitted files with paths:

index.html
subfolder/test.html

Can it be scanned with this config?

new PurifyCSSPlugin({
  paths: [
     'index.html',
     'subfolder/test.html'
  ]
})

Or maybe **/*.html? I wouldn't want the plugin to scan the whole node_modules tree.

bebraw commented 7 years ago

@beckend I'm working on a new version that should achieve just that (now path management is on the user side) although the current stable version might work too.