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 Browserslist to add vendor specific prefixes.
You can pass a list of browsers in the plugin's options . Alternatively it will look for a
.browserslistrcfile or abrowserslistinpackage.json. Check the details here
Requirements
Installation
npm install --save-dev @sardine/eleventy-plugin-tinycssHow to use it
const tinyCSS = require('@sardine/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('@sardine/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('@sardine/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
const tinyOptions = {
purgeCSS: {
// Remove them keyframes
keyframes: true,
},
};
eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};Browserslist options
You can pass a list of browsers as a string :
const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
const tinyOptions = {
browserslist: 'last 2 version, not dead',
};
eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};Alternatively it will look for a .browserslistrc file or a browserslist in package.json. Check the details here