cascade option in gulp-autoprefixer

Question

While adding the autoprfixing task from the gulp-autoprefixer plugin I noticed the

autoprefixer({ cascade: false })

option. And this option was not clear for me what it is doing.

In the documentation I read that:

cascade (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default: true

So I compiled my SASS to the CSS with the cascade: false and with cascade true and I got the same result in both cases: My SASS:

body
display: flex
p
    display: flex

Compiled to the CSS with the autoprefixer({ cascade: false }):

body {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
body p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

Compiled to the CSS with the autoprefixer({ cascade: true }):

body {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
body p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

So my final question is - What the autoprefixer's cascade: false/true option is responsible for?

Thank you very much for the answer.

Answer 1

I was actually also curious about this and noticed the following when cascade: true (which is the default):

given this:

body {
    background: black;
  display: flex;
    flex-direction:  row-reverse; }

autoprefixer outputs:

body {
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

notice the indentations in the lines following -webkit-box-orient: horizontal;

however, if cascade: false:

body {
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }