Skip to content

Provide a way to register with require.extensions #224

@romaricpascal

Description

@romaricpascal

It's be great if the sass-true package was providing a way to register the .scss into Node's require.exensions. It'd allow test tools like Mocha (Jasmine too) to require scss files directly, compiling them on the fly into a bit of JavaScript running sass-true.

This is what I have working for sass-true 6.1, but looking at the current main branch, I believe it'll need some adjustments:

/**
 * Creates a test script that runs sass-true
 * on the given file.
 * @param {string} filename
 * @returns string
 */
function toTestScript(filename) {
  return `
  const runner = require('${__filename}').runner
  runner('${filename}',{describe, it})
  `
}

const { runSass } = require('sass-true')
const fs = require('fs')
const path = require('path')

/**
 * Runs sass-true on the given SCSS file, automatically importing it
 * and configuring a non-verbose terminal output
 * @param {String} filename
 * @param {Function} options.describe
 */
function runner(filename, { describe, it }) {
  const data = fs.readFileSync(filename, { encoding: 'utf8' })
  const TRUE_SETUP = '$true-terminal-output: false; @import \'true\';'

  runSass({
    data: TRUE_SETUP + data,
    includePaths: [path.dirname(filename)]
  }, { describe, it })
}

module.exports = {
  runner,
  transform: toTestScript
}

require.extensions['.scss'] = function (module, filename) {
  return module._compile(toTestScript(filename), filename)
}

Then the following .mocharc.js file allows Mocha to load the SCSS files:

module.exports = {
  // Make Mocha look for `.test.scss` files
  'spec': "scss/**/*.{test,spec}.scss",
  // Compile them into JS scripts running `sass-true`
  require: 'sass-true/register',
  // Watch any changes in the scss folder so the tests
  // run again when saving any scss file (test or actual code)
  'watch-files': "scss/**/*",
}

It'd work for Jasmine too with:

const path = require('path')

module.exports = {
  spec_dir: 'scss', /* eslint-disable-line camelcase */

  // Make Mocha look for `.test.scss` files
  spec_files: ['**/*.{test,spec}.scss'], /* eslint-disable-line camelcase */

  // Compile them into JS scripts running `sass-true`
  requires: ['sass-true/register'],

  // Ensure we use `require` so that the require.extensions works
  // as `import` completely bypasses it
  jsLoader: 'require'
}

And I think the toTestScript function could be used for making a Jest transform.

The runner function is only necessary for two things: importing true in the files automatically and configuring the terminal output. My example is obviously opinionated, but if sass-true were to provide these as options for runSass that'd save the need for that runner function altogether.

It'd be great if the register file was provided directly by the sass-true package (a la @babel/register), but maybe documentation may be enough too.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions