gregives / eleventy-critical-css Goto Github PK

View Code? Open in Web Editor NEW

48.0 3.0 5.0 705 KB

An Eleventy plugin to extract and inline critical CSS from your HTML templates

Home Page: https://www.npmjs.com/package/eleventy-critical-css

License: MIT License

JavaScript 79.57% HTML 18.59% CSS 1.84%

eleventy eleventy-plugin critical css optimization

eleventy-critical-css's Introduction

eleventy-critical-css

Eleventy plugin to extract and inline critical (above-the-fold) CSS from your HTML templates.

You can easily add this plugin to your Eleventy project in just two steps or you can use index.js as a reference for your own implementation of critical CSS!

Get Started

Install eleventy-critical-css

npm install eleventy-critical-css --save

Add the plugin to your Eleventy configuration in .eleventy.js

const criticalCss = require("eleventy-critical-css");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(criticalCss);
};

Configuration

This plugin uses Critical by Addy Osmani to extract and inline critical from HTML templates i.e. any template with an output path ending in .html.

You can pass options to Critical as a second parameter of addPlugin:

const criticalCss = require("eleventy-critical-css");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(criticalCss, {
    height: 1080,
    width: 1920,
  });
};

You can see all options for Critical in the GitHub repository.

Default Options

The default options passed to Critical are:

{
  assetPaths: [path.dirname(outputPath)],
  base: outputDir,
  html: content,
  inline: true,
  rebase: ({ originalUrl }) => originalUrl,
}

Where content and outputPath are the arguments passed to Eleventy transforms and outputDir is the output directory specified in your Eleventy configuration.

Maximum Concurrency

Node.js will print a warning if more than 10 listeners are added for a particular event. This is a useful default that helps finding memory leaks.

So that you don't see warnings when using eleventy-critical-css, the plugin respects the maximum number of listeners. You can use process.setMaxListeners() to increase the concurrency of eleventy-critical-css above the default, but be aware that it may be harder to detect memory leaks in your application as a result.

const criticalCss = require("eleventy-critical-css");

// Increase concurrency to 100
process.setMaxListeners(100);

// Unlimited concurrency
process.setMaxListeners(0);

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(criticalCss);
};

eleventy-critical-css's People

Contributors

Stargazers

Watchers

Forkers

prabhupandu admariner summercms siddhantyadav

eleventy-critical-css's Issues

Need help trying to use inline strategy

I'm trying to use this feature: addyosmani/critical#480 (comment) but I'm not sure how I'd access this "inline strategy" option or if it's not possible without doing some kind of npm dependency magic (my app depends on eleventy-critical-css, which depends on critical, which depends on inline-critical where this feature was added).

If you can help, thanks! If not, thanks for the plugin anyway!

MaxListenersExceededWarning: Possible EventEmitter memory leak detected

Since i enabled critical-css i see this in my build.

node:26304) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use node --trace-warnings ... to show where the warning was created)
(node:26304) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(node:26304) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. Use emitter.setMaxListeners() to increase limit

Undefined error while using with Eleventy v1.0.0-canary

When using this plugin with Eleventy v1.0.0-canary.44, I'm getting TypeError: Cannot read property 'dir' of undefined

Likely this._config in index.js#L9 is undefined.

MaxListenersExceededWarning: Possible EventEmitter memory leak detected.

With Node v16.13.0 and NPM v8.1.0 on Windows 10, since critical v0.2.4 upto v1.1.0, with Eleventy v0.12.1, and now upto Eleventy v1.0.2, I'm having:

(node:20988) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
(node:20988) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(node:20988) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. Use emitter.setMaxListeners() to increase limit

Please, do you have any idea why this is happeninng? Thanks.

Missing fallback <noscript> tags after upgrading to Eleventy v1.0.2

Follup my issue #8, I've just noted that fallback <noscript> tags are missing in output pages after upgrading Eleventy from v0.12.1 to v1.0.2 -- it was properly outputted in previous Eleventy v0.12.1

Please, any chance to solve this? Thanks

Generate critical css only when ELEVENTY_ENV is for production

Hi There,
I am new to Eleventy, and luckily I found this plugin. May I know how to run this plugin only when the environment is for production? I have this under _data/env.js

module.exports = {
  environment: process.env.ELEVENTY_ENV,
};

And this is my npm script

"build": "ELEVENTY_ENV=prod run-s build:* postcss",

I only want to run this plugin when ELEVENTY_ENV is set to prod.

Thank you.