Set custom CSS class prefix for gulp-modernizr
I’ve been trying to figure out how to set the custom CSS class prefix to the Modernizr output using gulp-modernizr (aka Customizr) and it’s quite annoying how undocumented the feature is!
I get a lot of CSS class conflicts using the bog-standard Modernizr CSS classes appended to the html element (.emoji on a WordPress site is probably the biggest one) so being able to change the CSS class prefix is a quick and efficient workaround to enable the CSS class detection method for adapting sites to use CSS-based workarounds for certain features.
After some digging I found the classPrefix option and set it accordingly. Viola! Seems the documentation for Customizr configuration is missing the classPrefix entry, but I see a pull request on the github is still pending from November 2015 with it being added to the README, so there ya go.
Here's my gulp-modernizr task in all its glory:
// Modernizr gulp.task( 'modernizr', function () { return gulp.src( ['./css/**/*.css', './js/**/*.js', './js/lib/**/*.js', // Don't reference dev files '!./js/**/*.dev.js', // Don't reference itself (or minified self) '!./js/lib/modernizr/modernizr.js', '!./js/lib/modernizr/modernizr.min.js'] ) .pipe( modernizr({ classPrefix: 'has-', options: ['setClasses', 'addTest', 'html5printshiv', 'testProp', 'fnBind'] }) ) .pipe( gulp.dest('./js/lib/modernizr') ); });
There's a gotcha: Modernizr's customizr repo hasn't been updated in a while and lacks the classPrefix thingamajig.
To get it working you need to install the modernizr/customizr with the develop branch selected as a dev dependency in your package.json:
$ npm i --save-dev modernizr/customizr#develop