├── .editorconfig ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.js ├── package-lock.json └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | 14 | [*.{css,scss,js,ts}] 15 | indent_size = 4 16 | max_line_length = 80 17 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## [Unreleased] 8 | 9 | ## [1.0.3] - 2022-05-17 10 | ### Fixed 11 | - CSS file path showing in collection (thanks to @allrude) 12 | 13 | ## [1.0.2] - 2022-02-13 14 | ### Added 15 | - option to enable cache 16 | 17 | ### Fixed 18 | - cache issue with watch 19 | 20 | ## [1.0.0] - 2022-01-24 21 | Initial Release 🎉 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2022 Sean van Zuidam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Eleventy Plugin - Sass 2 | 3 | [![NPM version](https://img.shields.io/npm/v/@grimlink/eleventy-plugin-sass)](https://www.npmjs.org/package/@grimlink/eleventy-plugin-sass) 4 | ![license](https://img.shields.io/github/license/GrimLink/eleventy-plugin-sass) 5 | 6 | Simple 11ty config wrapper, for running Sass directly as custom template. 7 | 8 | ## Installation 9 | 10 | This eleventy plugin requires; 11 | 12 | - Eleventy v1.0.0 or higher 13 | - Sass (Dart Sass) v1.45.0 or higher 14 | 15 | First install this plugin with; 16 | 17 | ```bash 18 | npm install @grimlink/eleventy-plugin-sass 19 | ``` 20 | 21 | Second install Sass; 22 | 23 | ```bash 24 | npm install sass 25 | ``` 26 | 27 | > **Note** We offer the freedom to pick your own Sass version. 28 | > 29 | > This allows you to update the Sass version, 30 | > without needing to rely on this plugin for that. 31 | 32 | ## How to use 33 | 34 | Add to Configuration File (Usually .eleventy.js) the following; 35 | 36 | ```js 37 | const eleventySass = require("@grimlink/eleventy-plugin-sass"); 38 | const sass = require("sass"); 39 | 40 | module.exports = function(eleventyConfig) { 41 | eleventyConfig.addPlugin(eleventySass, { sass }); 42 | }; 43 | ``` 44 | 45 | You need to pass sass as an option, 46 | But besides that, thats pretty much it. 47 | 48 | Now any SCSS files, 49 | that don't start with a underscore, 50 | will compile to CSS in de output directory. 51 | 52 | ### Options 53 | 54 | There are off course options to tweak to your preference. 55 | 56 | | option | Default | Description | 57 | | ------------ | ---------------- | ---------------------------------- | 58 | | sass | | the sass compiler to use | 59 | | outputPath | "" | Output path for your CSS file(s) | 60 | | outputStyle | "expanded" | Options are expanded or compressed | 61 | | includePaths | ["node_modules"] | List of extra folders to include | 62 | | sourceMap | false | If you want to use source maps | 63 | 64 | If `outputPath` is empty, 65 | this plugin will use the default inputPath as the outputPath. 66 | 67 | If you want to force this to for example `_site/css`, 68 | use `outputPath = "css"` as value. 69 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require("./package.json"); 3 | 4 | module.exports = (eleventyConfig, options = {}) => { 5 | const { 6 | sass, 7 | outputPath = "css", 8 | outputStyle = "expanded", 9 | includePaths = ["node_modules"], 10 | sourceMap = false, 11 | cache = false, 12 | } = options; 13 | const outputFileExtension = "css"; 14 | 15 | try { 16 | eleventyConfig.versionCheck(pkg["11ty"].compatibility); 17 | } catch (e) { 18 | console.log( 19 | `WARN: Eleventy Plugin (${pkg.name}) Compatibility: ${e.message}` 20 | ); 21 | } 22 | 23 | eleventyConfig.addTemplateFormats("scss"); 24 | 25 | // Creates the extension for use 26 | eleventyConfig.addExtension("scss", { 27 | outputFileExtension, 28 | compileOptions: { 29 | cache, 30 | permalink: (_inputContent, inputPath) => (_data) => { 31 | let parsed = path.parse(inputPath); 32 | if (parsed.name.startsWith("_")) return; // Ignore partials 33 | if (!outputPath) return; // default to inputPath 34 | 35 | return `/${outputPath}/${parsed.name}.${outputFileExtension}`; 36 | }, 37 | }, 38 | getData: async () => ({ eleventyExcludeFromCollections: true }), 39 | compile: (inputContent, inputPath) => { 40 | let parsed = path.parse(inputPath); 41 | if (parsed.name.startsWith("_")) return; // Ignore partials 42 | 43 | const loadPaths = [ 44 | parsed.dir || ".", 45 | eleventyConfig.dir.includes || "_includes", 46 | ...includePaths, 47 | ]; 48 | 49 | let result = sass.compileString(inputContent, { 50 | style: outputStyle, 51 | sourceMap, 52 | loadPaths, 53 | }); 54 | 55 | return async (_data) => result.css; 56 | }, 57 | }); 58 | }; 59 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@grimlink/eleventy-plugin-sass", 3 | "version": "1.0.3", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "version": "1.0.3", 9 | "license": "MIT" 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@grimlink/eleventy-plugin-sass", 3 | "version": "1.0.3", 4 | "description": "Simple 11ty config wrapper, for running Sass directly as custom template.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/GrimLink/eleventy-plugin-sass.git" 12 | }, 13 | "keywords": [ 14 | "eleventy", 15 | "eleventy-plugin", 16 | "11ty", 17 | "11ty-plugin", 18 | "sass", 19 | "scss" 20 | ], 21 | "author": "GrimLink", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/GrimLink/eleventy-plugin-sass/issues" 25 | }, 26 | "homepage": "https://github.com/GrimLink/eleventy-plugin-sass#readme", 27 | "11ty": { 28 | "compatibility": ">=1.0.0" 29 | } 30 | } 31 | --------------------------------------------------------------------------------