Post-Processing CSS

This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don’t need to worry about it.

Support for new CSS features like the all property, break properties, custom properties, and media query ranges are automatically polyfilled to add support for older browsers.

You can customize your target support browsers by adjusting the browserslist key in package.json according to the Browserslist specification.

For example, this:

  1. .App {
  2.   display: flex;
  3.   flex-direction: row;
  4.   align-items: center;
  5. }

becomes this:

  1. .App {
  2.   display: -webkit-box;
  3.   display: -ms-flexbox;
  4.   display: flex;
  5.   -webkit-box-orient: horizontal;
  6.   -webkit-box-direction: normal;
  7.   -ms-flex-direction: row;
  8.   flex-direction: row;
  9.   -webkit-box-align: center;
  10.   -ms-flex-align: center;
  11.   align-items: center;
  12. }

If you need to disable autoprefixing for some reason, follow this section.

CSS Grid Layout prefixing is disabled by default, but it will not strip manual prefixing.If you'd like to opt-in to CSS Grid prefixing, first familiarize yourself about its limitations.To enable CSS Grid prefixing, add / autoprefixer grid: autoplace / to the top of your CSS file.