{"id":15208965,"url":"https://github.com/henrycatalinismith/11tysass","last_synced_at":"2025-10-29T12:31:43.249Z","repository":{"id":40275393,"uuid":"361257582","full_name":"henrycatalinismith/11tysass","owner":"henrycatalinismith","description":"A Sass plugin for Eleventy that's beginner-friendly and production-ready","archived":false,"fork":false,"pushed_at":"2023-10-01T18:32:55.000Z","size":614,"stargazers_count":6,"open_issues_count":33,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-02T01:31:48.711Z","etag":null,"topics":["11ty","11ty-plugin","sass"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/henrycatalinismith.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"license","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-04-24T20:15:28.000Z","updated_at":"2022-01-23T16:08:42.000Z","dependencies_parsed_at":"2023-12-26T16:49:53.330Z","dependency_job_id":"163d5d70-4477-4e42-b70e-a04a06cf818e","html_url":"https://github.com/henrycatalinismith/11tysass","commit_stats":{"total_commits":67,"total_committers":2,"mean_commits":33.5,"dds":"0.17910447761194026","last_synced_commit":"a1edd290143d314560a65dd1b2560cc305a87feb"},"previous_names":["hendotcat/11tysass"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrycatalinismith%2F11tysass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrycatalinismith%2F11tysass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrycatalinismith%2F11tysass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrycatalinismith%2F11tysass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henrycatalinismith","download_url":"https://codeload.github.com/henrycatalinismith/11tysass/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238825764,"owners_count":19537121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-plugin","sass"],"created_at":"2024-09-28T07:05:09.518Z","updated_at":"2025-10-29T12:31:43.243Z","avatar_url":"https://github.com/henrycatalinismith.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 11tysass\n\nA Sass plugin for Eleventy that's beginner-friendly and production-ready\n\n11tysass is a [Sass] plugin for [Eleventy] that's easy to configure but\nflexible enough for production. Most of the code in this plugin is dedicated to\nquality assurance and error handling: avoiding bugs, doing the right thing when\nsomething goes wrong, and printing as useful an error message as possible to\nhelp you fix it.\n\n## Features\n\n* Loading CSS via `\u003clink rel=\"stylesheet\" /\u003e`\n* Inline CSS in `\u003cstyle\u003e` tags\n* Hot reload support for either of the above CSS loading techniques\n* Simple config using [plain old Sass options][sass.Options]\n* Cache-busting with content hashing\n* Customizable post-processing (none by default)\n* Multiple Sass entrypoints\n\n## Installation\n\n```\nyarn add -D @henrycatalinismith/11tysass sass\n```\n\n## Usage\n\n### Eleventy Config\n\nThis is the smallest possible production-ready example. It enables\ncache-busting to guarantee that your visitors will get your updated CSS as soon\nas you deploy it, and it uses Sass's own output compression for minification.\n\n```javascript\nconst { sassPlugin } = require(\"@henrycatalinismith/11tysass\")\n\nmodule.exports = function(eleventyConfig) {\n  eleventyConfig.addPlugin(sassPlugin, {\n    files: [{\n      file: \"style.scss\",\n      outFile: \"style.[hash].css\",\n      outputStyle: \"compressed\",\n    }],\n  })\n}\n```\n\n### Template Code\n\n```html\n\u003clink rel=\"stylesheet\" href=\"style.scss\" /\u003e\n```\n\nNote that the `href` value here references the Sass entrypoint source file\nrather than the CSS output. 11tysass injects the cache-bust URL with the\ncontent hash for you.\n\nIf you prefer your CSS inline, add a `\u003cstyle\u003e` tag with a `data-src` attribute\nlike this. 11tysass will inject the rendered CSS into the tag and remove the\ndata attribute for you.\n\n```html\n\u003cstyle data-src=\"style.scss\"\u003e\u003c/style\u003e\n```\n\n## Options\n\n### `files`\n\nThe `files` array is a list of Sass files for the plugin to compile. Each item\nin the array should be an object of [Sass render options][sass.Options]. The\nfollowing two properties are the most important, but you can pass other\nSass options alongside them as well if you have specific Sass configuration\nneeds.\n\n#### `file`\n\nThis value is required. It tells Sass which file to render. It's specific to\nyour project: it's a name you choose, not 11tysass. Yours might be called\n`style.scss`.\n\n#### `outFile`\n\nThis tells 11tysass where to save the rendered CSS.\nThis is project-specific just like [`file`](#file).\nYou might want to choose `style.css` if you're not sure.\n\nIf you're going to load your rendered CSS via a `\u003cstyle\u003e` tag instead of a\n`\u003clink\u003e` tag, you can leave this value out. 11tysass doesn't need to write a\nCSS file to your `_site` directory if nothing's going to load it. But if you\nwant to use a `\u003clink\u003e` tag to load your CSS, then you need to provide an\n`outFile` value so that there's a file to load.\n\nIf you need a content hash in this filename for cache-busting purposes,\n11tysass supports that. The usage example at the top of the readme shows an\n`outFile` using this feature. A value such as `style.[hash].css` gets the\n`[hash]` part replaced with an MD5 checksum of the rendered CSS.\n\n### `plugins`\n\nThe `plugins` array is an optional series of transforms to apply to the\nrendered CSS. Rather than bundle an opinionated set of CSS post-processing\ntools, 11tysass provides this flexible extension point so that you can choose\nyour own.\n\nEach item in the array should be a function that accepts a CSS string and\nreturns another CSS string. Here's an example using [PostCSS] and\n[Autoprefixer] to post-process the rendered CSS output from Sass.\n\n```javascript\nconst { sassPlugin } = require(\"@henrycatalinismith/11tysass\")\nconst autoprefixer = require(\"autoprefixer\")\nconst postcss = require(\"postcss\")\n\nmodule.exports = function(eleventyConfig) {\n  eleventyConfig.addPlugin(sassPlugin, {\n    files: [{\n      file: \"style.scss\",\n      outFile: \"style.css\",\n      outputStyle: \"compressed\",\n    }],\n    plugins: [\n      css =\u003e postcss([autoprefixer]).process(css).css,\n    ],\n  })\n}\n```\n\n### `verbose`\n\nPass `verbose: true` to the plugin and it'll output a whole bunch of\ninformation about what it's doing. This is mostly useful for debugging. Please\nenable this this option if you're reporting a bug in 11tysass.\n\n### `onInjectInline`\n\nThis is an advanced feature: skip this if you're just getting started. It's an\noptional function you can pass to 11tysass to post-process inline `\u003cstyle\u003e`\ntags on a per-page basis. This is useful if you want to run something like\n[PurgeCSS] on them. The function receives two string parameters: the CSS being\ninjected into the page, and the HTML source code of the page. There's an\n[example PurgeCSS setup][onInjectInline] you can check out if you're curious.\n\n## Error Codes\n\n11tysass will try to help you set it up properly. If you make a mistake,\nit'll try to help you understand. For some mistakes that it can recognize,\nit'll print a link in the build output pointing at one of these error codes to\nhelp you troubleshoot.\n\n### `nothing-to-render`\n\nThis error code is generated when you add the plugin to Eleventy without giving\nit any Sass files to render.\n\nDouble check your code against the example at the top of this readme. The\nsecond argument you pass to `eleventyConfig.addPlugin` should be an object with\na property called `files`.\n\n### `missing-file`\n\nThis error code is generated when you pass a file to the plugin without a\n`file` value specified. Without this value, the plugin doesn't know which Sass\nfile you want it to render for you.\n\nDouble check your code against the example at the top of this readme. Each\nentry in the `files` array should have a line like `file: \"style.scss\"`.\n\n### `plugin-error`\n\nThis error code is generated when one of your [`plugins`](#plugins) throws an\nerror while processing your rendered CSS. These errors aren't bugs in 11tysass,\nbut rather some kind of problem with your CSS post-processing code. If you get\nstuck, it's okay to open an issue here anyway and ask for help!\n\n### `sass-error`\n\nThis error code is generated when Sass throws an error while trying to render\nyour CSS. These errors aren't bugs in 11tysass: they mean you have a mistake in\nyour own Sass code. Try to use the error messages from Sass to fix them.\n\n## Contributing\n\n* [Tips][Contributing]\n* [Code of Conduct]\n\n## License\n\n[MIT]\n\n[eleventy-plugin-sass]: https://github.com/Sonaryr/eleventy-plugin-sass\n[eleventy-plugin-scss]: https://github.com/jamshop/eleventy-plugin-scss\n[sass.Options]: https://sass-lang.com/documentation/js-api#options\n[sass.Result]: https://sass-lang.com/documentation/js-api#result-object\n[includedFiles]: https://sass-lang.com/documentation/js-api#result-stats-includedfiles\n[Sass]: https://sass-lang.com/\n[Eleventy]: https://www.11ty.dev/\n[PostCSS]: https://postcss.org\n[PurgeCSS]: https://purgecss.com\n[Autoprefixer]: https://autoprefixer.github.io\n[Contributing]: https://codeberg.org/henrycatalinismith/11tysass/src/branch/main/contributing.md\n[Code of Conduct]: https://codeberg.org/henrycatalinismith/11tysass/src/branch/main/code_of_conduct.md\n[MIT]: https://codeberg.org/henrycatalinismith/11tysass/src/branch/main/license\n[onInjectInline]: https://codeberg.org/henrycatalinismith/11tysass/src/branch/main/examples/purgecss/.eleventy.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrycatalinismith%2F11tysass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenrycatalinismith%2F11tysass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrycatalinismith%2F11tysass/lists"}