Skip to content

Instantly share code, notes, and snippets.

@marianoviola

marianoviola/rollup.config.js

Last active April 16, 2022 05:04
Show Gist options
  • Save marianoviola/c9bbf5e80359df7d109bf73476475c2e to your computer and use it in GitHub Desktop.
Save marianoviola/c9bbf5e80359df7d109bf73476475c2e to your computer and use it in GitHub Desktop.
Download ZIP
Svelte style preprocessor using PostCSS
Raw
rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import buble from 'rollup-plugin-buble';
import uglify from 'rollup-plugin-uglify';
import postcss from 'postcss';
import postcssImport from 'postcss-import';
import postcssCssnext from 'postcss-cssnext';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
file: 'public/bundle.js'
},
name: 'app',
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/bundle.css');
},
// this results in smaller CSS files
cascade: false,
preprocess: {
style: ({ content, attributes }) => {
if (attributes.type !== 'text/postcss') return;
return new Promise((fulfil, reject) => {
const plugins = [postcssImport, postcssCssnext];
const from = 'src';
postcss(plugins)
.process(content, {
from,
map: {
inline: false
}
})
.then(result => {
fulfil({
code: result.css.toString(),
map: result.map.toString()
});
})
.catch(err => reject(err));
});
}
}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration —
// consult the documentation for details:
// https://github.com/rollup/rollup-plugin-commonjs
resolve(),
commonjs(),
// If we're building for production (npm run build
// instead of npm run dev), transpile and minify
production && buble({ exclude: 'node_modules/**' }),
production && uglify()
]
};
@garkin
Copy link

garkin commented Jul 14, 2018 

style: ({ content, attributes }) => {
    if (attributes.type !== 'text/postcss') {
        return;
    };

    // Plugins List: 
    // https://github.com/postcss/postcss/blob/master/docs/plugins.md
    const plugins = [
        require('postcss-import'),
        require('postcss-cssnext')
    ];
    return postcss(plugins)
        .process(content, { 
            from: 'src', 
            map: { inline: false } 
        })
        .then((result) => ({
            code: result.css.toString(),
            map: result.map.toString()
        }));
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment