Merge lp:~deadlight/canonical-identity-provider/add-vanilla-and-sass into lp:~deadlight/canonical-identity-provider/vanilla

[Karl Williams]

Updated the gulp file to build sass.
Added gulp-sass as a dependency along with vanilla-framework itself.

To allow development alongside the existing styling, the existing css is still build as well as the new *.scss files, which use the vanilla-framework dependency.

----

QA

* Run gulp: ./node_modules/gulp/bin/gulp.js
* make start-db run
* Ensure that the frontend looks the same at [host]:8000
* See that the vanilla css has been generated at [host]:8000/assets/vanilla-css/styles.css

[Anthony Dillon (ya-bo-ng)]

The CSS has grown some so we may want to consider cherry-picking components in the future.

Few small suggests in the code

review: Needs Fixing

[Anthony Dillon (ya-bo-ng)]

Also do we want to check in the CSS here? Shouldn't that be included in a build step.

[Karl Williams (deadlight)]

I'm not checking in the Vanilla-generated CSS, for some reason the CSS file for the existing content has changed. I'll just remove it from this build since I should be making no changes to existing styling.

Re: cherry-picking - we can do an audit of used components at the end of the project and just include css for what we're using.

[lp:~deadlight/canonical-identity-provider/add-vanilla-and-sass]

1685. By Karl Williams on 2019-07-16

Add node modules directory to the includes path for sass

1686. By Karl Williams on 2019-07-16

Revert to pre-vanilla

1687. By Karl Williams on 2019-07-16

Add short path for vanilla and remove unused css

[Anthony Dillon (ya-bo-ng)]

A few points in the code.

review: Needs Fixing

[lp:~deadlight/canonical-identity-provider/add-vanilla-and-sass]

1688. By Karl Williams on 2019-07-17

Rename param variables for sass build and use autoprefixer

[Karl Williams (deadlight)]

Ant: This commit cleans up the issues you noted.

[Anthony Dillon (ya-bo-ng)]

LGTM +1

review: Approve

=== modified file 'gulpfile.js'
--- gulpfile.js	2015-12-09 19:56:22 +0000
+++ gulpfile.js	2019-07-17 10:57:06 +0000
@@ -4,27 +4,48 @@
 var del = require('del');
 var gulp = require('gulp');
 var prefix = require('gulp-autoprefixer');
+var sass = require('gulp-sass');
 
 var paths = {
-    css: {
-        src: ['./src/identityprovider/static_src/css/*.css'],
-        dest: './src/identityprovider/static/css/'
-    }
+  css: {
+    src: ['./src/identityprovider/static_src/css/*.css'],
+    dest: './src/identityprovider/static/css/'
+  },
+  vanillaCss: {
+    nodeModules: './node_modules/',
+    src: './src/identityprovider/static_src/scss/*.scss',
+    dest: './src/identityprovider/static/vanilla-css/'
+  }
 };
 
 
-gulp.task('default', ['watch', 'css']);
+gulp.task('default', ['watch', 'css', 'sass']);
 
 gulp.task('watch', function () {
-    var watcher = gulp.watch(paths.css.src, ['css']);
+  gulp.watch(paths.css.src, ['css']);
+  gulp.watch(paths.vanillaCss.sass, ['sass']);
 });
 
 gulp.task('clean', function(cb) {
-    del([paths.css.dest], cb);
+  del([paths.css.dest], cb);
+});
+
+
+gulp.task('vanilla-clean', function(cb) {
+  del([paths.vanillaCss.dest], cb);
+});
+
+gulp.task('sass', ['vanilla-clean'], function() {
+  return gulp.src(paths.vanillaCss.src)
+    .pipe(sass({
+      includePaths : [paths.vanillaCss.nodeModules]
+    }).on('error', sass.logError))
+    .pipe(prefix())
+    .pipe(gulp.dest(paths.vanillaCss.dest));
 });
 
 gulp.task('css', ['clean'], function() {
-    gulp.src(paths.css.src)
+  gulp.src(paths.css.src)
     .pipe(prefix(["last 2 versions"])) // https://github.com/ai/autoprefixer
     // disabled lint until CSS is refactored
     // .pipe(csslint('csslintrc.json'))

=== modified file 'package.json' (properties changed: -x to +x)
--- package.json	2018-12-13 16:31:16 +0000
+++ package.json	2019-07-17 10:57:06 +0000
@@ -2,10 +2,12 @@
   "private": true,
   "devDependencies": {
     "del": "~0.1.1",
-    "gulp": "~3.8.7",
+    "gulp": "^3.8.11",
+    "gulp-autoprefixer": "0.0.8",
     "gulp-concat": "~2.3.4",
     "gulp-csslint": "~0.1.5",
     "gulp-csso": "~0.2.9",
-    "gulp-autoprefixer": "0.0.8"
+    "gulp-sass": "4.0.2",
+    "vanilla-framework": "2.0.1"
   }
 }

=== added directory 'src/identityprovider/static_src/scss'
=== added file 'src/identityprovider/static_src/scss/styles.scss'
--- src/identityprovider/static_src/scss/styles.scss	1970-01-01 00:00:00 +0000
+++ src/identityprovider/static_src/scss/styles.scss	2019-07-17 10:57:06 +0000
@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+$color-navigation-background: #363636;
+
+@import 'vanilla-framework/scss/build';
+
+.p-cip-hero {
+  background-image: linear-gradient(212deg, #E95420 0%, #C44631 6%, #A33940 12%, #8B304A 18%, #7C2B51 24%, #772953 29%, #55163B 51%, #370626 75%, #2C001E 100%);
+}