Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide a way to register with require.extensions #224

Open
romaricpascal opened this issue Mar 18, 2022 · 2 comments
Open

Provide a way to register with require.extensions #224

romaricpascal opened this issue Mar 18, 2022 · 2 comments

Comments

@romaricpascal
Copy link
Contributor

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.

@jgerigmeyer
Copy link
Member

@romaricpascal Interesting idea! While I'm a bit hesitant seeing that node's require.extensions is officially deprecated, it does seem like this would be useful -- and other projects are still using similar workarounds. I might lean toward using something like pirates instead of the require.extensions API directly.

I probably won't get to this for awhile, but I'd be open to reviewing a PR that adds this functionality to True. Feel free to base it off of the v6.1.0 release.

@mirisuzanne What do you think of this idea?

@mirisuzanne
Copy link
Member

@jgerigmeyer This is outside my expertise, so I'm not sure what the tradeoffs are. Feel free to handle the JS API in whatever ways make sense to you. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants