Base Scully configuration example for Angular App + PreloadCss plugin

preload-css.plugin.ts

import { registerPlugin } from '@scullyio/scully';

export const PreloadCssPlugin = 'PreloadCssPlugin';

export const preloadCssHandler = async (html: string): Promise<string> => {

  html = html.replace(
    /<link rel="stylesheet" href="([\w\d\.-]+\.css)">/g,
    `<link rel="preload" as="style" href="$1">
  <link rel="stylesheet" type="text/css" media="print" onload="this.media='all';" href="$1">
  <noscript>
    <link rel="stylesheet" type="text/css" href="$1">
  </noscript>
  `
  );

  return Promise.resolve(html);
};

const validator = () => {
  return [];
};

registerPlugin('postProcessByHtml', PreloadCssPlugin, preloadCssHandler, validator);


export function getPreloadCssPlugin() {
  return PreloadCssPlugin;
}

scully.myproject.config.ts

import { PreloadCssPlugin } from './scully/plugins/preload-css.plugin';
import { ScullyConfig, setPluginConfig } from '@scullyio/scully';

import { getFlashPreventionPlugin } from '@scullyio/scully-plugin-flash-prevention';
import { RemoveUnusedCSSPlugin } from 'scully-plugin-remove-unused-css';

const projectRoot = './src';
const outDir = './dist/static';

const FlashPreventionPlugin = getFlashPreventionPlugin();
const defaultPostRenderers  = [ FlashPreventionPlugin, PreloadCssPlugin, RemoveUnusedCSSPlugin ];

export const config: ScullyConfig = {
  puppeteerLaunchOptions: {
    args: [
      "--disable-gpu",
      "--renderer",
      "--no-sandbox",
      "--no-service-autorun",
      "--no-experiments",
      "--no-default-browser-check",
      "--disable-dev-shm-usage",
      "--disable-setuid-sandbox",
      "--no-first-run",
      "--no-zygote",
      "--single-process",
      "--disable-extensions",
      "--user-agent='Scully Navigator'"
    ],
    // comment or change if required
    executablePath: '/Applications/Chromium.app/Contents/MacOS/Chromium'
  },
  projectRoot: "./src",
  projectName: "myproject",
  outDir: './dist/static',
  ignoreResourceTypes: [
    'image',
    'media',
    'font',
    'stylesheet'
  ],
  defaultPostRenderers,
  appPort: 4200,
  staticPort: 8080,
  routes: {
  },
  extraRoutes: [
    '/about',
    '/contact'
  ],
  // maxRenderThreads: 3,
  handle404: 'index'
};