@minna-ui/preprocess

Collection of Svelte preprocessors for use in 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.

Usage

Install:

yarn add @minna-ui/preprocess

Next add the preprocessor to your Svelte settings (e.g. in webpack.config.js or rollup.config.js).

If you want all our preprocessors use the all-in-one preset:

import { preprocess } from '@minna-ui/preprocess';

svelte({
  preprocess,
});

Or if you prefer, you can select the preprocessors individually:

import { markup, style } from '@minna-ui/preprocess';

svelte({
  preprocess: {
    markup: markup({
      // only use in production builds for better dev debugging
      enabled: process.env.NODE_ENV === 'production',
    }),
    style: style(),
  },
});

Utils

You can also strip whitespace from any HTML in a string template literal by using the html helper:

import { html } from '@minna-ui/preprocess';

const myMarkup = html`
  <div>
    <h1>My Title</h1>
  </div>
`;

console.log(myMarkup); // '<div><h1>My Title</h1></div>'

Tip: If you're using rollup with the setting treeshake.pureExternalModules = true (docs), prepend the call with a pure annotation so the module is tree shaken from the final JS bundle:

/*#__PURE__*/html`...`; // eslint-disable-line

Licence

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

---

© 2020 We Are Genki