feat: simplify postcss config

generators/app/package-json.js

@@ -223,11 +223,7 @@ const packageJSON = (current, context) => {
 
     _.assign(result.devDependencies, getGeneratorVersions([
       'postcss-cli',
-      'postcss-banner',
-      'postcss-import',
-      'postcss-preset-env',
-      'autoprefixer',
-      'cssnano'
+      'videojs-generate-postcss-config'
     ]));
 
   }

generators/app/templates/scripts/_postcss.config.js

@@ -1,77 +1,9 @@
-/* eslint-disable no-console */
-const postcss = require('postcss');
-const path = require('path');
-const pkg = require('../package.json');
-const banner = `@name ${pkg.name} @version ${pkg.version} @license ${pkg.license}`;
-const getNow = () => Date.now();
-
-let startTime = getNow();
-
-/**
- * by default there is no way to print that file was written
- * this does that.
- */
-const printOutput = postcss.plugin('postcss-print-output', function(opts) {
-  opts = opts || {};
-
-  return function(root, results) {
-    const relativeFrom = path.relative(process.cwd(), results.opts.from);
-    const relativeTo = path.relative(process.cwd(), results.opts.to);
-
-    console.log(`${relativeFrom} -> ${relativeTo} in ${getNow() - startTime}ms`);
-  };
-});
-
-/**
- * A function to set the startTime of postcss so that
- * we can print the time taken in the output.
- */
-const setTime = postcss.plugin('postcss-set-time', function(opts) {
-  return function(root, results) {
-    startTime = getNow();
-  };
-});
+const generate = require('videojs-generate-postcss-config');
 
 module.exports = function(context) {
-  return {
-    plugins: [
-      // set the startTime so that we can print the end time
-      setTime(),
-
-      // inlines local file imports
-      require('postcss-import')(),
-
-      // allows you to use newer css features, by converting
-      // them into something browsers can support now.
-      // see https://preset-env.cssdb.org/features
-      // by default we use stage 3+
-      require('postcss-preset-env')({
-        browsers: pkg.browserslist,
-        stage: false,
-        features: {
-          // turn `var(xyz)` in the actual value
-          'custom-properties': {preserve: false, warnings: true},
-
-          // flatten nested rules
-          'nesting-rules': true
-        }
-      }),
-
-      // adds a banner to the top of the file
-      require('postcss-banner')({important: true, inline: true, banner}),
-
-      // add/remove vendor prefixes based on browser list
-      require('autoprefixer')(pkg.browserslist),
+  const result = generate({}, context);
 
-      // minify
-      require('cssnano')({
-        safe: true,
-        preset: ['default', {
-          autoprefixer: pkg.browserslist
-        }]
-      }),
+  // do custom stuff here
 
-      printOutput()
-    ]
-  };
+  return result;
 };

package.json

@@ -54,23 +54,19 @@
     "yeoman-test": "^1.7.2"
   },
   "optionalDependencies": {
-    "autoprefixer": "^9.0.0",
-    "cssnano": "^4.0.3",
     "global": "^4.3.2",
     "in-publish": "^2.0.0",
     "jsdoc": "^3.4.3",
     "karma": "^2.0.2",
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.1.2",
-    "postcss-banner": "^3.0.0",
     "postcss-cli": "^6.0.0",
-    "postcss-import": "^11.1.0",
-    "postcss-preset-env": "^5.1.0",
     "rollup": "^0.63.2",
     "sinon": "^5.1.0",
     "video.js": "^6 || ^7",
     "videojs-languages": "^1.0.0",
     "videojs-generate-karma-config": "~1.0.0",
+    "videojs-generate-postcss-config": "^1.0.0",
     "videojs-generate-rollup-config": "~1.0.0"
   }
 }