https://github.com/ashur/eleventy-plugin-styles

https://github.com/ashur/eleventy-plugin-styles

Last synced: 11 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ashur/eleventy-plugin-styles
• Owner: ashur
• Created: 2023-03-01T04:43:51.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-05-23T20:46:30.000Z (over 1 year ago)
• Last Synced: 2024-10-11T13:21:32.500Z (about 1 month ago)
• Language: JavaScript
• Size: 43.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# eleventy-plugin-styles

An [Eleventy](https://11ty.dev/) 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:

```javascript

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:

```shell

npm install @aaashur/eleventy-plugin-styles

```

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

```javascript

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

module.exports = (eleventyConfig) => {

    eleventyConfig.addPlugin(styles);

};

```

## Usage

`styles` is exposed both as a [filter](https://www.11ty.dev/docs/filters/) and as a [shortcode](https://www.11ty.dev/docs/shortcodes/) everywhere Eleventy supports them.

### Filter

> ✨ Added in v0.2.0

You might use the filter in a [WebC template](https://www.11ty.dev/docs/languages/webc/) like this:

```html

---

backgroundColor: red

customProperty: 10px

sectionTitle: Section Title

---



```


which would return:

```html



    Section Title



```


### Shortcode

You might use the shortcode in a [Nunjucks template](https://www.11ty.dev/docs/languages/nunjucks/) like this:

```njk

{% set backgroundColor = "red" %}

{% set customProperty = "10px" %}

{% set sectionTitle = "Section Title" %}



    {{ sectionTitle }}



```


which would return:

```html



    Section Title



```