🎨 Myth => PostCSS (#537)

ghost/admin/ember-cli-build.js

@@ -8,7 +8,6 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app'),
     cleanCSS = require('broccoli-clean-css'),
     environment = EmberApp.env(),
     isProduction = environment === 'production',
-    mythCompress = isProduction || environment === 'test',
     disabled = {enabled: false},
     assetLocation, codemirrorAssets;
 
@@ -62,29 +61,53 @@ codemirrorAssets = function () {
     };
 };
 
+function postcssPlugins() {
+    var plugins = [{
+        module: require('postcss-easy-import')
+    }, {
+        module: require('postcss-custom-properties')
+    }, {
+        module: require('postcss-color-function')
+    }, {
+        module: require('autoprefixer'),
+        options: {
+            browsers: ['last 2 versions']
+        }
+    }];
+
+    if (isProduction) {
+        plugins.push({
+            module: require('cssnano')
+        });
+    }
+
+    return plugins;
+}
+
 module.exports = function (defaults) {
     var app = new EmberApp(defaults, {
-        "ember-cli-babel": {
+        'ember-cli-babel': {
             optional: ['es6.spec.symbols'],
             includePolyfill: true
         },
         outputPaths: {
             app: {
-                js: assetLocation('ghost.js')
+                js: assetLocation('ghost.js'),
+                css: {
+                    app: assetLocation('ghost.css'),
+                    'app-dark': assetLocation('ghost-dark.css')
+                }
             },
             vendor: {
                 js:  assetLocation('vendor.js'),
                 css: assetLocation('vendor.css')
             }
         },
-        mythOptions: {
-            source: './app/styles/app.css',
-            inputFile: 'app.css',
-            browsers: 'last 2 versions',
-            // @TODO: enable sourcemaps for development without including them in the release
-            sourcemap: false,
-            compress: mythCompress,
-            outputFile: isProduction ? 'ghost.min.css' : 'ghost.css'
+        postcssOptions: {
+            compile: {
+                enabled: true,
+                plugins: postcssPlugins()
+            }
         },
         fingerprint: disabled,
         nodeAssets: {
@@ -136,8 +159,6 @@ module.exports = function (defaults) {
     app.import('bower_components/google-caja/html-css-sanitizer-bundle.js');
     app.import('bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.js');
 
-
-
     if (app.env === 'test') {
         app.import(app.bowerDirectory + '/jquery.simulate.drag-sortable/jquery.simulate.drag-sortable.js', {type: 'test'});
     }

ghost/admin/package.json

@@ -26,6 +26,7 @@
     "node": "~0.12.0 || ^4.2.0"
   },
   "devDependencies": {
+    "autoprefixer": "6.7.3",
     "blueimp-md5": "2.6.0",
     "bower": "1.8.0",
     "broccoli-asset-rev": "2.5.0",
@@ -37,6 +38,7 @@
     "codemirror": "5.23.0",
     "coveralls": "2.11.16",
     "csscomb": "3.1.8",
+    "cssnano": "3.10.0",
     "ember-ajax": "2.5.4",
     "ember-cli": "2.11.0",
     "ember-cli-active-link-wrapper": "0.3.2",
@@ -54,6 +56,7 @@
     "ember-cli-mirage": "0.2.5",
     "ember-cli-mocha": "0.13.2",
     "ember-cli-node-assets": "0.1.6",
+    "ember-cli-postcss": "3.1.1",
     "ember-cli-pretender": "1.0.1",
     "ember-cli-selectize": "0.5.12",
     "ember-cli-shims": "1.0.2",
@@ -69,7 +72,6 @@
     "ember-light-table": "1.8.2",
     "ember-load": "0.0.11",
     "ember-load-initializers": "0.6.3",
-    "ember-myth": "0.1.1",
     "ember-one-way-controls": "2.0.0",
     "ember-power-select": "1.4.3",
     "ember-resolver": "2.1.1",
@@ -97,6 +99,9 @@
     "moment": "2.17.1",
     "moment-timezone": "0.5.11",
     "password-generator": "2.1.0",
+    "postcss-color-function": "3.0.0",
+    "postcss-custom-properties": "5.0.2",
+    "postcss-easy-import": "2.0.0",
     "top-gh-contribs": "2.0.4",
     "torii": "0.8.1",
     "walk-sync": "0.3.1"