#381: Added options styleInjectRelativePath to allow module import for ESM libraries

README.md

@@ -328,6 +328,24 @@ Type: `id => void`
 
 A function to be invoked when an import for CSS file is detected.
 
+### styleInjectRelativePath
+
+Type: `boolean`<br/>
+Default: true
+
+The built file will contain a relative path to the style-inject module:
+```js
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';`
+```
+This is fine if your project is the final consumer of this library.
+
+If you are creating an ESM library to be used by other projects, then you will want to specify a module path
+```js
+styleInjectRelativePath: false
+
+import styleInject from 'style-inject';
+```
+
 ## License
 
 MIT &copy; [EGOIST](https://github.com/egoist)

src/index.js

@@ -56,6 +56,8 @@ export default (options = {}) => {
     namedExports: options.namedExports,
     /** Automatically CSS modules for .module.xxx files */
     autoModules: options.autoModules,
+    /** Relative style-inject import path */
+    styleInjectRelativePath: inferOption(options.styleInjectRelativePath, true),
     /** Options for cssnano */
     minimize: inferOption(options.minimize, false),
     /** Postcss config file */

src/postcss-loader.js

@@ -6,9 +6,10 @@ import { identifier } from 'safe-identifier'
 import humanlizePath from './utils/humanlize-path'
 import normalizePath from './utils/normalize-path'
 
-const styleInjectPath = require
+const styleInjectRelativePath = require
   .resolve('style-inject/dist/style-inject.es')
   .replace(/[\\/]+/g, '/')
+const styleInjectModuleName = 'style-inject'
 
 function loadConfig(id, { ctx: configOptions, path: configPath }) {
   const handleError = err => {
@@ -70,6 +71,7 @@ export default {
     ]
     const shouldExtract = options.extract
     const shouldInject = options.inject
+    const styleInject = options.styleInjectRelativePath ? styleInjectRelativePath : styleInjectModuleName
 
     const modulesExported = {}
     const autoModules = options.autoModules !== false && options.onlyModules !== true
@@ -209,7 +211,7 @@ export default {
 
     if (!shouldExtract && shouldInject) {
       output += typeof options.inject === 'function' ? options.inject(cssVariableName, this.id) : '\n' +
-        `import styleInject from '${styleInjectPath}';\n` +
+        `import styleInject from '${styleInject}';\n` +
         `styleInject(${cssVariableName}${Object.keys(options.inject).length > 0 ?
           `,${JSON.stringify(options.inject)}` :
           ''

test/__snapshots__/index.test.js.snap

@@ -1233,3 +1233,86 @@ styleInject(css_248z);
 console.log(css_248z$5, css_248z$4);
 "
 `;
+
+exports[`styleInject module-import: js code 1`] = `
+"'use strict';
+
+var styleInject = require('style-inject');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styleInject__default = /*#__PURE__*/_interopDefaultLegacy(styleInject);
+
+var css_248z$5 = \\"body {\\\\n  color: red;\\\\n}\\\\n\\";
+styleInject__default['default'](css_248z$5);
+
+var css_248z$4 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\";
+styleInject__default['default'](css_248z$4);
+
+var css_248z$3 = \\"body {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n\\";
+styleInject__default['default'](css_248z$3);
+
+var css_248z$2 = \\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\";
+styleInject__default['default'](css_248z$2);
+
+var css_248z$1 = \\"#header {\\\\n  color: #6c94be;\\\\n}\\\\n\\";
+styleInject__default['default'](css_248z$1);
+
+var css_248z = \\".pcss {\\\\n  color: red;\\\\n}\\\\n\\";
+styleInject__default['default'](css_248z);
+
+console.log(css_248z$5, css_248z$4);
+"
+`;
+
+exports[`styleInject relative-import: js code 1`] = `
+"'use strict';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$5 = \\"body {\\\\n  color: red;\\\\n}\\\\n\\";
+styleInject(css_248z$5);
+
+var css_248z$4 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\";
+styleInject(css_248z$4);
+
+var css_248z$3 = \\"body {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n\\";
+styleInject(css_248z$3);
+
+var css_248z$2 = \\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\";
+styleInject(css_248z$2);
+
+var css_248z$1 = \\"#header {\\\\n  color: #6c94be;\\\\n}\\\\n\\";
+styleInject(css_248z$1);
+
+var css_248z = \\".pcss {\\\\n  color: red;\\\\n}\\\\n\\";
+styleInject(css_248z);
+
+console.log(css_248z$5, css_248z$4);
+"
+`;

test/index.test.js

@@ -210,6 +210,23 @@ snapshotMany('minimize', [
   }
 ])
 
+snapshotMany('styleInject', [
+  {
+    title: 'relative-import',
+    input: 'simple/index.js',
+    options: {
+      styleInjectRelativePath: true
+    }
+  },
+  {
+    title: 'module-import',
+    input: 'simple/index.js',
+    options: {
+      styleInjectRelativePath: false
+    }
+  }
+])
+
 snapshotMany('modules', [
   {
     title: 'inject',