fix: deprecate default export in favor of named export (#641)

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: #591

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}
 ```

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';

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';
+```

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}
 ```

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,15 +52,14 @@ module.exports = {
 };
 ```
 
-
 _Tip: this file can be imported in your bundle config instead of having multiple svelte configurations lying around._
 
 ## With `rollup-plugin-svelte`
 
 ```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,

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",

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';

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

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

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

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

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;

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

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

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