https://github.com/ashur/eleventy-plugin-styles
https://github.com/ashur/eleventy-plugin-styles
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ashur/eleventy-plugin-styles
- Owner: ashur
- Created: 2023-03-01T04:43:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-23T20:46:30.000Z (over 2 years ago)
- Last Synced: 2025-06-11T07:08:02.955Z (6 months 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
```