css and js as first-class citizens in Eleventy

.eleventy.js

@@ -99,7 +99,12 @@ module.exports = eleventyConfig => {
     'src/assets/images/favicon/*': '/'
   });
 
-  // 	--------------------- Config -----------------------
+  // 	--------------------- Custom Template Languages ---------------------
+
+  eleventyConfig.addPlugin(require('./config/template-languages/css-config.js'));
+  eleventyConfig.addPlugin(require('./config/template-languages/js-config.js'));
+
+  // 	--------------------- general config -----------------------
 
   return {
     dir: {

config/template-languages/css-config.js

@@ -0,0 +1,35 @@
+// CSS and JavaScript as first-class citizens in Eleventy: https://pepelsbey.dev/articles/eleventy-css-js/
+
+const postcss = require('postcss');
+const postcssImport = require('postcss-import');
+const postcssImportExtGlob = require('postcss-import-ext-glob');
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
+module.exports = eleventyConfig => {
+  eleventyConfig.addTemplateFormats('css');
+
+  eleventyConfig.addExtension('css', {
+    outputFileExtension: 'css',
+    compile: async (content, path) => {
+      if (path !== './src/assets/css/global.css') {
+        return;
+      }
+
+      return async () => {
+        let output = await postcss([
+          postcssImportExtGlob,
+          postcssImport,
+          tailwindcss,
+          autoprefixer,
+          cssnano
+        ]).process(content, {
+          from: path
+        });
+
+        return output.css;
+      };
+    }
+  });
+};

config/template-languages/js-config.js

@@ -0,0 +1,28 @@
+// CSS and JavaScript as first-class citizens in Eleventy: https://pepelsbey.dev/articles/eleventy-css-js/
+
+const esbuild = require('esbuild');
+
+module.exports = eleventyConfig => {
+  eleventyConfig.addTemplateFormats('js');
+
+  eleventyConfig.addExtension('js', {
+    outputFileExtension: 'js',
+    compile: async (content, path) => {
+      if (path !== './src/assets/scripts/app.js') {
+        return;
+      }
+
+      return async () => {
+        let output = await esbuild.build({
+          target: 'es2020',
+          entryPoints: [path],
+          minify: true,
+          bundle: true,
+          write: false
+        });
+
+        return output.outputFiles[0].text;
+      };
+    }
+  });
+};

package-lock.json

@@ -20,6 +20,7 @@
         "@11ty/eleventy-plugin-rss": "^1.2.0",
         "@netlify/plugin-a11y": "^1.0.0-beta.1",
         "@toycode/markdown-it-class": "^1.2.4",
+        "autoprefixer": "^10.4.13",
         "clean-css": "^5.3.1",
         "concurrently": "^7.4.0",
         "cross-env": "^7.0.3",
@@ -1018,6 +1019,39 @@
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.13",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
+      "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-lite": "^1.0.30001426",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/axe-core": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.4.tgz",
@@ -2558,6 +2592,19 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "node_modules/fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -4135,6 +4182,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-url": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -7879,6 +7935,20 @@
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
     },
+    "autoprefixer": {
+      "version": "10.4.13",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
+      "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-lite": "^1.0.30001426",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
     "axe-core": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.4.tgz",
@@ -8989,6 +9059,12 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true
+    },
     "fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -10139,6 +10215,12 @@
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true
+    },
     "normalize-url": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",

package.json

@@ -8,12 +8,8 @@
   "main": ".eleventy.js",
   "scripts": {
     "clean": "rimraf dist",
-    "dev:postcss": "postcss src/assets/css/global.css --o dist/assets/css/global.css --watch --verbose",
-    "dev:scripts": "esbuild src/assets/scripts/app.js --bundle --watch --outdir=dist/assets",
     "dev:11ty": "eleventy --serve --watch",
-    "build:postcss": "NODE_ENV=production postcss src/assets/css/global.css -o dist/assets/css/global.css",
     "build:11ty": "cross-env ELEVENTY_ENV=production eleventy",
-    "build:scripts": "esbuild src/assets/scripts/app.js --bundle --minify --outdir=dist/assets --platform=node --tree-shaking=true",
     "start": "run-p dev:*",
     "build": "run-s clean build:*"
   },
@@ -36,6 +32,7 @@
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@netlify/plugin-a11y": "^1.0.0-beta.1",
     "@toycode/markdown-it-class": "^1.2.4",
+    "autoprefixer": "^10.4.13",
     "clean-css": "^5.3.1",
     "concurrently": "^7.4.0",
     "cross-env": "^7.0.3",

src/_layouts/base.njk

@@ -51,7 +51,7 @@
     {% endif %}
 
     <!-- defered js  -->
-    <script type="module" src="/assets/app.js" defer></script>
+    <script type="module" src="/assets/scripts/app.js" defer></script>
 
     <!-- everything else: meta tags, icons, open graph etc.  -->
     {% include "partials/meta-info.njk" %}