Skip to content

Instantly share code, notes, and snippets.

@evdama
Created September 22, 2019 07:42
Show Gist options
  • Save evdama/1af34bfab3b692cabbeb923bf80b2d9b to your computer and use it in GitHub Desktop.
Save evdama/1af34bfab3b692cabbeb923bf80b2d9b to your computer and use it in GitHub Desktop.
visualizer only shows stats for service worker, not client or server sections
// @ts-nocheck //TODO: enable remove once there are typings in place
// TODO: uncomment all three eslint() occurrences once eslint warnings and errors are fixed
// for info on emitCSS etc. https://github.com/rollup/rollup-plugin-svelte#extracting-css and https://svelte.dev/docs#svelte_preprocess
import { eslint } from 'rollup-plugin-eslint'
import { terser } from 'rollup-plugin-terser'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import config from 'sapper/config/rollup.js'
import environmentVariables from './config/env'
import getPreprocessor from 'svelte-preprocess'
import getTime from 'date-fns/getTime'
import path from 'path'
import pkg from './package.json'
import postcss from 'rollup-plugin-postcss'
import replace from 'rollup-plugin-replace'
import resolve from 'rollup-plugin-node-resolve'
import svelte from 'rollup-plugin-svelte'
import visualizer from 'rollup-plugin-visualizer';
const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD
const appConfig = Object.keys(environmentVariables).reduce((acc, n) => {
acc[`${n}`] = environmentVariables[n]
return acc
}, {})
class SvelteExtractor {
static extract(content) {
const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g)
const matchedTokens = []
let match = regExp.exec(content)
while (match) {
if (match[0].startsWith('class:')) {
matchedTokens.push(match[0].substring(6))
} else {
matchedTokens.push(match[0])
}
match = regExp.exec(content)
}
return matchedTokens
}
}
const postcssPlugins = (purgecss = false) =>
[
require('postcss-import')(),
require('postcss-url')(),
require('tailwindcss')({ config: 'tailwind.config.js' }),
require('autoprefixer')({
overrideBrowserslist: 'last 1 version',
}),
// Do not purge the CSS in dev mode to be able to play with classes in the browser dev-tools.
purgecss &&
require('@fullhuman/postcss-purgecss')({
content: [
'./src/**/*.html',
'./src/**/*.svelte',
'./src/**/*.css',
'./static/**/*.css',
],
extractors: [
{
extractor: SvelteExtractor,
// Specify the file extensions to include when scanning for
// class names.
extensions: ['svelte', 'css', 'html'],
},
],
fontFace: true,
// Whitelist selectors to stop Purgecss from removing them from your CSS.
whitelist: ['html', 'body'],
}),
purgecss &&
require('cssnano')({
preset: 'default',
}),
].filter(Boolean)
const preprocess = getPreprocessor({
transformers: {
postcss: {
plugins: postcssPlugins(), // Don't need purgecss because Svelte handle unused css for you.
},
},
})
const onwarn = (warning, onwarn) =>
(warning.code === 'CIRCULAR_DEPENDENCY' &&
/[/\\]@sapper[/\\]/.test(warning.message)) ||
onwarn(warning)
const dedupe = importee =>
importee === 'svelte' || importee.startsWith('svelte/')
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
// eslint(),
visualizer(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
edmUpdateTimestamp: getTime( new Date() ),
ROLLUP_RECAPTCHA_SITE_KEY: appConfig.RECAPTCHA_SITE_KEY,
'ROLLUP_GOLIVE_DATE': appConfig.GOLIVE_DATE,
}),
svelte({
dev,
hydratable: true,
emitCss: false,
preprocess,
}),
resolve({
browser: true,
dedupe,
}),
commonjs(),
legacy &&
babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
[
'@babel/preset-env',
{
targets: '> 0.25%, not dead',
},
],
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
[
'@babel/plugin-transform-runtime',
{
useESModules: true,
},
],
],
}),
!dev &&
terser({
module: true,
}),
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
// eslint(),
visualizer(),
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode),
ROLLUP_RECAPTCHA_SECRET_KEY: appConfig.RECAPTCHA_SECRET_KEY,
ROLLUP_RECAPTCHA_VERIFY_URL: appConfig.RECAPTCHA_VERIFY_URL,
ROLLUP_RECAPTCHA_SCORE_IS_HUMAN: appConfig.RECAPTCHA_SCORE_IS_HUMAN,
ROLLUP_RECAPTCHA_SCORE_IS_BOT: appConfig.RECAPTCHA_SCORE_IS_BOT,
}),
svelte({
generate: 'ssr',
dev,
preprocess,
}),
resolve({
dedupe,
}),
commonjs(),
postcss({
plugins: postcssPlugins(!dev),
extract: path.resolve(__dirname, './static/global.css'),
}),
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules ||
Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
// eslint(),
visualizer(),
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
commonjs(),
!dev && terser(),
],
onwarn,
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment