What is svelte-preprocess?
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.
What are svelte-preprocess's main functionalities?
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>
Other packages similar to svelte-preprocess
svelte-ts-preprocess
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.
Svelte Preprocess
A Svelte preprocessor wrapper with support for: PostCSS, SCSS, Less, Stylus, Coffeescript and Pug.
Installation
npm install --save-dev svelte-preprocess
The preprocessor module installation is up to the developer.
postcss
: npm install --save-dev postcss
coffeescript
: npm install --save-dev coffeescript
less
: npm install --save-dev less
sass
: npm install --save-dev node-sass
pug
: npm install --save-dev pug
stylus
: npm install --save-dev stylus
Usage
Auto Preprocessing
Basic
const svelte = require('svelte')
const preprocess = require('svelte-preprocess')
svelte.preprocess(input, preprocess({ })).then(...)
Advanced
const svelte = require('svelte')
const preprocess = require('svelte-preprocess')
const options = {
onBefore({ content, filename }) {
return content.replace('something', 'someotherthing')
},
transformers: {
scss: false,
less: true,
stylus: {
paths: ['node_modules']
},
postcss: true,
postcss: {
plugins: [
require('autoprefixer')({ browsers: 'last 2 versions' })
]
},
pug({ content, filename }) {
const code = pug.render(content)
return { code, map: null }
},
customLanguage({ content, filename }) {
const { code, map } = require('custom-language-compiler')(content)
return { code, map }
}
},
aliases: [
['cst', 'customLanguage']
],
preserve: [
'ld+json'
]
}
svelte.preprocess(input, preprocess(options)).then(...)
Standalone processors
Instead of a single processor, Svelte v3 has added support for multiple processors. In case you want to manually configure your preprocessing step, svelte-preprocess
exports these named processors: pug
, coffeescript
or coffee
, less
, scss
or sass
, stylus
, postcss
.
svelte.preprocess(input, [
pug(),
coffee(),
scss(),
]).then(...)
Every processor accepts an option object which is passed to its respective underlying tool.
svelte.preprocess(input, [
scss(),
postcss({
plugins: [
require('autoprefixer')({ browsers: 'last 2 versions' })
]
}),
])
Note: there's no built-in support for <template> tag or external files when using standalone processors.
With svelte-loader
...
module: {
rules: [
...
{
test: /\.(html|svelte)$/,
exclude: /node_modules/,
use: {
loader: 'svelte-loader',
options: {
preprocess: require('svelte-preprocess')({ })
},
},
},
...
]
}
...
Features
Template tag support
Note: only for auto preprocessing
<template>
<div>Hey</div>
</template>
<style></style>
<script></script>
External files support
Note: only for auto preprocessing
<template src="template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></style>
Preprocessors support
Current supported out-of-the-box preprocessors are SCSS
, Stylus
, Less
, Coffeescript
, Pug
and PostCSS
.
<template lang="pug">
div Hey
</template>
<script type="text/coffeescript">
export default
methods:
foo: () ->
console.log('Hey')
</script>
<style src="./style.scss"></style>
<style src="./style.styl"></style>
<style lang="scss">
$color: red;
div {
color: $color;
}
</style>
<style type="text/stylus">
$color = red
div
color: $color;
</style>