Add ability to specify "classPrefix" option

[mahnunchik]

Add ability to specify classPrefix option for crawler and builder.

[febLey]

+1 for this. I think this is a crucial feature

[mjdurham]

This is a problem with the customizr dependency

[celia-amador-bbc]

@doctyper The fix on customizr is now merged, could then the functionality be propagated to gulp-modernizr?
Thanks.

[mahnunchik]

Ping @doctyper

[celia-amador-bbc]

Thanks, I changed my previous message!

[stefee]

@doctyper This is actually still broken in customizr master but there is a fix in dev which isn't merged. Nothing has to change in this package for the fix to propagate other than updating customizr. Modernizr/customizr#20

[typeoneerror]

Quick fix until customizr team cuts a release:

npm install --save-dev modernizr/customizr#develop

[certainlyakey]

@typeoneerror with this quick fix, how does one enable gulp-modernizr to work with it instead of its own customizr? just installing seems obviously not enough.

[typeoneerror]

@certainlyakey that should install the develop branch locally so it should automatically use it. this line here should find whichever customizr version you have installed. https://github.com/doctyper/gulp-modernizr/blob/develop/index.js#L4

[certainlyakey]

@typeoneerror hmm it did not find it however. Maybe I should I reinstall gulp-modernizr so it could find the separate customizr package on installing...

[certainlyakey]

Seems like, if you specify the classPrefix option, when scanning your CSS, Modernizr doesn't account for classes with that prefix, but instead only accounts on default classes without it.

For example, when using js-supports- as a classPrefix value and utilising a selector such as .js-supports-flexbox in your CSS, Modernizr doesn't produce a build customised with support for flexbox. It does produces it though if it discovers this selector .flexbox.

[rejas]

hi @ALL
I added the latest customizr develop branch as a dependency in the develop branch of gulp-modernizr. So if you add it to your package like this:

"gulp-modernizr": "https://github.com/rejas/gulp-modernizr.git#develop",

you should be able to specify a class prefix like 'foo' for example and have it a class called 'fooflexbox' be recognized too. Please test it out and report any bugs of course.

[certainlyakey]

Thanks! I tested quickly and it works, at least in what concerns the HTML classes. However, if no class is found in CSS source, it leaves the prefix hanging in HTML classes — see the example.

[rejas]

Interesting. What config are you using gulp-modernizr with?

[certainlyakey]

Here's the gulpfile task:

_gulp.task('build:modernizr', ['build:css', 'bundlejs'], function() {
  var files_to_check = [
    config.dirs.dist + config.dirs.scripts + 'scripts.min.js',
    config.dirs.dist + 'main.css'
  ];

  return _gulp
    .src(files_to_check)
    .pipe(_modernizr('modernizr.js', {
      options: ['setClasses'],
      classPrefix: 'js-supports-'
    }))
    .pipe(_uglify())
    .pipe(_gulp.dest(config.dirs.tmp))
    .on('error', _gutil.log);
});

where _modernizr is the required plugin.

I also tried to remove uglify but this doesn't produce any change.

[rejas]

This will be fixed in the next release of (gulp-)modernizr.