Description
Add support flexible themes for svelte components.
You can use this plugin with rollup-plugin-svelte: svelte({ preprocessor: ... })
Plugin support these CSS syntaxes: scss, less, stylus, js
Install
npm i postcss postcss-import node-sass svelte-preprocess svelte-themes-preprocess --save-dev
How it work
theme_dark.scss
:global(.theme_dark) {
@if ($component = 'module_name/src/components/Nav') {
h1 {
color: #111;
}
}
}theme_light.scss
:global(.theme_light) {
@if ($component = 'module_name/src/routes/index') {
h1 {
color: #222;
}
}
}themes.scss
@import 'themes/theme_dark';
@import 'themes/theme_light';component.svelte
<h1>Svelte component</h1>
<style>
h1 {
color: #000;
}
</style>Preprocessing
import preprocess from 'svelte-preprocess'
import postcssImport from 'postcss-import'
import themesPreprocess from 'svelte-themes-preprocess'
const postcssOptions = {
plugins: [
// This plugin is necessary and should be first in plugins list:
postcssImport(),
// Other plugins ...
]
}
const sveltePreprocess = preprocess({
scss : true,
postcss: postcssOptions
})
const result = svelte.preprocess(input, themesPreprocess(
path.resolve('./src/styles/themes.scss'),
sveltePreprocess,
{
lang: 'scss',
debug: {
showComponentsIds: true // show components ids in console
},
langs: { // (Optional) if you want to use custom CSS preprocessor
js(componentId, themesPath) {
return `
var themeBuilder = require('${themesPath.replace(/'/g, '\'')}')
if (themeBuilder.__esModule) {
themeBuilder = themeBuilder.default
}
module.exports = themeBuilder('${componentId.replace(/'/g, '\'')}')
`
},
less(componentId, themesPath) {
return '\r\n'
+ `@component: '${componentId.replace(/'/g, '\'')}';\r\n`
+ `@import '${themesPath.replace(/'/g, '\'')}';\r\n`
}
}
}
))Result
<h1>Svelte component</h1>
<style>
h1 {
color: #000;
}
.theme_dark h1 {
color: #111;
}
.theme_light h1 {
color: #222;
}
</style>
