@svelterialjs/processor

A Svelte preprocessor for svelterial plugins.

Usage no npm install needed!

<script type="module">
  import svelterialjsProcessor from 'https://cdn.skypack.dev/@svelterialjs/processor';
</script>

README

@svelterialjs/processor

NPM Version

This is the preprocessor used by svelterial for svelte to create plugin systems that compile the plugin SCSS styles to global CSS using the variables provided by plugin and the user.

Installation

npm i @svelterial/processor

Usage

Suppose you have a plugin named 'Component' that you set up like:

const svelterial = require('@svelterialjs/processor');
// ...
{
  preprocess: [
    svelterial({
      variables: {
        Component: {
          background: 'blue',
          background: 'green',
            size: 20,
            sizes: [1, 2, 3],
            weights: { light: 200, medium: 500, bold: 700 },
        },
      },
      settings: {},
      themes: {}
    }),
    // ...other preprocessors
  ];
}

then you can import the component in the styles, which you can write scss in, of a svelte file.

<style svelterial>
  @import 'svelterial/Component';

  .some_class {
    color: $color;
    background-color: $background;
    font-size: #{$size}px;
  }

  @each $size in $sizes {
    .size-#{$size} {
      font-size: #{$size * 2}px;
    }
  }

  .weight-medium {
    font-weight: map-get($weights, 'medium');
  }

  .number {
    font-size: #{$number}px;
  }
</style>

which will be transformed to:

<style svelterial>
  :global(.some_class) {
    color: red;
    background-color: blue;
    font-size: 20px;
  }

  :global(.size-1) {
    font-size: 2px;
  }
  :global(.size-2) {
    font-size: 4px;
  }
  :global(.size-3) {
    font-size: 6px;
  }

  :global(.weight-medium) {
    font-weight: 500;
  }

  :global(.number) {
    font-size: 1px;
  }
</style>

Examples

To see more examples please look into the test samples directory and the output in the test file.

Contributing

  • Clone this repo and run npm i
  • Build using npm build
  • Run tests using npm t