eleventy-plugin-fluid-sass

eleventy-plugin-fluid-sass

Eleventy plugin which compiles sass for Fluid Project websites.

Requirements

• Node >= 20
• Eleventy >= 3.0.0-beta.1

Installation

Add eleventy-plugin-fluid-sass to your Eleventy-based static site by running:

npm install --save eleventy-plugin-fluid-sass

Then, in your Eleventy configuration file (usually eleventy.config.js), load the plugin as follows:

import fluidSassPlugin from "eleventy-plugin-fluid-sass";

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(fluidSassPlugin);
};

Usage

eleventy-plugin-fluid-sass includes configuration for processing Sass files using Sass and LightningCSS.

By default, any Sass files with the .scss extension found in the ./src/assets/styles/ directory or its children will be processed unless the filename begins with an underscore (_).

Options for Sass may be modified by passing values when registering eleventy-plugin-fluid-sass in your config:

import fluidSassPlugin from "eleventy-plugin-fluid-sass";

export default function (eleventyConfig) {
-    eleventyConfig.addPlugin(fluidSassPlugin);
+    eleventyConfig.addPlugin(fluidSassPlugin, {
+        browserslist: '> 1.5%'
+    });
};

Default values are as follows:

let options = {
    /* Where should Eleventy look for Sass files to process? */
    basePath: `./${eleventyConfig.dir.input || "src"}/assets/styles`,
    /* See: https://lightningcss.dev/minification.html */
    minify: true,
    /* Not yet supported, see https://github.com/fluid-project/eleventy-plugin-fluid/issues/170 */
    sourceMap: false,
    /* See: https://lightningcss.dev/transpilation.html#draft-syntax */
    drafts: {
        nesting: true
    },
    /* A Browserslist configuration string (see: https://browsersl.ist) */
    browserslist: "> 1%"
};

Note that all of these will be passed to LightningCSS, not Sass, with the exception of basePath, enabled, and sourceMap.

If you wish to disable Browserslist altogether, you can pass an empty array ([]) to the browserslist key.

For more options, see the Sass and LightningCSS docs.

Development

Releasing

This package uses Conventional Commits, enforced with commitlint. This facilitates releasing new versions of the package via Release Please. To cut a release, merge the current release pull request.

This will tag an appropriate semantic version based on the nature of the recent commits to the project and update the changelog.

You will then need to publish the updated version to the npm registry. This requires an npm account with appropriate maintainer permissions. To publish the package, run:

npm publish

For more information on publishing to npm, see the npm publish documentation.

Third Party Software in eleventy-plugin-fluid-sass

eleventy-plugin-fluid-sass is based on other publicly available software, categorized by license:

ISC License

• eleventy-plugin-lightningcss
• eleventy-plugin-sass-lightningcss