Интеграция для Svelte

Наша интеграция с Svelte использует API препроцессора Svelte, поэтому выполняется перед этапом компиляции. Это накладывает некоторые ограничения на динамически изменяемые классы.

Документация

Параметры

interface Options {
  silent?: boolean
  mode?: 'development' | 'production'
  configPath?: string
  disableFormat?: boolean
  devTools?: {
    enabled: boolean
    completions?: boolean
  }
  safeList?: string
  preflights?: boolean
}

Пользовательская информация предварительной обработки

В версии 4 мы представили новый набор настраиваемых атрибутов для тегов изящного стиля, чтобы упростить интеграцию независимо от настройки. Стили без области видимости будут обрабатываться в svelte в соответствии с их документами с помощью :global() для классов и -global- для ключевых кадров.

Предпечатная подготовка

Svelte по своей природе заключается в ограничении стиля CSS и удалении неиспользуемых стилей, это может привести к проблемам, если вы добавите предварительные проверки в оболочку макета и захотите, чтобы эти стили были доступны и во всех других файлах .svelte. С другой стороны, если вы компилируете с пользовательскими элементами, вы не можете использовать стили :global(). Чтобы позволить пользователю решить, где разместить предварительные проверки, а также решить, должны ли они быть глобальными или ограниченными, у нас есть следующий синтаксис:

<!-- Layout.svelte -->
<script>
</script>

<slot />

<!-- use this for scoped preflights -->
<style windi:preflights>
</style>

<!-- use this for global preflights -->
<style windi:preflights:global>
</style>

Безопасный список (Safe list)

Иногда вам нужно иметь динамические классы, основанные на некоторой логике в тегах скрипта. Поскольку svelte-windicss-preprocess выполняется до этапа компиляции svelte, он не может узнать эти динамические значения. Есть много подходов к этому: либо используйте windi во время выполнения, либо настройку сборщика вместо этого препроцессора, либо, если вы знаете все возможные классы в начале, добавьте их в безопасный список.

Как и в случае с предпечатной подготовкой, этот безопасный список должен быть доступен везде, где вы хотите, а также иметь ограниченный и глобальный доступ.

<!-- Layout.svelte -->
<script>
  let shade = 100;
</script>

<div class="bg-red-{shade}">
  I am dynamic!
</div>

<!-- use this for scoped safelist classes -->
<style windi:safelist>
</style>

<!-- use this for global safelist classes -->
<style windi:safelist:global>
</style>

CSS классы Windi

По умолчанию все встроенные используемые классы Windi CSS будут иметь область видимости с собственной стройной логикой. В этом есть свои преимущества (вы можете найти много обсуждений в Интернете). Однако при использовании CSS-фреймворка на основе служебных программ нет особой необходимости следить за тем, чтобы классы не переопределялись, поскольку, например, bg-gray-600 всегда будет иметь один и тот же код CSS, независимо от того, какой файл .svelte он используется. Возможно, вы захотите сохранить больший размер файла и использовать классы CSS Windi без области видимости, но, возможно, захотите выбрать этот файл за файлом.

Чтобы сделать все классы CSS Windi в одном .svelte, глобальным, с помощью :global() вы можете изменить / добавить следующий тег стиля.

<style windi:global>
</style>

Пользовательские стили

Возможно, вам потребуется в своем проекте определить собственные классы CSS, и вы захотите решить, являются ли они ограниченными или глобальными, отдельно от Windi CSS. Вы можете использовать следующий синтаксис:

  <!-- all styles with :global() -->
  <style global>
    .btn {
      background: green;
    }
  </style>

  <!-- selective or all scoped -->
  <style>
    :global(.btn) {
      background: green;
    }
    .btnTwo {
      background: red;
    }
  </style>

Вы можете комбинировать любые из этих атрибутов, чтобы тег полного стиля выглядел так:

  <style global windi:global windi:preflights:global windi:safelist:global>
    .custom{
      background: black;
    }
  </style>

Расширение VS Code

Использование специального синтаксиса тегов CSS, а также атрибутов выше нарушит диагностику CSS кода VS. Обязательно отключите их. Если вы используете Svelte для VS Code, добавьте этот параметр в свой файл конфигурации VS Code.

{
  "svelte.plugin.css.diagnostics.enable": false
}

Руководства по установке

Вот два руководства для Svelte и SvelteKit, использующих их стартовый шаблон.

Svelte

начать шаблон и установить пакет из NPM

npx degit sveltejs/template svelte-project
npm i -D svelte-windicss-preprocess

удалите ненужные глобальные файлы CSS, чтобы предотвратить разрывы стилей

- ./public/global.css

удалить ссылку на таблицу стилей в index.html

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
-   <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>

    <script defer src='/build/bundle.js'></script>
  </head>

  <body>
  </body>

  </html>

добавьте конфиг svelte-windicss-preprocess в rollup.config.js

  import svelte from 'rollup-plugin-svelte';
  import commonjs from '@rollup/plugin-commonjs';
  import resolve from '@rollup/plugin-node-resolve';
  import livereload from 'rollup-plugin-livereload';
  import { terser } from 'rollup-plugin-terser';
  import css from 'rollup-plugin-css-only';
+ import { windi } from 'svelte-windicss-preprocess';

  const production = !process.env.ROLLUP_WATCH;

  function serve() {
    let server;

    function toExit() {
      if (server) server.kill(0);
    }

    return {
      writeBundle() {
        if (server) return;
        server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true
        });

        process.on('SIGTERM', toExit);
        process.on('exit', toExit);
      }
    };
  }

  export default {
    input: 'src/main.js',
    output: {
      sourcemap: true,
      format: 'iife',
      name: 'app',
      file: 'public/build/bundle.js'
    },
    plugins: [
      svelte({
+       preprocess: [
+         windi({}),
+       ],
        compilerOptions: {
          // enable run-time checks when not in production
          dev: !production
        }
      }),
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css({ output: 'bundle.css' }),

      // If you have external dependencies installed from
      // npm, you'll most likely need these plugins. In
      // some cases you'll need additional configuration -
      // consult the documentation for details:
      // https://github.com/rollup/plugins/tree/master/packages/commonjs
      resolve({
        browser: true,
        dedupe: ['svelte']
      }),
      commonjs(),

      // In dev mode, call `npm run start` once
      // the bundle has been generated
      !production && serve(),

      // Watch the `public` directory and refresh the
      // browser on changes when not in production
      !production && livereload('public'),

      // If we're building for production (npm run build
      // instead of npm run dev), minify
      production && terser()
    ],
    watch: {
      clearScreen: false
    }
  };

update App.svelte

  <script>
    export let name;
  </script>

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

+ <style windi:preflights:global windi:safelist:global>
+ </style>
- <style>
-   main {
-     text-align: center;
-     padding: 1em;
-     max-width: 240px;
-     margin: 0 auto;
-   }
-
-   h1 {
-     color: #ff3e00;
-     text-transform: uppercase;
-     font-size: 4em;
-     font-weight: 100;
-   }
-
-   @media (min-width: 640px) {
-    main {
-       max-width: none;
-     }
-   }
- </style>

SvelteKit

Если вы используете Vite в качестве сборщика пакетов, ознакомьтесь с [руководством по Vite SvelteKit]

get started template and install package from npm

npm init svelte@next sveltekit-project
npm i -D svelte-windicss-preprocess

добавьте конфиг svelte-windicss-preprocess в svelte.config.js

+ import { windi } from "svelte-windicss-preprocess";
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
+   preprocess: [
+     windi({})
+   ],
    kit: {
      // hydrate the <div id="svelte"> element in src/app.html
      target: '#svelte'
    }
  };

export default config;

добавить файл макета

+ ./src/routes/__layout.svelte

+ <nav>
+   <a href=".">Home</a>
+   <a href="about">About</a>
+   <a href="settings">Settings</a>
+ </nav>

+ <slot></slot>
+ <style windi:preflights:global windi:safelist:global>
+ </style>

Интеграция для Svelte #

Документация #

Параметры #

Пользовательская информация предварительной обработки #

Предпечатная подготовка #

Безопасный список (Safe list) #

CSS классы Windi #

Пользовательские стили #

Расширение VS Code #

Руководства по установке #

Svelte #

SvelteKit #