Broccoli.js Sass compiling with glob imports

README.md

EXPERIMENTAL

The Rails asset pipeline has SCSS glob imports. Why isn't this possible everywhere? I made it possible with Broccoli.js.

SCSS

// web/static/css/admin.scss
@import "admin/variables";
@import "shared/**/*";
@import "admin/**/*";

// web/static/css/app.scss
@import "app/variables";
@import "shared/**/*";
@import "app/**/*";

Brocfile.js

var mergeTrees = require('broccoli-merge-trees');
var scssGlobber = require('./scss-globber');

// Compile admin.scss and app.scss to admin.css and app.css
var cssFiles = ['admin', 'app'];
var styles = scssGlobber('web/static/css', cssFiles);

module.exports = mergeTrees([styles]);

scss-globber.js

var compileSass = require('broccoli-sass');
var glob = require('glob-fs');
var mergeTrees = require('broccoli-merge-trees');
var path = require('path');
var replace = require('broccoli-replace');

module.exports = function(sassDir, scssFileBasenames) {
  var styles = [];

  // Replace glob imports with individual SCSS imports
  var scssImportsReplaced = replace(sassDir, {
    files: ['**/*.scss'],
    patterns: [
      {
        match: /@import\s["']([^*;]*)(\*{1,2}\/?\*?)["'];/g,
        replacement: function(match, importDir, stars) {
          stars += '.scss';
          var globPath = path.join(sassDir, importDir, stars);
          var imports = glob().readdirSync(globPath).map(function(filePath) {
            var importFilePath = filePath.replace(sassDir + '/', '');
            var importName = path.basename(importFilePath).replace(/^_/, '').replace('.scss', '');
            var importDir = path.dirname(importFilePath);
            var importPath = path.join(importDir, importName);
            return '@import "' + importPath + '";';
          });
          return imports.join('\n');
        }
      }
    ]
  });

  // Use broccoli-sass to compile the now valid SCSS files
  scssFileBasenames.forEach(function(file) {
    styles.push(compileSass([scssImportsReplaced], file + '.scss', file + '.css'));
  });

  return mergeTrees(styles);
};