Migrate from css to scss + autoprefixer

gulpfile.js

@@ -19,6 +19,8 @@ var manifest = require('./app/manifest.json')
 var gulpif = require('gulp-if')
 var replace = require('gulp-replace')
 var mkdirp = require('mkdirp')
+var sass = require('gulp-sass')
+var autoprefixer = require('gulp-autoprefixer')
 
 var disableDebugTools = gutil.env.disableDebugTools
 var debug = gutil.env.debug
@@ -189,6 +191,28 @@ jsFiles.forEach((jsFile) => {
 
 gulp.task('dev:js', gulp.parallel(...jsDevStrings))
 gulp.task('build:js',  gulp.parallel(...jsBuildStrings))
+gulp.task('build:scss', function () {
+  return gulp.src('ui/app/css/index.scss')
+    .pipe(sourcemaps.init())
+    .pipe(sass().on('error', sass.logError))
+    .pipe(sourcemaps.write())
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('ui/app/css/output'));
+});
+gulp.task('watch:scss', function () {
+  return gulp.src('ui/app/css/index.scss')
+    .pipe(watch('ui/app/css/**/*.scss'))
+    .pipe(sourcemaps.init())
+    .pipe(sass().on('error', sass.logError))
+    .pipe(sourcemaps.write())
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('ui/app/css/output'));
+});
+
+gulp.task('copy:watch', function(){
+  gulp.watch(['./app/{_locales,images}/*', './app/scripts/chromereload.js', './app/*.{html,json}'], gulp.series('copy'))
+})
+
 
 // disc bundle analyzer tasks
 
@@ -215,9 +239,9 @@ gulp.task('zip', gulp.parallel('zip:chrome', 'zip:firefox', 'zip:edge', 'zip:ope
 
 // high level tasks
 
-gulp.task('dev', gulp.series('dev:js', 'copy', gulp.parallel('copy:watch', 'dev:reload')))
+gulp.task('dev', gulp.series('build:scss', 'dev:js', 'copy', gulp.parallel('watch:scss', 'copy:watch', 'dev:reload')))
 
-gulp.task('build', gulp.series('clean', gulp.parallel('build:js', 'copy')))
+gulp.task('build', gulp.series('clean', 'build:scss', gulp.parallel('build:js', 'copy')))
 gulp.task('dist', gulp.series('build', 'zip'))
 
 // task generators

package.json

@@ -81,7 +81,9 @@
     "extension-link-enabler": "^1.0.0",
     "extensionizer": "^1.0.0",
     "fast-levenshtein": "^2.0.6",
+    "gulp-autoprefixer": "^4.0.0",
     "gulp-eslint": "^2.0.0",
+    "gulp-sass": "^3.1.0",
     "hat": "0.0.3",
     "idb-global": "^1.0.0",
     "identicon.js": "^1.2.1",

ui/app/css/index.scss

@@ -9,6 +9,12 @@ borders/font/any gray: #4A4A4A
 application specific styles
 */
 
+@import './fonts.scss';
+@import './reset.scss';
+@import './lib.scss';
+@import './transitions.scss';
+
+
 * {
   box-sizing: border-box;
 }
@@ -832,7 +838,7 @@ div.message-container > div:first-child {
     margin-top: 35px;
     // position: relative;
     width: 100%;
-    height: 100%
+    height: 100%;
   }
 
   button.btn-clear {

ui/css.js

@@ -4,11 +4,11 @@ const path = require('path')
 module.exports = bundleCss
 
 var cssFiles = {
-  'fonts.css': fs.readFileSync(path.join(__dirname, '/app/css/fonts.css'), 'utf8'),
-  'reset.css': fs.readFileSync(path.join(__dirname, '/app/css/reset.css'), 'utf8'),
-  'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'),
-  'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'),
-  'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'),
+  // 'fonts.css': fs.readFileSync(path.join(__dirname, '/app/css/fonts.css'), 'utf8'),
+  // 'reset.css': fs.readFileSync(path.join(__dirname, '/app/css/reset.css'), 'utf8'),
+  // 'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'),
+  'index.css': fs.readFileSync(path.join(__dirname, '/app/css/output/index.css'), 'utf8'),
+  // 'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'),
   'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'),
   'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'),
 }