diff --git a/docs/preprocessing.md b/docs/preprocessing.md
index fb92333d..4ac94027 100644
--- a/docs/preprocessing.md
+++ b/docs/preprocessing.md
@@ -369,11 +369,12 @@ Note: `svelte-preprocess` automatically configures inclusion paths for your root
 
 ### TypeScript
 
-| Option              | Default     | Description                                                                                                 |
-| ------------------- | ----------- | ----------------------------------------------------------------------------------------------------------- |
-| `tsconfigDirectory` | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`             |
-| `tsconfigFile`      | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                   |
-| `compilerOptions`   | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found. |
+| Option               | Default     | Description                                                                                                                                                                                                                                                                                |
+| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `tsconfigDirectory`  | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`                                                                                                                                                                                            |
+| `tsconfigFile`       | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                                                                                                                                                                                                  |
+| `compilerOptions`    | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found.                                                                                                                                                                                |
+| `handleMixedImports` | inferred    | optional `boolean` that defines the transpilation strategy. If set to `true`, you don't need to strictly separate types and values in imports. You need at least Svelte version 3.39 if you want to use this. `true` by default if you meet the minimum version requirement, else `false`. |
 
 You can check the [`compilerOptions` reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for specific TypeScript options.
 
@@ -381,8 +382,6 @@ You can check the [`compilerOptions` reference](https://www.typescriptlang.org/d
 
 - Since `v4`, `svelte-preprocess` doesn't type-check your component, its only concern is to transpile it into valid JavaScript for the compiler. If you want to have your components type-checked, you can use [svelte-check](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md).
 
-- As we're only transpiling, it's not possible to import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule'` otherwise bundlers will complain that the name is not exported by `MyModule`.
-
 - Using TypeScript inside a component's markup is currently **not** supported. See [#318](https://github.com/sveltejs/svelte-preprocess/issues/318) for development updates to this.
 
 ### `globalStyle`
diff --git a/package.json b/package.json
index 6a84f61d..1a70d6ac 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "sass": "^1.26.8",
     "stylus": "^0.54.7",
     "sugarss": "^2.0.0",
-    "svelte": "^3.23.0",
+    "svelte": "^3.42.0",
     "ts-jest": "^25.1.0",
     "typescript": "^3.9.5"
   },
@@ -93,6 +93,8 @@
     "@types/pug": "^2.0.4",
     "@types/sass": "^1.16.0",
     "detect-indent": "^6.0.0",
+    "magic-string": "^0.25.7",
+    "sorcery": "^0.10.0",
     "strip-indent": "^3.0.0"
   },
   "peerDependencies": {
diff --git a/src/autoProcess.ts b/src/autoProcess.ts
index 44b6efec..9826d38e 100644
--- a/src/autoProcess.ts
+++ b/src/autoProcess.ts
@@ -24,7 +24,7 @@ import { transformMarkup } from './modules/markup';
 export const transform = async (
   name: string,
   options: TransformerOptions,
-  { content, map, filename, attributes }: TransformerArgs<any>,
+  { content, markup, map, filename, attributes }: TransformerArgs<any>,
 ): Promise<Processed> => {
   if (options === false) {
     return { code: content };
@@ -39,6 +39,7 @@ export const transform = async (
 
   return transformer({
     content,
+    markup,
     filename,
     map,
     attributes,
@@ -115,6 +116,7 @@ export function sveltePreprocess(
   ): Preprocessor => async (svelteFile) => {
     let {
       content,
+      markup,
       filename,
       lang,
       alias,
@@ -151,6 +153,7 @@ export function sveltePreprocess(
 
     const transformed = await transform(lang, transformerOptions, {
       content,
+      markup,
       filename,
       attributes,
     });
@@ -169,6 +172,7 @@ export function sveltePreprocess(
     if (transformers.replace) {
       const transformed = await transform('replace', transformers.replace, {
         content,
+        markup: content,
         filename,
       });
 
@@ -185,11 +189,13 @@ export function sveltePreprocess(
   const script: PreprocessorGroup['script'] = async ({
     content,
     attributes,
+    markup: fullMarkup,
     filename,
   }) => {
     const transformResult: Processed = await scriptTransformer({
       content,
       attributes,
+      markup: fullMarkup,
       filename,
     });
 
@@ -199,7 +205,7 @@ export function sveltePreprocess(
       const transformed = await transform(
         'babel',
         getTransformerOptions('babel'),
-        { content: code, map, filename, attributes },
+        { content: code, markup: fullMarkup, map, filename, attributes },
       );
 
       code = transformed.code;
@@ -214,11 +220,13 @@ export function sveltePreprocess(
   const style: PreprocessorGroup['style'] = async ({
     content,
     attributes,
+    markup: fullMarkup,
     filename,
   }) => {
     const transformResult = await cssTransformer({
       content,
       attributes,
+      markup: fullMarkup,
       filename,
     });
 
@@ -239,6 +247,7 @@ export function sveltePreprocess(
 
         const transformed = await transform('postcss', postcssOptions, {
           content: code,
+          markup: fullMarkup,
           map,
           filename,
           attributes,
@@ -252,7 +261,7 @@ export function sveltePreprocess(
       const transformed = await transform(
         'globalStyle',
         getTransformerOptions('globalStyle'),
-        { content: code, map, filename, attributes },
+        { content: code, markup: fullMarkup, map, filename, attributes },
       );
 
       code = transformed.code;
diff --git a/src/modules/markup.ts b/src/modules/markup.ts
index 704842fd..16aba061 100644
--- a/src/modules/markup.ts
+++ b/src/modules/markup.ts
@@ -1,5 +1,35 @@
 import type { Transformer, Preprocessor } from '../types';
 
+/** Create a tag matching regexp. */
+export function createTagRegex(tagName: string, flags?: string): RegExp {
+  return new RegExp(
+    `/<!--[^]*?-->|<${tagName}(\\s[^]*?)?(?:>([^]*?)<\\/${tagName}>|\\/>)`,
+    flags,
+  );
+}
+
+/** Strip script and style tags from markup. */
+export function stripTags(markup: string): string {
+  return markup
+    .replace(createTagRegex('style', 'gi'), '')
+    .replace(createTagRegex('script', 'gi'), '');
+}
+
+/** Transform an attribute string into a key-value object */
+export function parseAttributes(attributesStr: string): Record<string, any> {
+  return attributesStr
+    .split(/\s+/)
+    .filter(Boolean)
+    .reduce((acc: Record<string, string | boolean>, attr) => {
+      const [name, value] = attr.split('=');
+
+      // istanbul ignore next
+      acc[name] = value ? value.replace(/['"]/g, '') : true;
+
+      return acc;
+    }, {});
+}
+
 export async function transformMarkup(
   { content, filename }: { content: string; filename: string },
   transformer: Preprocessor | Transformer<unknown>,
@@ -9,35 +39,29 @@ export async function transformMarkup(
 
   markupTagName = markupTagName.toLocaleLowerCase();
 
-  const markupPattern = new RegExp(
-    `/<!--[^]*?-->|<${markupTagName}(\\s[^]*?)?(?:>([^]*?)<\\/${markupTagName}>|\\/>)`,
-  );
+  const markupPattern = createTagRegex(markupTagName);
 
   const templateMatch = content.match(markupPattern);
 
   /** If no <template> was found, run the transformer over the whole thing */
   if (!templateMatch) {
-    return transformer({ content, attributes: {}, filename, options });
+    return transformer({
+      content,
+      markup: content,
+      attributes: {},
+      filename,
+      options,
+    });
   }
 
   const [fullMatch, attributesStr = '', templateCode] = templateMatch;
 
-  /** Transform an attribute string into a key-value object */
-  const attributes = attributesStr
-    .split(/\s+/)
-    .filter(Boolean)
-    .reduce((acc: Record<string, string | boolean>, attr) => {
-      const [name, value] = attr.split('=');
-
-      // istanbul ignore next
-      acc[name] = value ? value.replace(/['"]/g, '') : true;
-
-      return acc;
-    }, {});
+  const attributes = parseAttributes(attributesStr);
 
   /** Transform the found template code */
   let { code, map, dependencies } = await transformer({
     content: templateCode,
+    markup: templateCode,
     attributes,
     filename,
     options,
diff --git a/src/modules/tagInfo.ts b/src/modules/tagInfo.ts
index 58fdb617..7df9e5c8 100644
--- a/src/modules/tagInfo.ts
+++ b/src/modules/tagInfo.ts
@@ -27,6 +27,7 @@ export const getTagInfo = async ({
   attributes,
   filename,
   content,
+  markup,
 }: PreprocessorArgs) => {
   const dependencies = [];
   // catches empty content and self-closing tags
@@ -62,5 +63,6 @@ export const getTagInfo = async ({
     lang,
     alias,
     dependencies,
+    markup,
   };
 };
diff --git a/src/modules/utils.ts b/src/modules/utils.ts
index 58f50b52..b7147c4b 100644
--- a/src/modules/utils.ts
+++ b/src/modules/utils.ts
@@ -107,3 +107,54 @@ export function setProp(obj, keyList, val) {
 
   obj[keyList[i]] = val;
 }
+
+export const javascriptReservedKeywords = new Set([
+  'arguments',
+  'await',
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'enum',
+  'eval',
+  'export',
+  'extends',
+  'false',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'implements',
+  'import',
+  'in',
+  'instanceof',
+  'interface',
+  'let',
+  'new',
+  'null',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'return',
+  'static',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'true',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield',
+]);
diff --git a/src/processors/typescript.ts b/src/processors/typescript.ts
index 19e80697..1f27a25c 100644
--- a/src/processors/typescript.ts
+++ b/src/processors/typescript.ts
@@ -8,6 +8,7 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
     const { transformer } = await import('../transformers/typescript');
     let {
       content,
+      markup,
       filename,
       attributes,
       lang,
@@ -22,6 +23,7 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
 
     const transformed = await transformer({
       content,
+      markup,
       filename,
       attributes,
       options,
diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index 2dc83637..abbb62ba 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -1,15 +1,34 @@
 import { dirname, isAbsolute, join, resolve } from 'path';
 
 import ts from 'typescript';
+import { compile } from 'svelte/compiler';
+import pkg from 'svelte/package.json';
+import MagicString from 'magic-string';
+import sorcery from 'sorcery';
 
 import { throwTypescriptError } from '../modules/errors';
-import type { Transformer, Options } from '../types';
+import { createTagRegex, parseAttributes, stripTags } from '../modules/markup';
+import type { Transformer, Options, TransformerArgs } from '../types';
+import { javascriptReservedKeywords } from '../modules/utils';
 
-type CompilerOptions = Options.Typescript['compilerOptions'];
+type CompilerOptions = ts.CompilerOptions;
+
+type SourceMapChain = {
+  content: Record<string, string>;
+  sourcemaps: Record<string, object>;
+};
+
+type InternalTransformerOptions = TransformerArgs<Options.Typescript> & {
+  basePath: string;
+  compilerOptions: CompilerOptions;
+};
+
+const injectedCodeSeparator = 'const $$$$$$$$ = null;';
 
 function createFormatDiagnosticsHost(cwd: string): ts.FormatDiagnosticsHost {
   return {
-    getCanonicalFileName: (fileName: string) => fileName,
+    getCanonicalFileName: (fileName: string) =>
+      fileName.replace('.injected.ts', ''),
     getCurrentDirectory: () => cwd,
     getNewLine: () => ts.sys.newLine,
   };
@@ -53,70 +72,175 @@ const importTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => {
   return (node) => ts.visitNode(node, visit);
 };
 
-export function loadTsconfig(
-  compilerOptionsJSON: any,
-  filename: string,
-  tsOptions: Options.Typescript,
-) {
-  if (typeof tsOptions.tsconfigFile === 'boolean') {
-    return { errors: [], options: compilerOptionsJSON };
-  }
+function getScriptContent(markup: string, module: boolean): string {
+  const regex = createTagRegex('script', 'gi');
+  let match: RegExpMatchArray;
 
-  let basePath = process.cwd();
+  while ((match = regex.exec(markup)) !== null) {
+    const { context } = parseAttributes(match[1]);
 
-  const fileDirectory = (tsOptions.tsconfigDirectory ||
-    dirname(filename)) as string;
+    if ((context !== 'module' && !module) || (context === 'module' && module)) {
+      return match[2];
+    }
+  }
 
-  let tsconfigFile =
-    tsOptions.tsconfigFile ||
-    ts.findConfigFile(fileDirectory, ts.sys.fileExists);
+  return '';
+}
 
-  if (!tsconfigFile) {
-    return { errors: [], options: {} };
+function createSourceMapChain({
+  filename,
+  content,
+  compilerOptions,
+}: {
+  filename: string;
+  content: string;
+  compilerOptions: CompilerOptions;
+}): SourceMapChain | undefined {
+  if (compilerOptions.sourceMap) {
+    return {
+      content: {
+        [filename]: content,
+      },
+      sourcemaps: {},
+    };
   }
+}
 
-  tsconfigFile = isAbsolute(tsconfigFile)
-    ? tsconfigFile
-    : join(basePath, tsconfigFile);
+function injectVarsToCode({
+  content,
+  markup,
+  filename,
+  attributes,
+  sourceMapChain,
+}: {
+  content: string;
+  markup?: string;
+  filename: string;
+  attributes?: Record<string, any>;
+  sourceMapChain?: SourceMapChain;
+}): string {
+  if (!markup) return content;
+
+  const { vars } = compile(stripTags(markup), {
+    generate: false,
+    varsReport: 'full',
+    errorMode: 'warn',
+    filename,
+  });
 
-  basePath = dirname(tsconfigFile);
+  const sep = `\n${injectedCodeSeparator}\n`;
+  const varnames = vars.map((v) =>
+    v.name.startsWith('$') && !v.name.startsWith('$$')
+      ? `${v.name},${v.name.slice(1)}`
+      : v.name,
+  );
 
-  const { error, config } = ts.readConfigFile(tsconfigFile, ts.sys.readFile);
+  // TODO investigate if it's possible to achieve this with a
+  // TS transformer (previous attemps have failed)
+  const codestores = Array.from(
+    content.match(/\$[^\s();:,[\]{}.?!+-=*/~|&%<>^]+/g) || [],
+    (name) => name.slice(1),
+  ).filter((name) => !javascriptReservedKeywords.has(name));
 
-  if (error) {
-    throw new Error(formatDiagnostics(error, basePath));
+  const varsString = [...codestores, ...varnames].join(',');
+  const injectedVars = `const $$vars$$ = [${varsString}];`;
+  const injectedCode =
+    attributes?.context === 'module'
+      ? `${sep}${getScriptContent(markup, false)}\n${injectedVars}`
+      : `${sep}${getScriptContent(markup, true)}\n${injectedVars}`;
+
+  if (sourceMapChain) {
+    const s = new MagicString(content);
+
+    s.append(injectedCode);
+
+    const fname = `${filename}.injected.ts`;
+    const code = s.toString();
+    const map = s.generateMap({
+      source: filename,
+      file: fname,
+    });
+
+    sourceMapChain.content[fname] = code;
+    sourceMapChain.sourcemaps[fname] = map;
+
+    return code;
   }
 
-  // Do this so TS will not search for initial files which might take a while
-  config.include = [];
+  return `${content}${injectedCode}`;
+}
 
-  let { errors, options } = ts.parseJsonConfigFileContent(
-    config,
-    ts.sys,
-    basePath,
-    compilerOptionsJSON,
-    tsconfigFile,
-  );
+function stripInjectedCode({
+  transpiledCode,
+  markup,
+  filename,
+  sourceMapChain,
+}: {
+  transpiledCode: string;
+  markup?: string;
+  filename: string;
+  sourceMapChain?: SourceMapChain;
+}): string {
+  if (!markup) return transpiledCode;
+
+  const injectedCodeStart = transpiledCode.indexOf(injectedCodeSeparator);
+
+  if (sourceMapChain) {
+    const s = new MagicString(transpiledCode);
+    const st = s.snip(0, injectedCodeStart);
+
+    const source = `${filename}.transpiled.js`;
+    const file = `${filename}.js`;
+    const code = st.toString();
+    const map = st.generateMap({
+      source,
+      file,
+    });
+
+    sourceMapChain.content[file] = code;
+    sourceMapChain.sourcemaps[file] = map;
+
+    return code;
+  }
 
-  // Filter out "no files found error"
-  errors = errors.filter((d) => d.code !== 18003);
+  return transpiledCode.slice(0, injectedCodeStart);
+}
 
-  return { errors, options };
+async function concatSourceMaps({
+  filename,
+  markup,
+  sourceMapChain,
+}: {
+  filename: string;
+  markup?: string;
+  sourceMapChain?: SourceMapChain;
+}): Promise<string | object | undefined> {
+  if (!sourceMapChain) return;
+
+  if (!markup) {
+    return sourceMapChain.sourcemaps[`${filename}.js`];
+  }
+
+  const chain = await sorcery.load(`${filename}.js`, sourceMapChain);
+
+  return chain.apply();
 }
 
-const transformer: Transformer<Options.Typescript> = ({
-  content,
+function getCompilerOptions({
   filename,
-  options = {},
-}) => {
+  options,
+  basePath,
+}: {
+  filename: string;
+  options: Options.Typescript;
+  basePath: string;
+}): CompilerOptions {
   // default options
   const compilerOptionsJSON = {
     moduleResolution: 'node',
     target: 'es6',
   };
 
-  const basePath = process.cwd();
-
   Object.assign(compilerOptionsJSON, options.compilerOptions);
 
   const { errors, options: convertedCompilerOptions } =
@@ -143,21 +267,37 @@ const transformer: Transformer<Options.Typescript> = ({
     );
   }
 
-  const absoluteFilename = isAbsolute(filename)
-    ? filename
-    : resolve(basePath, filename);
+  return compilerOptions;
+}
 
+function transpileTs({
+  code,
+  fileName,
+  basePath,
+  options,
+  compilerOptions,
+  transformers,
+}: {
+  code: string;
+  fileName: string;
+  basePath: string;
+  options: Options.Typescript;
+  compilerOptions: CompilerOptions;
+  transformers?: ts.CustomTransformers;
+}): {
+  transpiledCode: string;
+  diagnostics: ts.Diagnostic[];
+  sourceMapText: string;
+} {
   const {
-    outputText: code,
-    sourceMapText: map,
+    outputText: transpiledCode,
+    sourceMapText,
     diagnostics,
-  } = ts.transpileModule(content, {
-    fileName: absoluteFilename,
+  } = ts.transpileModule(code, {
+    fileName,
     compilerOptions,
     reportDiagnostics: options.reportDiagnostics !== false,
-    transformers: {
-      before: [importTransformer],
-    },
+    transformers,
   });
 
   if (diagnostics.length > 0) {
@@ -175,11 +315,194 @@ const transformer: Transformer<Options.Typescript> = ({
     }
   }
 
+  return { transpiledCode, sourceMapText, diagnostics };
+}
+
+export function loadTsconfig(
+  compilerOptionsJSON: any,
+  filename: string,
+  tsOptions: Options.Typescript,
+) {
+  if (typeof tsOptions.tsconfigFile === 'boolean') {
+    return { errors: [], options: compilerOptionsJSON };
+  }
+
+  let basePath = process.cwd();
+
+  const fileDirectory = (tsOptions.tsconfigDirectory ||
+    dirname(filename)) as string;
+
+  let tsconfigFile =
+    tsOptions.tsconfigFile ||
+    ts.findConfigFile(fileDirectory, ts.sys.fileExists);
+
+  if (!tsconfigFile) {
+    return { errors: [], options: {} };
+  }
+
+  tsconfigFile = isAbsolute(tsconfigFile)
+    ? tsconfigFile
+    : join(basePath, tsconfigFile);
+
+  basePath = dirname(tsconfigFile);
+
+  const { error, config } = ts.readConfigFile(tsconfigFile, ts.sys.readFile);
+
+  if (error) {
+    throw new Error(formatDiagnostics(error, basePath));
+  }
+
+  // Do this so TS will not search for initial files which might take a while
+  config.include = [];
+
+  let { errors, options } = ts.parseJsonConfigFileContent(
+    config,
+    ts.sys,
+    basePath,
+    compilerOptionsJSON,
+    tsconfigFile,
+  );
+
+  // Filter out "no files found error"
+  errors = errors.filter((d) => d.code !== 18003);
+
+  return { errors, options };
+}
+
+async function mixedImportsTranspiler({
+  content,
+  filename = 'source.svelte',
+  markup,
+  options = {},
+  attributes,
+  compilerOptions,
+  basePath,
+}: InternalTransformerOptions) {
+  const sourceMapChain = createSourceMapChain({
+    filename,
+    content,
+    compilerOptions,
+  });
+
+  const injectedCode = injectVarsToCode({
+    content,
+    markup,
+    filename,
+    attributes,
+    sourceMapChain,
+  });
+
+  const { transpiledCode, sourceMapText, diagnostics } = transpileTs({
+    code: injectedCode,
+    fileName: `${filename}.injected.ts`,
+    basePath,
+    options,
+    compilerOptions,
+  });
+
+  if (sourceMapChain) {
+    const fname = `${filename}.transpiled.js`;
+
+    sourceMapChain.content[fname] = transpiledCode;
+    sourceMapChain.sourcemaps[fname] = JSON.parse(sourceMapText);
+  }
+
+  const code = stripInjectedCode({
+    transpiledCode,
+    markup,
+    filename,
+    sourceMapChain,
+  });
+
+  // Sorcery tries to load the code/map from disk if it's empty,
+  // prevent that because it would try to load inexistent files
+  // https://github.com/Rich-Harris/sorcery/issues/167
+  if (!code) {
+    return { code, diagnostics };
+  }
+
+  const map = await concatSourceMaps({
+    filename,
+    markup,
+    sourceMapChain,
+  });
+
   return {
     code,
     map,
     diagnostics,
   };
+}
+
+async function simpleTranspiler({
+  content,
+  filename = 'source.svelte',
+  options = {},
+  compilerOptions,
+  basePath,
+}: InternalTransformerOptions) {
+  const { transpiledCode, sourceMapText, diagnostics } = transpileTs({
+    code: content,
+    transformers: { before: [importTransformer] },
+    fileName: filename,
+    basePath,
+    options,
+    compilerOptions,
+  });
+
+  return {
+    code: transpiledCode,
+    map: sourceMapText,
+    diagnostics,
+  };
+}
+
+const transformer: Transformer<Options.Typescript> = async ({
+  content,
+  filename,
+  markup,
+  options = {},
+  attributes,
+}) => {
+  const basePath = process.cwd();
+
+  filename = isAbsolute(filename) ? filename : resolve(basePath, filename);
+
+  const compilerOptions = getCompilerOptions({ filename, options, basePath });
+  const versionParts = pkg.version.split('.');
+  const canUseMixedImportsTranspiler =
+    +versionParts[0] > 3 || (+versionParts[0] === 3 && +versionParts[1] >= 39);
+
+  if (!canUseMixedImportsTranspiler && options.handleMixedImports) {
+    throw new Error(
+      'You need at least Svelte 3.39 to use the handleMixedImports option',
+    );
+  }
+
+  const handleMixedImports =
+    options.handleMixedImports === false
+      ? false
+      : options.handleMixedImports || canUseMixedImportsTranspiler;
+
+  return handleMixedImports
+    ? mixedImportsTranspiler({
+        content,
+        filename,
+        markup,
+        options,
+        attributes,
+        compilerOptions,
+        basePath,
+      })
+    : simpleTranspiler({
+        content,
+        filename,
+        markup,
+        options,
+        attributes,
+        compilerOptions,
+        basePath,
+      });
 };
 
 export { transformer };
diff --git a/src/types/index.ts b/src/types/index.ts
index dfaf53ec..eb1af1ba 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -23,6 +23,7 @@ export type TransformerArgs<T> = {
   filename: string;
   attributes?: Record<string, any>;
   map?: string | object;
+  markup?: string;
   dianostics?: unknown[];
   options?: T;
 };
diff --git a/src/types/options.ts b/src/types/options.ts
index 266a6fa3..99dc4ec4 100644
--- a/src/types/options.ts
+++ b/src/types/options.ts
@@ -74,6 +74,7 @@ export type Typescript = {
   tsconfigFile?: string | boolean;
   tsconfigDirectory?: string | boolean;
   reportDiagnostics?: boolean;
+  handleMixedImports?: boolean;
 } & ContentModifier;
 
 export interface GlobalStyle {
diff --git a/test/autoProcess/externalFiles.test.ts b/test/autoProcess/externalFiles.test.ts
index c736575d..8c2779f7 100644
--- a/test/autoProcess/externalFiles.test.ts
+++ b/test/autoProcess/externalFiles.test.ts
@@ -26,20 +26,24 @@ describe('external files', () => {
   afterEach(warnSpy.mockClear);
 
   it('should insert external file content and add as deps', async () => {
+    const code = `<template src="./fixtures/template.html"></template>
+    <style src="./fixtures/style.css"></style>
+    <script src="./fixtures/script.js"></script>`;
+
     const [markup, script, style] = [
       await markupProcessor({
-        content: `<template src="./fixtures/template.html"></template>
-        <style src="./fixtures/style.css"></style>
-        <script src="./fixtures/script.js"></script>`,
+        content: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
       }),
       await scriptProcessor({
         content: ``,
+        markup: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
         attributes: { src: `./fixtures/script.js` },
       }),
       await styleProcessor({
         content: ``,
+        markup: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
         attributes: { src: `./fixtures/style.css` },
       }),
diff --git a/test/fixtures/TypeScriptImports.svelte b/test/fixtures/TypeScriptImports.svelte
new file mode 100644
index 00000000..755ff47d
--- /dev/null
+++ b/test/fixtures/TypeScriptImports.svelte
@@ -0,0 +1,122 @@
+<script lang="ts" context="module">
+    onlyUsedInModuleScript;
+</script>
+
+<script lang="ts">
+    // Some of these imports don't exist on disk, but they don't need to for this test.
+    import { fly } from "svelte/transition";
+    import { flip } from "svelte/animate";
+    import Nested from "./Nested.svelte";
+    import { hello } from "./script";
+    import { AValue, AType } from "./types";
+    import { storeTemplateOnly, storeScriptOnly } from "./store";
+    import { onlyUsedInModuleScript } from "./modulescript";
+    const ui = { MyNested: Nested };
+    const val: AType = "test1";
+    const prom: Promise<AType> = Promise.resolve("test2");
+    const arr: AType[] = ["test1", "test2"];
+    const isTest1 = (v: AType) => v === "test1";
+    const obj = {
+        fn: () => "test",
+        val: "test1" as const,
+        $in: ""
+    };
+    let inputVal: string;
+    const action = (node: Element, options: { id: string; }) => { node.id = options.id; };
+    const action2 = (node: Element) => { node.classList.add("test"); };
+    let nested: Nested;
+    
+    let scrollY = 500;
+    let innerWidth = 500;
+    
+    const duration = 200;
+    function onKeyDown(e: KeyboardEvent): void {
+        e.preventDefault();
+    }
+    $storeScriptOnly;
+</script>
+
+<style>
+    .value { color: #ccc; }
+</style>
+
+<svelte:window on:keydown={onKeyDown} {scrollY} bind:innerWidth />
+<svelte:body on:keydown={onKeyDown} />
+
+<svelte:head>
+    <title>Title: {val}</title>
+</svelte:head>
+
+{$storeTemplateOnly}
+
+<div>
+    <Nested let:var1 let:var2={var3}>
+        <Nested bind:this={nested} />
+        <Nested {...obj} />
+        <Nested {...{ var1, var3 }} />
+
+        <svelte:fragment slot="slot1" let:var4={var5}>
+            <Nested {...{ var5 }} />
+        </svelte:fragment>
+
+        <div slot="slot2" let:var6={var7}>
+            <Nested {...{ var7 }} />
+        </div>
+
+        <div slot="slot3">
+            <Nested {...{ val }} />
+        </div>
+    </Nested>
+
+    <svelte:component this={ui.MyNested} {val} on:keydown={onKeyDown} bind:inputVal />
+
+    <p class:value={!!inputVal}>{hello}</p>
+    <input bind:value={inputVal} use:action={{ id: val }} use:action2 />
+
+    {#if AValue && val}
+        <p class="value" transition:fly={{ duration }}>There is a value: {AValue}</p>
+    {/if}
+
+    {#if val && isTest1(val) && AValue && true && "test"}
+        <p class="value">There is a value: {AValue}</p>
+    {:else if obj.val && obj.fn() && isTest1(obj.val)}
+        <p class="value">There is a value: {AValue}</p>
+    {:else}
+        Else
+    {/if}
+
+    {#each arr as item (item)}
+        <p animate:flip={{ duration }}>{item}</p>
+    {/each}
+
+    {#each arr as item}
+        <p>{item}</p>
+    {:else}
+        <p>No items</p>
+    {/each}
+
+    {#await prom}
+        Loading...
+    {:then value} 
+        <input type={val} {value} on:input={e => inputVal = e.currentTarget.value} />
+    {:catch err}
+        <p>Error: {err}</p>
+    {/await}
+
+    {#await prom then value}
+        <p>{value}</p>
+    {/await}
+
+    {#key val}
+        <p>Keyed {val}</p>
+    {/key}
+
+    <slot name="slot0" {inputVal}>
+        <p>{inputVal}</p>
+    </slot>
+
+    {@html val}
+    {@debug val, inputVal}
+</div>
+
+<!-- Some comment -->
diff --git a/test/fixtures/TypeScriptImportsModule.svelte b/test/fixtures/TypeScriptImportsModule.svelte
new file mode 100644
index 00000000..b885f8eb
--- /dev/null
+++ b/test/fixtures/TypeScriptImportsModule.svelte
@@ -0,0 +1,10 @@
+<script lang="ts" context="module">
+    import { AValue, AType } from "./types";
+</script>
+
+<script lang="ts">
+    const val: AType = "test1";
+    const aValue = AValue;
+</script>
+
+{val} {aValue}
\ No newline at end of file
diff --git a/test/fixtures/TypeScriptTypesOnly.svelte b/test/fixtures/TypeScriptTypesOnly.svelte
new file mode 100644
index 00000000..950e16fc
--- /dev/null
+++ b/test/fixtures/TypeScriptTypesOnly.svelte
@@ -0,0 +1,5 @@
+<script lang="ts" context="module">
+    interface Hello {
+        foo: boolean;
+    }
+</script>
diff --git a/test/modules/modules.test.ts b/test/modules/modules.test.ts
index 51d4fcb5..5a48e330 100644
--- a/test/modules/modules.test.ts
+++ b/test/modules/modules.test.ts
@@ -59,6 +59,7 @@ describe(`get tag information`, () => {
   it('should only include src files if content is empty', async () => {
     let parsedFile = await getTagInfo({
       content: '',
+      markup: '',
       attributes: { src: './fixtures/style.scss' },
       filename: getTestAppFilename(),
     });
diff --git a/test/transformers/globalStyle.test.ts b/test/transformers/globalStyle.test.ts
index dd8a4b22..8009c995 100644
--- a/test/transformers/globalStyle.test.ts
+++ b/test/transformers/globalStyle.test.ts
@@ -6,15 +6,24 @@ describe('transformer - globalStyle', () => {
     // todo: why it isn't generating a sourcemap?
     it('adds sourceMap with { sourceMap: true }', async () => {
       const template = `<style global>div,span{color:red}.test{}</style>`;
-      const opts = autoProcess({
-        globalStyle: {
-          sourceMap: true,
-        },
-      });
 
-      const preprocessed = await preprocess(template, opts);
+      const preprocessedWithMap: any = await preprocess(
+        template,
+        autoProcess({
+          globalStyle: {
+            sourceMap: true,
+          },
+        }),
+      );
 
-      expect(preprocessed.toString()).toContain(`sourceMappingURL`);
+      const preprocessedWithoutMap: any = await preprocess(
+        template,
+        autoProcess(),
+      );
+
+      expect(preprocessedWithMap.map.mappings).not.toEqual(
+        preprocessedWithoutMap.map?.mappings,
+      );
     });
 
     it('wraps selector in :global(...) modifier', async () => {
@@ -127,15 +136,24 @@ describe('transformer - globalStyle', () => {
   describe('global selector', () => {
     it('adds sourceMap with { sourceMap: true }', async () => {
       const template = `<style>:global div{color:red}:global .test{}</style>`;
-      const opts = autoProcess({
-        globalStyle: {
-          sourceMap: true,
-        },
-      });
 
-      const preprocessed = await preprocess(template, opts);
+      const preprocessedWithMap: any = await preprocess(
+        template,
+        autoProcess({
+          globalStyle: {
+            sourceMap: true,
+          },
+        }),
+      );
 
-      expect(preprocessed.toString()).toContain(`sourceMappingURL`);
+      const preprocessedWithoutMap: any = await preprocess(
+        template,
+        autoProcess(),
+      );
+
+      expect(preprocessedWithMap.map.mappings).not.toEqual(
+        preprocessedWithoutMap.map?.mappings,
+      );
     });
 
     it('wraps selector in :global(...) modifier', async () => {
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 95342039..563bb534 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -29,6 +29,7 @@ const autoProcessTS = (content: string, compilerOptions?: any) => {
 
   return opts.script({
     content,
+    markup: `<script lang="ts">${content}</script>`,
     attributes: { type: 'text/typescript' },
     filename: resolve(__dirname, '..', 'App.svelte'),
   }) as Processed & { diagnostics: Diagnostic[] };
@@ -107,7 +108,70 @@ describe('transformer - typescript', () => {
 
       const { code } = await preprocess(template, opts);
 
-      return expect(code).toContain(getFixtureContent('script.js'));
+      expect(code).toContain(getFixtureContent('script.js'));
+    });
+
+    it('should strip unused and type imports', async () => {
+      const tpl = getFixtureContent('TypeScriptImports.svelte');
+
+      const opts = sveltePreprocess({
+        typescript: { tsconfigFile: false },
+      });
+
+      const { code } = await preprocess(tpl, opts);
+
+      // Test that imports are properly preserved
+      expect(code).toContain(`import { fly } from "svelte/transition"`);
+      expect(code).toContain(`import { flip } from "svelte/animate"`);
+      expect(code).toContain(`import Nested from "./Nested.svelte"`);
+      expect(code).toContain(`import { hello } from "./script"`);
+      expect(code).toContain(`import { AValue } from "./types"`);
+      expect(code).toContain(
+        `import { storeTemplateOnly, storeScriptOnly } from "./store"`,
+      );
+      expect(code).toContain(
+        `import { onlyUsedInModuleScript } from "./modulescript";`,
+      );
+      // Test that comments are properly preserved
+      expect(code).toContain('<!-- Some comment -->');
+    });
+
+    it('should deal with empty transpilation result', async () => {
+      const tpl = getFixtureContent('TypeScriptTypesOnly.svelte');
+
+      const opts = sveltePreprocess({
+        typescript: { tsconfigFile: false },
+        sourceMap: true,
+      });
+
+      const { code } = await preprocess(tpl, opts);
+
+      expect(code).toBe(`<script lang="ts" context="module"></script>`);
+    });
+
+    it('should strip unused and type imports in context="module" tags', async () => {
+      const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
+
+      const opts = sveltePreprocess({
+        typescript: { tsconfigFile: false },
+      });
+
+      const { code } = await preprocess(tpl, opts);
+
+      expect(code).toContain(`import { AValue } from "./types";`);
+    });
+
+    it('should produce sourcemap', async () => {
+      const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
+
+      const opts = sveltePreprocess({
+        typescript: { tsconfigFile: false },
+        sourceMap: true,
+      });
+
+      const { map } = await preprocess(tpl, opts);
+
+      expect(map).toHaveProperty('sources', ['App.svelte']);
     });
 
     it('supports extends field', () => {
diff --git a/tsconfig.json b/tsconfig.json
index 9d0f8b52..1a536fa4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,7 @@
     "target": "es2018",
     "lib": ["es2018"],
     "declaration": true,
+    "skipLibCheck": true,
     "types": ["jest", "node"],
     "outDir": "dist"
   },
diff --git a/yarn.lock b/yarn.lock
index c559e791..8676a7a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2008,6 +2008,11 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-crc32@^0.2.5:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
 buffer-from@1.x, buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -2860,6 +2865,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es6-promise@^3.1.2:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+  integrity sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -3594,6 +3604,11 @@ graceful-fs@^4.1.2, graceful-fs@^4.2.4:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+graceful-fs@^4.1.3:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -4928,6 +4943,13 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -6355,7 +6377,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@2:
+rimraf@2, rimraf@^2.5.2:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -6408,6 +6430,16 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sander@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/sander/-/sander-0.5.1.tgz#741e245e231f07cafb6fdf0f133adfa216a502ad"
+  integrity sha1-dB4kXiMfB8r7b98PEzrfohalAq0=
+  dependencies:
+    es6-promise "^3.1.2"
+    graceful-fs "^4.1.3"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.2"
+
 sane@^4.0.3:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
@@ -6622,6 +6654,16 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+sorcery@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.10.0.tgz#8ae90ad7d7cb05fc59f1ab0c637845d5c15a52b7"
+  integrity sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=
+  dependencies:
+    buffer-crc32 "^0.2.5"
+    minimist "^1.2.0"
+    sander "^0.5.0"
+    sourcemap-codec "^1.3.0"
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -6668,6 +6710,11 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -6983,10 +7030,10 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
-svelte@^3.23.0:
-  version "3.31.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.31.0.tgz#13966e5f55b975bc86675469bb2c58dd0e558d97"
-  integrity sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==
+svelte@^3.42.0:
+  version "3.42.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.42.2.tgz#0246c175c820c1aeca07300c48573a15aae3c1e4"
+  integrity sha512-FOyNYKXb8wdE0Ot+Ctt2/OyDLsNBP8+V6PUE9ag6ZKeLslIou0LnMu1fhtWUA+HjzKTbAM1yj+4PFLtg/3pMJA==
 
 symbol-tree@^3.2.2:
   version "3.2.4"