Merge pull request #139 from marcalexiei/feature/insert-style-dedupe

issue-132 - dedupe insertStyle in output files

Author: elycruz

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",
@@ -54,7 +54,8 @@
     ],
     "require": [
       "ts-node/register"
-    ]
+    ],
+    "snapshotDir": "./test/snapshots"
   },
   "dependencies": {
     "@rollup/pluginutils": "^3 || ^4 || ^5",

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;
+}

src/style.ts

@@ -0,0 +1,3 @@
+import a from '../../assets/actual_a.scss';
+
+export default a;

test/fixtures/multiple-entry-points/entryA.js

@@ -0,0 +1,3 @@
+import b from '../../assets/actual_b.scss';
+
+export default b;

test/fixtures/multiple-entry-points/entryB.js

@@ -1,15 +1,15 @@
+import test from 'ava';
 import {promises as fs, constants as fsConstants} from 'fs';
 import * as path from 'path';
-import test from 'ava';
 import sinon from 'sinon';
 import {OutputOptions, rollup, RollupOutput} from 'rollup';
 import * as sassJs from 'sass';
-import sass from '../src/index';
-import {SassOptions} from "../src/types";
-import {error} from "../src/utils";
 import postcss from "postcss";
 import {extractICSS} from "icss-utils";
 
+import sass from "../src/index";
+import { SassOptions } from "../src/types";
+
 const repoRoot = path.join(__dirname, '../'),
 
   tmpDir = path.join(repoRoot, '.tests-output/'),
@@ -86,6 +86,22 @@ test('should import *.scss and *.sass files', async t => {
   t.true([expectA, expectB, expectC].every(xs => rslt.includes(xs)));
 });
 
+test("should import *.scss and *.sass files with default configuration", async (t) => {
+  const outputBundle = await rollup({
+      input: "test/fixtures/basic/index.js",
+      plugins: [
+        sass(),
+      ],
+    }),
+    { output } = await outputBundle.generate({
+      format: "es",
+      file: path.join(tmpDir, "import_scss_and_sass_default_options.js"),
+    }),
+    rslt = squash(unwrap(output));
+
+    t.snapshot(rslt)
+});
+
 test('should compress the dest CSS', async t => {
   const outputBundle = await rollup({
       ...baseConfig,
@@ -152,8 +168,51 @@ test('should insert CSS into head tag', async t => {
     }),
     {output} = await outputBundle.generate(generateOptions);
 
-  t.true(unwrap(output).includes('___$insertStyle("body{color:red}");'));
-  t.true(unwrap(output).includes('___$insertStyle("body{color:green}");'));
+    t.snapshot(unwrap(output));
+});
+
+test("should generate chunks with import insertStyle when `insert` is true", async (t) => {
+  const outputBundle = await rollup({
+    input: {
+      entryA: "test/fixtures/multiple-entry-points/entryA.js",
+      entryB: "test/fixtures/multiple-entry-points/entryB.js",
+    },
+    plugins: [
+      sass({
+        insert: true,
+        options: sassOptions,
+      }),
+    ],
+    output: {
+      preserveModules: true,
+      preserveModulesRoot: "src",
+    },
+    external: [/\/insertStyle\.js$/],
+  });
+
+  const { output } = await outputBundle.generate(generateOptions);
+
+  t.is(output.length, 2, "has 2 chunks");
+  t.true(
+    output.every(
+      (outputItem) => {
+        if (outputItem.type === "chunk") {
+          const insertStyleImportsCount = outputItem.imports.filter((it) =>
+            it.includes("/insertStyle.js")
+          ).length;
+          return insertStyleImportsCount === 1;
+        }
+        // if is an assets there is no need to check imports
+        return true;
+      }
+    ),
+    "each chunk must include insertStyle once"
+  );
+
+  // outputBundle.write({
+  //   format: 'es',
+  //   dir: path.join(tmpDir, 'insert-style-preserve-modules'),
+  // });
 });
 
 test('should support output as function', async t => {

test/index.test.ts

@@ -0,0 +1,22 @@
+# Snapshot report for `test/index.test.ts`
+
+The actual snapshot is saved in `index.test.ts.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## should import *.scss and *.sass files with default configuration
+
+> Snapshot 1
+
+    'var atualA = "body {\\n  color: red;\\n}";var atualB = "body {\\n  color: green;\\n}";var atualC = "body {\\n  color: blue;\\n}";var index = atualA + atualB + atualC;export { index as default };'
+
+## should insert CSS into head tag
+
+> Snapshot 1
+
+    `import ___$insertStyle from '../../../src/insertStyle.js';␊
+    ␊
+    ___$insertStyle("body{color:red}");␊
+    ␊
+    ___$insertStyle("body{color:green}");␊
+    `

test/snapshots/test/index.test.ts.md

@@ -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();