Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Describe the bug


[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/lib/layout/layout.module.scss (1:0)
1: .local {
   ^
2:   height: 100%;
3:   display: grid;
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

layout.svelte:

<script lang="ts">
  import { local } from './layout.module.scss';
</script>

<div class={local}>test</div>

layout.module.scss:

.local {
  height: 100%;
  display: grid;
  grid-template-columns: 220px 1fr 250px;
  grid-template-rows: 50px 1fr;
  gap: 0em 0em;
  grid-auto-flow: row;
  grid-template-areas:
    "logo top top"
    "left-sidebar main right-sidebar";
}

.logo { grid-area: logo; }

.main { grid-area: main; }

.right-sidebar { grid-area: right-sidebar; }

.left-sidebar { grid-area: left-sidebar; }

.top { grid-area: top; }

Here's my rollup config:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';

import { typescript, scss } from 'svelte-preprocess';
import { cssModules, linearPreprocess } from 'svelte-preprocess-cssmodules';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    svelte({
      preprocess: linearPreprocess([
        typescript(), // 1 run first
        scss(), // 2 run second
        cssModules({}), // 3 run last
      ]),

      onwarn: (warning, handler) => {
        if (warning.code === 'a11y-distracting-elements') return;

        handler(warning);
      },

      compilerOptions: {
        customElement: true
      }
    }),
    resolve({ browser: true }),
  ]
}

Logs Please include browser console and server logs around the time this bug occurred.

To Reproduce To help us help you, if you've found a bug please consider the following:

Please create a small repo that illustrates the problem.
Reproductions should be small, self-contained, correct examples – http://sscce.org.

Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that svelte-preprocess is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster.

Full stack trace

Stack trace

> nx run design-system:build-components src/index.ts → dist/bundle.js... (!) Plugin svelte: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. . To hide this warning, use src/lib/layout/layout.svelte 1: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src/lib/layout/layout.module.scss (1:0) 1: .local { ^ 2: height: 100%; 3: display: grid; Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) at error (/Users/andy/dev/runestone/node_modules/rollup/dist/shared/rollup.js:198:30) at Module.error (/Users/andy/dev/runestone/node_modules/rollup/dist/shared/rollup.js:12553:16) at Module.tryParse (/Users/andy/dev/runestone/node_modules/rollup/dist/shared/rollup.js:12930:25) at Module.setSource (/Users/andy/dev/runestone/node_modules/rollup/dist/shared/rollup.js:12835:24) at ModuleLoader.addModuleSource (/Users/andy/dev/runestone/node_modules/rollup/dist/shared/rollup.js:22309:20)

Information about your project:

Your browser and the version: Chrome 102
Your operating system: Mac 11.6
svelte-preprocess version: 4.10.7
svelte-preprocess-cssmodules version: 2.2.1
Rollup

sveltejs / svelte-preprocess

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) #529