Eleventy Plugin Lightningcss

Process CSS in Eleventy (11ty) with LightningCSS to minify, prefix, and add future CSS support.

Overview

The Eleventy Plugin: LightningCSS is a powerful tool for web developers using the Eleventy static site generator. This plugin enhances the CSS processing capabilities of Eleventy by integrating LightningCSS, allowing users to minify, prefix, and support modern CSS features. With features that respect your existing browserslist configuration, this plugin ensures that your stylesheets are optimized for both performance and compatibility across various browser versions.

Notably, this plugin requires Eleventy version 2, making it essential to consider upgrade paths if you are integrating it into an existing project. For those seeking Sass support as well, an additional plugin is available. LightningCSS not only simplifies your CSS workflow but also embraces future CSS syntax, enabling developers to leverage contemporary web standards effortlessly.

Features

Minification: Automatically minifies your CSS files, optimizing them for production environments and reducing load times.
Prefixing: Adds necessary vendor prefixes to ensure compatibility with various browsers, making your styles robust and future-proof.
Future CSS Support: Leveraging your browserslist or default settings, the plugin supports modern CSS features, including logical properties and color functions.
Bundling Capabilities: Allows the use of @import syntax for better organization and modularization, preventing unwanted separate stylesheets in the final build.
Custom At-Rules: Support for defining your own CSS at-rules, enabling custom transformations for advanced styling options.
Nesting Support: Facilitates nesting in CSS for a more intuitive styling process, allowing for cleaner, hierarchical styles.
Source Maps: Optionally generates source maps to ease the debugging process in development environments, making it easier to trace styles back to their source files.
Integration: Designed to work seamlessly with Eleventy, making CSS a first-class templating language and enhancing local development with hot-reloading capabilities.