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`
            }
        }
    }
))