Repository files navigation

ASvelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more.

• What is it?
• Getting Started
• Usage
• Migration Guide
• Preprocessing
  • Preprocessors
• Features
  • Template tag
  • External files
  • Global style
  • Modern JavaScript syntax
  • Replace values
  • Built-in support for commonly used languages

Svelte's own parser understands only JavaScript, CSS and its HTML-like syntax. To make it possible to write components in other languages, such as TypeScript or SCSS,Svelte provides thepreprocess API, which allows to easily transform the content of yourmarkup and yourstyle/script tags.

Writing your own preprocessor for, i.e SCSS is easy enough, but it can be cumbersome to have to always configure multiple preprocessors for the languages you'll be using.

svelte-preprocess is a custom svelte preprocessor that acts as a facilitator to use other languages with Svelte, providing multiple features, sensible defaults and a less noisy development experience.

It is recommended to use withsvelte.config.js file, located at the project root. For other usage, please refer tousage documentation.

import{sveltePreprocess}from'svelte-preprocess';constconfig={preprocess:sveltePreprocess({ ...})}exportdefaultconfig;

Vue-like support for defining your markup between a specific tag. The default tag istemplate but it can becustomized.

<template><div>Hey</div></template><style></style><script></script>

<templatesrc="./template.html"></template><scriptsrc="./script.js"></script><stylesrc="./style.css"></style>

Note: using a relative path starting with. is important. Otherwisesvelte-preprocess will ignore thesrc attribute.

Add aglobal attribute to yourstyle tag and instead of scoping the CSS, all of its content will be interpreted as global style.

<styleglobal>div {color: red;  }</style>

Use a:global rule to only expose parts of the stylesheet:

<stylelang="scss">  .scoped-style {  }:global {@import'global-stylesheet.scss';    .global-style {      .global-child-style {      }    }  }</style>

Works best with nesting-enabled CSS preprocessors, but regular CSS selectors likediv :global .global1 .global2 are also supported.

Note: needs PostCSS to be installed.

svelte-preprocess allows you to run your component code through Babel before sending it to the compiler, allowing you to use new language features such as optional operators and nullish coalescing. However, note that Babel should transpile your component code to the javascript version supported by the Svelte compiler, so ES6+.

For example, with@babel/preset-env your config could be:

import{sveltePreprocess}from'svelte-preprocess'  ...preprocess:sveltePreprocess({babel:{presets:[['@babel/preset-env',{loose:true,// No need for babel to resolve modulesmodules:false,targets:{// ! Very important. Target es6+esmodules:true,},},],],},});  ...

Note: If you want to transpile your app to be supported in older browsers, you must run babel from the context of your bundler.

Replace a set of string patterns in your components markup by passing an array of[RegExp, ReplaceFn | string], the same arguments received by theString.prototype.replace method.

In example, to replace inject the value ofprocess.env.NODE_ENV:

autoPreprocess({replace:[[/process\.env\.NODE_ENV/g,JSON.stringify(process.env.NODE_ENV)]],});

Which, in a production environment, would turn

{#ifprocess.env.NODE_ENV!=='development'}  <h1>Production environment!</h1>{/if}

into

{#if'production'!=='development'}  <h1>Production environment!</h1>{/if}

The current supported languages out-of-the-box are Sass, Stylus, Less, CoffeeScript, TypeScript, Pug, PostCSS, Babel.

<templatelang="pug">  div Posts +each('posts as post') a(href="{post.url}") {post.title}</template><scriptlang="ts">exportconsthello:string='world';</script><stylesrc="./style.scss"></style>

MIT