@svelterialjs/processor NPM

@svelterialjs/processor

npm.io npm.io

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>