generate styles scripting and test

src/assets/scss/main.scss

@@ -1,2 +0,0 @@
-@import "variables/spacing";
-@import "variables/colors";

src/assets/scss/variables/_colors.scss

@@ -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;
-}

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

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);
+      }
+    }
+  }
+};

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));