@greyskullrocks/eleventy-plugin-tinycss v1.3.2
eleventy-plugin-tinycss
An 11ty plugin to optimise CSS.
Features
Improves First Contentful Paint by reducing the potential number of render-blocking resources. It replaces relative external CSS files and inlines them in the page.
Original HTML:
<html> <head> <link href="/assets/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <h1 class="a">Hello!</h1> </body> </html>
Optimised HTML:
<html> <head> <style> .a { font-size: large; } </style> </head> <body> <h1 class="a">Hello!</h1> </body> </html>
Finds multiple
<style>
elements and merge them together.Original HTML:
<html> <head> <style> body { font-size: large; } </style> </head> <body> <style> .a { color: #ccc; } </style> <h1 class="a">Hello!</h1> </body> </html>
Optimised HTML:
<html> <head> <style> body { font-size: large; } .a { color: #ccc; } </style> </head> <body> <h1 class="a">Hello!</h1> </body> </html>
Uses PurgeCSS to remove unused CSS in the page.
You can pass PurgeCSS configuration object in the plugin's options
Uses Autoprefixer to add vendor specific prefixes.
You can pass Autoprefixer options in the plugin's options
Uses CSSNano to minify and optimise the final CSS.
You can config CSSNano with the default config files
Requirements
Installation
npm install --save-dev @greyskullrocks/eleventy-plugin-tinycss
How to use it
const tinyCSS = require('@greyskullrocks/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(tinyCSS);
};
Configuration
Ouput directory
By default the plugin uses _site
as the 11ty output directory. If you're using other directory you'll need to tell the plugin:
const tinyCSS = require('@greyskullrocks/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
const tinyOptions = {
output: 'dist',
};
eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};
PurgeCSS options
By default the following options are used:
{
content: [
{
raw: html,
extension: "html",
},
],
extractors: [
{
extractor: purgeHtml,
extensions: ["html"],
},
],
};
You can pass your own options just like in the official documentation :
const tinyCSS = require('@greyskullrocks/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
const tinyOptions = {
purgeCSS: {
// Remove them keyframes
keyframes: true,
},
};
eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};
Autoprefixer options
You can pass your own options just like in the official documentation :
const tinyCSS = require('@greyskullrocks/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
const tinyOptions = {
autoprefixer: {
// keep browser prefixes
remove: false,
},
};
eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};