Repository: sveltejs/svelte-preprocess
Pull request #641 (2024-06-14 09:06:07)

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.

Related: https://github.com/sveltejs/svelte-preprocess/issues/591#issuecomment-2166807552

### Before submitting the PR, please make sure you do the following

- [ ] It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason.
- [x] This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
- [ ] Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to run `pnpm lint`!)

### Tests

- [x] Run the tests with `npm test` or `pnpm test`



Patch:
diff --git a/README.md b/README.md
index a4ac2d6..f94ceab 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 9465c17..99d1570 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 26f73aa..e4b83bc 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 fe738c5..28aa83b 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 7f14df5..422fe10 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/package.json b/package.json
index 9667d2b..16da7ee 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",
diff --git a/src/index.ts b/src/index.ts
index baa7f30..700d2db 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
-
+/** @deprecated Use the named export instead: `import { sveltePreprocess } from 'svelte-preprocess'` */
 // eslint-disable-next-line no-multi-assign
 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 6244bf7..890d297 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 c637917..97be16f 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 786718f..ef23a18 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 fc67126..bed7702 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 0cbba59..14ee382 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 195a4dd..8c72961 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 22a582b..c3c0dd3 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 b3ca766..0e50bf9 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 3405ad6..b2d190d 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 079a87d..8d00c97 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 };


Test patch:
diff --git a/test/autoProcess/autoProcess.test.ts b/test/autoProcess/autoProcess.test.ts
index 89c6b40..6173d4d 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 261250c..c54bcdc 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 32b74fb..69e65c8 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 447afd2..25080ea 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 3f5b8a5..ce5dff4 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 ad9cd9f..0c80ff2 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 133efcb..4d95c49 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 5e5a381..ce55053 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 c9af99d..7f88f2b 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 c08e189..96dc13a 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 9ab5283..ed6b17a 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 2128785..bd2eb33 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 59d7117..53c67e9 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,