Bug with minify system. Screws up background:inherit!

First of all I should mention I’m not an experienced Sager, but I learn as I do, so my position is learning Sage and getting under its skin to see how stuff works.

The problem is that minify (?) renders a CSS file with errors, which of course screws up the mobile menu I’m working on (jQuery.mmenu).

The problem:

.mm-menu > .mm-panel {
  background: inherit;
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0 20px; }

Translates (after running gulp) to this code:

 background: inherit inherit/inherit inherit inherit inherit; 
overflow: scroll; 
overflow-x: hidden; 
overflow-y: auto; 
box-sizing: border-box; 
padding: 0 20px;

This is a copy from Chrome’s debugger, but in Firebug the background:inherit style isn’t even rendered or shown. However, when I view the minified CSS-file, I can’t even find the phrase “.mm-menu>.mm-panel”.

Any ideas to how I should move about regarding this issue? If I’ve understood everything correct I can vendor CSS-files in manifest.json so that they remain untouched. Tried it, but without luck.

Snippets from assets.php and manifest.json:

wp_enqueue_style('jquery.mmenu.all', asset_path('styles/jquery.mmenu.all.css'), false, null);
wp_enqueue_style('jquery.mmenu.pageshadow', asset_path('styles/jquery.mmenu.pageshadow.css'), false, null);
wp_enqueue_style('jquery.mmenu.fullscreen', asset_path('styles/jquery.mmenu.fullscreen.css'), false, null);
wp_enqueue_script('jquery.mmenu.min.all', asset_path('scripts/jquery.mmenu.min.all.js'), [], null, true);
wp_enqueue_script('jquery.mmenu.oncanvas.min', asset_path('scripts/jquery.mmenu.oncanvas.min.js'), [], null, true);

},
"jquery.mmenu.min.all.js": {
"vendor": ["assets/scripts/jquery.mmenu.min.all.js"]
},
"jquery.mmenu.oncanvas.min.js": {
"vendor": ["assets/scripts/jquery.mmenu.oncanvas.min.js"]
},

},
"jquery.mmenu.fullscreen.css": {
"files": [
"styles/jquery.mmenu.fullscreen.css"
]
},
"jquery.mmenu.pageshadow.css": {
"files": [
"styles/jquery.mmenu.pageshadow.css"
]
},
"normalize.css": {
"files": [
"styles/normalize.css"
]
},

Any ideas? Ripping my hair of on this one :stuck_out_tongue:

Cheers!

Update:
Found someone else with the same bug: https://github.com/jakubpawlowicz/clean-css/issues/563
Very strange there are such few others reporting this (based on Google searches).

After changing:

.mm-menu > .mm-panel {
  background: inherit;

To:

.mm-menu > .mm-panel {
  background-color: inherit;

This now works. However, I really don’t like to “hack” the source codes, so you got any other ideas? What’s good practice, report to mmenu’s author?

By the way. mmenu has been installed via bower, but the bug still persist.

Looks like we just need to bump the version of gulp-minify-css (to get the new cleancss version). Can you open an issue on the Sage repo about this?

What version of the CSS minifier are you running?

@swalkinshaw , @austin
Thanks.
gulp-minify-css is running 1.1.0. I observe that 1.1.6 is released, but haven’t tried to update. Worried something will fuck up. You think it’s safe to do a npm install gulp-minify-css?

@swalkinshaw
Issue made on Github.

1 Like

Thanks! Going to lock this thread since it will be taken care of on GitHub.

Yeah npm install gulp-minify-css@latest --save-dev or npm update