I'm currently developing a desktop application using Tauri, SvelteKit, & Tailwind. When I run a dev build of my application I frequently get the following error:
[vite] Internal server error: [postcss] /home//src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11: Unknown word Plugin: vite:css File: /home/myProj/src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11 1 | <script lang="ts"> 2 | import { appWindow, LogicalSize } from '@tauri-apps/api/window'; | ^ 3 | appWindow.setSize(new LogicalSize(700, 404)); 4 | import { rand } from '$lib/math'; at Input.error (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/input.js:148:16) at Parser.unknownWord (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:540:22) at Parser.other (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:164:12) at Parser.parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:72:16) at parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parse.js:11:12) at new LazyResult (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:133:16) at Processor.process (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/processor.js:28:14) at compileCSS (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:38356:14) at async TransformContext.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:37810:56) at async Object.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)If I reload the browser window or save a file and hot reload then the error goes away. Additionally, the error doesn't always occur when I launch the application. I'd say its ~70% of the time.
My config files for my stack are:
// postcss.config.cjsmodule.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },}// tailwind.config.cjs/** @type {import('tailwindcss').Config} */module.exports = { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: {} }, plugins: [require('daisyui')], daisyui: { themes: ['light', 'dark'] }};// vite.config.tsimport { sveltekit } from '@sveltejs/kit/vite';import { defineConfig } from 'vite';export default defineConfig({ plugins: [sveltekit()]});// svelte.config.jsimport adapter from '@sveltejs/adapter-static';import { vitePreprocess } from '@sveltejs/kit/vite';import importAssets from 'svelte-preprocess-import-assets';/** @type {import('@sveltejs/kit').Config} */const config = { kit: { // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // If your environment is not supported or you settled on a specific environment, switch out the adapter. // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter() }, // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: [importAssets(), vitePreprocess()],};export default config;If the error doesn't occur when initially launching the application (~70% chance) then there's another high chance it will appear two pages later (home->page1->page2). The code for my home page and page2 are:
<script lang="ts"> import { routes } from '$lib/router'; import { setItem } from '$lib/sessionStorage'; import { kanaCharacters, type Syllabary } from '$lib/syllabary'; import { appWindow, LogicalSize } from '@tauri-apps/api/window'; appWindow.setSize(new LogicalSize(350, 500)); function onTestClicked(mode: Syllabary) {} // body cut</script><div id="container" class="absolute w-screen h-[calc(100vh-30px)]"><div class="flex flex-col items-center justify-center h-[390px] m-10"><h1 class="text-3xl mb-2">Kana-Learn</h1><a href={routes.practice} class="btn btn-primary mb-2 w-1/2">Practice</a><div class="dropdown dropdown-end mb-2 w-1/2"><!-- svelte-ignore a11y-no-noninteractive-tabindex --><span tabindex="0" class="btn btn-primary w-full">Test</span><!-- svelte-ignore a11y-no-noninteractive-tabindex --><ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52"><li><button on:click={(e) => onTestClicked('hira')}>Hiragana</button></li><li><button on:click={(e) => onTestClicked('kata')}>Katakana</button></li></ul></div><a href={routes.stats} class="btn btn-primary mb-2 w-1/2">Stats</a></div></div><style> #container { background-image: url($lib/assets/bg-homescreen.jpg); }</style><script lang="ts"> import { appWindow, LogicalSize } from '@tauri-apps/api/window'; appWindow.setSize(new LogicalSize(700, 404)); import { rand } from '$lib/math'; import type { PageData } from './$types'; import { convert } from 'jp-conversion'; import { getItem } from '$lib/sessionStorage'; import { kanaCharacters } from '$lib/syllabary'; export let data: PageData; const { mode } = data; const charset = getItem('keyset', true) ?? kanaCharacters['hira']; let keyState = ''; let resetKeyState = false; const sentence: string[] = []; let correct: boolean[] = []; function onKeyDown(e: KeyboardEvent) {} // body cut</script><div id="container" class="p-8 bg-contain h-[calc(100vh-30px)]"><div id="content" class="flex flex-col items-center justify-between rounded-lg border-2 p-1 pl-2 border-gray-800 h-full bg-gray-900 text-[36px] leading-10 text-white"><div class="NotoSansMono w-full">{@html text}</div><div class="mt-2 flex items-center h-full"><div class="p-1 w-16 h-10 text-2xl text-center bg-slate-800 border border-gray-300 rounded"> {keyState}</div></div></div></div><svelte:window on:keydown|preventDefault={onKeyDown} /><style> #container { background-image: url($lib/assets/bg-outer-sentence.jpg); }</style>The only major difference between these 2 pages and the rest are the use of a background-image but removing those styles doesn't stop the error from happening. I've checked many other posts on SO and Issues on various repos but I haven't been able to resolve this. Help would be greatly appreciated.