feat: add postcss features to make migrating sass easier (#186)

generators/app/package-json.js

@@ -231,7 +231,7 @@ const packageJSON = (current, context) => {
 
   if (context.css) {
     _.assign(result.scripts, {
-      'build:css': scriptify('postcss --verbose -o dist/%s.css --config scripts/postcss.config.js src/plugin.css'),
+      'build:css': scriptify('postcss -o dist/%s.css --config scripts/postcss.config.js src/plugin.css'),
       'watch:css': 'npm run build:css -- -w'
     });
 

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

@@ -3,6 +3,9 @@ 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
@@ -15,13 +18,26 @@ const printOutput = postcss.plugin('postcss-print-output', function(opts) {
     const relativeFrom = path.relative(process.cwd(), results.opts.from);
     const relativeTo = path.relative(process.cwd(), results.opts.to);
 
-    console.log(`${relativeFrom} -> ${relativeTo}`);
+    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();
   };
 });
 
 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')(),
 
@@ -31,9 +47,12 @@ module.exports = function(context) {
       // by default we use stage 3+
       require('postcss-preset-env')({
         browsers: pkg.browserslist,
-        stage: 3,
+        stage: false,
         features: {
-          'custom-environment-variables': true,
+          // turn `var(xyz)` in the actual value
+          'custom-properties': {preserve: false, warnings: true},
+
+          // flatten nested rules
           'nesting-rules': true
         }
       }),

generators/app/templates/src/_plugin.css

@@ -1,15 +1,40 @@
 /**
  * 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
+ * With the default plugins for postcss you can
+ * - @import files, they will be inlined during build
+ * - not worry about browser prefixes, they will be handled
+ * - nest selectors. This follows the css specification that is
+ *   currently out on some browsers. See https://tabatkins.github.io/specs/css-nesting/
+ * - custom properties (aka variables) via the var(--var-name) syntax. See
+ *   https://www.w3.org/TR/css-variables-1/
  */
 
+
+/* Note: all vars must be defined here, there are no "local" vars */
+:root {
+  --main-color: red;
+  --base-font-size: 9;
+  --font-size: 7;
+}
+
 .video-js {
 
-  // This class is added to the video.js element by the plugin by default.
   &.<%= className %> {
+    /* This class is added to the video.js element by the plugin by default. */
     display: block;
+
+    & .remove-me, & .remove-me-too, &.finally-remove-me {
+      /* examples of postcss syntax, you probably want to remove this */
+
+      color: var(--main-color);
+
+      /**
+       * Note that you have to use calc and multiply by a value with a unit
+       * prepending the unit like `var(--base-font-size)px` or
+       * `calc(10 * var(--base-font-size)em` will NOT work!
+       */
+      font-size: calc(var(--font-size) * 8 * var(--base-font-size) * 1px);
+
+    }
   }
 }