support for dart sass version without native dependencies about node-sass-middleware HOT 6 CLOSED

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

from node-sass-middleware.

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

from node-sass-middleware.

I forked and put together a quick PR to try replacing with node-sass with sass. Most tests are passing. zeke#1

from node-sass-middleware.

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

from node-sass-middleware.

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?

from node-sass-middleware.

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

from node-sass-middleware.