From 5aaeee8ee299d3a2667b297657f45da214cc9540 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 14 Jun 2024 11:05:20 +0200
Subject: [PATCH 1/3] fix: deprecate default export in favor of named export

This deprecates the default export in favor of the new named export `sveltePreprocess`. It's done to ensure a better interop between CJS and ESM without resorting to hacks in the future. It also enables people using `"module": "NodeNext"` in their `tsconfig.json` to import without type errors.
The sub exports were also adjusted so that the transpiled TS output doesn't include `__importDefault` wrappers, which makes Node's static analysis miss those named exports.
---
 README.md                              | 10 ++++-----
 docs/getting-started.md                | 15 ++++++--------
 docs/migration-guide.md                |  6 ++++++
 docs/preprocessing.md                  | 16 +++++++--------
 docs/usage.md                          | 15 +++++++-------
 src/index.ts                           | 28 +++++++++++++++-----------
 src/processors/babel.ts                |  7 ++++++-
 src/processors/coffeescript.ts         |  7 ++++++-
 src/processors/globalStyle.ts          |  7 ++++++-
 src/processors/less.ts                 |  7 ++++++-
 src/processors/postcss.ts              |  5 ++++-
 src/processors/pug.ts                  |  7 ++++++-
 src/processors/replace.ts              |  7 ++++++-
 src/processors/scss.ts                 |  7 ++++++-
 src/processors/stylus.ts               |  7 ++++++-
 src/processors/typescript.ts           |  7 ++++++-
 test/autoProcess/autoProcess.test.ts   |  2 +-
 test/autoProcess/externalFiles.test.ts |  2 +-
 test/autoProcess/markup.test.ts        |  2 +-
 test/autoProcess/script.test.ts        |  2 +-
 test/autoProcess/sourceMaps.test.ts    |  2 +-
 test/autoProcess/style.test.ts         |  2 +-
 test/transformers/babel.test.ts        |  2 +-
 test/transformers/less.test.ts         |  2 +-
 test/transformers/postcss.test.ts      |  2 +-
 test/transformers/pug.test.ts          |  2 +-
 test/transformers/scss.test.ts         |  2 +-
 test/transformers/stylus.test.ts       |  2 +-
 test/transformers/typescript.test.ts   |  2 +-
 29 files changed, 118 insertions(+), 66 deletions(-)

diff --git a/README.md b/README.md
index a4ac2d6f..f94ceaba 100644
--- a/README.md
+++ b/README.md
@@ -41,10 +41,10 @@ Writing your own preprocessor for, i.e SCSS is easy enough, but it can be cumber
 It is recommended to use with `svelte.config.js` file, located at the project root. For other usage, please refer to [usage documentation](#usage-documentation).
 
 ```js
-import preprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 
 const config = {
-  preprocess: preprocess({ ... })
+  preprocess: sveltePreprocess({ ... })
 }
 
 export default config;
@@ -121,9 +121,9 @@ _**Note**: needs PostCSS to be installed._
 For example, with `@babel/preset-env` your config could be:
 
 ```js
-import preprocess from 'svelte-preprocess'
+import { sveltePreprocess } from 'svelte-preprocess'
   ...
-  preprocess: preprocess({
+  preprocess: sveltePreprocess({
     babel: {
       presets: [
         [
@@ -169,7 +169,7 @@ Which, in a production environment, would turn
 into
 
 ```svelte
-{#if "production" !== 'development'}
+{#if 'production' !== 'development'}
   <h1>Production environment!</h1>
 {/if}
 ```
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 9465c175..99d1570e 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -43,7 +43,7 @@ Let's use `svelte-preprocess` in [auto-preprocessing mode](/docs/preprocessing.m
 
 ```diff
 import svelte from 'rollup-plugin-svelte'
-+ import sveltePreprocess from 'svelte-preprocess';
++ import { sveltePreprocess } from 'svelte-preprocess';
 
 const production = !process.env.ROLLUP_WATCH
 
@@ -88,7 +88,7 @@ After the installation is complete, we still need to configure our PostCSS optio
 
 ```diff
 import svelte from 'rollup-plugin-svelte'
-import sveltePreprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 + import typescript from '@rollup/plugin-typescript';
 
 const production = !process.env.ROLLUP_WATCH
@@ -126,9 +126,7 @@ export default {
 And we're done! Our components can now be written as:
 
 ```html
-<template lang="pug">
-  h1 {name}
-</template>
+<template lang="pug"> h1 {name} </template>
 
 <script lang="ts">
   export let name: string = 'world';
@@ -140,6 +138,7 @@ And we're done! Our components can now be written as:
   }
 </style>
 ```
+
 ### 3.1 Prepending content
 
 Now we're in need of a SCSS file to hold some variables. Let's assume it's created at `src/styles/variables.scss`.
@@ -153,7 +152,7 @@ As in any SCSS project, we could just `@use './path/to/variables.scss`, but that
 
 ```diff
 import svelte from 'rollup-plugin-svelte'
-import sveltePreprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 
 export default {
   input: 'src/main.js',
@@ -192,9 +191,7 @@ export default {
 Voila! We can now reference a variable from our file without having to explicitly import it.
 
 ```html
-<template lang="pug">
-  h1 {name}
-</template>
+<template lang="pug"> h1 {name} </template>
 
 <script lang="ts">
   export let name: string = 'world';
diff --git a/docs/migration-guide.md b/docs/migration-guide.md
index 26f73aa2..e4b83bc8 100644
--- a/docs/migration-guide.md
+++ b/docs/migration-guide.md
@@ -97,3 +97,9 @@ In `v4`, your TypeScript code will only be transpiled into JavaScript, with no t
 - Node 18 or higher is required now
 - When using TypeScript, the minimum required version is now 5.0, `"verbatimModuleSyntax": true` is now required in your `tsconfig.json`, and the mixed imports transpiler (`handleMixedImports`) was removed
 - The `preserve` option was removed as it's obsolete
+- The default export is deprecated in favor of its new named export:
+
+```diff
+- import sveltePreprocess from 'svelte-preprocess';
++ import { sveltePreprocess } from 'svelte-preprocess';
+```
diff --git a/docs/preprocessing.md b/docs/preprocessing.md
index fe738c59..28aa83bc 100644
--- a/docs/preprocessing.md
+++ b/docs/preprocessing.md
@@ -34,7 +34,7 @@ In auto preprocessing mode, `svelte-preprocess` automatically uses the respectiv
 
 ```js
 import svelte from 'rollup-plugin-svelte'
-import sveltePreprocess from 'svelte-preprocess'
+import { sveltePreprocess } from 'svelte-preprocess'
 
 export default {
   plugins: [
@@ -49,7 +49,7 @@ As `svelte-preprocess` is just a Svelte preprocessor like any other, it's also p
 
 ```js
 import svelte from 'rollup-plugin-svelte'
-import sveltePreprocess from 'svelte-preprocess'
+import { sveltePreprocess } from 'svelte-preprocess'
 
 export default {
   plugins: [
@@ -79,7 +79,7 @@ Alongside the options above, you can also configure options of specific preproce
 
 ```js
 import svelte from 'rollup-plugin-svelte';
-import sveltePreprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 
 export default {
   plugins: [
@@ -110,7 +110,7 @@ It's also possible to create custom preprocessors, taking advantage of the autom
 
 ```js
 import svelte from 'rollup-plugin-svelte';
-import sveltePreprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 
 export default {
   plugins: [
@@ -146,7 +146,7 @@ To integrate `esbuild` with `svelte-preprocess` we can override the default Type
 
 ```js
 import svelte from 'rollup-plugin-svelte';
-import sveltePreprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 import { transformSync } from 'esbuild';
 
 export default {
@@ -332,9 +332,7 @@ button.big(type="button" disabled "{...slide.props}") Send
 Becomes:
 
 ```svelte
-<button class="big" type="button" disabled {...slide.props}>
-  Send
-</button>
+<button class="big" type="button" disabled {...slide.props}> Send </button>
 ```
 
 **Svelte Element directives:**
@@ -477,7 +475,7 @@ Allowing to write your component like:
 And the result, with a `NODE_ENV = 'production'` would be:
 
 ```svelte
-{#if "production" !== 'development'}
+{#if 'production' !== 'development'}
   <h1>Production environment!</h1>
 {/if}
 ```
diff --git a/docs/usage.md b/docs/usage.md
index 7f14df5f..422fe105 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -22,12 +22,12 @@ Write the config in ESM style when you have `"type": "module"` in your `package.
 
 ```js
 // svelte.config.js
-import preprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 
-/** 
+/**
  * This will add autocompletion if you're working with SvelteKit
- * 
- * @type {import('@sveltejs/kit').Config} 
+ *
+ * @type {import('@sveltejs/kit').Config}
  */
 const config = {
   preprocess: preprocess({
@@ -43,7 +43,7 @@ Write the config in CommonJS style when you don't have `"type": "module"` in you
 
 ```js
 // svelte.config.js
-const sveltePreprocess = require('svelte-preprocess');
+const { sveltePreprocess } = require('svelte-preprocess');
 module.exports = {
   preprocess: sveltePreprocess({
     // ...svelte-preprocess options
@@ -52,7 +52,6 @@ module.exports = {
 };
 ```
 
-
 _Tip: this file can be imported in your bundle config instead of having multiple svelte configurations lying around._
 
 ## With `rollup-plugin-svelte`
@@ -60,7 +59,7 @@ _Tip: this file can be imported in your bundle config instead of having multiple
 ```js
 // rollup.config.js
 import svelte from 'rollup-plugin-svelte';
-import sveltePreprocess from 'svelte-preprocess'
+import { sveltePreprocess } from 'svelte-preprocess'
 import { scss, coffeescript, pug } from 'svelte-preprocess'
 
 export default {
@@ -117,7 +116,7 @@ export default {
 
 ```js
 // ...
-import sveltePreprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 
 const preprocess = sveltePreprocess({
   postcss: true,
diff --git a/src/index.ts b/src/index.ts
index baa7f302..18b3996a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,18 +2,22 @@ import { sveltePreprocess } from './autoProcess';
 
 // default auto processor
 // crazy es6/cjs export mix for backward compatibility
-
 // eslint-disable-next-line no-multi-assign
+/** @deprecated Use the named export instead: `import { sveltePreprocess } from 'svelte-preprocess'` */
 export default exports = module.exports = sveltePreprocess;
 
-// stand-alone processors to be included manually */
-export { default as pug } from './processors/pug';
-export { default as coffeescript } from './processors/coffeescript';
-export { default as typescript } from './processors/typescript';
-export { default as less } from './processors/less';
-export { default as scss, default as sass } from './processors/scss';
-export { default as stylus } from './processors/stylus';
-export { default as postcss } from './processors/postcss';
-export { default as globalStyle } from './processors/globalStyle';
-export { default as babel } from './processors/babel';
-export { default as replace } from './processors/replace';
+// also export auto preprocessor as named export to sidestep default export type issues with "module": "NodeNext" in tsconfig.
+// Don't just do export { sveltePreprocess } because the transpiled output is wrong then.
+export { sveltePreprocess } from './autoProcess';
+
+// stand-alone processors to be included manually, use their named exports for better transpilation or else node will not detect the named exports properly
+export { pug } from './processors/pug';
+export { coffeescript } from './processors/coffeescript';
+export { typescript } from './processors/typescript';
+export { less } from './processors/less';
+export { scss, sass } from './processors/scss';
+export { stylus } from './processors/stylus';
+export { postcss } from './processors/postcss';
+export { globalStyle } from './processors/globalStyle';
+export { babel } from './processors/babel';
+export { replace } from './processors/replace';
diff --git a/src/processors/babel.ts b/src/processors/babel.ts
index 6244bf74..890d2974 100644
--- a/src/processors/babel.ts
+++ b/src/processors/babel.ts
@@ -4,7 +4,7 @@ import { prepareContent } from '../modules/prepareContent';
 
 import type { PreprocessorGroup, Options } from '../types';
 
-export default (options?: Options.Babel): PreprocessorGroup => ({
+const babel = (options?: Options.Babel): PreprocessorGroup => ({
   async script(svelteFile) {
     const { transformer } = await import('../transformers/babel');
 
@@ -26,3 +26,8 @@ export default (options?: Options.Babel): PreprocessorGroup => ({
     };
   },
 });
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default babel;
+export { babel };
diff --git a/src/processors/coffeescript.ts b/src/processors/coffeescript.ts
index c6379179..97be16fc 100644
--- a/src/processors/coffeescript.ts
+++ b/src/processors/coffeescript.ts
@@ -4,7 +4,7 @@ import { prepareContent } from '../modules/prepareContent';
 
 import type { PreprocessorGroup, Options } from '../types';
 
-export default (options?: Options.Coffeescript): PreprocessorGroup => ({
+const coffeescript = (options?: Options.Coffeescript): PreprocessorGroup => ({
   async script(svelteFile) {
     const { transformer } = await import('../transformers/coffeescript');
 
@@ -36,3 +36,8 @@ export default (options?: Options.Coffeescript): PreprocessorGroup => ({
     };
   },
 });
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default coffeescript;
+export { coffeescript };
diff --git a/src/processors/globalStyle.ts b/src/processors/globalStyle.ts
index 786718f8..ef23a187 100644
--- a/src/processors/globalStyle.ts
+++ b/src/processors/globalStyle.ts
@@ -1,6 +1,6 @@
 import type { PreprocessorGroup } from '../types';
 
-export default (): PreprocessorGroup => {
+const globalStyle = (): PreprocessorGroup => {
   return {
     async style({ content, attributes, filename }) {
       const { transformer } = await import('../transformers/globalStyle');
@@ -13,3 +13,8 @@ export default (): PreprocessorGroup => {
     },
   };
 };
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default globalStyle;
+export { globalStyle };
diff --git a/src/processors/less.ts b/src/processors/less.ts
index fc671262..bed77022 100644
--- a/src/processors/less.ts
+++ b/src/processors/less.ts
@@ -4,7 +4,7 @@ import { prepareContent } from '../modules/prepareContent';
 
 import type { PreprocessorGroup, Options } from '../types';
 
-export default (options?: Options.Less): PreprocessorGroup => ({
+const less = (options?: Options.Less): PreprocessorGroup => ({
   async style(svelteFile) {
     const { transformer } = await import('../transformers/less');
     let { content, filename, attributes, lang, dependencies } =
@@ -29,3 +29,8 @@ export default (options?: Options.Less): PreprocessorGroup => ({
     };
   },
 });
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default less;
+export { less };
diff --git a/src/processors/postcss.ts b/src/processors/postcss.ts
index 0cbba590..14ee3822 100644
--- a/src/processors/postcss.ts
+++ b/src/processors/postcss.ts
@@ -5,7 +5,7 @@ import { prepareContent } from '../modules/prepareContent';
 import type { PreprocessorGroup, Options } from '../types';
 
 /** Adapted from https://github.com/TehShrike/svelte-preprocess-postcss */
-export default (options?: Options.Postcss): PreprocessorGroup => ({
+const postcss = (options?: Options.Postcss): PreprocessorGroup => ({
   async style(svelteFile) {
     const { transformer } = await import('../transformers/postcss');
     let { content, filename, attributes, dependencies } =
@@ -27,3 +27,6 @@ export default (options?: Options.Postcss): PreprocessorGroup => ({
     };
   },
 });
+
+export { postcss };
+export default postcss;
diff --git a/src/processors/pug.ts b/src/processors/pug.ts
index 195a4dd3..8c729610 100644
--- a/src/processors/pug.ts
+++ b/src/processors/pug.ts
@@ -3,7 +3,7 @@ import { transformMarkup } from '../modules/markup';
 
 import type { Options, PreprocessorGroup } from '../types/index';
 
-export default (options?: Options.Pug): PreprocessorGroup => ({
+const pug = (options?: Options.Pug): PreprocessorGroup => ({
   async markup({ content, filename }) {
     const { transformer } = await import('../transformers/pug');
 
@@ -18,3 +18,8 @@ export default (options?: Options.Pug): PreprocessorGroup => ({
     return transformMarkup({ content, filename }, transformer, options);
   },
 });
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default pug;
+export { pug };
diff --git a/src/processors/replace.ts b/src/processors/replace.ts
index 22a582bb..c3c0dd33 100644
--- a/src/processors/replace.ts
+++ b/src/processors/replace.ts
@@ -1,9 +1,14 @@
 import type { PreprocessorGroup, Options } from '../types';
 
-export default (options: Options.Replace): PreprocessorGroup => ({
+const replace = (options: Options.Replace): PreprocessorGroup => ({
   async markup({ content, filename }) {
     const { transformer } = await import('../transformers/replace');
 
     return transformer({ content, filename, options });
   },
 });
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default replace;
+export { replace };
diff --git a/src/processors/scss.ts b/src/processors/scss.ts
index b3ca766c..0e50bf9c 100644
--- a/src/processors/scss.ts
+++ b/src/processors/scss.ts
@@ -4,7 +4,7 @@ import { prepareContent } from '../modules/prepareContent';
 
 import type { PreprocessorGroup, Options } from '../types';
 
-export default (options?: Options.Sass): PreprocessorGroup => ({
+const scss = (options?: Options.Sass): PreprocessorGroup => ({
   async style(svelteFile) {
     const { transformer } = await import('../transformers/scss');
     let { content, filename, attributes, lang, alias, dependencies } =
@@ -37,3 +37,8 @@ export default (options?: Options.Sass): PreprocessorGroup => ({
     };
   },
 });
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default scss;
+export { scss, scss as sass };
diff --git a/src/processors/stylus.ts b/src/processors/stylus.ts
index 3405ad6b..b2d190db 100644
--- a/src/processors/stylus.ts
+++ b/src/processors/stylus.ts
@@ -4,7 +4,7 @@ import { prepareContent } from '../modules/prepareContent';
 
 import type { Options, PreprocessorGroup } from '../types';
 
-export default (options?: Options.Stylus): PreprocessorGroup => ({
+const stylus = (options?: Options.Stylus): PreprocessorGroup => ({
   async style(svelteFile) {
     const { transformer } = await import('../transformers/stylus');
     let { content, filename, attributes, lang, dependencies } =
@@ -35,3 +35,8 @@ export default (options?: Options.Stylus): PreprocessorGroup => ({
     };
   },
 });
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default stylus;
+export { stylus };
diff --git a/src/processors/typescript.ts b/src/processors/typescript.ts
index 079a87da..8d00c97b 100644
--- a/src/processors/typescript.ts
+++ b/src/processors/typescript.ts
@@ -4,7 +4,7 @@ import { prepareContent } from '../modules/prepareContent';
 
 import type { Options, PreprocessorGroup } from '../types';
 
-export default (options?: Options.Typescript): PreprocessorGroup => ({
+const typescript = (options?: Options.Typescript): PreprocessorGroup => ({
   async script(svelteFile) {
     const { transformer } = await import('../transformers/typescript');
     let { content, markup, filename, attributes, lang, dependencies } =
@@ -30,3 +30,8 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
     };
   },
 });
+
+// both for backwards compat with old svelte-preprocess versions
+// (was only default export once, now is named export because of transpilation causing node not to detect the named exports of 'svelte-preprocess' otherwise)
+export default typescript;
+export { typescript };
diff --git a/test/autoProcess/autoProcess.test.ts b/test/autoProcess/autoProcess.test.ts
index 89c6b40d..6173d4d1 100644
--- a/test/autoProcess/autoProcess.test.ts
+++ b/test/autoProcess/autoProcess.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import {
   preprocess,
   getFixtureContent,
diff --git a/test/autoProcess/externalFiles.test.ts b/test/autoProcess/externalFiles.test.ts
index 261250ce..c54bcdc1 100644
--- a/test/autoProcess/externalFiles.test.ts
+++ b/test/autoProcess/externalFiles.test.ts
@@ -1,6 +1,6 @@
 import { resolve } from 'path';
 import { describe, it, expect, afterEach } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import {
   preprocess,
   getFixtureContent,
diff --git a/test/autoProcess/markup.test.ts b/test/autoProcess/markup.test.ts
index 32b74fb5..69e65c8b 100644
--- a/test/autoProcess/markup.test.ts
+++ b/test/autoProcess/markup.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, test } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess, getFixtureContent, doesCompileThrow } from '../utils';
 
 const EXPECTED_MARKUP = getFixtureContent('template.html');
diff --git a/test/autoProcess/script.test.ts b/test/autoProcess/script.test.ts
index 447afd2c..25080eae 100644
--- a/test/autoProcess/script.test.ts
+++ b/test/autoProcess/script.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess, getFixtureContent } from '../utils';
 
 const SCRIPT_LANGS: Array<[string, string, any?]> = [
diff --git a/test/autoProcess/sourceMaps.test.ts b/test/autoProcess/sourceMaps.test.ts
index 3f5b8a56..ce5dff48 100644
--- a/test/autoProcess/sourceMaps.test.ts
+++ b/test/autoProcess/sourceMaps.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterAll } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess } from '../utils';
 import { transformer as babelTransformer } from '../../src/transformers/babel';
 import { transformer as coffeeTransformer } from '../../src/transformers/coffeescript';
diff --git a/test/autoProcess/style.test.ts b/test/autoProcess/style.test.ts
index ad9cd9fb..0c80ff2a 100644
--- a/test/autoProcess/style.test.ts
+++ b/test/autoProcess/style.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess, getFixtureContent, CSS_PATTERN } from '../utils';
 
 const STYLE_LANGS: Array<[string, string]> = [
diff --git a/test/transformers/babel.test.ts b/test/transformers/babel.test.ts
index 133efcb2..4d95c49e 100644
--- a/test/transformers/babel.test.ts
+++ b/test/transformers/babel.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess } from '../utils';
 
 const BABEL_CONFIG = {
diff --git a/test/transformers/less.test.ts b/test/transformers/less.test.ts
index 5e5a3810..ce55053b 100644
--- a/test/transformers/less.test.ts
+++ b/test/transformers/less.test.ts
@@ -1,6 +1,6 @@
 import { resolve } from 'path';
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess } from '../utils';
 
 describe('transformer - less', () => {
diff --git a/test/transformers/postcss.test.ts b/test/transformers/postcss.test.ts
index c9af99df..7f88f2b6 100644
--- a/test/transformers/postcss.test.ts
+++ b/test/transformers/postcss.test.ts
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 import { resolve } from 'path';
 import { test, expect, vi } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess, spyConsole } from '../utils';
 import { transformer } from '../../src/transformers/postcss';
 
diff --git a/test/transformers/pug.test.ts b/test/transformers/pug.test.ts
index c08e1898..96dc13a5 100644
--- a/test/transformers/pug.test.ts
+++ b/test/transformers/pug.test.ts
@@ -1,6 +1,6 @@
 import { resolve } from 'path';
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess } from '../utils';
 
 describe('transformer - pug', () => {
diff --git a/test/transformers/scss.test.ts b/test/transformers/scss.test.ts
index 9ab52835..ed6b17a3 100644
--- a/test/transformers/scss.test.ts
+++ b/test/transformers/scss.test.ts
@@ -3,7 +3,7 @@
 
 import { resolve } from 'path';
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess } from '../utils';
 import { transformer } from '../../src/transformers/scss';
 
diff --git a/test/transformers/stylus.test.ts b/test/transformers/stylus.test.ts
index 21287853..bd2eb334 100644
--- a/test/transformers/stylus.test.ts
+++ b/test/transformers/stylus.test.ts
@@ -1,6 +1,6 @@
 import { resolve } from 'path';
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { preprocess } from '../utils';
 
 describe('transformer - stylus', () => {
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 59d71178..53c67e93 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -1,7 +1,7 @@
 import { resolve } from 'path';
 import { compile } from 'svelte/compiler';
 import { describe, it, expect } from 'vitest';
-import sveltePreprocess from '../../src';
+import { sveltePreprocess } from '../../src';
 import { loadTsconfig } from '../../src/transformers/typescript';
 import {
   preprocess,

From 923cd108dac3c8f5259eb00f8fc254ea436df6e5 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 14 Jun 2024 11:09:42 +0200
Subject: [PATCH 2/3] lint

---
 src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 18b3996a..700d2db4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,8 +2,8 @@ import { sveltePreprocess } from './autoProcess';
 
 // default auto processor
 // crazy es6/cjs export mix for backward compatibility
-// eslint-disable-next-line no-multi-assign
 /** @deprecated Use the named export instead: `import { sveltePreprocess } from 'svelte-preprocess'` */
+// eslint-disable-next-line no-multi-assign
 export default exports = module.exports = sveltePreprocess;
 
 // also export auto preprocessor as named export to sidestep default export type issues with "module": "NodeNext" in tsconfig.

From e34d5658afba2e825d08d1ef9a3f5510fd5b6767 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 14 Jun 2024 11:28:37 +0200
Subject: [PATCH 3/3] set type field

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 9667d2b9..16da7eee 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "type": "commonjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",