Perfect-scrollbar: CSS code breaks the Rails Asset Pipeline

[cmer]

There is a piece of code in perfect-scrollbar.css (and its minified version) that breaks the Rails Asset Pipeline (RAP).

Somehow, the RAP cuts off all output after the following:

css @supports (-ms-overflow-style: none) { .ps { overflow: auto !important; } }

The CSS output rendered by RAP is therefore incomplete and invalid. It even silences out all the other stylesheets that come after my //= require perfect-scrollbar.css line.

It took me a while to figure this out, but commenting out the above piece of code actually solves the issue

I'm posting this here for others to see, but also potentially to have a proper fix.

[Joseph7451797]

I encountered similar problem today on our production server.
I imported perfect-scrollbar/src/css/mixins.scss and perfect-scrollbar/src/css/variables.scss in my main scss file. Using the mixins for custom scrollbar color and scrollbar width setup.

My main scss code:

// perfect-scrollbar
@import "./node_modules/perfect-scrollbar/src/css/variables.scss";
@import "./node_modules/perfect-scrollbar/src/css/mixins.scss";

$ps-theme-customBlack: (
  border-radius: 0,
  rail-default-opacity: $ps-rail-default-opacity,
  rail-container-hover-opacity: $ps-rail-container-hover-opacity,
  rail-hover-opacity: $ps-rail-hover-opacity,
  bar-bg: #fff,
  bar-container-hover-bg: #000,
  bar-hover-bg: #333,
  rail-hover-bg: $ps-rail-hover-bg,
  scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom,
  scrollbar-x-rail-height: $ps-scrollbar-x-rail-height,
  scrollbar-x-bottom: $ps-scrollbar-x-bottom,
  scrollbar-x-height: $ps-scrollbar-x-height,
  scrollbar-x-hover-height: $ps-scrollbar-x-hover-height,
  scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
  scrollbar-y-rail-width: 15px,
  scrollbar-y-right: 0,
  scrollbar-y-width: 9px,
  scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,
);

// custom-black scrollbar theme
.ps {
  @include ps-container($ps-theme-customBlack);
}

// custom-black scrollbar rail
.ps__scrollbar-y-rail {
    border: 3px solid rgb(0, 0, 0);
}

Then I use webpack, sass-loader and node-sass to transpile scss file to css file on my development machine(Mac OSX 10.11) and test server(centOS). All css files are good in my Mac and our test server. Oddly when the scss file was deploy to production server(also centOS), css file transpiled lost some pieces of code.

 .ps {
    touch-action: auto;
    overflow: hidden!important;
    -ms-overflow-style: none
}

@supports (-ms-overflow-style: none) {
    .ps {
        overflow:auto!important  /* css file is broken at this line, and lose everything below */

That is totally weird! I have no idea why there are differences between Mac and production server. All enverionments use same tool:

• webpack 2.6.1
• sass-loder 6.0.5
• node-sass 4.5.3
• libsass 3.5.0.beta.2

My solution is to comment three lines in perfect-scrollbar/src/css/mixins.scss

other code...

// comment @supports rule to fix the issue 
// Edge
  @supports (-ms-overflow-style: none) {
    overflow: auto !important;
  }

other code...

The code seems to be a Microsoft Edge CSS hack and looks valid. I still have no idea why it breaks my css and which part of transpiling influenced. Maybe someone has better solution to this issue.

[hatashiro]

As described above, it's a valid CSS line and I think it's rather a Rails Asset Pipeline bug. I'm not familiar of Rails, so feel free to re-open if I was wrong.

[AndrewPix]

We also encountered the same error. Our gulp generated css interrupted at the same line