purifycss-webpack
purifycss-webpack copied to clipboard
Handlebars Compatibility
Not sure if this is the right place to file this issue, perhaps the main purifycss repository is more appropriate, but anyway. I'm trying to use this plugin together with some Handlebars templates, like so:
new PurifyCSSPlugin({
basePath: __dirname,
resolveExtensions: ['.hbs'],
paths: ['resources/assets/views/*.hbs'],
purifyOptions: {
rejected: true
}
})
...
<body>
<main class="wrapper">
<nav class="navigation" id="main-navigation">
</nav>
...
But no luck. All css rules are removed (e.g. .wrapper, .navigation) and I end up with an empty file. Does this plugin only work for HTML files?
Can you try against vanilla purify so we can rule out a plugin specific issue?
I kinda ditched handlebars for an all React solution by now, so I am not really concerned about this issue anymore. Maybe I should close it then? Or perhaps someone else is willing to take this up.
Yeah, let's close. Thanks. 👍
almost the same issue here... my css all remains... seems nothing happens
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'assets/views/index.handlebars'
}),
new ExtractTextPlugin({
filename: 'css/bundle.[contenthash].css',
allChunks: true
}),
new PurifyCSSPlugin({
moduleExtensions: ['.handlebars'],
paths: [
glob.sync(path.join(context, 'assets/views/**/*.handlebars'))
],
verbose: true,
purifyOptions: {
rejected: true
}
})
and somewhere else in a .scss file
....
.iShouldBeRemovedAsNoOneIsUsingMe {color: black}
after compilaiton.. the output file bundle.dc0832b85be1c37669971edfa8db533e.css
...
.iShouldBeRemovedAsNoOneIsUsingMe{color:#000}
Can you see anything in the verbose output?
@bebraw yes .. i see these
.....
89% additional chunk assets processing
1ms additional chunk assets processing
90% recordingAssets to purify:
Assets to purify:
Assets to purify:
Assets to purify:
Assets to purify:
4ms recording
91% additional asset processing
.....
at first i thought maybe my paths were empty or something but logging it outputs the right array of files
console.log(glob.sync(path.join(context, 'assets/views/**/*.handlebars')))
->
[ '/Users/milewski/Documents/Code/projectX/source/assets/views/index.handlebars',
'/Users/milewski/Documents/Code/projectX/source/assets/views/partials/facebook.handlebars',
'/Users/milewski/Documents/Code/projectX/source/assets/views/partials/footer.handlebars',
'/Users/milewski/Documents/Code/projectX/source/assets/views/partials/google.handlebars',
'/Users/milewski/Documents/Code/projectX/source/assets/views/partials/head.handlebars' ]
Ok, that print comes from https://github.com/webpack-contrib/purifycss-webpack/blob/master/src/index.js#L41 . You could dig into the query above to understand why the results are empty. Maybe there are no css files to look up against? Esp. investigating compilation.assets
might reveal a lot.
@bebraw the reason why it is failing to match any files is:
here if i console.log(asset.name, chunkName)
i get
js/bundle.218ce7d00e9ec0cea3f51c8cb985f1a3.css js/main
css/bundle.d39efdc6120e1c5e1b3e09c041f49c48.css js/main
css/bundle.d59f8dc7083d5cec294a24c3afd7ca54.css js/main
so that filter function can never match any file asset.name.indexOf(chunkName) >= 0
, because i am used a fixed name.. bundle instead of [name]..
however switching the names to allow it to match something
new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css',
allChunks: true
})
i will finally get:
Assets to purify: js/main.218ce7d00e9ec0cea3f51c8cb985f1a3.css
Assets to purify: css/main.d39efdc6120e1c5e1b3e09c041f49c48.css
Assets to purify: css/main.d59f8dc7083d5cec294a24c3afd7ca54.css
however i get a crash together with it.... and webpack exits..
...
/Users/milewski/Documents/Code/projectX/node_modules/minimatch/minimatch.js:116
throw new TypeError('glob pattern string required')
^
TypeError: glob pattern string required
...
Ok. There's likely some logic missing.
I'll try to look into this once I have some time (might be weeks).
thats alright.. meanwhile i did find the reason of the crash.. here is returning me an array of array of files...
so by doing this fixed the issue and everything is working fine now
compilation.assets[name] = new ConcatSource(
purify(
...filesToSearch, <-- here ...
asset.source(),
{
info: options.verbose,
minify: options.minimize,
...options.purifyOptions
}
)
)
Ok, if you can PR a fix that would be great. Most likely the search algo needs a little tweak. It needs a test too (logic is fully covered by tests).
@Milewski Any chance for a little project to study? I have hard time figuring out the problem to fix and I can't get the fix done without.
@bebraw while i was making a sample i found that the issue i raised of https://github.com/webpack-contrib/purifycss-webpack/issues/57#issuecomment-278246155 was actually my mistake i was sending an array of array instead of just an array
paths: [glob.sync(path.join(context, 'assets/views/*.handlebars'))]
should be
paths: glob.sync(path.join(context, 'assets/views/*.handlebars'))
however the main problem is when i set my filename to a fixed name instead of using [name]
Works
new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css',
})
Doesn't work
new ExtractTextPlugin({
filename: 'css/bundle.[contenthash].css',
})
here is a sample
https://gist.github.com/Milewski/077df081ad03a1e7884316b2863c6d17
@Milewski Cool. Thanks. The current code might capture the first case. An array of array should trip at validation (good extra test to add, though). The latter is more puzzling.
About output.filename
, [ext]
doesn't work there (by design?). This could be a webpack bug, though. I think the assumption is that it's going to be .js
always so that might explain the current state.
@bebraw the[ext]
doesn't work even when the entries are just .js
, I had reported it as a webpack bug https://github.com/webpack/webpack/issues/4276 on the main repo but looks like a bot comes closing all the issues that wasn't following the default issue template...
@Milewski Thanks for bringing that up. Re-opened.