search

webpack-contrib / purifycss-webpack

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

Handlebars Compatibility #57

Open michaeldzjap opened 7 years ago

michaeldzjap commented 7 years ago

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?

bebraw commented 7 years ago

Can you try against vanilla purify so we can rule out a plugin specific issue?

michaeldzjap commented 7 years ago

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.

bebraw commented 7 years ago

Yeah, let's close. Thanks. 👍

milewski commented 7 years ago

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}
bebraw commented 7 years ago

Can you see anything in the verbose output?

milewski commented 7 years ago

@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' ]
bebraw commented 7 years ago

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.

milewski commented 7 years ago

@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
...
bebraw commented 7 years ago

Ok. There's likely some logic missing.

I'll try to look into this once I have some time (might be weeks).

milewski commented 7 years ago

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
        }
    )
)
bebraw commented 7 years ago

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).

bebraw commented 7 years ago

@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.

milewski commented 7 years ago

@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

bebraw commented 7 years ago

@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.

milewski commented 7 years ago

@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...

bebraw commented 7 years ago

@Milewski Thanks for bringing that up. Re-opened.