diff --git a/package.json b/package.json index d2fe2a9..5fe484d 100644 --- a/package.json +++ b/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" } diff --git a/scripts/build-scss.sh b/scripts/build-scss.sh index c4ddb05..1d867b2 100644 --- a/scripts/build-scss.sh +++ b/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 diff --git a/theme/static/src/scss/index.scss b/theme/static/src/scss/index.scss index 48fc106..77d5884 100644 --- a/theme/static/src/scss/index.scss +++ b/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";