Skip to content

Commit

Permalink
docs: ✏️ simplify readme
Browse files Browse the repository at this point in the history
  • Loading branch information
kaisermann committed Jun 17, 2020
1 parent 9bd1a88 commit e607724
Showing 1 changed file with 5 additions and 25 deletions.
30 changes: 5 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,36 +141,16 @@ Current supported out-of-the-box preprocessors are `SCSS`, `Stylus`, `Less`, `Co
export const hello: string = 'world';
</script>

<script type="text/coffeescript">
# ...and v2!
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>
```

### Modern Javascript syntax
Expand Down Expand Up @@ -242,7 +222,7 @@ And the result, for a `NODE_ENV = 'production'` would be:

_Note<sup>1</sup>: the `replace` transformer is executed before any other transformer._

_Note<sup>2</sup>: it is **NOT** recommended to modify Svelte's syntax for a number of reasons._
_Note<sup>2</sup>: it is **NOT** recommended to modify Svelte's syntax._

## Usage

Expand Down Expand Up @@ -361,28 +341,28 @@ _Tip: this file can be imported in your bundle config instead of having multiple
In auto preprocessing mode, `svelte-preprocess` automatically uses the respective preprocessor for your code based on your `type="..."` or `lang="..."` attributes. It also handles the `<template>` tag for markup, external files and global styling. It's as simple as importing the module and executing the default exported method.

```js
import sveltePreprocess from 'svelte-preprocess'
import preprocess from 'svelte-preprocess'

...
{
/* svelte options */
...,
preprocess: sveltePreprocess({ /* options */ }),
preprocess: preprocess({ /* options */ }),
}
...
```

[Svelte v3 has added support for multiple processors](https://svelte.dev/docs#svelte_preprocess), so it's also possible to use `svelte-preprocess` with other preprocessors:

```js
import sveltePreprocess from 'svelte-preprocess'
import preprocess from 'svelte-preprocess'
import { mdsvex } from 'mdsvex'
...
{
/* svelte options */
...,
preprocess: [
sveltePreprocess({ /* svelte-preprocess options */ }),
preprocess({ /* svelte-preprocess options */ }),
mdsvex({ /* mdsvex options */ })
],
}
Expand Down

0 comments on commit e607724

Please sign in to comment.