1 | [![NPM version](https://img.shields.io/npm/v/@minna-ui/preprocess.svg)](https://www.npmjs.com/package/@minna-ui/preprocess)
|
2 | [![Licence](https://img.shields.io/npm/l/@minna-ui/preprocess.svg)](https://github.com/WeAreGenki/minna-ui/blob/master/LICENCE)
|
3 |
|
4 | # `@minna-ui/preprocess`
|
5 |
|
6 | Collection of Svelte preprocessors for use in [`Minna UI`](https://github.com/WeAreGenki/minna-ui) projects. It consists of a markup preprocessor which strips out excessive whitespace (collapses relevant whitespace down to a single space but leaves appropriate tags alone, e.g. `<pre>`, `<script>`, `<style>`) and a style preprocessor which runs styles through [PostCSS](https://github.com/postcss/postcss).
|
7 |
|
8 | ## Usage
|
9 |
|
10 | Install:
|
11 |
|
12 | ```sh
|
13 | yarn add @minna-ui/preprocess
|
14 | ```
|
15 |
|
16 | Next add the preprocessor to your Svelte settings (e.g. in `webpack.config.js` or `rollup.config.js`).
|
17 |
|
18 | If you want all our preprocessors use the all-in-one preset:
|
19 |
|
20 |
|
21 |
|
22 | ```js
|
23 | import { preprocess } from '@minna-ui/preprocess';
|
24 |
|
25 | svelte({
|
26 | preprocess,
|
27 | });
|
28 | ```
|
29 |
|
30 | Or if you prefer, you can select the preprocessors individually:
|
31 |
|
32 |
|
33 |
|
34 | ```js
|
35 | import { markup, style } from '@minna-ui/preprocess';
|
36 |
|
37 | svelte({
|
38 | preprocess: {
|
39 | markup: markup({
|
40 | // only use in production builds for better dev debugging
|
41 | enabled: process.env.NODE_ENV === 'production',
|
42 | }),
|
43 | style: style(),
|
44 | },
|
45 | });
|
46 | ```
|
47 |
|
48 | ### Utils
|
49 |
|
50 | You can also strip whitespace from any HTML in a string template literal by using the `html` helper:
|
51 |
|
52 | ```js
|
53 | import { html } from '@minna-ui/preprocess';
|
54 |
|
55 | const myMarkup = html`
|
56 | <div>
|
57 | <h1>My Title</h1>
|
58 | </div>
|
59 | `;
|
60 |
|
61 | console.log(myMarkup); // '<div><h1>My Title</h1></div>'
|
62 | ```
|
63 |
|
64 | > Tip: If you're using rollup with the setting `treeshake.pureExternalModules = true` ([docs](https://rollupjs.org/guide/en#treeshake)), prepend the call with a pure annotation so the module is tree shaken from the final JS bundle:
|
65 |
|
66 |
|
67 | ```js
|
68 | /*#__PURE__*/html`...`; // eslint-disable-line
|
69 | ```
|
70 |
|
71 | ## Licence
|
72 |
|
73 | `@minna-ui/preprocess` is part of [`Minna UI`](https://github.com/WeAreGenki/minna-ui), an Apache-2.0 licensed open source project. See [LICENCE](https://github.com/WeAreGenki/minna-ui/blob/master/LICENCE).
|
74 |
|
75 | ---
|
76 |
|
77 | © 2020 [We Are Genki](https://wearegenki.com)
|