CODEWITHSUNDEEP
javascriptcssgulpindentationautoprefixer
Saher Elgendy
Saher Elgendy

Reputation: 1619

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???

Upvotes: 1

Views: 268

Answers (2)

Mark
Mark

Reputation: 180657

I would also look at the cascade option to autoprefixer. It looks like it might be the source of your bad indentation. Try:

autoprefixer({ cascade: false })

The default value is true and may be giving you the results you are seeing.

autoprefixer options

Upvotes: 1

d-h-e
d-h-e

Reputation: 2548

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.

Upvotes: 1

Related Questions