svelte-windicss-preprocess: Breaks .svelte modules

I have a svelte module:

<script context="module">
  ...
  export { something }
</script>

<script>
  ...
</script>

<h1>hello<h1>

Whenever I add svelte-windicss-preprocess, I can no longer import the module. Instead the bundler hangs. Have tried Rollup and Snowpack.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 19 (10 by maintainers)

Most upvoted comments

Here’s the component

<script context="module">
  import { writable, get } from "svelte/store";
  import { page } from "@roxi/routify";

  const languages = {
    en: { short: "en", long: "english", default: true },
    fr: { short: "fr", long: "french" },
    de: { short: "de", long: "german" },
  };

  // let's use a store for reactivity
  const language = writable(languages["en"]);

  const urlTransform = {
    apply: (url) => {
      /**
       * external URL
       * if the selected language is not the default language,
       * we want to use the language as an URL prefix
       */
      const lang = get(language);
      const prefix = !lang.default ? `/${lang.short}` : "";
      return prefix + url;
    },
    remove: (url) => {
      /**
       * internal URL
       * if the first url fragment matches a language,
       * we're gonna strip the fragment
       */
      const [, urlPrefix, ...rest] = url.split("/");
      if (languages[urlPrefix]) {
        language.set(languages[urlPrefix]);
        return [, ...rest].join("/");
      } else return url;
    },
  };

  export { languages, language, urlTransform };
</script>

<script>
  import { goto, url } from "@roxi/routify";
  const handleChange = () => {
    $goto($page.path);
  };
</script>

<select bind:value={$language} on:change={handleChange}>
  {#each Object.values(languages) as lang}
    <option value={lang}>{lang.long}</option>
  {/each}
</select>

jakobrosenberg on Mar 5, 2021