feat: make any file type importable

This change enables the user to import any file if the loader pipeline is configured in such a way that non-less files are translated. The loader pipeline for non-less files is typically configured with the `issuer` condition matching the .less file extension.

Author: jhnns

src/createWebpackLessPlugin.js

@@ -2,7 +2,9 @@ const less = require('less');
 const loaderUtils = require('loader-utils');
 const pify = require('pify');
 
+const stringifyLoader = require.resolve('./stringifyLoader.js');
 const trailingSlash = /[\\/]$/;
+const isLessCompatible = /\.(le|c)ss$/;
 
 /**
  * Creates a Less plugin that uses webpack's resolving engine that is provided by the loaderContext.
@@ -12,8 +14,10 @@ const trailingSlash = /[\\/]$/;
  * @returns {LessPlugin}
  */
 function createWebpackLessPlugin(loaderContext) {
+ const { fs } = loaderContext;
  const resolve = pify(loaderContext.resolve.bind(loaderContext));
  const loadModule = pify(loaderContext.loadModule.bind(loaderContext));
+ const readFile = pify(fs.readFile.bind(fs));
 
  class WebpackFileManager extends less.FileManager {
  supports(/* filename, currentDirectory, options, environment */) { // eslint-disable-line class-methods-use-this
@@ -32,11 +36,17 @@ function createWebpackLessPlugin(loaderContext) {
  resolvedFilename = f;
  loaderContext.addDependency(resolvedFilename);
 
- return loadModule(`-!${__dirname}/stringify.loader.js!${resolvedFilename}`);
+ if (isLessCompatible.test(resolvedFilename)) {
+ return readFile(resolvedFilename)
+ .then(contents => contents.toString('utf8'));
+ }
+
+ return loadModule([stringifyLoader, resolvedFilename].join('!'))
+ .then(JSON.parse);
  })
  .then((contents) => {
  return {
- contents: JSON.parse(contents),
+ contents,
  filename: resolvedFilename,
  };
  });

src/stringify.loader.js

@@ -0,0 +1,12 @@
+/**
+ * The stringifyLoader turns any content into a valid JavaScript string. This allows us to load any content
+ * with loaderContext.loadModule() without webpack complaining about non-JS modules.
+ *
+ * @param {string} content
+ * @return {string}
+ */
+function stringifyLoader(content) {
+ return JSON.stringify(content);
+}
+
+module.exports = stringifyLoader;

src/stringifyLoader.js

@@ -11,6 +11,7 @@ const cssFixtures = path.resolve(__dirname, '..', 'fixtures', 'css');
 const matchWebpackImports = /(@import\s+(\([^)]+\))?\s*["'])~/g;
 const lessBin = require.resolve('.bin/lessc');
 const ignore = [
+ 'non-less-import',
  'error',
 ];
 /**

test/helpers/createSpec.js

@@ -1,5 +1,6 @@
 const lessLoader = require.resolve('../../src');
 const helperLoader = require.resolve('./helperLoader.js');
+const someFileLoader = require.resolve('./someFileLoader.js');
 
 function basic(lessLoaderOptions, lessLoaderContext = {}, inspectCallback = () => {}) {
  return [{
@@ -20,4 +21,26 @@ function basic(lessLoaderOptions, lessLoaderContext = {}, inspectCallback = () =
  }];
 }
 
+function nonLessImport(inspectCallback) {
+ return [{
+ test: /\.less$/,
+ loaders: [{
+ loader: helperLoader,
+ }, {
+ loader: 'inspect-loader',
+ options: {
+ callback: inspectCallback,
+ },
+ }, {
+ loader: lessLoader,
+ }],
+ }, {
+ test: /some\.file$/,
+ loaders: [{
+ loader: someFileLoader,
+ }],
+ }];
+}
+
 exports.basic = basic;
+exports.nonLessImport = nonLessImport;

test/helpers/moduleRules.js

@@ -32,6 +32,19 @@ test('should not try to resolve import urls', async () => {
  await compileAndCompare('imports-url');
 });
 
+test('should allow non-less-import', async () => {
+ let inspect;
+ const rules = moduleRules.nonLessImport((i) => {
+ inspect = i;
+ });
+
+ await compile('non-less-import', rules);
+
+ const [css] = inspect.arguments;
+
+ expect(css).toMatch(/\.some-file {\s*background: hotpink;\s*}\s*/);
+});
+
 test('should compile data-uri function', async () => {
  await compileAndCompare('data-uri');
 });