From 1625ac3b6258f6644cd4ccc0250fcbf2523cd944 Mon Sep 17 00:00:00 2001
From: Matt DeCamp <matthewdecamp@gmail.com>
Date: Wed, 1 Sep 2021 21:19:30 -0400
Subject: [PATCH] generate styles scripting and test

---
 src/assets/scss/main.scss                     |  2 -
 src/assets/scss/variables/_colors.scss        | 14 ----
 src/assets/{scss => styles/base}/_reset.scss  |  0
 src/assets/styles/main.scss                   | 14 ++++
 src/assets/styles/styles.11ty.js              | 69 +++++++++++++++++++
 .../utility/_variables.scss}                  | 17 ++++-
 6 files changed, 99 insertions(+), 17 deletions(-)
 delete mode 100644 src/assets/scss/main.scss
 delete mode 100644 src/assets/scss/variables/_colors.scss
 rename src/assets/{scss => styles/base}/_reset.scss (100%)
 create mode 100644 src/assets/styles/main.scss
 create mode 100644 src/assets/styles/styles.11ty.js
 rename src/assets/{scss/variables/_spacing.scss => styles/utility/_variables.scss} (63%)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
deleted file mode 100644
index 017a87f..0000000
--- a/src/assets/scss/main.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "variables/spacing";
-@import "variables/colors";
diff --git a/src/assets/scss/variables/_colors.scss b/src/assets/scss/variables/_colors.scss
deleted file mode 100644
index b4e8dc3..0000000
--- a/src/assets/scss/variables/_colors.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-  --background-color: #ffffff;
-  --background-color-secondary: #301e4e;
-  
-  --headline: #1f1135;
-  --text-paragraph: #1f1135;
-  --sub-headline: #301e4e;
-  
-  --link-color: #ff6e6c;
-  
-  --tag-color: #301e4e;
-  
-  --button-color: #ff636c;
-}
\ No newline at end of file
diff --git a/src/assets/scss/_reset.scss b/src/assets/styles/base/_reset.scss
similarity index 100%
rename from src/assets/scss/_reset.scss
rename to src/assets/styles/base/_reset.scss
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
new file mode 100644
index 0000000..a807e53
--- /dev/null
+++ b/src/assets/styles/main.scss
@@ -0,0 +1,14 @@
+/*---------------
+Main Style Sheet
+----------------*/
+
+// Utility styles
+@import "utility/variables";
+
+// Base Styles
+@import "base/reset"; 
+
+// Component Styles
+
+
+// Tool Styles
diff --git a/src/assets/styles/styles.11ty.js b/src/assets/styles/styles.11ty.js
new file mode 100644
index 0000000..ef95065
--- /dev/null
+++ b/src/assets/styles/styles.11ty.js
@@ -0,0 +1,69 @@
+// This runs the CSS file build
+// Converts Sass and compiles all files defined in main file
+
+const MAIN_FILE_NAME = "main.scss";
+
+const path = require("path");
+const sass = require("node-sass");
+const CleanCSS = require("clean-css");
+const isProd = process.env.ELEVENTY_ENV === "production";
+
+module.exports = class {
+  async data() {
+    const entryPath = path.join(__dirname, `/${MAIN_FILE_NAME}`);
+    return {
+      permalink: "assets/styles/main.css",
+      eleventyExcludeFromCollection: true,
+      entryPath,
+    };
+  }
+
+  // Compile Sass to CSS
+  // Embed source map in dev
+  async compile(config) {
+    return new Promise((resolve, reject) => {
+      if (!isProd) {
+        config.sourceMap = true;
+        config.sourceMapEmbed = true;
+        config.outputStyle = "expanded";
+      }
+      return sass.render(config, (err, result) => {
+        if (err) {
+          return reject(err);
+        }
+        resolve(result.css.toString());
+      });
+    });
+  }
+  // Minify/Optimize with CleanCSS in Production
+  async minify(css) {
+    return new Promise((resolve, reject) => {
+      if (!isProd) {
+        resolve(css);
+      }
+      const minified = new CleanCSS().minify(css);
+      if (!minified.styles) {
+        return reject(minified.error);
+      }
+      resolve(minified.styles);
+    });
+  }
+  async render({ entryPath }) {
+    try {
+      const css = await this.compile({ file: entryPath });
+      const result = await this.minify(css);
+      return result;
+    } catch (err) {
+      // if things go wrong
+      if (isProd) {
+        // throw and abort in production
+        throw new Error(err);
+      } else {
+        // otherwise display the error overlay
+        console.error(err);
+        const msg = err.formatted || err.message;
+        return this.renderError(msg);
+      }
+    }
+  }
+};
diff --git a/src/assets/scss/variables/_spacing.scss b/src/assets/styles/utility/_variables.scss
similarity index 63%
rename from src/assets/scss/variables/_spacing.scss
rename to src/assets/styles/utility/_variables.scss
index b11f26c..c02c37c 100644
--- a/src/assets/scss/variables/_spacing.scss
+++ b/src/assets/styles/utility/_variables.scss
@@ -1,4 +1,19 @@
 :root {
+  // COLORS
+  --background-color: #ffffff;
+  --background-color-secondary: #301e4e;
+
+  --headline: #1f1135;
+  --text-paragraph: #1f1135;
+  --sub-headline: #301e4e;
+
+  --link-color: #ff6e6c;
+
+  --tag-color: #301e4e;
+
+  --button-color: #ff636c;
+
+  // SPACING
   --ratio: 1.2;
   --s-5: calc(var(--s-4) / var(--ratio));
   --s-4: calc(var(--s-3) / var(--ratio));
@@ -11,4 +26,4 @@
   --s3: calc(var(--s2) * var(--ratio));
   --s4: calc(var(--s3) * var(--ratio));
   --s5: calc(var(--s4) * var(--ratio));
-}
\ No newline at end of file
+}