Provide a way to register with require.extensions

Open
#224 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, node.js, scss
Domain
testing, tooling

Research direction

Start by locating the package entry points, runSass, and the proposed sass-true/register entry point; compare them with the require.extensions example and the Mocha and Jasmine configuration shown here. Done means the package exposes a documented registration path that loads SCSS tests through the intended runner, with the supported options and test-tool behavior specified.

Written by the indexing model from the issue text.

Description

enhancement PR required

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.

Dominant language
SCSS
Stars
685
Forks
45
Avg merge
8h 54m
Merged PRs (30d)
1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from oddbird/true

All issues in oddbird/true

Similar issues

More Testing & QA issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.