feat: postcss support

generators/app/constants.js

@@ -50,6 +50,7 @@ module.exports = {
 
   PROMPT_DEFAULTS: {
     docs: false,
+    css: false,
     husky: 'lint',
     lang: false,
     license: LICENSE_DEFAULT,

generators/app/index.js

@@ -143,6 +143,11 @@ module.exports = yeoman.generators.Base.extend({
       message: 'Choose a type for your plugin',
       default: defaults.pluginType,
       choices: constants.PLUGIN_TYPE_CHOICES
+    }, {
+      type: 'confirm',
+      name: 'css',
+      message: 'Do you want to use css tooling?',
+      default: defaults.css
     }, {
       type: 'confirm',
       name: 'docs',
@@ -212,7 +217,7 @@ module.exports = yeoman.generators.Base.extend({
       '_.gitignore',
       '_.npmignore',
       '_.nvmrc',
-      'scripts/_banner.ejs',
+      'scripts/_banner.js',
       'scripts/_server.js',
       'scripts/_version.js'
     ];
@@ -285,6 +290,11 @@ module.exports = yeoman.generators.Base.extend({
     if (this.context.lang) {
       this._filesToCopy.push('lang/_en.json');
     }
+
+    if (this.context.css) {
+      this._templatesToCopy.push('src/_plugin.css');
+      this._templatesToCopy.push('scripts/_postcss.config.js');
+    }
   },
 
   /**

generators/app/package-json.js

@@ -253,6 +253,27 @@ const packageJSON = (current, context) => {
     _.assign(result.devDependencies, getGeneratorVersions(['doctoc', 'jsdoc']));
   }
 
+  if (context.css) {
+
+    _.assign(result.scripts, {
+      'build:css': 'postcss -o dist/videojs-test.css --config scripts/postcss.config.js src/plugin.css',
+      'watch:css': 'npm run build:css -- -w'
+    });
+
+    if (context.husky !== 'none') {
+      result.scripts.precommit = 'npm run docs:toc && git add README.md';
+    }
+
+    _.assign(result.devDependencies, getGeneratorVersions([
+      'postcss-cli',
+      'postcss-banner',
+      'postcss-import',
+      'autoprefixer',
+      'cssnano'
+    ]));
+
+  }
+
   // Include language support. Note that `mkdirs` does not need to change
   // here because the videojs-languages package will create the destination
   // directory if needed.

generators/app/templates/scripts/_banner.js

@@ -0,0 +1,8 @@
+const pkg = require('../package.json');
+
+const bannerString =  `@name ${pkg.name} @version ${pkg.version} @copyright ${pkg.author} @license ${pkg.license}`;
+
+module.exports = {
+  string: bannerString,
+  comment: `/*! ${bannerString} */`
+};

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

@@ -0,0 +1,39 @@
+const banner = require('./banner');
+const postcss = require('postcss');
+const path = require('path');
+const fs = require('fs');
+
+const browserList = ['defaults', 'ie 11'];
+
+/**
+ * A postcss plugin that should be run before minification plugins.
+ * it will write to the `to` from the command line with the current
+ * output. Then it will change the extension of the `to` from
+ * whatever it is to `.min.css`
+ */
+const unminifiedOutput = postcss.plugin('postcss-unminified-output', function(opts) {
+  opts = opts || {};
+
+  return function(root, result) {
+    fs.writeFileSync(result.opts.to, root.toString());
+
+    result.opts.to = result.opts.to.replace(path.extname(result.opts.to), '.min.css');
+  };
+});
+
+module.exports = function(context) {
+  return {
+    plugins: [
+      require('postcss-banner')({important: true, banner}),
+      require('postcss-import')(),
+      require('autoprefixer')(browserList),
+      unminifiedOutput(),
+      require('cssnano')({
+        safe: true,
+        preset: ['default', {
+          autoprefixer: browserList
+        }]
+      })
+    ]
+  };
+};

generators/app/templates/src/_plugin.css

@@ -0,0 +1,15 @@
+/**
+ * css for <%= pluginName %>
+ * postcss allows you to
+ * - @import relative files, they will be inlined during build
+ * - not have to worry about prefixes, as the last 2 versions of all major browsers
+ *   and ie 11 will be automatically prefixed
+ */
+
+.video-js {
+
+  // This class is added to the video.js element by the plugin by default.
+  &.<%= className %> {
+    display: block;
+  }
+}

generators/app/templates/test/_karma.conf.js

@@ -20,6 +20,7 @@ module.exports = function(config) {
     frameworks: ['qunit', 'detectBrowsers'],
     files: [
       'node_modules/video.js/dist/video-js.css',
+      <% if (css) { %><link href="dist/<%= pluginName %>.css" rel="stylesheet"><% } %>
       'node_modules/sinon/pkg/sinon.js',
       'node_modules/video.js/dist/video.js',
       'test/dist/bundle.js'

package.json

@@ -51,10 +51,12 @@
     "videojs-standard": "^6.0.0"
   },
   "optionalDependencies": {
+    "autoprefixer": "^8.6.0",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-preset-es2015": "^6.24.1",
     "bannerize": "^1.1.3",
+    "cssnano": "^3.10.0",
     "global": "^4.3.2",
     "in-publish": "^2.0.0",
     "jsdoc": "^3.4.3",
@@ -69,6 +71,9 @@
     "node-static": "^0.7.10",
     "npm-run-all": "^4.1.2",
     "portscanner": "^2.1.1",
+    "postcss-banner": "^3.0.0",
+    "postcss-cli": "^5.0.0",
+    "postcss-import": "^11.1.0",
     "qunit": "^2.5.1",
     "rimraf": "^2.6.2",
     "rollup": "^0.53.4",