Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
svelte-preprocess
Advanced tools
A Svelte preprocessor wrapper with baked in support for common 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 wrapper with support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript and Pug.
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
typescript
: npm install --save-dev typescript
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
Note: only for auto preprocessing
<template>
<div>Hey</div>
</template>
<style></style>
<script></script>
Note: only for auto preprocessing
<template src="template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></style>
Current supported out-of-the-box preprocessors are SCSS
, Stylus
, Less
, Coffeescript
, TypeScript
, Pug
and PostCSS
.
<template lang="pug">
div Hey
</template>
<script type="text/coffeescript">
export default
methods:
foo: () ->
console.log('Hey')
</script>
<script lang="typescript">
export const hello: string = 'world';
</script>
<style src="./style.scss"></style>
<!-- Or -->
<style src="./style.styl"></style>
<!-- Or -->
<style lang="scss">
$color: red;
div {
color: $color;
}
</style>
<!-- Or -->
<style type="text/stylus">
$color= red
div
color: $color;
</style>
const svelte = require('svelte')
const preprocess = require('svelte-preprocess')
svelte.preprocess(input, preprocess({ /* options */ })).then(...)
const svelte = require('svelte')
const preprocess = require('svelte-preprocess')
const options = {
/** Transform the whole markup before preprocessing */
onBefore({ content, filename }) {
return content.replace('something', 'someotherthing')
},
transformers: {
/** Disable a language by setting it to 'false' */
scss: false,
/** Enable a language's default transformer by setting it to 'true' */
less: true,
/** Pass options to the default preprocessor method */
stylus: {
paths: ['node_modules']
},
/**
* Post process css with PostCSS by defining 'transformers.postcss'
* Pass 'true' to activate PostCSS transforms and use the `postcss.config.js`
*/
postcss: true,
postcss: {
plugins: [
require('autoprefixer')({ browsers: 'last 2 versions' })
]
},
typescript: {
/**
* Optionally specify the directory to load the tsconfig from
*/
tsconfigDirectory: './configs',
/**
* Optionally specify the full path to the tsconfig
*/
tsconfigFile: './tsconfig.app.json',
/**
* Optionally specify compiler options.
* These will be merged with options from the tsconfig if found.
*/
compilerOptions: {
module: 'es2015'
}
},
/** Use a custom preprocess method by passing a function. */
pug({ content, filename }) {
const code = pug.render(content)
return { code, map: null }
},
/** Add a custom language preprocessor */
customLanguage({ content, filename }) {
const { code, map } = require('custom-language-compiler')(content)
return { code, map }
}
},
/**
* Extend the default language alias dictionary.
* Each entry must follow: ['alias', 'languageName']
*/
aliases: [
/**
* Means
* <... src="file.cst"> or
* <... lang="cst"> or
* <... type="text/customLanguage">
* <... type="application/customLanguage">
* will be treated as the language 'customLanguage'
*/
['cst', 'customLanguage']
],
preserve: [
/**
* Using the same matching algorithm as above, don't parse,
* modify, or remove from the markup, tags which match the
* language / types listed below.
* **/
'ld+json'
]
}
svelte.preprocess(input, preprocess(options)).then(...)
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.*
rollup-plugin-svelte
// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import autoPreprocess from 'svelte-preprocess'
import { scss, coffeescript, pug } from 'svelte-preprocess'
export default {
...,
plugins: [
svelte({
/**
* Auto preprocess supported languages with
* '<template>'/'external src files' support
**/
preprocess: autoPreprocess({ /* options */ })
/**
* It is also possible to manually enqueue
* stand-alone processors
* */
preprocess: [
pug({ /* pug options */ }),
scss({ /* scss options */ }),
coffeescript({ /* coffeescript options */ })
]
})
]
}
svelte-loader
...
module: {
rules: [
...
{
test: /\.(html|svelte)$/,
exclude: /node_modules/,
use: {
loader: 'svelte-loader',
options: {
preprocess: require('svelte-preprocess')({ /* options */ })
},
},
},
...
]
}
...
FAQs
A Svelte preprocessor wrapper with baked-in support for commonly used preprocessors
The npm package svelte-preprocess receives a total of 241,750 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.