eleventy-load-css

Find dependencies in and minify CSS using eleventy-load.

Getting Started

Firstly, you'll need to install eleventy-load (if you haven't already) and eleventy-load-css. You'll probably want to use eleventy-load-css in combination with eleventy-load-html and eleventy-load-file, so we'll install those as well.

npm install --save-dev eleventy-load eleventy-load-css eleventy-load-html eleventy-load-file

Then you can set up eleventy-load-css using a rule in your eleventy-load options.

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(require("eleventy-load"), {
    rules: [
      {
        test: /\.html$/,
        loaders: [
          {
            loader: require("eleventy-load-html"),
          },
        ],
      },
      {
        test: /\.css$/,
        loaders: [
          {
            loader: require("eleventy-load-css"),
            options: {
              minimize: true,
            },
          },
          {
            loader: require("eleventy-load-file"),
            options: {
              name: "[hash].css",
            },
          },
        ],
      },
    ],
  });
};

Now that you've set up eleventy-load-css, you can reference a CSS file from an HTML template and eleventy-load-css will process it for you.

<link rel="stylesheet" href="styles.css" />

Options

| Name | Type | Default | Description | | --------------------------- | ------------------- | ------- | ---------------------------------------------------------------------- | | url | Boolean\|Function | true | Processes url dependencies | | import | Boolean | true | Processes @import dependencies | | minimize | Boolean\|Object | false | Minimize using CleanCSS |

url

Type: Boolean|Function Default: true

If true, processes url functions as eleventy-load dependencies.

If Function, calls the provided function to resolve the path of the dependency first, with an object containing the following:

• resourcePath: the path of the resource currently being processed
• source: the path of the resource in the url

// eleventy-load will process cat.jpg if `url` is true
background-image: url("cat.jpg");

import

Type: Boolean Default: true

If true, processes @import rules as eleventy-load dependencies.

// eleventy-load will process styles.css if `import` is true
@import "styles.css";

minimize

Type: Boolean|Object Default: false

If true or an Object, eleventy-load-css will minimize CSS using CleanCSS. If an Object, these will be provided to CleanCSS as options.

{
  loader: require("eleventy-load-css"),
  options: {
    minimize: {
      level: 2 // Use CleanCSS level 2 optimisations
    }
  },
},