svelte-preprocess

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.

README

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

Basic

const svelte = require('svelte')
const preprocess = require('svelte-preprocess')

svelte.preprocess(input, preprocess({ /* options */ })).then(...)

Advanced

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' })
      ]
    },

    /** 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(...)

With svelte-loader

  ...
  module: {
    rules: [
      ...
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: require('svelte-preprocess')({ /* options */ })
          },
        },
      },
      ...
    ]
  }
  ...

Features

Template (a la Vue) tag support

<template>
  <div>Hey</div>
</template>

<style></style>

<script></script>

External files support

<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.

<template lang="pug">
  div Hey
</template>

<script type="text/coffeescript">
  export default
    methods:
      foo: () ->
        console.log('Hey')
</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>