fix: 🐛 prevent including external file if content is not empty

kaisermann · kaisermann · commit 24e90d101103 · 2020-06-16T22:37:59.000-03:00
✅ Closes: #183
diff --git a/src/modules/language.ts b/src/modules/language.ts
@@ -2,7 +2,7 @@ import { basename } from 'path';
 
 import { PreprocessorArgs } from '../types';
 
-export const LANG_DICT = new Map([
+export const ALIAS_MAP = new Map([
   ['pcss', 'css'],
   ['postcss', 'css'],
   ['sass', 'scss'],
@@ -13,7 +13,7 @@ export const LANG_DICT = new Map([
 ]);
 
 export const addLanguageAlias = (entries: Array<[string, string]>) =>
-  entries.forEach((entry) => LANG_DICT.set(...entry));
+  entries.forEach((entry) => ALIAS_MAP.set(...entry));
 
 export const getLanguage = (
   attributes: PreprocessorArgs['attributes'],
@@ -44,7 +44,7 @@ export const getLanguage = (
   }
 
   return {
-    lang: LANG_DICT.get(lang) || lang,
+    lang: ALIAS_MAP.get(lang) || lang,
     alias: lang,
   };
 };
diff --git a/src/modules/parseFile.ts b/src/modules/parseFile.ts
@@ -27,7 +27,8 @@ export const parseFile = async (
 ) => {
   const dependencies = [];
 
-  if (attributes.src) {
+  /** only include src file if content of tag is empty */
+  if (attributes.src && content.trim().length === 0) {
     // istanbul ignore if
     if (typeof attributes.src !== 'string') {
       throw new Error('src attribute must be string');
diff --git a/src/processors/babel.ts b/src/processors/babel.ts
@@ -2,7 +2,7 @@ import { PreprocessorGroup, Options } from '../types';
 import { concat } from '../modules/concat';
 import { parseFile } from '../modules/parseFile';
 
-export default (options: Options.Babel): PreprocessorGroup => ({
+export default (options?: Options.Babel): PreprocessorGroup => ({
   async script(svelteFile) {
     const { default: transformer } = await import('../transformers/babel');
 
diff --git a/src/processors/coffeescript.ts b/src/processors/coffeescript.ts
@@ -2,7 +2,7 @@ import { PreprocessorGroup, Options } from '../types';
 import { parseFile } from '../modules/parseFile';
 import { concat } from '../modules/concat';
 
-export default (options: Options.Coffeescript): PreprocessorGroup => ({
+export default (options?: Options.Coffeescript): PreprocessorGroup => ({
   async script(svelteFile) {
     const { default: transformer } = await import(
       '../transformers/coffeescript'
diff --git a/src/processors/less.ts b/src/processors/less.ts
@@ -2,7 +2,7 @@ import { PreprocessorGroup, Options } from '../types';
 import { parseFile } from '../modules/parseFile';
 import { concat } from '../modules/concat';
 
-export default (options: Options.Less): PreprocessorGroup => ({
+export default (options?: Options.Less): PreprocessorGroup => ({
   async style(svelteFile) {
     const { default: transformer } = await import('../transformers/less');
     const {
diff --git a/src/processors/postcss.ts b/src/processors/postcss.ts
@@ -3,7 +3,7 @@ import { PreprocessorGroup, Options } from '../types';
 import { concat } from '../modules/concat';
 
 /** Adapted from https://github.com/TehShrike/svelte-preprocess-postcss */
-export default (options: Options.Postcss): PreprocessorGroup => ({
+export default (options?: Options.Postcss): PreprocessorGroup => ({
   async style(svelteFile) {
     const { default: transformer } = await import('../transformers/postcss');
     const { content, filename, attributes, dependencies } = await parseFile(
diff --git a/src/processors/pug.ts b/src/processors/pug.ts
@@ -1,6 +1,6 @@
 import { Options, PreprocessorGroup } from '../types';
 
-export default (options: Options.Pug): PreprocessorGroup => ({
+export default (options?: Options.Pug): PreprocessorGroup => ({
   async markup({ content, filename }) {
     const { default: transformer } = await import('../transformers/pug');
 
diff --git a/src/processors/scss.ts b/src/processors/scss.ts
@@ -2,7 +2,7 @@ import { parseFile } from '../modules/parseFile';
 import { PreprocessorGroup, Options } from '../types';
 import { concat } from '../modules/concat';
 
-export default (options: Options.Sass): PreprocessorGroup => ({
+export default (options?: Options.Sass): PreprocessorGroup => ({
   async style(svelteFile) {
     const { default: transformer } = await import('../transformers/scss');
     const {
diff --git a/src/processors/stylus.ts b/src/processors/stylus.ts
@@ -2,7 +2,7 @@ import { parseFile } from '../modules/parseFile';
 import { Options, PreprocessorGroup } from '../types';
 import { concat } from '../modules/concat';
 
-export default (options: Options.Stylus): PreprocessorGroup => ({
+export default (options?: Options.Stylus): PreprocessorGroup => ({
   async style(svelteFile) {
     const { default: transformer } = await import('../transformers/stylus');
     const {
diff --git a/src/processors/typescript.ts b/src/processors/typescript.ts
@@ -2,7 +2,7 @@ import { Options, PreprocessorGroup } from '../types';
 import { parseFile } from '../modules/parseFile';
 import { concat } from '../modules/concat';
 
-export default (options: Options.Typescript): PreprocessorGroup => ({
+export default (options?: Options.Typescript): PreprocessorGroup => ({
   async script(svelteFile) {
     const { default: transformer } = await import('../transformers/typescript');
     const {
diff --git a/test/autoProcess/externalFiles.test.ts b/test/autoProcess/externalFiles.test.ts
@@ -10,24 +10,29 @@ const {
   style: styleProcessor,
 } = getAutoPreprocess();
 
-const getBaseObj = (src: string) => ({
-  content: `<template src="./fixtures/template.html"></template>
-  <style src="./fixtures/style.css"></style>
-  <script src="./fixtures/script.js"></script>`,
-  filename: resolve(__dirname, '..', 'App.svelte'),
-  attributes: { src: `./fixtures/${src}` },
-});
-
-let markup: Processed;
-let script: Processed;
-let style: Processed;
-
 describe('external files', () => {
+  let markup: Processed;
+  let script: Processed;
+  let style: Processed;
+
   beforeAll(async () => {
     [markup, script, style] = [
-      await markupProcessor(getBaseObj('template.html')),
-      await scriptProcessor(getBaseObj('script.js')),
-      await styleProcessor(getBaseObj('style.css')),
+      await markupProcessor({
+        content: `<template src="./fixtures/template.html"></template>
+        <style src="./fixtures/style.css"></style>
+        <script src="./fixtures/script.js"></script>`,
+        filename: resolve(__dirname, '..', 'App.svelte'),
+      }),
+      await scriptProcessor({
+        content: ``,
+        filename: resolve(__dirname, '..', 'App.svelte'),
+        attributes: { src: `./fixtures/script.js` },
+      }),
+      await styleProcessor({
+        content: ``,
+        filename: resolve(__dirname, '..', 'App.svelte'),
+        attributes: { src: `./fixtures/style.css` },
+      }),
     ];
   });
 
diff --git a/test/modules.test.ts b/test/modules.test.ts
@@ -1,5 +1,7 @@
 import { resolve } from 'path';
 
+import { getTestAppFilename, getFixtureContent } from './utils';
+import { parseFile } from '../src/modules/parseFile';
 import { importAny } from '../src/modules/importAny';
 import { getIncludePaths } from '../src/modules/getIncludePaths';
 import { globalifySelector } from '../src/modules/globalifySelector';
@@ -70,3 +72,28 @@ describe('globalifySelector', () => {
     expect(globalifySelector(selector2)).toEqual(':global(div), :global(span)');
   });
 });
+
+describe(`parse svelte file`, () => {
+  it('should only include src files if content is empty', async () => {
+    let parsedFile = await parseFile(
+      {
+        content: '',
+        attributes: { src: './fixtures/style.scss' },
+        filename: getTestAppFilename(),
+      },
+      'css',
+    );
+
+    expect(parsedFile.content).toEqual(getFixtureContent('style.scss'));
+
+    parsedFile = await parseFile(
+      {
+        ...parsedFile,
+        attributes: { src: './fixtures/style.css' },
+      },
+      'css',
+    );
+
+    expect(parsedFile.content).toEqual(getFixtureContent('style.scss'));
+  });
+});
diff --git a/test/utils.ts b/test/utils.ts
@@ -8,8 +8,10 @@ import {
 
 export const CSS_PATTERN = /div(\.svelte-\w{4,7})?\s*\{\s*color:\s*(red|#f00);?\s*\}/;
 
+export const getTestAppFilename = () => resolve(__dirname, 'App.svelte');
+
 export const preprocess = async (input: string, opts: any) =>
-  sveltePreprocess(input, opts, { filename: resolve(__dirname, 'App.svelte') });
+  sveltePreprocess(input, opts, { filename: getTestAppFilename() });
 
 const compile = async (input: string, opts: any) => {
   const preprocessed = await exports.preprocess(input, opts);
