From d6bebba96982cd0d8d78823e8a0b328dd9805311 Mon Sep 17 00:00:00 2001 From: Francis Saul Date: Tue, 24 Aug 2021 20:34:16 +0100 Subject: [PATCH] #381: Added options styleInjectRelativePath to allow module import for ESM libraries --- README.md | 18 ++++++ src/index.js | 2 + src/postcss-loader.js | 6 +- test/__snapshots__/index.test.js.snap | 83 +++++++++++++++++++++++++++ test/index.test.js | 17 ++++++ 5 files changed, 124 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 26fe589f..042529f2 100644 --- a/README.md +++ b/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`
+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 © [EGOIST](https://github.com/egoist) diff --git a/src/index.js b/src/index.js index 040a5877..d871204d 100644 --- a/src/index.js +++ b/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 */ diff --git a/src/postcss-loader.js b/src/postcss-loader.js index bbac026c..fadb2fa0 100644 --- a/src/postcss-loader.js +++ b/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)}` : '' diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index 8d90d994..191aeed1 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/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); +" +`; diff --git a/test/index.test.js b/test/index.test.js index 0ee03c9a..cefa3c5a 100644 --- a/test/index.test.js +++ b/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',