Merge pull request #12 from wonderfulfrog/feat/css-reorg

Reorganize CSS structure

config/constants.js

@@ -1,7 +0,0 @@
-export const dir = {
-  assets: "assets",
-  data: "_data",
-  includes: "_includes",
-  input: "src",
-  output: "dist",
-};

config/constants/paths.js

@@ -0,0 +1 @@
+export const ASSETS_FONTS_PATH = "/assets/fonts";

config/filters/postcss/postcss.js

@@ -0,0 +1,30 @@
+/*
+ * Implementation sourced from eleventyone starter kit
+ * https://github.com/philhawksworth/eleventyone
+ * ---
+ * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
+ */
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+import postcssImportExtGlob from "postcss-import-ext-glob";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+
+import colors from "./utils/colors.js";
+import fontFamily from "./utils/font-family.js";
+import fontVariables from "./utils/font-variables.js";
+import spacing from "./utils/spacing.js";
+
+const postCss = async (rawCss) => {
+  const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
+  return await postcss([
+    postcssImportExtGlob,
+    postcssImport,
+    autoprefixer,
+    cssnano,
+  ])
+    .process(css, { from: "src/includes/css/styles.css" })
+    .then((result) => result.css);
+};
+
+export default postCss;

config/filters/postcss/utils/colors.js

@@ -1,4 +1,4 @@
-import colorSchemes from "../../config/design-tokens/colors.js";
+import colorSchemes from "../../../design-tokens/colors.js";
 import { helperClassesToCss } from "./helper-classes.js";
 
 const lightScheme = colorSchemes.light;

config/filters/postcss/utils/font-family.js

@@ -1,5 +1,9 @@
-import { getFontUrl } from "../utils/fonts.js";
-import fonts from "../../config/design-tokens/fonts.js";
+import path from "path";
+
+import { ASSETS_FONTS_PATH } from "../../../constants/paths.js";
+import fonts from "../../../design-tokens/fonts.js";
+
+const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src);
 
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [, fontProperties]) => {

config/filters/postcss/utils/font-variables.js

@@ -1,4 +1,4 @@
-import fonts from "../../config/design-tokens/fonts.js";
+import fonts from "../../../design-tokens/fonts.js";
 
 const fallbacks = [
   "-apple-system",

config/filters/postcss/utils/spacing.js

@@ -1,4 +1,4 @@
-import spacing from "../../config/design-tokens/spacing.js";
+import spacing from "../../../design-tokens/spacing.js";
 import { helperClassesToCss } from "./helper-classes.js";
 
 const spacingToCss = (variant, value) =>

config/transforms/html-config.js

@@ -8,7 +8,7 @@ export default function (eleventyConfig) {
         collapseWhitespace: true,
         decodeEntities: true,
         includeAutoGeneratedTags: false,
-        minifyCSS: true,
+        minifyCSS: false, // Disabled because of clean-css' lack of nested CSS support
         minifyJS: true,
         minifyURLs: true,
         removeComments: true,

eleventy.config.js

@@ -5,7 +5,6 @@ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
 import { collectionByTag, postsByTag } from "./config/collections/index.js";
 
-import { dir } from "./config/constants.js";
 import {
   allTagCounts,
   entries,
@@ -20,6 +19,7 @@ import {
   pluralize,
   values,
 } from "./config/filters/index.js";
+import postcss from "./config/filters/postcss/postcss.js";
 import markdown from "./config/plugins/markdown.js";
 import liteYoutube from "./config/shortcodes/youtube.js";
 
@@ -61,6 +61,8 @@ export default function (eleventyConfig) {
   eleventyConfig.addFilter("values", values);
   eleventyConfig.addFilter("pluralize", pluralize);
 
+  eleventyConfig.addFilter("postcss", postcss);
+
   // 	--------------------- Custom Transforms -----------------------
   eleventyConfig.addPlugin(htmlConfigTransform);
 
@@ -81,6 +83,12 @@ export default function (eleventyConfig) {
     },
 
     failOnError: false,
+
+    cacheOptions: {
+      directory: ".cache",
+      duration: "30d",
+      removeUrlQueryParams: false,
+    },
   });
 
   // 	--------------------- Passthrough File Copy -----------------------
@@ -107,6 +115,12 @@ export default function (eleventyConfig) {
     dataTemplateEngine: "njk",
     htmlTemplateEngine: "njk",
 
-    dir,
+    dir: {
+      assets: "assets",
+      data: "data",
+      includes: "includes",
+      input: "src",
+      output: "dist",
+    },
   };
 }

package-lock.json

@@ -28,8 +28,8 @@
         "markdown-it-image-figures": "^2.1.1",
         "markdown-it-prism": "^2.3.0",
         "pluralize": "^8.0.0",
-        "postcss": "^8.4.33",
-        "postcss-import": "^16.0.0",
+        "postcss": "^8.5.3",
+        "postcss-import": "^16.1.0",
         "postcss-import-ext-glob": "^2.1.1"
       }
     },
@@ -2207,10 +2207,11 @@
       }
     },
     "node_modules/fast-sort": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.0.tgz",
-      "integrity": "sha512-c/cMBGA5mH3OYjaXedtLIM3hQjv+KuZuiD2QEH5GofNOZeQVDIYIN7Okc2AW1KPhk44g5PTZnXp8t2lOMl8qhQ==",
-      "dev": true
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.1.tgz",
+      "integrity": "sha512-76uvGPsF6So53sZAqenP9UVT3p5l7cyTHkLWVCMinh41Y8NDrK1IYXJgaBMfc1gk7nJiSRZp676kddFG2Aa5+A==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/fastq": {
       "version": "1.17.1",
@@ -3107,9 +3108,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.10.tgz",
+      "integrity": "sha512-vSJJTG+t/dIKAUhUDw/dLdZ9s//5OxcHqLaDWWrW4Cdq7o6tdLIczUkMXt2MBNmk6sJRZBZRXVixs7URY1CmIg==",
       "dev": true,
       "funding": [
         {
@@ -3117,6 +3118,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3438,10 +3440,11 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -3483,9 +3486,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "dev": true,
       "funding": [
         {
@@ -3501,10 +3504,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -3609,10 +3613,11 @@
       }
     },
     "node_modules/postcss-import": {
-      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.0.0.tgz",
-      "integrity": "sha512-e77lhVvrD1I2y7dYmBv0k9ULTdArgEYZt97T4w6sFIU5uxIHvDFQlKgUUyY7v7Barj0Yf/zm5A4OquZN7jKm5Q==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz",
+      "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -3630,6 +3635,7 @@
       "resolved": "https://registry.npmjs.org/postcss-import-ext-glob/-/postcss-import-ext-glob-2.1.1.tgz",
       "integrity": "sha512-qd4ELOx2G0hyjgtmLnf/fSVJXXPhkcxcxhLT1y1mAnk53JYbMLoGg+AFtnJowOSvnv4CvjPAzpLpAcfWeofP5g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-glob": "^3.2.12",
         "fast-sort": "^3.2.0",
@@ -4429,10 +4435,11 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6383,9 +6390,9 @@
       }
     },
     "fast-sort": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.0.tgz",
-      "integrity": "sha512-c/cMBGA5mH3OYjaXedtLIM3hQjv+KuZuiD2QEH5GofNOZeQVDIYIN7Okc2AW1KPhk44g5PTZnXp8t2lOMl8qhQ==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.1.tgz",
+      "integrity": "sha512-76uvGPsF6So53sZAqenP9UVT3p5l7cyTHkLWVCMinh41Y8NDrK1IYXJgaBMfc1gk7nJiSRZp676kddFG2Aa5+A==",
       "dev": true
     },
     "fastq": {
@@ -7055,9 +7062,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.10.tgz",
+      "integrity": "sha512-vSJJTG+t/dIKAUhUDw/dLdZ9s//5OxcHqLaDWWrW4Cdq7o6tdLIczUkMXt2MBNmk6sJRZBZRXVixs7URY1CmIg==",
       "dev": true
     },
     "no-case": {
@@ -7293,9 +7300,9 @@
       }
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "dev": true
     },
     "picomatch": {
@@ -7326,14 +7333,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       }
     },
     "postcss-calc": {
@@ -7397,9 +7404,9 @@
       "requires": {}
     },
     "postcss-import": {
-      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.0.0.tgz",
-      "integrity": "sha512-e77lhVvrD1I2y7dYmBv0k9ULTdArgEYZt97T4w6sFIU5uxIHvDFQlKgUUyY7v7Barj0Yf/zm5A4OquZN7jKm5Q==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz",
+      "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
       "dev": true,
       "requires": {
         "postcss-value-parser": "^4.0.0",
@@ -7960,9 +7967,9 @@
       "dev": true
     },
     "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true
     },
     "source-map-support": {

package.json

@@ -31,8 +31,8 @@
     "markdown-it-image-figures": "^2.1.1",
     "markdown-it-prism": "^2.3.0",
     "pluralize": "^8.0.0",
-    "postcss": "^8.4.33",
-    "postcss-import": "^16.0.0",
+    "postcss": "^8.5.3",
+    "postcss-import": "^16.1.0",
     "postcss-import-ext-glob": "^2.1.1"
   }
 }

src/css/styles.11ty.js

@@ -1,49 +0,0 @@
-/*
- * Implementation sourced from eleventyone starter kit
- * https://github.com/philhawksworth/eleventyone
- * ---
- * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
- */
-
-import fs from "fs";
-import postcss from "postcss";
-import postcssImport from "postcss-import";
-import postcssImportExtGlob from "postcss-import-ext-glob";
-import autoprefixer from "autoprefixer";
-import cssnano from "cssnano";
-import { posix as path } from "path";
-import { fileURLToPath } from "url";
-
-import colors from "../css-utils/colors.js";
-import fontFamily from "../css-utils/font-family.js";
-import fontVariables from "../css-utils/font-variables.js";
-import spacing from "../css-utils/spacing.js";
-
-export default class {
-  async data() {
-    const dirname = path.dirname(fileURLToPath(import.meta.url));
-    const rawFilepath = path.join(dirname, "./global.css");
-    const rawCss = fs.readFileSync(rawFilepath);
-
-    const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
-
-    return {
-      permalink: `css/styles.css`,
-      excludeFromSitemap: true,
-      eleventyExcludeFromCollections: true,
-      rawFilepath,
-      rawCss: css,
-    };
-  }
-
-  async render({ rawCss, rawFilepath }) {
-    return await postcss([
-      postcssImportExtGlob,
-      postcssImport,
-      autoprefixer,
-      cssnano,
-    ])
-      .process(rawCss, { from: rawFilepath })
-      .then((result) => result.css);
-  }
-}

src/data/preloads.js

@@ -1,6 +1,10 @@
-import { getFontUrl } from "../utils/fonts.js";
+import path from "path";
+
+import { ASSETS_FONTS_PATH } from "../../config/constants/paths.js";
 import fonts from "../../config/design-tokens/fonts.js";
 
+const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src);
+
 const preloads = [
   {
     as: "font",

src/includes/layouts/base.html

@@ -8,7 +8,6 @@
             {% if title %}{{ title }} •{% endif %}
             {{ meta.siteName }}
         </title>
-        <link rel="stylesheet" href="/css/styles.css" />
         {% include "partials/meta.html" %}
         {% for preload in preloads %}
             <link rel="preload"
@@ -21,6 +20,10 @@
             <script type="module"
                     src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
         {% endif %}
+        {% set css %}
+            {% include "css/styles.css" %}
+        {% endset %}
+        <style>{{ css | postcss | safe }}</style>
     </head>
     <body class="flex-col">
         {% noRobots %}

src/utils/fonts.js

@@ -1,3 +0,0 @@
-import path from "path";
-
-export const getFontUrl = (src) => path.join("/assets/fonts", src);