README
@svelterialjs/processor
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