support for dart sass version without native dependencies

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]

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());
}