@minna-ui/svelte-preprocess-markup

Svelte markup preprocessor for use in minna-ui projects.

Stats

stars šŸŒŸissues āš ļøupdated šŸ› created šŸ£size šŸ‹ļøā€ā™€ļø
@minna-ui/svelte-preprocess-markup
Minified + gzip package size for @minna-ui/svelte-preprocess-markup in KB

Readme

NPM version Licence

@minna-ui/svelte-preprocess-markup

Svelte markup preprocessor for use in Minna UI projects. Optimise HTML before it hits Svelte for smaller output. Primarily this trim excessive whitespace but you can enable the unsafe option for advanced optimisations.

Usage

Install:

yarn add -D @minna-ui/svelte-preprocess-markup

Add to your Svelte compile options:

const preprocessMarkup = require('@minna-ui/svelte-preprocess-markup');

const isProd = process.env.NODE_ENV === 'production';

svelte({
  preprocess: {
    // only remove whitespace in production for better feedback during development
    ...(isProd ? { markup: preprocessMarkup() } : {}),
  },
}),

Known issues

You must wrap {} tags in quotes when there are { or } characters inside the tag. The exception to this is when using spread attributes (e.g. {...child.props}) in which case you must not use quotes.

Incorrect:

<MinnaNavbar segment={child.segment} menuItems={[
  { url: 'example', name: 'Example' },
]}/>

Correct (with " around { }):

<MinnaNavbar segment="{child.segment}" menuItems="{[
  { url: 'example', name: 'Example' },
]}"/>

Options

Name Default Type Description
unsafeWhitespace false Boolean Collapse all whitespace between tags (instead of leaving a single space). When using this option you may need to manually add spaces, {' '}, around inline elements such as links.
unsafe false Boolean Enable aggressive and potentially dangerous optimisations.
* undefined Any Any other options you pass in will override the default html-minifier options. See the html-minifier docs for more info.

Licence

@minna-ui/svelte-preprocess-markup is part of Minna UI, an Apache-2.0 licensed open source project. See LICENCE.


Ā© 2018 We Are Genki

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.