issue-132 - dedupe insertStyle in output files

package.json

@@ -13,7 +13,7 @@
  },
  "scripts": {
  "prepare": "npm run build && npm test",
- "build": "npm run build-downlevel-dts && tsc --project tsconfig.json",
+ "build": "npm run build-downlevel-dts && tsc --project tsconfig.build.plugin.json && tsc --project tsconfig.build.insertStyle.json",
  "build-downlevel-dts": "node scripts/clean-and-run-downlevel-dts.js",
  "downlevel-dts": "downlevel-dts . ts3.5 [--to=3.5]",
  "test": "nyc --reporter=html --reporter=text ava ./test/*.test.ts -s && npm run test:rollup.config.spec.ts",

src/index.ts

@@ -4,7 +4,6 @@ import * as sass from 'sass';
 import {dirname} from 'path';
 import * as fs from 'fs';
 import {createFilter} from '@rollup/pluginutils';
-import {insertStyle} from './style';
 import {
  SassImporterResult,
  RollupAssetInfo,
@@ -107,14 +106,20 @@ const MATCH_SASS_FILENAME_RE = /\.sass$/,
  const out = JSON.stringify(resolvedCss);
 
  let defaultExport = `""`;
+ let imports = '';
 
  if (rollupOptions.insert) {
+ /**
+ * @see insertStyle.ts for additional information
+ * Let rollup handle import by processing insertStyle as a module
+ */
+ imports = `import ${insertFnName} from '${__dirname}/insertStyle.js';\n`;
  defaultExport = `${insertFnName}(${out});`;
  } else if (!rollupOptions.output) {
  defaultExport = out;
  }
 
- return `export default ${defaultExport};\n${restExports}`;
+ return `${imports}export default ${defaultExport};\n${restExports}`;
  }); // @note do not `catch` here - let error propagate to rollup level
  },
 
@@ -152,12 +157,6 @@ export = function plugin(options = {} as RollupPluginSassOptions): RollupPlugin
  return {
  name: 'rollup-plugin-sass',
 
- intro() {
- if (pluginOptions.insert) {
- return insertStyle.toString().replace(/insertStyle/, insertFnName);
- }
- },
-
  transform(code: string, filePath: string): Promise<any> {
  if (!filter(filePath)) {
  return Promise.resolve();

src/insertStyle.ts

@@ -0,0 +1,23 @@
+/**
+ * Create a style tag and append to head tag
+ *
+ * @warning this file is not included directly in the source code!
+ * If user specifies inject option to true, an import to this file will be injected in rollup output.
+ * Due to this reason this file is compiled into a ESM module separated from other plugin source files.
+ * That is the reason of why there are two tsconfig.build files.
+ *
+ * @return css style
+ */
+export default function insertStyle(css: string | undefined): string | undefined {
+ if (!css || typeof window === 'undefined') {
+ return;
+ }
+
+ const style = document.createElement('style');
+ style.setAttribute('type', 'text/css');
+ style.innerHTML = css;
+
+ document.head.appendChild(style);
+
+ return css;
+}

test/style.test.ts

@@ -1,6 +1,6 @@
 import test from 'ava';
 import {readFileSync} from 'fs';
-import {insertStyle} from '../src/style';
+import insertStyle from '../src/insertStyle';
 import jsdom from 'jsdom';
 
 const expectA = readFileSync('test/assets/expect_a.css').toString();

tsconfig.build.insertStyle.json

@@ -0,0 +1,8 @@
+/* @see insertStyle.ts for additional information */
+{
+ "extends": "./tsconfig.json",
+ "include": ["./src/insertStyle.ts"],
+ "compilerOptions": {
+ "module": "ES6"
+ }
+}

tsconfig.build.plugin.json

@@ -0,0 +1,6 @@
+/* @see insertStyle.ts for additional information */
+{
+ "extends": "./tsconfig.json",
+ "include": ["./src/*"],
+ "exclude": ["./src/insertStyle.ts"]
+}