Does create-react-app uses Autoprefixer?

Posted in Articles

Short answer: Yes, the React app created by the script create-react-app does use autoprefixer.

Autoprefixing means that when you write a CSS rule such as …

transition: all .5s;

It will automatically add the browser vendor prefixes for older browsers.  So your CSS becomes…

-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;

You can try out more examples at Autoprefixer CSS Online

The quickest way to see that the App is using autoprefixer is to see that its package.json file list it as one of its dependencies…

But to confirm that autoprefixer is really working, start with an new create-react-app and then the eject script (as describe here).

Then change the CSS header color in “src/App.css” from black to a linear-gradient …

According to Autoprefixer CSS Online, the autoprefixer should automatically add the vendor browser prefixed rules such as …

background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: -webkit-linear-gradient(top, white, black);
background: -o-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);

When you run the app with “yarn start”, examine Chrome’s developer tools and see that the CSS rules have been added …

Note that this particular version of Chrome is not using any of the prefixed rules (you see the strike-throughs in the developer tool) because it is updated enough to use the last rul of “linear-gradient”.

Doing a production build with “yarn build”, we see that the output CSS in the build folder does have the autoprefixed CSS rules as highlighted…

How Is the Autoprefixer Being Used

The web app is using the Autoprefixer in Webpack.  If you open “config/webpack.config.dev.js”, you will see that it requires “autoprefixer” …

And scrolling down you see that there is a postcss-loader that applies the autoprefixer to our CSS with options of targeting browser that have greater than 1% marketshare…

 

---