Use PostCSS for customizing the view. Fix #881.

README.md

@@ -279,12 +279,19 @@ Disable variable saving from web interface.
 <a name="option-customColors"></a>
 **customColors** (string, optional)
 
-Path to file that defines custom UI color overrides using SASS variables. See all possible variables [here](https://github.com/SC5/sc5-styleguide/blob/master/lib/app/sass/_styleguide_variables.scss).
-
-The directory of of customColors file is included to SASS `includePaths` so it is possible to `@import` also external stylesheets.
+Path to file that defines custom UI color overrides using PostCSS variables. See all possible variables [here](https://github.com/SC5/sc5-styleguide/blob/master/lib/app/css/_styleguide_variables.css).
 
 Internal styles could be overriden by defining new styles inside the `styleguide_custom_styles` mixin. This mixin is added to the end of the application stylesheet.
 
+You can define your own styles with
+
+```css
+@define-mixin styleguide_custom_styles {
+  /* Define your styles here */
+}
+```
+PostCSS configuration supports mixins, nesting, valiables, media quesries.
+
 <a name="option-parsers"></a>
 **parsers** (object, optional)
 

gulpfile.babel.js

@@ -9,9 +9,8 @@ var gulp = require('gulp'),
     runSequence = require('run-sequence'),
     toc = require('gulp-doctoc'),
     styleguide = require('./lib/styleguide'),
-    sass = require('gulp-sass'),
-    please = require('gulp-pleeease'),
-    neat = require('node-neat'),
+    postcss = require('gulp-postcss'),
+    rename = require('gulp-rename'),
     rimraf = require('gulp-rimraf'),
     distPath = 'lib/dist',
     fs = require('fs'),
@@ -44,9 +43,9 @@ gulp.task('bower', () => {
   return bower();
 });
 
-gulp.task('copy:sass', () => {
-  return gulp.src('lib/app/sass/**/*')
-    .pipe(gulp.dest(distPath + '/sass'));
+gulp.task('copy:css', () => {
+  return gulp.src('lib/app/css/**/*')
+    .pipe(gulp.dest(distPath + '/css'));
 });
 
 gulp.task('html', () => {
@@ -78,13 +77,16 @@ gulp.task('dev:doc', () => {
 });
 
 gulp.task('dev:generate', () => {
-  return gulp.src(['lib/app/sass/**/*.scss'])
+  return gulp.src(['lib/app/css/*.css'])
     .pipe(styleguide.generate({
       title: 'SC5 Styleguide',
       server: true,
       rootPath: outputPath,
       overviewPath: 'README.md',
-      styleVariables: 'lib/app/sass/_styleguide_variables.scss'
+      styleVariables: 'lib/app/css/_styleguide_variables.css',
+      parsers: {
+        css: 'postcss'
+      }
     }))
     .pipe(gulp.dest(outputPath));
 });
@@ -96,13 +98,21 @@ gulp.task('dev:applystyles', () => {
     process.exit(1);
     return 1;
   }
-  return gulp.src([distPath + '/sass/*.scss'])
-    .pipe(sass({
-        includePaths: neat.includePaths
-    }))
-    .pipe(please({
-        minifier: false
-    }))
+  return gulp.src([distPath + '/css/styleguide-app.css'])
+    .pipe(postcss([
+      require('postcss-partial-import'),
+      require('postcss-mixins'),
+      require('gulp-cssnext'),
+      require('postcss-advanced-variables'),
+      require('postcss-conditionals'),
+      require('postcss-color-function'),
+      require('postcss-color-alpha'),
+      require('postcss-nested'),
+      require('postcss-custom-media'),
+      require('autoprefixer'),
+      require('postcss-inline-comment')
+    ]))
+    .pipe(rename('styleguide-app.css'))
     .pipe(styleguide.applyStyles())
     .pipe(gulp.dest(outputPath));
 });
@@ -111,8 +121,8 @@ gulp.task('dev', ['dev:doc', 'dev:static', 'dev:applystyles' ], () => {
   // Do intial full build and create styleguide
   runSequence('build:dist', 'dev:generate');
 
-  gulp.watch('lib/app/sass/**/*.scss', () => {
-    runSequence('copy:sass', 'dev:applystyles', 'dev:generate');
+  gulp.watch('lib/app/css/**/*.css', () => {
+    runSequence('copy:css', 'dev:applystyles', 'dev:generate');
   });
   gulp.watch(['lib/app/js/**/*.js', 'lib/app/views/**/*', 'lib/app/index.html', '!lib/app/js/vendor/**/*.js'], () => {
     gulp.start('lint:js');
@@ -128,7 +138,7 @@ gulp.task('dev', ['dev:doc', 'dev:static', 'dev:applystyles' ], () => {
   gulp.watch('lib/styleguide.js', ['dev:generate']);
 });
 
-gulp.task('build:dist', ['copy:sass', 'js:app', 'js:vendor', 'html', 'assets']);
+gulp.task('build:dist', ['copy:css', 'js:app', 'js:vendor', 'html', 'assets']);
 
 gulp.task('build', ['clean:dist'], () => {
   runSequence('build:dist');

lib/app/css/_styleguide_custom_variables.css

@@ -0,0 +1,7 @@
+/* This file will be overwritten by styleguide:generate task if user specifies custom UI colors */
+/* This file should always exists since it is importendin app.scss */
+
+@define-mixin styleguide_custom_styles {
+  /* User can re-define this mixin to create custom style overrides */
+  /* This mixin is included in the end of the application stylesheet */
+}

lib/app/css/_styleguide_mixins.css

@@ -0,0 +1,23 @@
+@import '_styleguide_variables.css';
+/* TODO: it does not understand viribales from imports */
+/* styleguide:ignore:start */
+
+@define-mixin reset {
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+@custom-media --mobile (screen and (max-width: 768px));
+
+/* We need to denite fonts separatedly to every element since we do not want to pollute previews */
+/* with inherited styles */
+@define-mixin default-font {
+  font-family: $primary-font;
+  font-size: 14px;
+  line-height: 1.45;
+  color: #222;
+  font-weight: 400;
+}
+/* styleguide:ignore:end */

lib/app/css/_styleguide_variables.css

@@ -0,0 +1,113 @@
+/* Main color definitions */
+$primary-color: #1C3849 !default;
+$secondary-color: #E4E4E4 !default;
+$tertiary-color: #F7FCF1 !default;
+
+/* Button and link colors */
+$primary-action-color: #EB7F00 !default;
+$default-action-color: #1695A3 !default;
+$action-color-change: 5% !default;
+
+/* Navigation */
+$header-text-color: #FFFFFF !default;
+$navigation-arrows-visible: false;
+$header-background-color: $primary-color !default;
+$nav-background-color: $primary-color !default;
+
+$nav-button-color: $primary-color !default;
+$nav-button-text-color: color($default-action-color blackness(10%)) !default;
+$nav-button-ref-color: $secondary-color !default;
+$active-nav-button-color: $default-action-color !default;
+$active-nav-button-text-color: #FFFFFF !default;
+$active-nav-button-ref-color: #FFFFFF !default;
+
+$nav-item-color: $secondary-color !default;
+$nav-item-text-color: $default-action-color !default;
+$nav-item-ref-color: color($default-action-color blackness(10%)) !default;
+
+/* Header */
+$section-header-color: $primary-color !default;
+$section-header-ref-color: #FFFFFF !default;
+$section-header-text-color: $secondary-color !default;
+$section-header-source-text-color: rgba($secondary-color, 0.6) !default;
+$active-section-header-color: color($primary-color lightness(17%));
+$active-section-header-ref-color: $section-header-ref-color !default;
+$active-section-header-text-color: $section-header-text-color !default;
+$active-section-header-source-text-color: rgba($primary-color, 0.6) !default;
+$main-section-header-source-text-color: $secondary-color !default;
+
+/* Fonts */
+$primary-font: Helvetica, Arial, sans-serif !default;
+$secondary-font: Helvetica, Arial, sans-serif !default;
+
+$min-content-margin: 13px !default;
+$content-margin: 30px !default;
+
+/* Misc */
+$designer-tool-width: 30% !default;
+$designer-tool-width-mobile: 90% !default;
+$header-height: 70px !default;
+$menu-height: 40px !default;
+$sub-menu-height: 30px !default;
+$wrapper-vertical-padding: 60px !default;
+
+$content-max-width: 68em !default;
+
+/* Temporary declaration of variables in native CSS syntax */
+:root {
+/* Main color definitions */
+--primary-color: #1C3849 !default;
+--secondary-color: #E4E4E4 !default;
+--tertiary-color: #F7FCF1 !default;
+
+/* Button and link colors */
+--primary-action-color: #EB7F00 !default;
+--default-action-color: #1695A3 !default;
+--action-color-change: 5% !default;
+
+/* Navigation */
+--header-text-color: #FFFFFF !default;
+--navigation-arrows-visible: false;
+--header-background-color: $primary-color !default;
+--nav-background-color: $primary-color !default;
+
+--nav-button-color: $primary-color !default;
+--nav-button-text-color: color($default-action-color blackness(10%)) !default;
+--nav-button-ref-color: $secondary-color !default;
+--active-nav-button-color: $default-action-color !default;
+--active-nav-button-text-color: #FFFFFF !default;
+--active-nav-button-ref-color: #FFFFFF !default;
+
+--nav-item-color: $secondary-color !default;
+--nav-item-text-color: $default-action-color !default;
+--nav-item-ref-color: color($default-action-color blackness(10%)) !default;
+
+/* Header */
+--section-header-color: $primary-color !default;
+--section-header-ref-color: #FFFFFF !default;
+--section-header-text-color: $secondary-color !default;
+--section-header-source-text-color: rgba($secondary-color, 0.6) !default;
+--active-section-header-color: color($primary-color lightness(17%));
+--active-section-header-ref-color: $section-header-ref-color !default;
+--active-section-header-text-color: $section-header-text-color !default;
+--active-section-header-source-text-color: rgba($primary-color, 0.6) !default;
+--main-section-header-source-text-color: $secondary-color !default;
+
+/* Fonts */
+--primary-font: Helvetica, Arial, sans-serif !default;
+--secondary-font: Helvetica, Arial, sans-serif !default;
+
+--min-content-margin: 13px !default;
+--content-margin: 30px !default;
+
+/* Misc */
+--designer-tool-width: 30% !default;
+--designer-tool-width-mobile: 90% !default;
+--header-height: 70px !default;
+--menu-height: 40px !default;
+--sub-menu-height: 30px !default;
+--wrapper-vertical-padding: 60px !default;
+
+--content-max-width: 68em !default;
+}
+