https://github.com/pchynoweth/svelte-sequential-preprocessor

A Svelte preprocessor that wraps preprocessors to force them to be called sequentially.
https://github.com/pchynoweth/svelte-sequential-preprocessor

svelte sveltejs

Last synced: 3 months ago
JSON representation

A Svelte preprocessor that wraps preprocessors to force them to be called sequentially.

• Host: GitHub
• URL: https://github.com/pchynoweth/svelte-sequential-preprocessor
• Owner: pchynoweth
• License: mit
• Created: 2020-06-20T20:48:08.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-10T19:20:14.000Z (8 months ago)
• Last Synced: 2024-05-10T20:31:30.889Z (8 months ago)
• Topics: svelte, sveltejs
• Language: TypeScript
• Homepage:
• Size: 1.38 MB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Node.js CI](https://github.com/pchynoweth/svelte-sequential-preprocessor/workflows/Node.js%20CI/badge.svg)

![new-version](https://github.com/pchynoweth/svelte-sequential-preprocessor/workflows/new-version/badge.svg)

[![Build Status](https://travis-ci.org/pchynoweth/svelte-sequential-preprocessor.svg?branch=master)](https://travis-ci.org/pchynoweth/svelte-sequential-preprocessor)

[![version](https://img.shields.io/npm/v/svelte-sequential-preprocessor.svg?style=flat-square)](http://npm.im/svelte-sequential-preprocessor)

# svelte-sequential-preprocessor

> A [Svelte](https://svelte.dev) preprocessor that wraps preprocessors to force them to be called sequentially.

## Overview

Svelte evaluates preprocessors by running all markup preprocessors first, then script and finally styles.  Some preprocesses may not work if other preprocessors haven't been run.  For example, [svelte-image](https://github.com/matyunya/svelte-image) uses `svelte.parse()` internally, so [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) needs to be run before if any scss is present.

## Installation

Using npm:

```bash

$ npm i -D svelte-sequential-preprocessor

```

## Usage

### With `rollup-plugin-svelte`

```js

// rollup.config.js

import svelte from 'rollup-plugin-svelte';

import seqPreprocessor from 'svelte-sequential-preprocessor'

import autoPreprocess from 'svelte-preprocess'

import image from 'svelte-image'

export default {

  ...,

  plugins: [

    svelte({

      preprocess: seqPreprocessor([ autoPreprocess(), image() ])

    })

  ]

}

```

### With `svelte-loader`

```js

  ...

  module: {

    rules: [

      ...

      {

        test: /\.(html|svelte)$/,

        exclude: /node_modules/,

        use: {

          loader: 'svelte-loader',

          options: {

            preprocess: require('svelte-sequential-preprocessor')([ require('svelte-preprocess'), require('svelte-image')])

          },

        },

      },

      ...

    ]

  }

  ...

```

### With Sapper

```js

import seqPreprocessor from 'svelte-sequential-preprocessor';

import autoPreprocess from 'svelte-preprocess'

import image from 'svelte-image'

const preprocess = seqPreprocessor([ autoPreprocess(), image() ]);

export default {

  client: {

    plugins: [

      svelte({

        preprocess,

        // ...

      }),

  },

  server: {

    plugins: [

      svelte({

        preprocess,

        // ...

      }),

    ],

  },

};

```