5t3ph/eleventy-plugin-sass-lightningcss

Compile Sass in Eleventy (11ty) and process it with LightningCSS to minify, prefix, and add future CSS support.

Eleventy Plugin: Sass and LightningCSS

Compile Sass in Eleventy (11ty) and process it with LightningCSS to minify, prefix, and add future CSS support.

Also respects either your package.json browserslist or a .browserslistrc, otherwise the default targets are > 0.2% and not dead.

Review LightningCSS docs to learn more about what future CSS features are supported via syntax lowering, including color functions, media query ranges, logical properties, and more.

Note Requires Eleventy v2 - review upgrade considerations if applying to an existing project.

Interested in using LightningCSS in 11ty without Sass? You'll want my Eleventy LightningCSS plugin instead!

Usage

Install the plugin package:

npm install @11tyrocks/eleventy-plugin-sass-lightningcss

Then, include it in your .eleventy.js config file:

const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss");

module.exports = (eleventyConfig) => {
  // If you already have a config, add just the following line
  eleventyConfig.addPlugin(eleventySass);
};

⚠️ Important: The files will end up in collections.all and appear in places like RSS feeds where you may be using the "all" collection. To prevent that, a temporary workaround is to create a directory data file to exclude your Sass files.

Place the following in the directory containing your Sass files. As an example, for a directory called css the file would be called css/css.json:

{
  "eleventyExcludeFromCollections": true
}

Then, write your Sass using any organization pattern you like as long as it lives within your defined Eleventy input directory.

Note If you are already using PostCSS or Parcel, you will be doubling efforts with this plugin and should not add it.

How does it work?

This plugin uses Eleventy's addTemplateFormats and addExtension features to essentiallly recognize Sass as a first-class templating language, and add custom processing. Since it makes Sass into a templating language, changes are applied during local development hot-reloading without a delay or requiring a manual browser refresh.

The docs actually show the basics of including Sass but this plugin steps it up a notch by adding the processing using LightningCSS. This both minifies, prefixes, and enables transpiling based on your browserslist (or the included default) to gain future-CSS support today, with graceful upgrading as browser support improves.

eleventy-plugin-sass-lightningcss's Issues

Something's wrong with the NPM package

pnpm install @11tyrocks/eleventy-plugin-sass-lightningcss
 WARN  GET https://registry.npmjs.org/@11tyrocks%2Feleventy-plugin-sass-lightningcss error (500). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@11tyrocks%2Feleventy-plugin-sass-lightningcss error (500). Will retry in 1 minute. 1 retries left.
 ERR_PNPM_FETCH_500  GET https://registry.npmjs.org/@11tyrocks%2Feleventy-plugin-sass-lightningcss: Internal Server Error - 500

Additionally, visiting the package's page on npmjs.com results in an error

Saving .scss files does a full browser page refresh instead of live reloading just the css update

Everything works correctly except when saving .scss files the browser does a full page refresh instead of live reloading just the css change.

Using:

"@11ty/eleventy": "^2.0.0",
"@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.1",

When I use just plain "sass": "^1.58.3" with a --watch flag as a task alongside npx @11ty/eleventy --serve the updated styles live reload as expected.

Wonder if there's some config I'm missing.

Is it possible to define output directory?

I keep Sass files inside src/_includes/scss. Added this folder as an input folder, but the output lands in dist. Is there a way to declare it to put it inside dist/css? Adding outputDir: "css" to options does not work.

How to exclude folders/files with this plugin?

I have the lightningcss and sass plugin that came with the 11ty sass theme -

Right now the plugin is compiling sass, but not outputting css. This is easy to workaround, the primary challenge is that there are folders and files I want to exclude from being compiled, and I currently don't know where/how to exclude those folders.

Does not work with .webc

When I use .webc files they do not compile from scss to css

Strange side effect, some scss source files end up in sitemap

This is really odd. I am using the plugin as directed and it generates the proper single css file that is autoprefixed and minified and my site works fine.

However, my sitemap, generated by a

{% for page in collections.all %}

ends up including links to several (but not all) of my source scss files. Here's one example:

        <url>
            <loc>https://www.bobmonsour.com/css/_reset.css</loc>
            <lastmod>2023-02-03T05:34:28.610Z</lastmod>
        </url>

My main.scss has 4 @use commands to "import" 4 scss files.

Is there some side effect where the plugin generates some collection items?

Here's a link to my repo:

https://github.com/bobmonsour/bobmonsour.com

I hope that makes some sense...but it's really odd.