Bug 19474: Convert staff client CSS to SCSS

This patch converts staff-global.css to Sass, using SCSS syntax. This
changes the build process for Koha to include installation and execution
of yarn to install npm dependencies and run SCSS -> CSS conversion.

To test, apply the patch and run the following:

$ sudo apt-get install nodejs npm [not necessary in kohadevbox]
$ sudo npm install -g yarn
$ yarn install
$ yarn build

Clear your browser cache if necessary and confirm that CSS styling
throughout the staff client looks correct.

The "yarn build" command triggers a gulp process which compiles SCSS to
CSS, adds automatic vendor-prefixing, and minifies the resulting CSS
file.

There is also a "yarn css" command available which might be used by
developers who are making changes to SCSS. This command does two things
differently:

1. Adds .css.map files which aid CSS debugging using in-browser
   inspector tools.
2. Compiles staff-global.css without minification. It can be useful to
   see unminified CSS during development, especially to see how SCSS
   compiles.

This patch adds a configuration file for sass-lint, .sass-lint.yml.
Currently this configuration is not used during the build process but
can be used in a code editor which supports linting.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

.gitignore

@@ -2,3 +2,5 @@
 /blib/
 /Makefile
 /pm_to_blib
+node_modules/
+koha-tmpl/intranet-tmpl/prog/css/maps/

.sass-lint.yml

@@ -0,0 +1,101 @@
+options:
+  formatter: stylish
+files:
+  include: '**/*.scss'
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 1
+  no-color-literals: 0
+  no-combinators: 0
+  no-css-comments: 0
+  no-debug: 1
+  no-disallowed-properties: 0
+  no-duplicate-properties: 1
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 1
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-universal-selectors: 0
+  no-url-domains: 1
+  no-url-protocols: 1
+  no-vendor-prefixes: 1
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 1
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+
+  # Name Formats
+  class-name-format: 0
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  attribute-quotes: 1
+  bem-depth: 0
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 1
+  empty-args: 1
+  hex-length: 0
+  hex-notation: 0
+  indentation:
+    - 1
+    - size: 4
+  leading-zero: 1
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth:
+  - 1
+  - max-depth: 4
+  property-sort-order: 1
+  pseudo-element: 1
+  quotes:
+    - 1
+    - style: double
+  shorthand-values: 0
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 1
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 0
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1

gulpfile.js

@@ -0,0 +1,53 @@
+/* eslint-env node */
+/* eslint no-console:"off" */
+
+let gulp;
+
+try {
+    gulp = require( "gulp" );
+} catch(e) {
+    console.error("You are missing required Node modules; run `npm install`.");
+    process.exit(1);
+}
+
+const gutil = require( "gulp-util" );
+const sass = require("gulp-sass");
+const cssnano = require("gulp-cssnano");
+const sourcemaps = require('gulp-sourcemaps');
+const autoprefixer = require('gulp-autoprefixer');
+
+const STAFF_JS_BASE = "koha-tmpl/intranet-tmpl/prog/js";
+const STAFF_CSS_BASE = "koha-tmpl/intranet-tmpl/prog/css";
+const OPAC_JS_BASE = "koha-tmpl/opac-tmpl/bootstrap/js";
+const OPAC_CSS_BASE = "koha-tmpl/opac-tmpl/bootstrap/css";
+
+var sassOptions = {
+    errLogToConsole: true,
+    precision: 3
+}
+
+gulp.task( "default", ['watch'] );
+
+// CSS processing for development
+gulp.task('css', function() {
+    return gulp.src( STAFF_CSS_BASE + "/src/**/*.scss" )
+      .pipe(sourcemaps.init())
+      .pipe(sass( sassOptions ).on('error', sass.logError))
+      .pipe(autoprefixer())
+      .pipe(sourcemaps.write('./maps'))
+      .pipe(gulp.dest( STAFF_CSS_BASE ));
+});
+
+// CSS processing for production
+
+gulp.task('build', function() {
+    return gulp.src( STAFF_CSS_BASE + "/src/**/*.scss" )
+      .pipe(sass( sassOptions ).on('error', sass.logError))
+      .pipe(autoprefixer())
+      .pipe(cssnano())
+      .pipe(gulp.dest( STAFF_CSS_BASE ));
+});
+
+gulp.task('watch', function(){
+    gulp.watch( STAFF_CSS_BASE + "/src/**/*.scss", ['css'] );
+});

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "koha",
+  "description": "Koha is distributed under the GNU GPL version 3 or later.",
+  "main": "gulpfile.js",
+  "directories": {
+    "doc": "docs",
+    "test": "test"
+  },
+  "dependencies": {
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-cssnano": "^2.1.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.1",
+    "gulp-util": "^3.0.8"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "build": "node_modules/.bin/gulp build",
+    "css": "node_modules/.bin/gulp css",
+    "watch": "node_modules/.bin/gulp watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://git.koha-community.org/koha.git"
+  },
+  "author": "",
+  "license": "GPL-3.0"
+}