svelte-preprocess
Advanced tools
A Svelte preprocessor wrapper with baked-in support for commonly used preprocessors
svelte-preprocess is a versatile preprocessor for Svelte that allows you to use various languages and tools in your Svelte components. It supports languages like TypeScript, SCSS, Less, and PostCSS, among others, and can be configured to handle multiple preprocessors simultaneously.
TypeScript
Allows you to write your Svelte component scripts in TypeScript, providing type safety and other TypeScript features.
<script lang="ts">
let message: string = 'Hello, TypeScript!';
</script>SCSS
Enables you to use SCSS for styling your Svelte components, allowing for variables, nesting, and other SCSS features.
<style lang="scss">
$primary-color: #ff3e00;
h1 {
color: $primary-color;
}
</style>PostCSS
Allows you to use PostCSS with your Svelte components, enabling features like Tailwind CSS and other PostCSS plugins.
<style lang="postcss">
:global(body) {
@apply bg-gray-100;
}
</style>Pug
Enables you to use Pug (formerly Jade) for your Svelte component templates, providing a more concise syntax for writing HTML.
<template lang="pug">
h1 Hello, Pug!
</template>Less
Allows you to use Less for styling your Svelte components, providing features like variables and mixins.
<style lang="less">
@primary-color: #ff3e00;
h1 {
color: @primary-color;
}
</style>A Svelte preprocessor that focuses on TypeScript support. It provides a more streamlined experience for TypeScript users but lacks the broader range of preprocessing options available in svelte-preprocess.
A Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more.
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 the preprocess API, which allows to easily transform the content of your markup and your style/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 with svelte.config.js file, located at the project root. For other usage, please refer to usage documentation.
import { sveltePreprocess } from 'svelte-preprocess';
const config = {
preprocess: sveltePreprocess({ ... })
}
export default config;
Vue-like support for defining your markup between a specific tag. The default tag is template but it can be customized.
<template>
<div>Hey</div>
</template>
<style></style>
<script></script>
<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></style>
Note: using a relative path starting with
.is important. Otherwisesvelte-preprocesswill ignore thesrcattribute.
global attributeAdd a global attribute to your style tag and instead of scoping the CSS, all of its content will be interpreted as global style.
<style global>
div {
color: red;
}
</style>
:global ruleUse a :global rule to only expose parts of the stylesheet:
<style lang="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 like div :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 modules
modules: 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 the String.prototype.replace method.
In example, to replace inject the value of process.env.NODE_ENV:
autoPreprocess({
replace: [[/process\.env\.NODE_ENV/g, JSON.stringify(process.env.NODE_ENV)]],
});
Which, in a production environment, would turn
{#if process.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.
<template lang="pug">
div Posts +each('posts as post') a(href="{post.url}") {post.title}
</template>
<script lang="ts">
export const hello: string = 'world';
</script>
<style src="./style.scss"></style>
FAQs
A Svelte preprocessor wrapper with baked-in support for commonly used preprocessors
The npm package svelte-preprocess receives a total of 298,084 weekly downloads. As such, svelte-preprocess popularity was classified as popular.
We found that svelte-preprocess demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.