Каскадная опция в gulp-autoprefixer

Question

При добавлении задачи autoprfixing из плагина gulp-autoprefixer я заметил

autoprefixer({ cascade: false })

вариант. И этот вариант не был понятен для меня, что он делает.

В документации я прочитал, что:

cascade (логическое): должен ли Autoprefixer использовать Visual Cascade, если CSS не сжат. По умолчанию: правда

Поэтому я скомпилировал свой SASS в CSS с помощью cascade: false и cascade true, и я получил одинаковый результат в обоих случаях: My SASS:

body
display: flex
p
    display: flex

Скомпилировано в CSS с autoprefixer({ cascade: false }):

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

Скомпилировано в CSS с autoprefixer({ cascade: true }):

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

Итак, мой последний вопрос: за что отвечает каскад autoprefixer: false/true?

Большое спасибо за ответ.

Answer 1

Мне было на самом деле тоже интересно, и я заметил следующее, когда cascade: true (который используется по умолчанию):

учитывая это:

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

выходы авторефиксера:

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

обратите внимание на отступы в строках -webkit-box-orient: horizontal;

однако если 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; }

Answer 2

У меня был тот же вопрос, и вот что я нашел:

"Чтобы ваш CSS выглядел красиво, autoprefixer может каскадно добавлять префиксы - добавляя пробел, чтобы выровнять префиксы (хотя, если вы используете плагин minification gulp, это не будет иметь никакого значения в конце)"

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