-webkit prefix missing after css minification

[that1guy]

All my -webkit prefixes are getting stripped during the minification process. This causes all much of my application to behave badly on Safari & iOS device. I've spent a lot of time trying to resolve this one, but I'm stumped.

Here's an example of my raw SASS

.layout {
    @include position(absolute, $headerHeight null 0 null);

    overflow: hidden;

    background-color: $gray;

    @include fill-parent();
    @include row();

    //Offcanvas menu open
    &.offcanvasOpen
    {

        aside.offcanvas
        {
            transform: translateX(0%) translateZ(0);

            opacity: 1;
        }
        main
        {

            transform: translateX($offcanvasWidth);

            @include media($mobile) {
                transform: translateX(90%) translateZ(0);
            }
        }

        .menu-cover {
            opacity:1;
            display:block;
        }
    }

    &.offcanvasOpen.offcanvasPanelOpen {
        main
        {
            transform: translateX(100%) translateZ(0);
        }
    }


    .menu-cover {
        @include absoluteFull();
        z-index:9999999;
        opacity:0;
        display:none;
        cursor:pointer;
    }


}//END .offcanvasOpen

Here is the CSS that my compass SASS preprocessor produces

/* line 2656, ../../app/styles/main.scss */
.layout.offcanvasOpen aside.offcanvas {
  -webkit-transform: translateX(0%) translateZ(0);
          transform: translateX(0%) translateZ(0);
  opacity: 1;
}
/* line 2662, ../../app/styles/main.scss */
.layout.offcanvasOpen main {
  -webkit-transform: translateX(340px);
          transform: translateX(340px);
}
@media screen and (max-width: 480px) {
  /* line 2662, ../../app/styles/main.scss */
  .layout.offcanvasOpen main {
    -webkit-transform: translateX(90%) translateZ(0);
            transform: translateX(90%) translateZ(0);
  }
}
/* line 2672, ../../app/styles/main.scss */
.layout.offcanvasOpen .menu-cover {
  opacity: 1;
  display: block;
}
/* line 2679, ../../app/styles/main.scss */
.layout.offcanvasOpen.offcanvasPanelOpen main {
  -webkit-transform: translateX(100%) translateZ(0);
          transform: translateX(100%) translateZ(0);
}

Here is what I see in browsers css styles inspector before minification.. Looks great!

When I do a build for my staging environment using grunt, thus running cssmin, I notice that -webkit is stripped from all my css:

  grunt.registerTask('build-staging', [
    'clean:staging',
    'ngconstant:staging',
    'useminPrepareStaging',
    'concurrent:staging',
    'autoprefixer:staging',
    'concat:generated',
    'ngtemplates:staging',
    'ngAnnotate:staging',
    'copy:staging',
    'cdnify:staging',
    'cssmin:generated',
    'uglify:generated',
    'filerev:staging',
    'useminStaging',
    'htmlmin:staging'
  ]);

here's what I see in the browser's css styles inspector after minification...

How do I resolve this?

thanks!

[benjilegnard]

I came here with the same issue but with -moz- prefixes removed.
Setting aggressiveMerging to false in the options resolved it.

[jakubpawlowicz]

@jibhaine thanks for investigating it and helping @that1guy with a solution - it's a duplicate of #290 so I'll close this issue.

A side note - #290 is gonna be a focus (one of many) of the next clean-css version.

[that1guy]

@jibhaine @jakubpawlowicz this is not resolving my issue. I've passed in other cleanCSS params too to ensure they are getting passed in and I can confirm they are being passed in correctly.

useminPrepareStaging: {
      html: '<%= yeoman.app %>/index.html',
      options: {
        dest: '<%= yeoman.staging %>',
        flow: {
          html: {
            steps: {
              js: ['concat', 'uglifyjs'],
              css: ['cssmin']
            },
            post: {
              css: [{
                name: 'cssmin',
                createConfig: function (context, block) {
                  var generated = context.options.generated;
                  generated.options = {
                    aggressiveMerging: false, <--- Doesn't solve issue
                    shorthandCompacting: false, <---- can see this doing it's job
                    keepBreaks: true, <---- can see this doing it's job
                    keepSpecialComments: true <---- can see this doing it's job
                  };
                }
              }]
            }
          }
        }
      }
    },

[jakubpawlowicz]

So reopening it. Could you please share a bigger excerpt from your CSS file in the first place and make sure you run the latest clean-css with npm ls clean-css?

[that1guy]

Using clean-css version 3.3.6

Here is larger excerpt of main.css before minimization.

/* line 2010, ../../app/styles/main.scss */
header #new-search-button .button-inner .text {
  vertical-align: text-top;
  display: inline-block;
  color: white;
  font-size: 1em;
  font-weight: 400;
}
/* line 2018, ../../app/styles/main.scss */
header #new-search-button .button-inner:hover {
  background-color: #226993;
  cursor: pointer;
}
/* line 2024, ../../app/styles/main.scss */
header #new-search-button input#header-search-submit {
  display: none;
  width: 80px;
  background-color: #4b99bb;
  color: white;
  height: 32px;
  border: none;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  transition: background .3s ease-in-out;
  vertical-align: middle;
}
/* line 2039, ../../app/styles/main.scss */
header #new-search-button input#header-search-submit:hover {
  background-color: #226993;
}
/* line 2044, ../../app/styles/main.scss */
header #new-search-button .search-bar-container {
  display: inline-block;
  visiblity: hidden;
  width: 0px;
  height: 32px;
  overflow: hidden;
  float: left;
  transition: all .4s ease-in-out;
}
/* line 2055, ../../app/styles/main.scss */
header #new-search-button .search-bar-container .input-container {
  overflow: hidden;
  position: relative;
  display: inline-block;
  height: 32px;
  width: 100%;
}
/* line 2063, ../../app/styles/main.scss */
header #new-search-button .search-bar-container .input-container .icon {
  position: absolute;
  color: #4b99bb;
  top: 3px;
  left: 5px;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  font-size: 1.5em;
}
/* line 2074, ../../app/styles/main.scss */
header #new-search-button .search-bar-container input#header-search {
  height: 32px;
  padding-left: 40px;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  background-color: white;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border: none;
  color: #2b2b2b;
}
/* line 2096, ../../app/styles/main.scss */
header #new-search-button.active input#header-search-submit {
  display: inline-block;
}
/* line 2099, ../../app/styles/main.scss */
header #new-search-button.active .button-inner {
  display: none;
  visibility: hidden;
  opacity: 0;
}
/* line 2104, ../../app/styles/main.scss */
header #new-search-button.active .search-bar-container {
  display: inline-block;
  overflow: hidden;
  visiblity: visible;
  width: 350px;
}
/* line 2110, ../../app/styles/main.scss */
header #new-search-button.active .search-bar-container .icon {
  opacity: 1;
}
/* line 2118, ../../app/styles/main.scss */
header #new-search-button-mobile {
  font-size: 1.5em;
  color: #4b99bb !important;
  margin-right: 20px;
  float: right;
  margin-top: 6px;
}
/* line 2127, ../../app/styles/main.scss */
header #new-search-button-mobile:hover {
  color: #226993;
}
/* line 2134, ../../app/styles/main.scss */
header .explore-map-button {
  line-height: 22px;
  height: 32px;
  border: none;
  float: left;
  margin-top: 5px;
  padding-left: 12px;
  padding-right: 12px;
}
/* line 2144, ../../app/styles/main.scss */
header .explore-map-button .icon {
  margin-top: -1px;
  font-size: 1.625em;
  display: block;
  float: left;
  color: white !important;
}
/* line 2151, ../../app/styles/main.scss */
header .explore-map-button .text {
  display: block;
  float: left;
  vertical-align: text-top;
  color: white;
  font-size: 1em;
  padding-left: 5px;
  font-weight: 400;
}
@media screen and (min-width: 1025px) {
  /* line 2134, ../../app/styles/main.scss */
  header .explore-map-button {
    display: block;
  }
}
/* line 2169, ../../app/styles/main.scss */
header #explore-map-button-mobile {
  font-size: 1.5em;
  color: #669E39 !important;
  float: right;
  margin-right: 20px;
  margin-top: 6px;
}
/* line 2176, ../../app/styles/main.scss */
header #explore-map-button-mobile:hover {
  color: #35701E;
}
/* line 2183, ../../app/styles/main.scss */
header #new-search-button {
  display: none;
}
@media screen and (min-width: 1025px) {
  /* line 2183, ../../app/styles/main.scss */
  header #new-search-button {
    display: block;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* line 2183, ../../app/styles/main.scss */
  header #new-search-button {
    display: block;
  }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* line 2183, ../../app/styles/main.scss */
  header #new-search-button {
    display: block;
  }
}
/* line 2199, ../../app/styles/main.scss */
header #explore-map-button-desktop {
  display: none;
}
@media screen and (min-width: 1025px) {
  /* line 2199, ../../app/styles/main.scss */
  header #explore-map-button-desktop {
    display: block;
  }
}
/* line 2208, ../../app/styles/main.scss */
header #explore-map-button-tablet {
  display: none;
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* line 2208, ../../app/styles/main.scss */
  header #explore-map-button-tablet {
    display: block;
  }
}
/* line 2217, ../../app/styles/main.scss */
header #explore-map-button-tabletLG {
  display: none;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* line 2217, ../../app/styles/main.scss */
  header #explore-map-button-tabletLG {
    display: block;
  }
}
/* line 2228, ../../app/styles/main.scss */
header #new-search-button-mobile,
header #explore-map-button-mobile {
  display: block;
}
@media screen and (min-width: 1025px) {
  /* line 2228, ../../app/styles/main.scss */
  header #new-search-button-mobile,
  header #explore-map-button-mobile {
    display: none;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* line 2228, ../../app/styles/main.scss */
  header #new-search-button-mobile,
  header #explore-map-button-mobile {
    display: none;
  }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* line 2228, ../../app/styles/main.scss */
  header #new-search-button-mobile,
  header #explore-map-button-mobile {
    display: none;
  }
}
@media (max-width: 740px) {
  /* line 2244, ../../app/styles/main.scss */
  header #new-search-button,
  header #explore-map-button,
  header #explore-map-button-tablet {
    display: none;
  }
  /* line 2250, ../../app/styles/main.scss */
  header #new-search-button-mobile,
  header #explore-map-button-mobile {
    display: block;
  }
}
/* line 2264, ../../app/styles/main.scss */
header #top-menu {
  height: 42px;
  display: none;
}
@media screen and (min-width: 1025px) {
  /* line 2264, ../../app/styles/main.scss */
  header #top-menu {
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
}
/* line 2275, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu {
  z-index: 9999999999;
  position: relative;
  background-color: #2b2b2b;
}
/* line 2281, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu li {
  height: 42px;
  line-height: 42px;
  display: inline-block;
  color: white;
  padding-right: 10px;
  vertical-align: middle;
  font-size: 0.875em;
}
/* line 2290, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu li:after {
  margin-left: 10px;
  content: '|';
  color: #6A6A6A;
  font-size: 0.75em;
  font-weight: normal;
  display: inline-block;
  vertical-align: top;
}
/* line 2302, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu li:last-child:after, header #top-menu ul.navigation-menu li:nth-child(8):after {
  content: '';
}
/* line 2307, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu li a {
  color: white;
}
/* line 2309, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu li a:hover {
  color: #008ddd !important;
}
/* line 2313, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu li a.active {
  color: #68bbff;
}
/* line 2320, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu button#header-info-button {
  font-size: 1.375em;
  color: white;
  line-height: 44px;
  height: 42px;
  width: 24px;
  transition: color .3s ease-in-out;
}
/* line 2331, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu button#header-info-button:hover {
  color: #008ddd !important;
}
/* line 2335, ../../app/styles/main.scss */
header #top-menu ul.navigation-menu button#header-info-button:before {
  content: 'i';
  font-family: 'mpo-font';
}
/* line 2346, ../../app/styles/main.scss */
header #top-menu.open button#header-info-button {
  font-size: 0.875em !important;
}
/* line 2348, ../../app/styles/main.scss */
header #top-menu.open button#header-info-button:before {
  content: '1' !important;
  color: #68bbff;
}
/* line 2354, ../../app/styles/main.scss */
header #top-menu.open .top-dropdown-menu {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  opacity: 1;
}
/* line 2358, ../../app/styles/main.scss */
header #top-menu.open .top-dropdown-menu:after {
  background-color: rgba(0, 0, 0, 0.1);
}
/* line 2364, ../../app/styles/main.scss */
header #top-menu .top-dropdown-menu {
  position: absolute;
  background-color: #232323;
  padding: 20px;
  top: 42px;
  right: 16px;
  width: 200px;
  z-index: 99999997;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  transition: all .3s ease-in-out;
}
/* line 2379, ../../app/styles/main.scss */
header #top-menu .top-dropdown-menu ul li {
  margin-bottom: 3px;
}
/* line 2381, ../../app/styles/main.scss */
header #top-menu .top-dropdown-menu ul li a {
  font-weight: 500;
  color: #68bbff;
}
/* line 2385, ../../app/styles/main.scss */
header #top-menu .top-dropdown-menu ul li a:hover {
  color: #008ddd !important;
}
/* line 2390, ../../app/styles/main.scss */
header #top-menu .top-dropdown-menu ul li.utility {
  margin-bottom: 2px;
}
/* line 2392, ../../app/styles/main.scss */
header #top-menu .top-dropdown-menu ul li.utility a {
  color: white;
  font-weight: normal;
  font-size: 0.8125em;
}
/* line 2401, ../../app/styles/main.scss */
header #top-menu .top-dropdown-menu .legal {
  margin-top: 10px;
  color: #8A8A8A;
  font-size: 0.75em;
  line-height: 1.8;
}
/* line 2408, ../../app/styles/main.scss */
header #top-menu .top-dropdown-menu:after {
  content: '';
  height: 5px;
  width: 100%;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
}
/* line 2422, ../../app/styles/main.scss */
header #top-menu:hover img#user-avatar {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: none;
  -webkit-filter: grayscale(0%);
}
/* line 2434, ../../app/styles/main.scss */
header #header-user-container {
  height: 42px;
  display: none;
}
@media screen and (min-width: 1025px) {
  /* line 2434, ../../app/styles/main.scss */
  header #header-user-container {
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
}
/* line 2447, ../../app/styles/main.scss */
header #header-user-container.open .user-menu {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  opacity: 1;
}
/* line 2454, ../../app/styles/main.scss */
header #header-user-container.open .user-info .username:after {
  content: '1';
  color: #008ddd;
}
/* line 2463, ../../app/styles/main.scss */
header #header-user-container .user-info {
  z-index: 99999999;
  position: relative;
}
/* line 2469, ../../app/styles/main.scss */
header #header-user-container .user-info img#user-avatar {
  height: 42px;
  width: auto;
  float: left;
  transition: all .5s ease-in-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 10+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
}
/* line 2482, ../../app/styles/main.scss */
header #header-user-container .user-info .username {
  display: block;
  height: 42px;
  float: left;
  color: white;
  padding: 10px 24px 0px 20px;
  font-weight: 400;
  font-size: 0.875em;
  background-color: #2b2b2b;
}
/* line 2494, ../../app/styles/main.scss */
header #header-user-container .user-info .username:hover:after {
  color: #68bbff !important;
}
/* line 2499, ../../app/styles/main.scss */
header #header-user-container .user-info .username:after {
  content: 'X';
  font-family: 'mpo-font';
  color: white;
  margin-left: 10px;
  font-size: 0.75em;
  display: inline-block;
  transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
}
/* line 2512, ../../app/styles/main.scss */
header #header-user-container .user-menu {
  position: absolute;
  background-color: #232323;
  padding: 20px;
  top: 42px;
  width: 100%;
  z-index: 99999997;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 0;
  transition: all .3s ease-in-out;
}
/* line 2525, ../../app/styles/main.scss */
header #header-user-container .user-menu ul li {
  margin-bottom: 5px;
}
/* line 2527, ../../app/styles/main.scss */
header #header-user-container .user-menu ul li a {
  font-weight: 500;
  color: #68bbff;
}
/* line 2531, ../../app/styles/main.scss */
header #header-user-container .user-menu ul li a:hover {
  color: #008ddd !important;
}
/* line 2536, ../../app/styles/main.scss */
header #header-user-container .user-menu ul li.utility {
  margin-bottom: 2px;
}
/* line 2538, ../../app/styles/main.scss */
header #header-user-container .user-menu ul li.utility a {
  color: white;
  font-weight: normal;
  font-size: 0.8125em;
}
/* line 2547, ../../app/styles/main.scss */
header #header-user-container .user-menu:after {
  content: '';
  height: 5px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
}
/* line 2562, ../../app/styles/main.scss */
header #header-user-container:hover img#user-avatar {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: none;
  -webkit-filter: grayscale(0%);
}
/* line 2568, ../../app/styles/main.scss */
header #header-user-container .sign-in {
  top: 10px;
  position: relative;
  right: 10px;
  color: white;
}
/* line 2577, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container {
  float: right;
  height: 50px;
  padding: 10px 10px 0px 10px;
}
@media screen and (min-width: 1025px) {
  /* line 2577, ../../app/styles/main.scss */
  header #mobile-offcanvas-button-container {
    display: none;
  }
}
/* line 2587, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button {
  width: 30px;
  height: 20px;
  position: relative;
  display: block;
}
/* line 2594, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button .line {
  display: block;
  width: 30px;
  height: 4px;
  background: #777777;
  position: absolute;
  transition: all .3s;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
/* line 2603, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button .line.line1 {
  top: 0;
}
/* line 2606, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button .line.line2 {
  top: 18px;
  -webkit-transform: translateY(-10px) translateZ(0);
          transform: translateY(-10px) translateZ(0);
}
/* line 2610, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button .line.line3 {
  bottom: 0;
}
/* line 2617, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button.active .line.line1 {
  top: 0;
  -webkit-transform: translateY(8px) rotate(45deg) translateZ(0);
          transform: translateY(8px) rotate(45deg) translateZ(0);
  background-color: #E02C11;
}
/* line 2622, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button.active .line.line2 {
  opacity: 0;
}
/* line 2625, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button.active .line.line3 {
  -webkit-transform: translateY(-8px) rotate(-45deg) translateZ(0);
          transform: translateY(-8px) rotate(-45deg) translateZ(0);
  background-color: #E02C11;
}
/* line 2632, ../../app/styles/main.scss */
header #mobile-offcanvas-button-container #mobile-offcanvas-button:hover {
  cursor: pointer;
}

/*-----  End of Header  ------*/
/* line 2642, ../../app/styles/main.scss */
.layout {
  position: absolute;
  top: 42px;
  bottom: 0;
  overflow: hidden;
  background-color: #2b2b2b;
  width: 100%;
  display: block;
}
/* line 20, ../../bower_components/bourbon/app/assets/stylesheets/addons/_clearfix.scss */
.layout::after {
  clear: both;
  content: "";
  display: table;
}
/* line 2656, ../../app/styles/main.scss */
.layout.offcanvasOpen aside.offcanvas {
  -webkit-transform: translateX(0%) translateZ(0);
          transform: translateX(0%) translateZ(0);
  opacity: 1;
}
/* line 2662, ../../app/styles/main.scss */
.layout.offcanvasOpen main {
  -webkit-transform: translateX(340px);
          transform: translateX(340px);
}
@media screen and (max-width: 480px) {
  /* line 2662, ../../app/styles/main.scss */
  .layout.offcanvasOpen main {
    -webkit-transform: translateX(90%) translateZ(0);
            transform: translateX(90%) translateZ(0);
  }
}
/* line 2672, ../../app/styles/main.scss */
.layout.offcanvasOpen .menu-cover {
  opacity: 1;
  display: block;
}
/* line 2679, ../../app/styles/main.scss */
.layout.offcanvasOpen.offcanvasPanelOpen main {
  -webkit-transform: translateX(100%) translateZ(0);
          transform: translateX(100%) translateZ(0);
}
/* line 2686, ../../app/styles/main.scss */
.layout .menu-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  opacity: 0;
  display: none;
  cursor: pointer;
}

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block !important;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    display: block !important;
    opacity: 1;
  }
}
/* line 2719, ../../app/styles/main.scss */
aside.offcanvas {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 340px;
  -webkit-transform: translateX(-20%) translateZ(0);
          transform: translateX(-20%) translateZ(0);
  overflow: hidden;
  transition: -webkit-transform .3s ease-in-out, opacity .3s ease-in-out, width .5s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, width .5s ease-in-out;
  opacity: 0;
  background-color: #3b3b3b;
  box-shadow: inset -10px 0 5px -5px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 480px) {
  /* line 2719, ../../app/styles/main.scss */
  aside.offcanvas {
    width: 90%;
  }
}
/* line 2743, ../../app/styles/main.scss */
aside.offcanvas .offcanvas-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 40px;
  left: 0;
  overflow-y: auto;
  transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  color: #EBEBEB;
}
/* line 20, ../../bower_components/bourbon/app/assets/stylesheets/addons/_clearfix.scss */
aside.offcanvas .offcanvas-menu ul.main-menu::after {
  clear: both;
  content: "";
  display: table;
}
/* line 2757, ../../app/styles/main.scss */
aside.offcanvas .offcanvas-menu ul.main-menu li {
  padding: 10px 20px 10px 20px;
  border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  height: 60px;
  font-size: 1.125em;
  font-weight: 400;
}

Here are the current grunt settings I'm using during minification

// Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepareStaging: {
      html: '<%= yeoman.app %>/index.html',
      options: {
        dest: '<%= yeoman.staging %>',
        flow: {
          html: {
            steps: {
              js: ['concat', 'uglifyjs'],
              css: ['cssmin']
            },
            post: {
              css: [{
                name: 'cssmin',
                createConfig: function (context, block) {
                  var generated = context.options.generated;
                  generated.options = {
                    aggressiveMerging: false,
                    shorthandCompacting: false,
                    keepBreaks: true,
                    keepSpecialComments: true,
                    compatibility: true,
                    advanced: false
                  };
                }
              }]
            }
          }
        }
      }
    },

header #new-search-button{line-height:22px;height:42px!important;display:block;float:left;margin-right:10px;margin-left:50px;padding-top:5px;overflow:hidden;font-weight:400!important;transition:all .3s ease-in-out;text-align:left}
@media screen and (min-width:481px) and (max-width:768px){header #new-search-button{margin-left:20px}
}
@media screen and (min-width:769px) and (max-width:1024px){header #new-search-button{margin-left:20px}
}
header #new-search-button .button-inner{height:32px;border:none;float:left;color:#fff;background-color:#4b99bb;border-radius:3px;font-size:.875em;vertical-align:middle;display:block;transition:.3s all ease-in-out;text-align:left;padding:4px 12px 5px 12px}
header #new-search-button .button-inner .icon{padding-top:2px;padding-right:4px;font-size:1.5em;display:block;float:left;vertical-align:middle}
header #new-search-button .button-inner .text{vertical-align:text-top;display:inline-block;color:#fff;font-size:1em;font-weight:400}
header #new-search-button .button-inner:hover{background-color:#226993;cursor:pointer}
header #new-search-button input#header-search-submit{display:none;width:80px;background-color:#4b99bb;color:#fff;height:32px;border:none;border-top-left-radius:0!important;border-bottom-left-radius:0!important;border-top-right-radius:3px;border-bottom-right-radius:3px;transition:background .3s ease-in-out;vertical-align:middle}
header #new-search-button input#header-search-submit:hover{background-color:#226993}
header #new-search-button .search-bar-container{display:inline-block;visiblity:hidden;width:0;height:32px;overflow:hidden;float:left;transition:all .4s ease-in-out}
header #new-search-button .search-bar-container .input-container{overflow:hidden;position:relative;display:inline-block;height:32px;width:100%}
header #new-search-button .search-bar-container .input-container .icon{position:absolute;color:#4b99bb;top:3px;left:5px;opacity:0;transition:opacity .5s ease-in-out;font-size:1.5em}
header #new-search-button .search-bar-container input#header-search{height:32px;padding-left:40px;display:inline-block;overflow:hidden;width:100%;background-color:#fff;border-bottom-left-radius:3px;border-top-left-radius:3px;border-top-right-radius:0;border-bottom-right-radius:0;border:none;color:#2b2b2b}
header #new-search-button.active input#header-search-submit{display:inline-block}
header #new-search-button.active .button-inner{display:none;visibility:hidden;opacity:0}
header #new-search-button.active .search-bar-container{display:inline-block;overflow:hidden;visiblity:visible;width:350px}
header #new-search-button.active .search-bar-container .icon{opacity:1}
header #new-search-button-mobile{font-size:1.5em;color:#4b99bb!important;margin-right:20px;float:right;margin-top:6px}
header #new-search-button-mobile:hover{color:#226993}
header .explore-map-button{line-height:22px;height:32px;border:none;float:left;margin-top:5px;padding-left:12px;padding-right:12px}
header .explore-map-button .icon{margin-top:-1px;font-size:1.625em;display:block;float:left;color:#fff!important}
header .explore-map-button .text{display:block;float:left;vertical-align:text-top;color:#fff;font-size:1em;padding-left:5px;font-weight:400}
@media screen and (min-width:1025px){header .explore-map-button{display:block}
}
header #explore-map-button-mobile{font-size:1.5em;color:#669E39!important;float:right;margin-right:20px;margin-top:6px}
header #explore-map-button-mobile:hover{color:#35701E}
header #new-search-button{display:none}
@media screen and (min-width:1025px){header #new-search-button{display:block}
}
@media screen and (min-width:769px) and (max-width:1024px){header #new-search-button{display:block}
}
@media screen and (min-width:481px) and (max-width:768px){header #new-search-button{display:block}
}
header #explore-map-button-desktop{display:none}
@media screen and (min-width:1025px){header #explore-map-button-desktop{display:block}
}
header #explore-map-button-tablet{display:none}
@media screen and (min-width:481px) and (max-width:768px){header #explore-map-button-tablet{display:block}
}
header #explore-map-button-tabletLG{display:none}
@media screen and (min-width:769px) and (max-width:1024px){header #explore-map-button-tabletLG{display:block}
}
header #explore-map-button-mobile,header #new-search-button-mobile{display:block}
@media screen and (min-width:1025px){header #explore-map-button-mobile,header #new-search-button-mobile{display:none}
}
@media screen and (min-width:769px) and (max-width:1024px){header #explore-map-button-mobile,header #new-search-button-mobile{display:none}
}
@media screen and (min-width:481px) and (max-width:768px){header #explore-map-button-mobile,header #new-search-button-mobile{display:none}
}
@media (max-width:740px){header #explore-map-button,header #explore-map-button-tablet,header #new-search-button{display:none}
header #explore-map-button-mobile,header #new-search-button-mobile{display:block}
}
header #top-menu{height:42px;display:none}
@media screen and (min-width:1025px){header #top-menu{display:inline-block;position:relative;cursor:pointer}
}
header #top-menu ul.navigation-menu{z-index:9999999999;position:relative;background-color:#2b2b2b}
header #top-menu ul.navigation-menu li{height:42px;line-height:42px;display:inline-block;color:#fff;padding-right:10px;vertical-align:middle;font-size:.875em}
header #top-menu ul.navigation-menu li:after{margin-left:10px;content:'|';color:#6A6A6A;font-size:.75em;font-weight:400;display:inline-block;vertical-align:top}
header #top-menu ul.navigation-menu li:last-child:after,header #top-menu ul.navigation-menu li:nth-child(8):after{content:''}
header #top-menu ul.navigation-menu li a{color:#fff}
header #top-menu ul.navigation-menu li a:hover{color:#008ddd!important}
header #top-menu ul.navigation-menu li a.active{color:#68bbff}
header #top-menu ul.navigation-menu button#header-info-button{font-size:1.375em;color:#fff;line-height:44px;height:42px;width:24px;transition:color .3s ease-in-out}
header #top-menu ul.navigation-menu button#header-info-button:hover{color:#008ddd!important}
header #top-menu ul.navigation-menu button#header-info-button:before{content:'i';font-family:mpo-font}
header #top-menu.open button#header-info-button{font-size:.875em!important}
header #top-menu.open button#header-info-button:before{content:'1'!important;color:#68bbff}
header #top-menu.open .top-dropdown-menu{transform:translateY(0);opacity:1}
header #top-menu.open .top-dropdown-menu:after{background-color:rgba(0,0,0,.1)}
header #top-menu .top-dropdown-menu{position:absolute;background-color:#232323;padding:20px;top:42px;right:16px;width:200px;z-index:99999997;transform:translateY(-100%);transition:all .3s ease-in-out}
header #top-menu .top-dropdown-menu ul li{margin-bottom:3px}
header #top-menu .top-dropdown-menu ul li a{font-weight:500;color:#68bbff}
header #top-menu .top-dropdown-menu ul li a:hover{color:#008ddd!important}
header #top-menu .top-dropdown-menu ul li.utility{margin-bottom:2px}
header #top-menu .top-dropdown-menu ul li.utility a{color:#fff;font-weight:400;font-size:.8125em}
header #top-menu .top-dropdown-menu .legal{margin-top:10px;color:#8A8A8A;font-size:.75em;line-height:1.8}
header #top-menu .top-dropdown-menu:after{content:'';height:5px;width:100%;position:absolute;bottom:-5px;left:0;right:0}
header #top-menu:hover img#user-avatar{filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");filter:none;-webkit-filter:grayscale(0)}
header #header-user-container{height:42px;display:none}
@media screen and (min-width:1025px){header #header-user-container{display:inline-block;position:relative;cursor:pointer}
}
header #header-user-container.open .user-menu{transform:translateY(0);opacity:1}
header #header-user-container.open .user-info .username:after{content:'1';color:#008ddd}
header #header-user-container .user-info{z-index:99999999;position:relative}
header #header-user-container .user-info img#user-avatar{height:42px;width:auto;float:left;transition:all .5s ease-in-out;backface-visibility:hidden;filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%)}
header #header-user-container .user-info .username{display:block;height:42px;float:left;color:#fff;padding:10px 24px 0 20px;font-weight:400;font-size:.875em;background-color:#2b2b2b}
header #header-user-container .user-info .username:hover:after{color:#68bbff!important}
header #header-user-container .user-info .username:after{content:'X';font-family:mpo-font;color:#fff;margin-left:10px;font-size:.75em;display:inline-block;transition:transform .3s ease-in-out}
header #header-user-container .user-menu{position:absolute;background-color:#232323;padding:20px;top:42px;width:100%;z-index:99999997;transform:translateY(-100%);opacity:0;transition:all .3s ease-in-out}
header #header-user-container .user-menu ul li{margin-bottom:5px}
header #header-user-container .user-menu ul li a{font-weight:500;color:#68bbff}
header #header-user-container .user-menu ul li a:hover{color:#008ddd!important}
header #header-user-container .user-menu ul li.utility{margin-bottom:2px}
header #header-user-container .user-menu ul li.utility a{color:#fff;font-weight:400;font-size:.8125em}
header #header-user-container .user-menu:after{content:'';height:5px;width:100%;background-color:rgba(0,0,0,.1);position:absolute;bottom:-5px;left:0;right:0}
header #header-user-container:hover img#user-avatar{filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");filter:none;-webkit-filter:grayscale(0)}
header #header-user-container .sign-in{top:10px;position:relative;right:10px;color:#fff}
header #mobile-offcanvas-button-container{float:right;height:50px;padding:10px 10px 0 10px}
@media screen and (min-width:1025px){header #mobile-offcanvas-button-container{display:none}
}
header #mobile-offcanvas-button-container #mobile-offcanvas-button{width:30px;height:20px;position:relative;display:block}
header #mobile-offcanvas-button-container #mobile-offcanvas-button .line{display:block;width:30px;height:4px;background:#777;position:absolute;transition:all .3s;transform:translateZ(0)}
header #mobile-offcanvas-button-container #mobile-offcanvas-button .line.line1{top:0}
header #mobile-offcanvas-button-container #mobile-offcanvas-button .line.line2{top:18px;transform:translateY(-10px) translateZ(0)}
header #mobile-offcanvas-button-container #mobile-offcanvas-button .line.line3{bottom:0}
header #mobile-offcanvas-button-container #mobile-offcanvas-button.active .line.line1{top:0;transform:translateY(8px) rotate(45deg) translateZ(0);background-color:#E02C11}
header #mobile-offcanvas-button-container #mobile-offcanvas-button.active .line.line2{opacity:0}
header #mobile-offcanvas-button-container #mobile-offcanvas-button.active .line.line3{transform:translateY(-8px) rotate(-45deg) translateZ(0);background-color:#E02C11}
header #mobile-offcanvas-button-container #mobile-offcanvas-button:hover{cursor:pointer}
.layout{position:absolute;top:42px;bottom:0;overflow:hidden;background-color:#2b2b2b;width:100%;display:block}
.layout::after{clear:both;content:"";display:table}
.layout.offcanvasOpen aside.offcanvas{transform:translateX(0) translateZ(0);opacity:1}
.layout.offcanvasOpen main{transform:translateX(340px)}
@media screen and (max-width:480px){.layout.offcanvasOpen main{transform:translateX(90%) translateZ(0)}
}
.layout.offcanvasOpen .menu-cover{opacity:1;display:block}
.layout.offcanvasOpen.offcanvasPanelOpen main{transform:translateX(100%) translateZ(0)}
.layout .menu-cover{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9999999;opacity:0;display:none;cursor:pointer}
@keyframes fadeIn{0%{display:none;opacity:0}
1%{display:block!important;opacity:0}
10%{opacity:0}
100%{display:block!important;opacity:1}
}
aside.offcanvas{transform:translateZ(0);position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:340px;transform:translateX(-20%) translateZ(0);overflow:hidden;transition:transform .3s ease-in-out,opacity .3s ease-in-out,width .5s ease-in-out;opacity:0;background-color:#3b3b3b;box-shadow:inset -10px 0 5px -5px rgba(0,0,0,.25)}
@media screen and (max-width:480px){aside.offcanvas{width:90%}
}
aside.offcanvas .offcanvas-menu{position:absolute;top:0;right:0;bottom:40px;left:0;overflow-y:auto;transition:transform .3s ease-in-out;transform:translateZ(0);color:#EBEBEB}
aside.offcanvas .offcanvas-menu ul.main-menu::after{clear:both;content:"";display:table}
aside.offcanvas .offcanvas-menu ul.main-menu li{padding:10px 20px 10px 20px;border-bottom:1px solid rgba(150,150,150,.1);height:60px;font-size:1.125em;font-weight:400}
aside.offcanvas .offcanvas-menu ul.main-menu li::after{clear:both;content:"";display:table}
aside.offcanvas .offcanvas-menu ul.main-menu li .icon{font-size:1.875em;margin-right:20px;width:40px;vertical-align:middle}
aside.offcanvas .offcanvas-menu ul.main-menu li a{color:#fff;display:block}
aside.offcanvas .offcanvas-menu ul.main-menu li.account .image{display:inline-block;width:40px;height:40px;margin-right:20px;float:left;background-size:cover;background-position:center top}
aside.offcanvas .offcanvas-menu ul.main-menu li.account .agent-name{margin-top:5px;display:inline-block;float:left;width:150px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
aside.offcanvas .offcanvas-menu ul.main-menu li.account .signout{margin-top:5px;display:inline-block;color:#4b99bb;float:right}
aside.offcanvas .offcanvas-menu ul.utility-menu{padding:20px}
aside.offcanvas .offcanvas-menu ul.utility-menu li a{color:#fff;margin-bottom:20px}
aside.offcanvas .footer{position:absolute;bottom:0;width:100%;height:50px;padding:20px;text-transform:uppercase;font-size:.75em;font-weight:700}
aside.offcanvas .footer a{color:#777}
aside.offcanvas .offcanvas-panel{position:absolute;top:0;right:0;bottom:0;left:-100%;transform:translateZ(0);width:100%;transition:transform .4s ease-in-out;background-color:#232323;color:#EBEBEB;padding:20px}
aside.offcanvas .offcanvas-panel .offcanvas-panel-inner{position:absolute;top:40px;bottom:0;left:0;right:0;overflow-y:auto;padding:20px;background-color:#F2F2F2}
aside.offcanvas.offcanvasPanelOpen{width:100%}
aside.offcanvas.offcanvasPanelOpen .offcanvas-menu{transform:translateX(100%) translateZ(0)}
aside.offcanvas.offcanvasPanelOpen .offcanvas-panel{transform:translateX(100%) translateZ(0)}
main.layout-inner{z-index:2;transform:translateZ(0);position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;transition:transform .5s ease-in-out;background:#F2F2F2;width:100%}
main.layout-inner .content-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;padding-top:10px}
@media screen and (min-width:1025px){main.layout-inner .content-container.show-subpanel{left:110px}
}
main.layout-inner .content-container.secondary-content-panel-visible section#main-content-panel-container{transform:translateX(-80%) translateZ(0);transition:transform .5s ease-in-out}
main.layout-inner .content-container.secondary-content-panel-visible section#secondary-content-panel-container{transform:translateX(0) translateZ(0);transition:transform .3s ease-in-out}
main.layout-inner .content-container section.content-panel-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;overflow:hidden}
main.layout-inner .content-container #main-content-panel-container{transition:transform .3s ease-in-out}
main.layout-inner .content-container #secondary-content-panel-container{background-color:orange;transform:translateX(100%) translateZ(0);transition:transform .5s ease-in-out}
main.layout-inner .content-container .content-panel-inner{position:relative;height:100%;overflow:hidden;width:auto}
main.layout-inner .content-container .content-panel-inner .content-panel-view{height:100%}
main.layout-inner .content-container .content-panel-inner .content-panel-view.ng-enter{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn}
main.layout-inner .content-container .content-panel-inner .content-panel-view.ng-leave{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut}
aside.sidebar{width:110px;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#3b3b3b;overflow-y:auto;overflow-x:hidden;z-index:3;display:none}
@media screen and (min-width:1025px){aside.sidebar{display:block}
}
@media (max-height:700px){aside.sidebar .menu-footer{position:relative!important}
}
aside.sidebar nav#main-navigation{z-index:2}
aside.sidebar nav#main-navigation ul{margin:0;padding:0;list-style-type:none;top:0;bottom:0;width:110px}
aside.sidebar nav#main-navigation ul li{width:110px;position:relative;text-align:center;font-weight:400;z-index:3;background-color:#3b3b3b;border-bottom:thin solid rgba(255,255,255,.1)}
aside.sidebar nav#main-navigation ul li:first-child a.button-link{border-top:8px solid #353535}
aside.sidebar nav#main-navigation ul li:first-child a.button-link.active{border-top:8px solid #3d88ad}
aside.sidebar nav#main-navigation ul li a.button-link{width:110px;display:block;color:#fff;text-align:center;border-right:8px solid #353535;padding:0 5px 0 8px;transition:all .3s linear}
aside.sidebar nav#main-navigation ul li a.button-link .menu-text{font-size:.8em;line-height:1.1;padding-bottom:15px;display:block;text-align:center}
aside.sidebar nav#main-navigation ul li a.button-link .avatar{display:inline-block;border-radius:50px;width:50px;height:50px;border:2px solid #fff;margin-bottom:5px;margin-top:15px;background-size:cover;background-position:top center;transition:all .3s linear;filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%)}
aside.sidebar nav#main-navigation ul li a.button-link:hover .avatar{filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");filter:none;-webkit-filter:grayscale(0)}
aside.sidebar nav#main-navigation ul li a.button-link:hover{background-color:#4b99bb;border-color:#3d88ad}
aside.sidebar nav#main-navigation ul li a.button-link.active{background-color:#4b99bb;border-right:8px solid #3d88ad}
aside.sidebar nav#main-navigation ul li a.button-link.active:hover{background-color:#276E8E;border-color:#3d88ad}
aside.sidebar nav#main-navigation ul li a.button-indicator{position:absolute;padding:2px 7px 2px 7px;top:0;right:0;z-index:3;font-size:.9em;font-weight:700;color:#fff;text-align:center;border-bottom-left-radius:2px;background-color:transparent;display:none}
aside.sidebar nav#main-navigation ul li a.button-indicator.new{background-color:#F25619;color:#2b2b2b;display:block}
aside.sidebar nav#main-navigation ul li a.button-indicator#messages-indicator{background-color:#FFD016;color:#2b2b2b}
aside.sidebar nav#main-navigation ul li a.button-indicator#clients-new-button{display:inline-block;top:0;left:0;right:inherit;padding:0 6px 0 6px;border-bottom:1px solid rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.1);font-size:1.2em}
aside.sidebar nav#main-navigation ul li a.button-indicator#clients-new-button:hover{background-color:#fff;color:#232323}
aside.sidebar nav#main-navigation ul li a.button-indicator:hover{background-color:#fff!important;color:#232323!important}
aside.sidebar nav#main-navigation ul li i{display:block;font-size:2.1875em;padding-top:10px}
aside.sidebar nav#main-navigation ul li#messages-button img{padding-top:20px}
@media (max-height:650px){aside.sidebar nav#main-navigation ul li a.button-link .menu-text{display:none}
}
aside.sidebar .menu-spacer{width:110px;position:absolute;top:0;bottom:0;z-index:1;border-right:8px solid #353535}
aside.sidebar .menu-footer{position:absolute;bottom:0;padding-top:20px;padding-bottom:20px;width:100%;z-index:1}
aside.sidebar .menu-footer a img{display:block;margin:0 auto 0 auto}
.sidebar-nav{position:absolute;top:0;bottom:0;left:0}
.ngdialog-close{z-index:999999999999999999999999;position:absolute;top:0;right:0;width:35px;height:35px;padding-top:10px;padding-left:2px;text-align:center;font-weight:700!important;border-top-right-radius:0!important;border-top-left-radius:0!important;border-bottom-right-radius:0!important;border-bottom-left-radius:3px;color:#fff;font-size:.875em;font-weight:500;background-color:#0068B9}
@media screen and (min-width:1025px){.ngdialog-close{display:block}
}

[that1guy]

@jakubpawlowicz, any ideas here? I'm stumped and in a bit of a holding pattern.

[that1guy]

Hi @jakubpawlowicz. Checking in again to see if we can get some feedback here. Thanks!

[jakubpawlowicz]

@that1guy sorry for a delay - I'll give it a look today.

[jakubpawlowicz]

@that1guy I've retested it again using both CLI and API and it certainly works fine for me.

Is there any chance autoprefixer strips those?

[that1guy]

From my tests that's not the issue. To explain, here is my grunt build-staging task with cssmin commented out.

  grunt.registerTask('build-staging', [
    'clean:staging',
    'ngconstant:staging',
    'useminPrepareStaging',
    'concurrent:staging',
    'autoprefixer:staging',
    'concat:generated',
    'ngtemplates:staging',
    'ngAnnotate:staging',
    'copy:staging',
    'cdnify:staging',
    //'cssmin:generated',
    //'uglify:generated',
    'filerev:staging',
    'useminStaging',
    'htmlmin:staging'
  ]);

Here are the autoprefixer settings (the same across all environments).

    // Add vendor prefixed styles
    autoprefixer: {
      options: {
        browsers: ['last 2 version']
      },
      server: {
        options: {
          map: true
        },
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.tmp/styles/'
        }]
      },
      staging: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '<%= yeoman.staging %>/styles/'
        }]
      },
      production: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '<%= yeoman.production %>/styles/'
        }]
      }
    },

and after autoprefixer runs I see correct css.

/* line 2662, ../../app/styles/main.scss */
.layout.offcanvasOpen main {
  -webkit-transform: translateX(340px);
          transform: translateX(340px);
}
@media screen and (max-width: 480px) {
  /* line 2662, ../../app/styles/main.scss */
  .layout.offcanvasOpen main {
    -webkit-transform: translateX(90%) translateZ(0);
            transform: translateX(90%) translateZ(0);
  }
}
/* line 2672, ../../app/styles/main.scss */
.layout.offcanvasOpen .menu-cover {
  opacity: 1;
  display: block;
}
/* line 2679, ../../app/styles/main.scss */
.layout.offcanvasOpen.offcanvasPanelOpen main {
  -webkit-transform: translateX(100%) translateZ(0);
          transform: translateX(100%) translateZ(0);
}

Only when I enable cssmin in my grunt build-staging do I see.

.layout.offcanvasOpen aside.offcanvas{transform:translateX(0) translateZ(0);opacity:1}
.layout.offcanvasOpen main{transform:translateX(340px)}
@media screen and (max-width:480px){.layout.offcanvasOpen main{transform:translateX(90%) translateZ(0)}
}
.layout.offcanvasOpen .menu-cover{opacity:1;display:block}
.layout.offcanvasOpen.offcanvasPanelOpen main{transform:translateX(100%) translateZ(0)}

[that1guy]

Ugh, you nailed it, this issue caused because autoprefixer was outputting file to separate directory than useminprepare was telling cssmin to look.

[jakubpawlowicz]

No worries, glad you solved it 👍