{"_id":"@aaashur/eleventy-plugin-styles","_rev":"1-60acdb54917fac2d529ad8fbde6a5af3","name":"@aaashur/eleventy-plugin-styles","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@aaashur/eleventy-plugin-styles","version":"0.1.0","description":"An Eleventy shortcode for joining truthy object values into a semicolon-delimited string","main":".eleventy.js","scripts":{"lint":"eslint '.eleventy.js' 'src/**/*.js' 'test/**/*.js'","test":"mocha ./test"},"repository":{"type":"git","url":"git+https://github.com/ashur/eleventy-plugin-styles.git"},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin"],"author":{"name":"Ashur Cabrera","url":"https://ashur.cab/rera"},"license":"ISC","bugs":{"url":"https://github.com/ashur/eleventy-plugin-styles/issues"},"homepage":"https://github.com/ashur/eleventy-plugin-styles#readme","devDependencies":{"@11ty/eleventy":"^2.0.0","chai":"^4.3.7","eslint":"^8.35.0","eslint-plugin-sort-requires":"^2.1.0","mocha":"^10.2.0"},"eslintIgnore":["!.*"],"gitHead":"349e21c32392bd411ea7b05515c9284a1d282c89","_id":"@aaashur/eleventy-plugin-styles@0.1.0","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-dh4xhlxcZHx5zjeBgOk+1kKQ3r5Q3wuTpgIeChjAC/9vmAfHjySD+f7tFgitcwOfmdfRn5PnvBXSCaYcmc3rGw==","shasum":"f777232208c7798cecb7b35859745c24dc93b780","tarball":"https://registry.npmjs.org/@aaashur/eleventy-plugin-styles/-/eleventy-plugin-styles-0.1.0.tgz","fileCount":7,"unpackedSize":5023,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDM2z8ka+A3p37JQIs7iRld0G5RSxwexCJVk+6zeSvVCAiAS0G4yLTpGcifClMODzabIjGIiNsxrSEupg5PeV/lNKQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/ttWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeXhAAo4AHqBbePfpJRwGNmO7fniL5qZPxu3C1KcVry+2p5XERxT19\r\nzew7MIP5vWQ74oDhqGionYjyLEdwIgl47Z41GKE1Gma/abj7h7KlpST+woK1\r\nItpSZy75d6X/LjaXjZ1tu2jknJj61zV+Ti9p4PEVv8k16X2EKaOtw8QGTZ3c\r\ngwQpV1ON/Obz4zmuFUglV8L7wkryEJlxSNtTdqGrw/hLC1VW9TYoLtEOqXMP\r\nwyM4hsIcY7w9shxnfaLzTfhycOXW9CyewUFmgibGwGqUjMU0wn6eV+0r/cIR\r\nFZvLvqe+ziK0rpJgei5ogBWMs0UGw7cyPnPHlRgczM+KPkJGCBBwq/U3VKI5\r\nWlyLfq1oVUAvl36tu0sFOcxXL7BU3sWs4Le7DVb4yKRkhrCphz/Pl86ZWLJt\r\nRTVkz14BiiEEQaXlOAvTy4Gemuy0ZuYkOi8jkbzIP0bA2NhL9NzfCw25X+Rg\r\nO/P3b0EHzNW36e3K4tuuC4XIHsi1xTIke0kE8y0RcXlH116Uh/Prc4WydVln\r\npI20nDgNIuqsvl55IU4stQR3ev3trc4pkujDAh9mbmKLmqaPG3cVDehZLDYH\r\nkSALxpEiqb3eLNw4uPxR89+qgPcnje93Zk12COPWq+9VF7kfQxl9Kk1vDl2i\r\nL45QHxzGsxra4vrlHUPhFtcNb6zOU/u982Q=\r\n=A1Jy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aaashur","email":"hello@ashur.cab"},"directories":{},"maintainers":[{"name":"aaashur","email":"hello@ashur.cab"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eleventy-plugin-styles_0.1.0_1677646678333_0.23810718375073936"},"_hasShrinkwrap":false},"0.2.0":{"name":"@aaashur/eleventy-plugin-styles","version":"0.2.0","description":"An Eleventy plugin for joining truthy object values into a semicolon-delimited string","main":".eleventy.js","scripts":{"lint":"eslint '.eleventy.js' 'src/**/*.js' 'test/**/*.js'","test":"mocha ./test"},"repository":{"type":"git","url":"git+https://github.com/ashur/eleventy-plugin-styles.git"},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin"],"author":{"name":"Ashur Cabrera","url":"https://ashur.cab/rera"},"license":"ISC","bugs":{"url":"https://github.com/ashur/eleventy-plugin-styles/issues"},"homepage":"https://github.com/ashur/eleventy-plugin-styles#readme","devDependencies":{"@11ty/eleventy":"^2.0.0","chai":"^4.3.7","eslint":"^8.35.0","eslint-plugin-sort-requires":"^2.1.0","mocha":"^10.2.0"},"eslintIgnore":["!.*"],"gitHead":"fcbba02454f1a84b3e7390ddb00940e9ee6f2e58","_id":"@aaashur/eleventy-plugin-styles@0.2.0","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-OFvYdEGm7JIJtN6vEpN27rH9j0OmoZOYy+O9UUJLn5xk+0n43PacMEutLJkJ9Wo6443lDUoB4K9D0M25FIPt5Q==","shasum":"c147b5c5df94eace863cee60288a42d937032b51","tarball":"https://registry.npmjs.org/@aaashur/eleventy-plugin-styles/-/eleventy-plugin-styles-0.2.0.tgz","fileCount":8,"unpackedSize":6531,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgxa/HvVPvJnwfY0hmfH+coeh2fovvQ9YUs2Tvh5EN8AiA5Jo7TLwFvqZlanQ0yzTV7GC2E7ZgLeiDOCfycqcxGjw=="}]},"_npmUser":{"name":"aaashur","email":"hello@ashur.cab"},"directories":{},"maintainers":[{"name":"aaashur","email":"hello@ashur.cab"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eleventy-plugin-styles_0.2.0_1684875193415_0.39664607263779095"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-01T04:57:58.255Z","0.1.0":"2023-03-01T04:57:58.541Z","modified":"2023-05-23T20:53:13.691Z","0.2.0":"2023-05-23T20:53:13.584Z"},"maintainers":[{"name":"aaashur","email":"hello@ashur.cab"}],"description":"An Eleventy plugin for joining truthy object values into a semicolon-delimited string","homepage":"https://github.com/ashur/eleventy-plugin-styles#readme","keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin"],"repository":{"type":"git","url":"git+https://github.com/ashur/eleventy-plugin-styles.git"},"author":{"name":"Ashur Cabrera","url":"https://ashur.cab/rera"},"bugs":{"url":"https://github.com/ashur/eleventy-plugin-styles/issues"},"license":"ISC","readme":"# eleventy-plugin-styles\n\nAn [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:\n\n```javascript\nstyles({\n    \"background-color\": backgroundColor,\n    \"--custom-property\": customProperty,\n    \"--falsy-variable\": falsyVar && \"green\",\n})\n// returns \"background-color: red; --custom-property: 10px\"\n```\n\n## Setup\n\nRun the following command at the root of your Eleventy project:\n\n```shell\nnpm install @aaashur/eleventy-plugin-styles\n```\n\nthen include it in your `.eleventy.js` config file:\n\n```javascript\nconst styles = require(\"@aaashur/eleventy-plugin-styles\");\n\nmodule.exports = (eleventyConfig) => {\n    eleventyConfig.addPlugin(styles);\n};\n```\n\n## Usage\n\n`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.\n\n### Filter\n\n> ✨ Added in v0.2.0\n\nYou might use the filter in a [WebC template](https://www.11ty.dev/docs/languages/webc/) like this:\n\n```html\n---\nbackgroundColor: red\ncustomProperty: 10px\nsectionTitle: Section Title\n---\n<h2 :style=\"styles({\n\t    'background-color': backgroundColor,\n\t    '--custom-property': customProperty,\n\t    '--undefined-var': undefinedVar && 'green',\n\t})\"\n\t@text=\"sectionTitle\"\n></h2>\n```\n\nwhich would return:\n\n```html\n<h2 style=\"background-color: red; --custom-property: 10px\">\n    Section Title\n</h2>\n```\n\n\n### Shortcode\n\nYou might use the shortcode in a [Nunjucks template](https://www.11ty.dev/docs/languages/nunjucks/) like this:\n\n```njk\n{% set backgroundColor = \"red\" %}\n{% set customProperty = \"10px\" %}\n{% set sectionTitle = \"Section Title\" %}\n\n<h2 style=\"{% styles {\n    \"background-color\": backgroundColor,\n    \"--custom-property\": customProperty,\n    \"--undefined-var\": \"green\" if undefinedVar\n} %}\">\n    {{ sectionTitle }}\n</h2>\n```\n\nwhich would return:\n\n```html\n<h2 style=\"background-color: red; --custom-property: 10px\">\n    Section Title\n</h2>\n```\n","readmeFilename":"README.md"}