The hack of the hackity hack

Gulpfile.js

const gulp = require('gulp');
const plumber = require('gulp-plumber');

// css
const postcss = require('gulp-postcss');

// HACK
const concat = require('gulp-concat')
const inject = require('gulp-inject-string')

// ENV
const env = process.env.NODE_ENV || 'development';
const prod = env === 'production';

const paths = {
  css: ['components/**/*.scss'],
}

gulp.task('css', () => {
  let plugins = [
    require('precss')({}), // eslint-disable-line
    require('autoprefixer')({}), // eslint-disable-line
  ];

  if (prod) {
    plugins = [
      require('cssnano'), // eslint-disable-line
    ].concat(plugins);
  }

  const header = `// Automatically created
// until next.js gets CSS support
// https://github.com/zeit/next.js/issues/544
export const Styles = () => (
  <style>{\``
  const footer = `\`}</style>)

  export default Styles
  `

  return gulp.src(paths.css)
    .pipe(plumber())
    .pipe(postcss(plugins))
    .pipe(concat('Styles.js'))
    .pipe(inject.prepend(header))
    .pipe(inject.append(footer))
    .pipe(gulp.dest('components'));
});

gulp.task('dev', () => {
  gulp.watch([paths.css], ['css']);
});