support for dart sass version without native dependencies

[zeke]

Hello! First off, thanks for writing and maintaining this library. It's useful! ✨

I work on an app that uses this middleware. It's working fine us, but occasionally there are members of my team who run into issues with the native module compilation process that is inherent in the node-sass dependency. Team members are also often alarmed and confused by scary node-gyp output.

I have come to learn that there's a Dart implementation of sass (https://www.npmjs.com/package/sass) that has no native code or external dependencies. Is it possible to use that implementation with this middleware?

cc @sarahs

[zeke]

I forked and put together a quick PR to try replacing with node-sass with sass. Most tests are passing. https://github.com/zeke/node-sass-middleware/pull/1

[nschonni]

I'd suggest looking at the approach that gulp-sass used for changing the compiler option https://github.com/dlmanning/gulp-sass/ Also, dart-sass still used fibers, so you don't really get away from native dependencies

[zeke]

Thanks. It looks like fibers is a devDependency of sass, not a runtime depenency: https://github.com/sass/dart-sass/blob/4d78316cb7da3f71ffc9901e684349a5e3e5cf28/package.json#L11 -- so for an end-user of sass there shouldn't be a native dependency there, right?

[nschonni]

Not mandatory, but recommended for performance reasons https://github.com/sass/dart-sass#javascript-api

[zeke]

Thanks for the context, @nschonni. I am going to close this.

For the curious, I ended up creating a new connect/express middleware from scratch that uses the dart-sass implementation. It looks like this:

const path = require('path')
const fs = require('fs')
const sass = require('sass')
const cache = {}

module.exports = async function renderSass (req, res, next) {
  // ignore non-CSS requests
  if (!req.path.endsWith('.css')) return next()

  // derive SCSS filepath from CSS request path
  const file = path.join(process.cwd(), req.path).replace('.css', '.scss')
  if (!fs.existsSync(file)) return res.status(404).end()

  // cache rendered CSS in memory
  if (!cache[req.path]) {
    cache[req.path] = sass.renderSync({
      file,
      includePaths: [path.join(process.cwd(), 'node_modules')],
      outputStyle: (process.env.NODE_ENV === 'production') ? 'compressed' : 'expanded'
    })
  }

  res.header('content-type', 'text/css')
  res.send(cache[req.path].css.toString())
}

[luca-viggiani]

Thanks for the context, @nschonni. I am going to close this.

For the curious, I ended up creating a new connect/express middleware from scratch that uses the dart-sass implementation. It looks like this:

const path = require('path')
const fs = require('fs')
const sass = require('sass')
const cache = {}

module.exports = async function renderSass (req, res, next) {
  // ignore non-CSS requests
  if (!req.path.endsWith('.css')) return next()

  // derive SCSS filepath from CSS request path
  const file = path.join(process.cwd(), req.path).replace('.css', '.scss')
  if (!fs.existsSync(file)) return res.status(404).end()

  // cache rendered CSS in memory
  if (!cache[req.path]) {
    cache[req.path] = sass.renderSync({
      file,
      includePaths: [path.join(process.cwd(), 'node_modules')],
      outputStyle: (process.env.NODE_ENV === 'production') ? 'compressed' : 'expanded'
    })
  }

  res.header('content-type', 'text/css')
  res.send(cache[req.path].css.toString())
}

Many thanks! Here is a module version with two changes:

1. It searches in scss folder for .scss files to compile
2. Watches the compiled .scss file for changes and clear the cache to recompile it upon next request so you can modify scss files without restarting the app

import path from 'path';
import fs from 'fs';
import sass from 'sass';

const cache = {}

export async function renderSass (req, res, next) {
  // ignore non-CSS requests
  if (!req.path.endsWith('.css')) return next()

  // derive SCSS filepath from CSS request path
  const file = path.join(process.cwd(), req.path).replace(/css/g, 'scss'); // search in scss folder
  if (!fs.existsSync(file)) return res.status(404).end();

  // cache rendered CSS in memory
  let rp = req.path;
  if (!cache[rp]) {
    cache[rp] = sass.renderSync({
      file,
      includePaths: [path.join(process.cwd(), 'node_modules')],
      outputStyle: (process.env.NODE_ENV === 'production') ? 'compressed' : 'expanded'
    });

    // watch for changes in .scss
    fs.watchFile(file, _ => {
        delete cache[rp];
        fs.unwatchFile(file);
    });
  }

  res.header('content-type', 'text/css');
  res.send(cache[req.path].css.toString());
}