Added Shortcode to write sass inside components

.eleventy.js

@@ -6,6 +6,7 @@ const filters = require('./utils/filters.js')
 const transforms = require('./utils/transforms.js')
 const shortcodes = require('./utils/shortcodes.js')
 const iconsprite = require('./utils/iconsprite.js')
+const pairedShortcodes = require('./utils/shortcodes-paired.js')
 
 module.exports = function (config) {
     // Plugins
@@ -26,6 +27,11 @@ module.exports = function (config) {
     Object.keys(shortcodes).forEach((shortcodeName) => {
         config.addShortcode(shortcodeName, shortcodes[shortcodeName])
     })
+
+    // Paired Shortcodes
+    Object.keys(pairedShortcodes).forEach((shortcodeName) => {
+        config.addPairedShortcode(shortcodeName, pairedShortcodes[shortcodeName])
+    })
 
     // Icon Sprite
     config.addNunjucksAsyncShortcode('iconsprite', iconsprite)

package.json

@@ -36,6 +36,7 @@
     "focus-trap": "^6.3.0",
     "focus-visible": "^5.2.0",
     "html-minifier": "^4.0.0",
+    "jsdom": "^16.6.0",
     "luxon": "^1.26.0",
     "markdown-it": "^12.0.4",
     "memfs": "^3.2.0",

utils/shortcodes-paired.js

@@ -0,0 +1,13 @@
+const sass = require('node-sass');
+
+const appendTemplate = function(content, selector){
+    return `<template data-append="${selector}">${content}</template>`
+}
+
+module.exports = {
+    styles: function(content){
+        const renderSass = sass.renderSync({data: content});
+        return appendTemplate(renderSass.css.toString(), 'style');
+    },
+    append: appendTemplate
+}

utils/transforms.js

@@ -1,6 +1,7 @@
 const htmlmin = require('html-minifier')
 const critical = require('critical')
 const buildDir = 'dist'
+const {JSDOM} = require('jsdom')
 
 const shouldTransformHTML = (outputPath) =>
     outputPath &&
@@ -11,6 +12,32 @@ const isHomePage = (outputPath) => outputPath === `${buildDir}/index.html`
 
 process.setMaxListeners(Infinity)
 module.exports = {
+
+    appender: function (html, outputPath) {
+        if(!outputPath || !outputPath.endsWith('.html'))
+            return html
+        const dom = new JSDOM(html);
+        const document = dom.window.document;
+        const appendTemplates = document.querySelectorAll('[data-append]');
+        appendTemplates.forEach((element) => {
+            const selector = element.getAttribute('data-append');
+
+            switch (selector){
+                case 'style':
+                    const styleElem = document.createElement('style')
+                    styleElem.innerHTML = element.innerHTML
+                    document.head.appendChild(styleElem)
+                    break
+                default:
+                    document.querySelector(selector).innerHTML += element.innerHTML;
+            }
+
+            element.parentNode.removeChild(element);
+        });
+
+        return dom.serialize()
+    },
+
     htmlmin: function (content, outputPath) {
         if (shouldTransformHTML(outputPath)) {
             return htmlmin.minify(content, {