@pustelto/css-split v0.1.1

WIP css-split

Automatic CSS code-splitting for static generated sites.

Script for automatic code splitting of CSS files to minimize the payload of the page. It removes unused code for each of your pages so you downlaod only CSS that is needed. It works with HTML documents in order to decide how to split the CSS (what CSS remove from which page). For this reason it can play nicely with sites generated by some static site generator (eg. Eleventy, Jekyll). So far I'm using it on my personal blog. But feel free to test it on your site as well.

Installation

npm i @pustelto/css-split or yarn @pustelto/css-split

How to use

1. In the root of your project create new javascript file (give it whatever name you want, eg. split-css.js) and put the content below inside (see Configuration section for more info about the config object.

const cssSplit = require("@pustelto/css-split");

const CONFIG = {
  targetFolder: "_site",
  html: [
    "index.html",
    "projects/index.html",
    "blog/index.html",
    { path: "blog/*/index.html", outputName: "article" },
  ],
  cssPath: "styles/main.css",
};

cssSplit(CONFIG);

1. Add node css-split.js to your build script, eg. for sites generetated via Eleventy: npx @11ty/eleventy && node split-css.js.
2. Now when you build your site your main CSS file will be split to bunch of others smaller CSS files based on the config you provided.

Configuration

There is no default configuration so far, so you have to provide all parameters.

• targetFolder - path to the folder wcontaining final CSS and HTML files, usually a dist or build folder.
• html - array of strings or objects with paths to HTML files. Paths are relative to targetOutput. Each item in the array produce one CSS file for the HTML files cover by that path glob. Can be direct path to one HTML file or a glob to contain multiple HTML files in a folder. Accepts any valid minimatch pattern (uses Glob package to find a files). When using object, it has to have shape {path: <glob_pattern>, outputName: <string>}. path prop contain glob for HTML and outputName will be used to name a CSS chunk. This is mainly useful for glob pattern selecting multiple HTML files in a folder (eg. you want to output one CSS file for all articles, instead of unique CSS for each article).
• cssPath - path to a CSS file which should be code splitted. It's relative to targetOutput

Real life example

• My personal blog, source code is here: blog's repo

Contribution

Any feedback, suggestions for improvements and PRs are welcome. It's quick prototype to test some concepts, but it should work most of the time. I plan to wokr on it further in the future.

License

MIT