What string should I ignore on UnCSS plugin to make the responsive menu of Foundation 6 works?

Question

I installed Foundation 6 with NPM, started a new project with foundation new command and started building a new website. But when I build it on production with the command foundation build --production, the .top-bar class is always collapsed even with large monitors (note the data-hide-for="medium"). When I run it on the development mode with the foundation watch command, it works just fine (collapse only on medium and small devices).

I thought it could be a problem with some tasks of the gulp and I decided to test one by one. When I modified the uncss to run only in development mode (changing the isProduction var to false boolean value), it works! So, I decided to read their documentation and there I found the "ignore" setting. I can set some selectors in it and that's my question. What selector I have to ignore to make the collapse works well? I think the UnCSS is removing some selector that it's thinking the *.html file is not using, but it is and I could not identify which selector is it.

Note: the uncss task only run on production mode.

index.html

<div class="title-bar" data-responsive-toggle="top-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="top-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
            <li class="has-submenu">
                <a href="#">One</a>
                <ul class="submenu menu vertical" data-submenu>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li>
                <input type="text" placeholder="Login">
            </li>
            <li>
                <input type="password" placeholder="Password">
            </li>
            <li>
                <button type="button" class="button">Login</button>
            </li>
        </ul>
    </div>
</div>

gulpfile.js (It's the default of the Foundation for sites complete template, so I'll put only the CSS compilation part)

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
  var uncss = $.if(isProduction, $.uncss({
    html: ['src/**/*.html'],
    ignore: [
      new RegExp('^meta\..*'),
      new RegExp('^\.is-.*')
    ]
  }));

  var minifycss = $.if(isProduction, $.minifyCss());

  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    .pipe(uncss)
    .pipe(minifycss)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(browser.reload({stream: true}));
});

The whole CSS is untouched, I didn't modify anything, even the paths are defaults (but I added some rules, like font-faces and some colors), I just erased the default index.html of the Foundation 6 and added this menu (that's on their docs).

To help you, I uploaded the whole project on MEGA, just extract it and run foundation watch, see the .top-bar working fine (with the menu and the login form), and then run foundation build --production and run the index.html from the dist folder to see the .top-bar collapsed.

.top-bar on production:

.top-bar on development (working):

Maybe this discussion is helpful: https://github.com/giakki/uncss/issues/139 I had a similar problem and just experimented with various ignore case and then it worked. — crisscross, Jan 17 '16 at 17:29
Unfortunatelly, this discussion didn't help. I tried the brettdewoody array and the result was the same... — Edie Johnny, Jan 18 '16 at 20:35

score 1 · Accepted Answer · answered Feb 26 '16 at 15:50

I had a similar issue and fixed with the following gulp-uncss setup:

   .pipe(uncss({
      html: ['./*.html'],
      ignore: [new RegExp('^meta\..*'),
        new RegExp('.*\.is-.*'),
        new RegExp('.*\.top-bar.*'),
        new RegExp('.*\.menu.*')]
    }))

score 0 · Answer 2 · answered Sep 16 '16 at 15:46

Add foundation-mq class to your ignore list. Only the regular expression worked for me: /foundation\-mq/.

In _global.scss

// These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
.foundation-mq {
  font-family: '#{-zf-bp-serialize($breakpoints)}';
}

What string should I ignore on UnCSS plugin to make the responsive menu of Foundation 6 works?

2 Answers2