Have ideas to improve npm?Join in the discussion! »

    svelte-preprocess
    TypeScript icon, indicating that this package has built-in type declarations

    4.7.3 • Public • Published

    Svelte Preprocess

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

    npm version license action-CI

    What is it?

    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.

    import svelte from 'rollup-plugin-svelte'
    import sveltePreprocess from 'svelte-preprocess'
    
    export default {
      plugins: [
        svelte({
          preprocess: sveltePreprocess({ ... })
        })
      ]
    }

    Features

    Template tag

    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>

    External files

    <template src="./template.html"></template>
    <script src="./script.js"></script>
    <style src="./style.css"></style>

    Global style

    global attribute

    Add 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 rule

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

    Modern JavaScript syntax

    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 preprocess from 'svelte-preprocess'
      ...
      preprocess: preprocess({
        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 values

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

    Built-in support for commonly used languages

    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>

    Getting started

    Preprocessing documentation

    Usage documentation

    Migration Guide


    License

    MIT

    Install

    npm i svelte-preprocess

    DownloadsWeekly Downloads

    50,593

    Version

    4.7.3

    License

    MIT

    Unpacked Size

    125 kB

    Total Files

    66

    Last publish

    Collaborators

    • avatar