@11ty/eleventy-assets

Manage per-route code (CSS, SVG, JS) in Eleventy.

Usage no npm install needed!

<script type="module">
  import 11tyEleventyAssets from 'https://cdn.skypack.dev/@11ty/eleventy-assets';
</script>

README

Eleventy Assets

⚠️ Work in progress!!

Code to help manage assets in your Eleventy project. This is not an addPlugin compatible Eleventy plugin. It is an npm package for use in your config or other plugins.

Currently supported features:

  • Generate and inline code-split CSS specific to individual pages.
  • Can work as a standalone implementation (check out the ./sample/ directory) or in tandem with eleventy-plugin-vue.

Installation

npm install @11ty/eleventy-assets

Usage

See the ./sample/ directory for an example implementation.

  • A usingComponent shortcode to log component use in each template.
  • A getCSS filter for use in layout templates to output the code-split CSS for the current URL (only).
  • Component CSS is stored in ./sample/css/