11ty-Styles

Simple plugin to have 11ty process .css templates.

Usage

Install package:

npm install @higby/11ty-styles

Add to your 11ty Config:

import styles from '@higby/11ty-styles'

export default eleventyConfig => {
  eleventyConfig.addPlugin(styles)
}

Now any .css file within 11ty's input directory will be processed through LightningCSS and put into the output directory.

Options

There is one option you can pass to the plugin:

eleventyConfig.addPlugin(styles, {
  ignoreUnderscores: true // default
})

This determines whether or not to process files whose name has a leading underscore, such as _root.css. Ignoring underscored files is on by default.

You may also pass LightningCSS options via the bundler object:

eleventyConfig.addPlugin(styles, {
  bundler: {
    minify: true // default
  }
})

Note that filename is not passed as that's handled by 11ty.