How to add stylus support to svelte & rollup

Question

I have no clue what I'm doing wrong. I simply want to use stylus in my svelte files. Essentially I wanted to try and adapt https://github.com/sveltejs/svelte-preprocess/tree/main/examples/sapper-rollup. Using typescript as well as stylus as mentioned.

I always get the error cannot read length of undefined when I add the stylus code shown below. It works with plain css. SCSS for example doesn't work either.

// rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import config from 'sapper/config/rollup.js'
import path from 'path'
import pkg from './package.json'
import replace from '@rollup/plugin-replace'
import resolve from '@rollup/plugin-node-resolve'
import svelte from 'rollup-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess'
import typescript from '@rollup/plugin-typescript'
import url from '@rollup/plugin-url'
import { terser } from 'rollup-plugin-terser'

const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD

const onwarn = (warning, onwarn) =>
   (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
   (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
   (warning.code === 'THIS_IS_UNDEFINED') ||
   onwarn(warning)

export default {
   client: {
      input: config.client.input().replace(/\.js$/, '.ts'),
      output: config.client.output(),
      plugins: [
         replace({
            'process.browser': true,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         svelte({
            dev,
            hydratable: true,
            preprocess: sveltePreprocess({
               stylus: {
                  includePaths: ['src'],
               },
               postcss: {
                  plugins: [require('postcss-import')],
               },
            }),
            emitCss: true
         }),
         url({
            sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
            publicPath: '/client/'
         }),
         resolve({
            browser: true,
            dedupe: ['svelte']
         }),
         commonjs(),
         typescript({ sourceMap: dev }),

         legacy && babel({
            extensions: ['.js', '.mjs', '.html', '.svelte'],
            babelHelpers: 'runtime',
            exclude: ['node_modules/@babel/**'],
            presets: [
               ['@babel/preset-env', {
                  targets: '> 0.25%, not dead'
               }]
            ],
            plugins: [
               '@babel/plugin-syntax-dynamic-import',
               ['@babel/plugin-transform-runtime', {
                  useESModules: true
               }]
            ]
         }),

         !dev && terser({
            module: true
         })
      ],

      preserveEntrySignatures: false,
      onwarn,
   },

   server: {
      input: { server: config.server.input().server.replace(/\.js$/, ".ts") },
      output: config.server.output(),
      plugins: [
         replace({
            'process.browser': false,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         svelte({
            generate: 'ssr',
            hydratable: true,
            preprocess: sveltePreprocess(),
            dev
         }),
         url({
            sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
            publicPath: '/client/',
            emitFiles: false // already emitted by client build
         }),
         resolve({
            dedupe: ['svelte']
         }),
         commonjs(),
         typescript({ sourceMap: dev })
      ],
      external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),

      preserveEntrySignatures: 'strict',
      onwarn,
   },

   serviceworker: {
      input: config.serviceworker.input().replace(/\.js$/, '.ts'),
      output: config.serviceworker.output(),
      plugins: [
         resolve(),
         replace({
            'process.browser': true,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         commonjs(),
         typescript({ sourceMap: dev }),
         !dev && terser()
      ],

      preserveEntrySignatures: false,
      onwarn,
   }
}

Here is an example code snippet

// component
<style type="text/stylus">
  main
    position relative
    max-width 56em
    background-color white
    padding 2em
    margin 0 auto
    box-sizing border-box
</style>

I think the mistake is somewhere in my rollup.config.js but I don't know/understand what I did wrong.

Answer 1

It's a compatibility issue between svelte-preprocess and svelte@3.30.

You're not the only one facing that (or you're the one who've open this issue?): https://github.com/sveltejs/svelte-preprocess/issues/284

It's most probably due to Svelte 3.30 having added support for sourcemaps in preprocessors: https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3300

Downgrading to svelte@3.29 should fix your issue for now:

yarn add -D svelte@3.29

And, hmm... Would have thought you'd need the exact same preprocess config in the client and server of a Sapper app. You might want to check this.