Proposed NextCSS structure

README.md

What i wanted to do was serve our stylesheet as a link on next's document head based on the current route but there're Lots and lots of complications 😄, using gulp to do the transformation from sass to css before publishing to production. I'll just leave the incomplete solution i proposed tho and wait for nextjs's official solution to global css cos i don't buy the idea of css in js 😏 Let;s see how that goes tho while i use this approach on my personal website

_document.js

import NextCSS from 'nextcss';

// within the head tag
// call:
<NextCSS pathname={this.props.pathname} location='/static'/>

gulpfile.js

// Import gulp deps
const gulp = require('gulp');
const sass = require('gulp-sass');

// Each of our sass file
const src = './scss/**/*.scss';

// Allow gulp to handle our sass stuffs
gulp.task('sass', () => {
  return gulp.src(src)
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./static/css'))
});

// Allow gulp to minify our production style
gulp.task('sass:prod', () => (
  gulp.src(src)
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(gulp.dest('./static/css'))
));


// Watch for file changes
gulp.task('watch', () => (
  gulp.watch(src, ['sass'])
));

// What to do on running `gulp`
gulp.task('default', ['sass:prod']);

nextcss.js

export default ({ pathname, location }) => {
  // If path is /, means we're on the index route
  // Our final result should be /index.css | /index.scss -  without location
  if (pathname === '/') {
    pathname = '/index';
  }

  if (process.env.NODE_ENV !== 'production') {
    let scss;

    if (location) {
      scss = `${location}/scss${pathname}.scss`;
    } else {
      scss = `/scss${pathname}.scss`;
    }

    const inlineCSS = require(`${scss}`);

    return <style dangerouslySetInnerHTML={{__html: inlineCSS}}/>
  }

  // Production
  if (process.env.NODE_ENV === 'production') {
    let css;

    if (location) {
      css = `${location}/css${pathname}.css`;
    } else {
      css = `/css${pathname}.css`;
    }

    return <link rel='stylesheet' href={`${css}`} />;
  }

  return null;
}