Как заставить плагины tw-in-js/twind работать в Svelte

Question

Я использую tw-in-js/twind в Svelte. при использовании ванильной настройки для приложения Svelte и после включения Twind я не могу найти способ заставить плагины работать:

      <script>
    import {tw, apply, setup} from 'twind/css';

    setup ({
        plugins: {
            h1style: apply`
                uppercase
                text-6xl
                font-thin
            `,
        },
    });

    const h1style2 = apply `uppercase text-6xl font-thin`;

    export let name;
</script>

<main>
    <h1 class={tw`h1style`}>Hello {name}!</h1>
    <p>Visit the <a href="https://svelte.dev/tutorial" class={tw`italic`}>Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

В приведенном выше примере кода h1style2 (объявление const) работает, а плагин h1style — нет.

Я был бы признателен, если бы кто-нибудь мог заставить это работать.

Answer 1

Я попробовал ваш пример в Svelte Repl, и, похоже, он работает: https://svelte.dev/repl/e153da51e31a4b6c90cce63d9b6b3194?version=3.31.2

Здесь вы найдете наш пример проекта svelte: https://github.com/tw-in-js/example-svelte .

Следует отметить, что это должно быть за пределами компонента в инициализаторе приложения или внутри <script context="module">. Это гарантирует, что setupвызывается только один раз для каждого приложения.