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.

score 3 · Accepted Answer · answered Feb 06 '19 at 02:31

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; }

score 0 · Answer 2 · answered Feb 17 '19 at 14:31

I had the same question and this is what I found:

'To make your CSS look pretty, autoprefixer can cascade the prefixes—adding whitespace to make the prefixes line up (although, if you’re using the minification gulp plugin, it won’t make any difference in the end)'

-> https://www.futurehosting.com/blog/use-autoprefixer-to-speed-up-site-development/

cascade option in gulp-autoprefixer

2 Answers2