Build SCSS logically

package.json

@@ -25,6 +25,7 @@
     "underscore": "=1.8.3"
   },
   "devDependencies": {
+    "autoprefixer": "=6.3.6",
     "babel-preset-es2015": "=6.1.18",
     "babel-preset-react": "=6.1.18",
     "babelify": "=7.3.0",
@@ -35,6 +36,7 @@
     "eslint-plugin-react": "=3.4.2",
     "markdown-spellcheck": "=0.10.0",
     "node-sass": "=3.7.0",
+    "postcss-cli": "=2.5.2",
     "sass-lint": "=1.7.0",
     "uglify-js": "=2.6.2"
   }

scripts/build-scss.sh

@@ -2,12 +2,19 @@
 
 set -e
 
-mkdir -p theme/static/src/scss/css
-
-# scss can't import css, so copy them into src dir and change the extension!
-cp node_modules/animate.css/animate.css theme/static/src/scss/css/animate.scss
+if [[ $BUILD_PRODUCTION ]]
+then
+  echo ">>> WARNING: Building in Production Mode!"
+fi
 
+echo ">> Building SCSS..."
 node-sass theme/static/src/scss/index.scss theme/static/build/css/index.css --source-map-embed
 
-# Cleanup
-rm -rf theme/static/src/scss/css
+echo ">> Post-Processing..."
+postcss -u autoprefixer -o theme/static/build/css/index.css theme/static/build/css/index.css
+
+if [[ $BUILD_PRODUCTION ]]
+then
+  echo ">> Compressing CSS..."
+  cleancss -d --s0 -o theme/static/build/css/index.css theme/static/build/css/index.css
+fi

theme/static/src/scss/index.scss

@@ -5,19 +5,21 @@
 
 /* @end Fonts */
 
+
 /* @group Libraries */
 
 @import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";
-@import "css/animate";
+@import "node_modules/animate.css/animate";
 
 /* @end Libraries */
 
 
+/* @group Other Imports */
+
 @import "variables";
 @import "creative/creative";
 
-/* @group Other Imports */
-
 /* @end Other Imports */
 
+
 @import "homepage";