svelte-preprocess-postcss

Preprocess your Svelte component styles with PostCSS!

Uses postcss-load-config under the hood for config loading.

API

import sveltePreprocessPostcss from 'svelte-preprocess-postcss'
 
const stylePreprocessor = sveltePreprocessPostcss({
    configFilePath: '',
    useConfigFile: true,
    plugins: [
        require('precss')
    ]
})

preprocessorFunction = sveltePreprocessPostcss([context])

If no context is passed in, configuration options are loaded from postcss.config.js or .postcssrc.js starting in the current directory.

If you do pass in a context object/function, it is passed to postcss-load-config.

Besides whatever postcss-load-config does with the context, you can also provide these values:

• configFilePath (optional string): If supplied, is used as the root path to use to look for a config file. Defaults to the current working directory.
• useConfigFile (optional boolean): if false, the preprocessor won't go looking for any configuration file - the plugins property of the context object will be used by itself. Defaults to true.

You can both pass in a context object with plugins and whatnot, and also load from a config file - postcss-load-config handles merging those together.

Examples

svelte.preprocess

const processed = await svelte.preprocess(source, {
    style: stylePreprocessor
})

rollup-plugin-svelte

export default {
    plugins: [
        svelte({
            preprocess: {
                style: stylePreprocessor
            },
            css(css) {
                css.write(`public/components.css`)
            }
        }),
    ],
}

License

WTFPL