Search code examples
javascriptcssgulpindentationautoprefixer

indentation problem with gulp autoprefixer?

I know this is low priority, but i have noticed that gulp autoprefixer has ruined my css code indentation to a style like this:

-webkit-box-align: center;
  -webkit-align-items: center;
    -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
    -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1em;

I do not know if i should fix this manually or just this style is acceptable and i can leave it alone???

Solution

  • I would suggest using gulp-postcss with npm package autoprefixer. (example)

    With postcss you are a lot more flexible. There are many postcss-plugins which helps to get the optimal CSS.

    To get the right formatting with correct indentation you can run the postcss-prettify plugin after the autoprefixer.

    If you later need a minified CSS for production use, you can use cssnano.