Switch from normalize.css to normalize.scss

[pdehaan]

I think we used node-normalize-scss with success on a different project.

Plus it'd let us avoid the weird file rename steps to be able to @import the file into our other Sass files.

gulp.js Usage

Using the gulp-sass plugin.

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('path/to/input.scss')
    .pipe(sass({
      // includePaths: require('node-normalize-scss').with('other/path', 'another/path')
      // - or -
      includePaths: require('node-normalize-scss').includePaths
    }))
    .pipe(gulp.dest('path/to/output.css'));
});

— via https://github.com/ranjandatta/node-normalize-scss#gulpjs-usage

/cc @johngruen

[pdehaan]

Actually, to take this a step further, we could use something like gulp-base64 to inject the 2 images into the tabzilla.css file, and then do away with the whole "vendor" steps completely.

gulp.task('tabzilla-base64', function () {
  return gulp.src(`${NODE_MODULES_PATH}mozilla-tabzilla/css/tabzilla.css`)
    .pipe(base64())
    .pipe(rename('_tabzilla.scss'))
    .pipe(gulp.dest(`${NODE_MODULES_PATH}mozilla-tabzilla/css/`));
});

Although this would increase the size of the CSS from 801B to 5.2K.

Then we can create a _vendor.scss file with something like the following:

@import 'normalize';
@import 'css/tabzilla';

I can create a PR if this seems useful.

[pdehaan]

Me thinks this is done via b95efeb. Closing.