From 2d3d0393f6a64a3333f1db20dcf81f92bacc2c0b Mon Sep 17 00:00:00 2001
From: Deepak Gupta <deepakgupta191199@gmail.com>
Date: Fri, 18 Jun 2021 14:47:45 +0530
Subject: [PATCH] Added Shortcode to write sass inside components

---
 .eleventy.js               |  6 ++++++
 package.json               |  1 +
 utils/shortcodes-paired.js | 13 +++++++++++++
 utils/transforms.js        | 27 +++++++++++++++++++++++++++
 4 files changed, 47 insertions(+)
 create mode 100644 utils/shortcodes-paired.js

diff --git a/.eleventy.js b/.eleventy.js
index e5672f6..7ff7981 100644
--- a/.eleventy.js
+++ b/.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)
diff --git a/package.json b/package.json
index ab40cde..6cd42ab 100644
--- a/package.json
+++ b/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",
diff --git a/utils/shortcodes-paired.js b/utils/shortcodes-paired.js
new file mode 100644
index 0000000..4ea8361
--- /dev/null
+++ b/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
+}
diff --git a/utils/transforms.js b/utils/transforms.js
index 481d889..43fa71c 100644
--- a/utils/transforms.js
+++ b/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, {