@aaashur/eleventy-plugin-styles

eleventy-plugin-styles

An Eleventy plugin — available as a filter and a shortcode — for joining truthy object values into a semicolon-delimited string, suitable for use in an HTML element's style attribute:

styles({
    "background-color": backgroundColor,
    "--custom-property": customProperty,
    "--falsy-variable": falsyVar && "green",
})
// returns "background-color: red; --custom-property: 10px"

Setup

Run the following command at the root of your Eleventy project:

npm install @aaashur/eleventy-plugin-styles

then include it in your .eleventy.js config file:

const styles = require("@aaashur/eleventy-plugin-styles");

module.exports = (eleventyConfig) => {
    eleventyConfig.addPlugin(styles);
};

Usage

styles is exposed both as a filter and as a shortcode everywhere Eleventy supports them.

Filter

✨ Added in v0.2.0

You might use the filter in a WebC template like this:

---
backgroundColor: red
customProperty: 10px
sectionTitle: Section Title
---
<h2 :style="styles({
	    'background-color': backgroundColor,
	    '--custom-property': customProperty,
	    '--undefined-var': undefinedVar && 'green',
	})"
	@text="sectionTitle"
></h2>

which would return:

<h2 style="background-color: red; --custom-property: 10px">
    Section Title
</h2>

Shortcode

You might use the shortcode in a Nunjucks template like this:

{% set backgroundColor = "red" %}
{% set customProperty = "10px" %}
{% set sectionTitle = "Section Title" %}

<h2 style="{% styles {
    "background-color": backgroundColor,
    "--custom-property": customProperty,
    "--undefined-var": "green" if undefinedVar
} %}">
    {{ sectionTitle }}
</h2>

which would return:

<h2 style="background-color: red; --custom-property: 10px">
    Section Title
</h2>