postcss-preset-env

Author: outoftime

README.md

@@ -185,7 +185,7 @@ on the major tools:
 * [React](https://facebook.github.io/react/docs/react-component.html) for
   constructing the user interface
 * [Redux](http://redux.js.org/) for managing application state
-* [cssnext](http://cssnext.io/features/) gives us cutting-edge CSS features
+* [postcss-preset-env](https://github.com/csstools/postcss-preset-env) gives us cutting-edge CSS features
 * [Block Element Modifier](https://en.bem.info/methodology/naming-convention/)
   provides a convention for organizing DOM classes
 * [Webpack](https://webpack.github.io/docs/configuration.html) builds the
@@ -265,4 +265,4 @@ src="https://cloud.githubusercontent.com/assets/14214/19059115/428a80f4-89ab-11e
 
 Feel free to email me at [mat.a.brown@gmail.com](mailto:mat.a.brown@gmail.com) if you have any questions.
 
-You can find our Slack team, including our #dev channel, [here](https://slack.popcode.org). 
+You can find our Slack team, including our #dev channel, [here](https://slack.popcode.org).

gulpfile.js

@@ -14,7 +14,7 @@ const cssnano = require('cssnano');
 const forOwn = require('lodash.forown');
 const git = require('git-rev-sync');
 const postcss = require('gulp-postcss');
-const cssnext = require('postcss-cssnext');
+const postcssPresetEnv = require('postcss-preset-env');
 const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const cloudflare = require('cloudflare');
@@ -33,17 +33,17 @@ const highlightStylesheetsDir = 'node_modules/highlight.js/styles';
 const staticDir = path.join(srcDir, 'static');
 const bowerComponents = 'bower_components';
 
-const cssnextBrowsers = [];
+const postcssBrowsers = [];
 const supportedBrowsers =
   JSON.parse(fs.readFileSync('./config/browsers.json'));
 forOwn(supportedBrowsers, (version, browser) => {
-  let browserForCssnext = browser;
+  let browserForPostcss = browser;
   if (browser === 'msie') {
-    browserForCssnext = 'ie';
+    browserForPostcss = 'ie';
   } else if (browser === 'chromium') {
     return;
   }
-  cssnextBrowsers.push(`${browserForCssnext} >= ${version}`);
+  postcssBrowsers.push(`${browserForPostcss} >= ${version}`);
 });
 
 gulp.task('env', () => {
@@ -56,7 +56,7 @@ gulp.task('static', () => gulp.
 );
 
 gulp.task('css', () => {
-  const processors = [cssnext({browsers: cssnextBrowsers})];
+  const processors = [postcssPresetEnv({browsers: postcssBrowsers})];
   if (process.env.NODE_ENV === 'production') {
     processors.push(cssnano());
   }

package.json

@@ -301,7 +301,7 @@
     "lodash.forown": "^4.4.0",
     "node-static": "^0.7.9",
     "null-loader": "^0.1.1",
-    "postcss-cssnext": "^3.0.2",
+    "postcss-preset-env": "^5.3.0",
     "raw-loader": "^0.5.1",
     "redux-saga-test-plan": "^3.0.2",
     "script-ext-html-webpack-plugin": "^2.0.1",