How to use the critical.generate function in critical

To help you get started, we’ve selected a few critical examples, based on popular ways it is used in public projects.

github DeMoorJasper / blazingly-ssr / packages / cli / src / project / Page.js View on Github external
async snapshot(isProduction = true) {
    let cssBundles = this.getCSSBundles();
    let content = await snapshot({
      page: this,
      cssBundles,
      isProduction
    });

    if (cssBundles.length > 0) {
      // Extract critical css
      let criticalCss = await critical.generate({
        html: content,
        base: this.options.outDir,
        folder: this.options.outDir,
        minify: true,
        ignore: ['@font-face', /url\(/]
      });

      content = content.replace('/* BLAZINGLY INLINE CRITICAL CSS */', criticalCss);
      await fs.writeFile(path.join(this.outDir, 'critical.css'), criticalCss);
    }

    await fs.writeFile(path.join(this.outDir, 'index.html'), content);
  }
}
github kittn / generator-kittn / generators / app / templates / nodescripts / critical.js View on Github external
function processCriticalCss(element, i, callback) {
  const url = argv.url || kittn.cssabove.url
  const criticalSrc = `${url}${element.url}`
  const BASE_PATH = path.resolve(__dirname, '..')
  const criticalDest = `${`${BASE_PATH}/${kittn.src.templates}${element.template}`}_critical.min.css`
  console.log(`-> Generating critical CSS: ${chalk.cyan(criticalSrc)} -> ${chalk.magenta(criticalDest)}`)

  critical.generate(
    {
      src: criticalSrc,
      dest: criticalDest,
      inline: kittn.cssabove.inline,
      ignore: kittn.cssabove.ignore,
      include: kittn.cssabove.include,
      css: [
        kittn.dist.css + kittn.cssabove.cssfile
      ],
      minify: kittn.cssabove.minify,
      height: kittn.cssabove.height,
      width: kittn.cssabove.width
    },
    (err, output) => {
      callback();
    }
github ournameismud / mud-fractal / gulp / tasks / critical.js View on Github external
return new Promise((resolve, reject) => {
                critical
                    .generate({
                        ...options,
                        ...TASK_CONFIG.critical
                    })
                    .catch(e => {
                        console.error(e)
                        reject(e)
                    })
                    .then(output => {
                        gulp
                            .src(path.resolve(process.env.PWD, source))
                            .pipe(
                                htmlreplace(
                                    {
                                        critical: {
                                            src: null,
github kremalicious / blog / gulpfile.babel.js View on Github external
export const criticalCss = done => {
    if (isProduction) {
        critical.generate({
            base: DIST,
            src: 'index.html',
            dest: 'index.html',
            inline: true,
            minify: true,
            dimensions: [{
                height: 320,
                width: 480
            }, {
                height: 600,
                width: 650
            }, {
                height: 700,
                width: 960
            }, {
                height: 900,
github devbridge / Performance / gulp / critical-css / critical-css.js View on Github external
base: './',
        src: 'index-origin.html',
        dimensions: [{
            height: 480,
            width: 320
        }, {
            height: 900,
            width: 1200
        }],
        dest: 'index.html',
        minify: true,
        extract: true,
        ignore: ['@font-face']
    };

    return critical.generate(options);
};
github kittn / generator-kittn / app / templates / src / gulpfile / tasks / optimize-criticalCss.js View on Github external
kc.cssabove.sources.forEach(function(item) {
      return critical.generate({
        inline: kc.cssabove.inline,
        base: kc.dist.markup,
        src: item,
        dest: item,
        minify: kc.cssabove.minify,
        width: kc.cssabove.width,
        height: kc.cssabove.height
      })
    })
  }
github nrwl / webpack-plugin-critical / src / critical.ts View on Github external
.subscribe((tmp) => {
      const opts = {...options, ...{
        base: resolve(tmp, options.base || ''),
        dest: resolve(tmp, options.dest)
      }};

      critical.generate(opts, (err, output) => {
        subscription.unsubscribe();
        callback(err);
      });
    })
  }

critical

Extract & Inline Critical-path CSS from HTML

Apache-2.0
Latest version published 14 days ago

Package Health Score

86 / 100
Full package analysis