svelte-scoped-uno/dist/index.d.ts

Use UnoCSS utility styles in a modular fashion in Svelte, with styles being stored only where needed.

import { UserConfig, UnoGenerator } from 'unocss';
export * from 'unocss';
import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
import { Plugin } from 'vite';

interface UnocssSveltePreprocessOptions extends TransformClassesOptions, TransformApplyOptions {
  /**
   * UnoCSS config or path to config file. If not provided, will load unocss.config.ts/js. It's recommended to use the separate config file if you are having trouble with the UnoCSS extension in VSCode.
   */
  configOrPath?: UserConfig | string
}

interface TransformClassesOptions {
  /**
   * Prefix for compiled class names. Distinct between `@unocss/svelte-scoped/vite` and `@unocss/svelte-scoped/preprocessor` to avoid bugs when using a component library built with `@unocss/svelte-scoped/preprocessor` in a project using `@unocss/svelte-scoped/vite`.
   * @default 'uno-' // `@unocss/svelte-scoped/vite`
   * @default 'usp-' // `@unocss/svelte-scoped/preprocessor`
   */
  classPrefix?: string
  /**
   * Add hash and combine recognized tokens (optimal for production); set false in dev mode for easy dev tools toggling to allow for design adjustments in the browser
   * @default true
   */
  combine?: boolean
  /**
   * Used to generate hash for compiled class names
  */
  hashFn?: (str: string) => string
}

interface TransformApplyOptions {
  /**
   * Transform CSS variables (recommended for CSS syntax compatibility) or @apply directives.
   *
   * Pass `false` to disable.
   *
   * @default ['--at-apply', '@apply']
   */
  applyVariables?: string | string[] | false
}

interface SvelteScopedContext {
  uno: UnoGenerator<{}>
  ready: Promise<UserConfig<{}>>
}

interface UnocssSvelteScopedViteOptions extends UnocssSveltePreprocessOptions {
  /**
   * Prefix for compiled class names
   * @default 'uno-'
  */
  classPrefix?: string
  /**
   * Inject reset to the beginning of the global stylesheet. 
   * 
   * You can pass one of the included resets from [@unocss/reset](https://unocss.dev/guide/style-reset): 
   * - `@unocss/reset/normalize.css`
   * - `@unocss/reset/eric-meyer.css`
   * - `@unocss/reset/sanitize/sanitize.css` 
   * - `@unocss/reset/tailwind.css` 
   * - `@unocss/reset/tailwind-compat.css`
   * 
   * You can pass your own custom reset by passing the filepath relative to your project root as in `./src/reset.css`
   * 
   * You can install a package then pass a path to the CSS file in your node_modules as in `@bob/my-tools/reset.css`.
   * @default undefined
   */
  injectReset?: string
  /**
   * Add Tailwind reset to the beginning of the global stylesheet
   * @deprecated Use `injectReset: "@unocss/reset/tailwind.css"` instead
   */
  addReset?: 'tailwind' | null
  /**
   * When building a component library using `@unocss/svelte-scoped/preprocessor` you can also use `@unocss/svelte-scoped/vite` with this set to `true` to add needed global styles for your library demo app: resets, preflights, and safelist
   * @default false
  */
  onlyGlobal?: boolean
}

declare function UnocssSveltePreprocess(options?: UnocssSveltePreprocessOptions, unoContextFromVite?: SvelteScopedContext): PreprocessorGroup;

declare function UnocssSvelteScopedVite(options?: UnocssSvelteScopedViteOptions): Plugin[];

export { UnocssSveltePreprocess as PreprocessUnocss, SvelteScopedContext, UnocssSvelteScopedVite as SvelteScopedUno, TransformApplyOptions, TransformClassesOptions, UnocssSveltePreprocessOptions, UnocssSvelteScopedViteOptions };