slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Allow svelte preprocessor config

redmagic opened this issue · comments

Is your feature request related to a problem? Please describe.

Inside Svelte <style lang="postcss"></style> blocks, PostCSS is not being used.

Describe the solution you'd like

I would like to configure svelte preprocess to use my PostCSS configuration

Describe alternatives you've considered

A workaround to override the svelte plugin config inside .eleventy.js

const svelteRenderer = require('@slinkity/renderer-svelte');
const { svelte } = require('@sveltejs/vite-plugin-svelte');
const preprocess = require('svelte-preprocess');
const renderer = {
    ...svelteRenderer,
    viteConfig() {
        const config = svelteRenderer.viteConfig();
        return {
            ...config,
            plugins: [
                svelte({
                    preprocess: preprocess({
                        postcss: {
                            configFilePath: '.'
                        }
                    }),
                    compilerOptions: {
                        hydratable: true
                    }
                })
            ]
        };
    }
};

module.exports = function (eleventyConfig) {
    eleventyConfig.setUseGitIgnore(false);
    eleventyConfig.addPlugin(
        slinkity.plugin,
        slinkity.defineConfig({
            renderers: [renderer]
        })
    );
    return {
        dir: {
            input: 'src',
            output: 'dist'
        }
    };
};

Additional context

Add any other context or screenshots about the feature request here.

Thanks for the suggestion redmagic! 100% agree on this one. I think we'll refactor all of our renders to be function-based so you can easily pass custom config 🙏