Replace gulp with lightningCSS

.eleventy.js

@@ -1,39 +0,0 @@
-const inspect = require("util").inspect;
-
-module.exports = config => {
-  config.setUseGitIgnore(false);
-
-  config.addPassthroughCopy({"./src/_includes/js/" : "/js"});
-
-  config.addLayoutAlias('base', 'layouts/base.html');
-
-  config.addCollection("sections", (collectionApi) => {
-    const sections = collectionApi.getFilteredByGlob("./src/pages/sections/**")
-      .sort((a, b) => a.data.order - b.data.order);
-    process.env.DEBUG && console.log(inspect(sections));
-    return sections;
-  });
-  config.addCollection("projects", (collectionApi) => {
-    const projects = collectionApi.getFilteredByGlob("./src/projects/**")
-      .sort((a, b) => a.data.order - b.data.order);
-    process.env.DEBUG && console.log(inspect(projects));
-    return projects;
-  });
-
-  config.addCollection('experiences', collection => {
-    return [...collection.getFilteredByGlob('./src/experiences/*.md')]
-      .sort((a, b) => a.data.startDate - b.data.startDate).reverse();
-  });
-
-  config.addPassthroughCopy('src/favicon.ico')
-
-  return {
-    markdownTemplateEngine: 'liquid',
-    dataTemplateEngine: 'liquid',
-    htmlTemplateEngine: 'liquid',
-    dir: {
-      input: 'src',
-      output: 'dist'
-    }
-  };
-};

eleventy.config.js

@@ -0,0 +1,112 @@
+import { inspect } from "util";
+import browserslist from "browserslist";
+import * as sass from "sass";
+import path from "node:path";
+import { bundle, browserslistToTargets, composeVisitors, transform } from "lightningcss" ;
+
+export default async function (eleventyConfig) {
+  eleventyConfig.setUseGitIgnore(false);
+
+  eleventyConfig.addPassthroughCopy({"./src/_includes/js/" : "/js"});
+
+  eleventyConfig.addLayoutAlias('base', 'layouts/base.html');
+
+  eleventyConfig.addCollection("sections", (collectionApi) => {
+    const sections = collectionApi.getFilteredByGlob("./src/pages/sections/**")
+      .sort((a, b) => a.data.order - b.data.order);
+    process.env.DEBUG && console.log(inspect(sections));
+    return sections;
+  });
+  eleventyConfig.addCollection("projects", (collectionApi) => {
+    const projects = collectionApi.getFilteredByGlob("./src/projects/**")
+      .sort((a, b) => a.data.order - b.data.order);
+    process.env.DEBUG && console.log(inspect(projects));
+    return projects;
+  });
+
+  eleventyConfig.addCollection('experiences', collection => {
+    return [...collection.getFilteredByGlob('./src/experiences/*.md')]
+      .sort((a, b) => a.data.startDate - b.data.startDate).reverse();
+  });
+
+  eleventyConfig.addPassthroughCopy('src/favicon.ico')
+
+  // Recognize CSS as a "template language"
+  eleventyConfig.addTemplateFormats("css");
+
+  // Process CSS with LightningCSS
+  eleventyConfig.addExtension("css", {
+    outputFileExtension: "css",
+    compile: async function (_inputContent, inputPath) {
+      let parsed = path.parse(inputPath);
+      if (parsed.name.startsWith("_")) {
+        return;
+      }
+
+      let targets = browserslistToTargets(browserslist("> 0.2% and not dead"));
+
+      return async () => {
+        // Switch to the `transform` function if you don't
+        // plan to use `@import` to merge files
+        let { code } = await bundle({
+          filename: inputPath,
+          minify: true,
+          sourceMap: false,
+          targets,
+          // Supports CSS nesting
+          drafts: {
+            nesting,
+          },
+        });
+        return code;
+      };
+    },
+  });
+
+  // Recognize Sass as a "template languages"
+  eleventyConfig.addTemplateFormats("scss");
+
+  // Compile Sass
+  eleventyConfig.addExtension("scss", {
+    outputFileExtension: "css",
+    compile: async function (inputContent, inputPath) {
+      // Skip files like _fileName.scss
+      let parsed = path.parse(inputPath);
+      if (parsed.name.startsWith("_")) {
+        return;
+      }
+
+      // Run file content through Sass
+      let result = sass.compileString(inputContent, {
+        loadPaths: [parsed.dir || "."],
+        sourceMap: false, // or true, your choice!
+      });
+
+      // Allow included files from @use or @import to
+      // trigger rebuilds when using --incremental
+      this.addDependencies(inputPath, result.loadedUrls);
+
+      let targets = browserslistToTargets(browserslist("> 0.2% and not dead"));
+
+      return async () => {
+        let { code } = await transform({
+          code: Buffer.from(result.css),
+          minify: true,
+          sourceMap: false,
+          targets,
+        });
+        return code;
+      };
+    },
+  });
+
+  return {
+    markdownTemplateEngine: 'liquid',
+    dataTemplateEngine: 'liquid',
+    htmlTemplateEngine: 'liquid',
+    dir: {
+      input: 'src',
+      output: 'dist'
+    }
+  };
+};

gulp-tasks/sass.js

@@ -1,50 +0,0 @@
-const {dest, src} = require('gulp');
-const cleanCSS = require('gulp-clean-css');
-const sassProcessor = require('gulp-sass')(require('sass'));
-
-// We want to be using canonical Sass, rather than node-sass
-sassProcessor.compiler = require('sass');
-
-// Flags whether we compress the output etc
-const isProduction = process.env.NODE_ENV === 'production';
-
-// An array of outputs that should be sent over to includes
-const criticalStyles = ['critical.scss', 'home.scss', 'page.scss', 'work-item.scss'];
-
-// Takes the arguments passed by `dest` and determines where the output file goes
-const calculateOutput = ({history}) => {
-  // By default, we want a CSS file in our dist directory, so the
-  // HTML can grab it with a <link />
-  let response = './dist/css';
-
-  // Get everything after the last slash
-  const sourceFileName = /[^(/|\\)]*$/.exec(history[0])[0];
-
-  // If this is critical CSS though, we want it to go
-  // to the _includes directory, so nunjucks can include it
-  // directly in a <style>
-  if (criticalStyles.includes(sourceFileName)) {
-    response = './src/_includes/css';
-  }
-
-  return response;
-};
-
-// The main Sass method grabs all root Sass files,
-// processes them, then sends them to the output calculator
-const sass = () => {
-  return src('./src/scss/*.scss')
-    .pipe(sassProcessor().on('error', sassProcessor.logError))
-    .pipe(
-      cleanCSS(
-        isProduction
-          ? {
-              level: 2
-            }
-          : {}
-      )
-    )
-    .pipe(dest(calculateOutput, {sourceMaps: !isProduction}));
-};
-
-module.exports = sass;

gulpfile.js

@@ -1,19 +0,0 @@
-const {parallel, watch} = require('gulp');
-
-// Pull in each task
-const sass = require('./gulp-tasks/sass.js');
-
-// Set each directory and contents that we want to watch and
-// assign the relevant task. `ignoreInitial` set to true will
-// prevent the task being run when we run `gulp watch`, but it
-// will run when a file changes.
-const watcher = () => {
-  watch('./src/scss/**/*.scss', {ignoreInitial: true}, sass);
-};
-
-// The default (if someone just runs `gulp`) is to run each task in parrallel
-exports.default = parallel(sass);
-
-// This is our watcher task that instructs gulp to watch directories and
-// act accordingly
-exports.watch = watcher;

package.json

@@ -2,21 +2,19 @@
   "name": "11ty-resume",
   "version": "1.0.0",
   "description": "",
-  "main": ".eleventy.js",
+  "main": "index.js",
+  "type": "module",
   "scripts": {
-    "start": "npx gulp && concurrently \"npx gulp watch\" \"npx eleventy --serve\"",
+    "start": "npx eleventy --serve",
-    "production": "NODE_ENV=production npx gulp && NODE_ENV=production npx @11ty/eleventy"
+    "production": "NODE_ENV=production npx @11ty/eleventy"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
-    "concurrently": "^7.6.0",
+    "browserslist": "^4.24.4",
-    "gulp": "^4.0.2",
+    "lightningcss": "^1.29.3",
-    "gulp-clean-css": "^4.3.0",
+    "sass": "^1.87.0"
-    "gulp-imagemin": "7.1.0",
-    "gulp-sass": "^5.1.0",
-    "sass": "^1.57.1"
   }
 }

src/_data/site.js

@@ -1,9 +1,9 @@
-module.exports = {
+export default {
-    buildTime: new Date(),
+  buildTime: new Date(),
-    isProduction: process.env.NODE_ENV === 'production',
+  isProduction: process.env.NODE_ENV === 'production',
-    url: "http://localhost:8080",
+  url: "http://localhost:8080",
-    description: "A blog built with Eleventy",
+  description: "A blog built with Eleventy",
-    lang: "fr",
+  lang: "fr",
-    repository: "https://github.com/TheThomaas",
+  repository: "https://github.com/TheThomaas",
-    repoSrc: "Github"
+  repoSrc: "Github"
-  }
+}

src/css/components/_tokens.scss

@@ -1,4 +1,73 @@
-@import './components/colors';
+/* BRAND */
+$sand-50: 249 248 243;
+$sand-100: 242 239 226;
+$sand-200: 227 221 197;
+$sand-300: 210 199 159;
+$sand-400: 194 176 128; // Main
+$sand-500: 177 151 94;
+$sand-600: 164 133 82;
+$sand-700: 136 107 70;
+$sand-800: 111 88 61;
+$sand-900: 90 72 52;
+$sand-950: 48 37 26;
+
+$forest-50: 244 247 238;
+$forest-100: 231 238 217;
+$forest-200: 208 223 183;
+$forest-300: 187 208 154; // Main
+$forest-400: 149 180 103;
+$forest-500: 119 152 74;
+$forest-600: 93 120 56;
+$forest-700: 72 93 46;
+$forest-800: 59 75 41;
+$forest-900: 52 65 38;
+$forest-950: 26 34 17;
+/* BRAND */
+/* NEUTRAL */
+$light-0: 255, 255, 255, 0;
+$light-2: 255, 255, 255, 0.02;
+$light-4: 255, 255, 255, 0.04;
+$light-6: 255, 255, 255, 0.06;
+$light-8: 255, 255, 255, 0.08;
+$light-10: 255, 255, 255, 0.1;
+$light-20: 255, 255, 255, 0.2;
+$light-30: 255, 255, 255, 0.3;
+$light-40: 255, 255, 255, 0.4;
+$light-50: 255, 255, 255, 0.5;
+$light-60: 255, 255, 255, 0.6;
+$light-70: 255, 255, 255, 0.7;
+$light-80: 255, 255, 255, 0.8;
+$light-90: 255, 255, 255, 0.9;
+$light-100: 255, 255, 255;
+
+$dark-0: 9, 9, 11, 0;
+$dark-2: 9, 9, 11, 0.02;
+$dark-4: 9, 9, 11, 0.04;
+$dark-6: 9, 9, 11, 0.06;
+$dark-8: 9, 9, 11, 0.08;
+$dark-10: 9, 9, 11, 0.1;
+$dark-20: 9, 9, 11, 0.2;
+$dark-30: 9, 9, 11, 0.3;
+$dark-40: 9, 9, 11, 0.4;
+$dark-50: 9, 9, 11, 0.5;
+$dark-60: 9, 9, 11, 0.6;
+$dark-70: 9, 9, 11, 0.7;
+$dark-80: 9, 9, 11, 0.8;
+$dark-90: 9, 9, 11, 0.9;
+$dark-100: 9, 9, 11;
+
+$shark-50: 246 246 246;
+$shark-100: 231 231 231;
+$shark-200: 209 209 209;
+$shark-300: 176 176 176;
+$shark-400: 136 136 136;
+$shark-500: 109 109 109;
+$shark-600: 93 93 93;
+$shark-700: 79 79 79;
+$shark-800: 69 69 69;
+$shark-900: 61 61 61;
+$shark-950: 30 30 30; // Main
+/* NEUTRAL */
 
 :root {
   --neutral-lowest: #{$light-50};

src/css/scss.json

@@ -0,0 +1,3 @@
+{
+    "eleventyExcludeFromCollections": true
+}

src/experiences/experiences.11tydata.js

@@ -1,3 +0,0 @@
-module.exports = {
-    permalink: false
-};

src/experiences/experiences.json

@@ -0,0 +1,3 @@
+{
+    "permalink": false
+}

src/pages/sections/sections.11tydata.js

@@ -1,3 +0,0 @@
-module.exports = {
-    permalink: false
-};

src/pages/sections/sections.json

@@ -0,0 +1,3 @@
+{
+    "permalink": false
+}

src/projects/projects.11tydata.js

@@ -1,4 +0,0 @@
-module.exports = {
-    permalink: false,
-    order: 1
-};

src/projects/projects.json

@@ -0,0 +1,4 @@
+{
+    "permalink": false,
+    "order": 1
+}

src/scss/components/_colors.scss

@@ -1,70 +0,0 @@
-/* BRAND */
-$sand-50: 249 248 243;
-$sand-100: 242 239 226;
-$sand-200: 227 221 197;
-$sand-300: 210 199 159;
-$sand-400: 194 176 128; // Main
-$sand-500: 177 151 94;
-$sand-600: 164 133 82;
-$sand-700: 136 107 70;
-$sand-800: 111 88 61;
-$sand-900: 90 72 52;
-$sand-950: 48 37 26;
-
-$forest-50: 244 247 238;
-$forest-100: 231 238 217;
-$forest-200: 208 223 183;
-$forest-300: 187 208 154; // Main
-$forest-400: 149 180 103;
-$forest-500: 119 152 74;
-$forest-600: 93 120 56;
-$forest-700: 72 93 46;
-$forest-800: 59 75 41;
-$forest-900: 52 65 38;
-$forest-950: 26 34 17;
-/* BRAND */
-/* NEUTRAL */
-$light-0: 255, 255, 255, 0;
-$light-2: 255, 255, 255, 0.02;
-$light-4: 255, 255, 255, 0.04;
-$light-6: 255, 255, 255, 0.06;
-$light-8: 255, 255, 255, 0.08;
-$light-10: 255, 255, 255, 0.1;
-$light-20: 255, 255, 255, 0.2;
-$light-30: 255, 255, 255, 0.3;
-$light-40: 255, 255, 255, 0.4;
-$light-50: 255, 255, 255, 0.5;
-$light-60: 255, 255, 255, 0.6;
-$light-70: 255, 255, 255, 0.7;
-$light-80: 255, 255, 255, 0.8;
-$light-90: 255, 255, 255, 0.9;
-$light-100: 255, 255, 255;
-
-$dark-0: 9, 9, 11, 0;
-$dark-2: 9, 9, 11, 0.02;
-$dark-4: 9, 9, 11, 0.04;
-$dark-6: 9, 9, 11, 0.06;
-$dark-8: 9, 9, 11, 0.08;
-$dark-10: 9, 9, 11, 0.1;
-$dark-20: 9, 9, 11, 0.2;
-$dark-30: 9, 9, 11, 0.3;
-$dark-40: 9, 9, 11, 0.4;
-$dark-50: 9, 9, 11, 0.5;
-$dark-60: 9, 9, 11, 0.6;
-$dark-70: 9, 9, 11, 0.7;
-$dark-80: 9, 9, 11, 0.8;
-$dark-90: 9, 9, 11, 0.9;
-$dark-100: 9, 9, 11;
-
-$shark-50: 246 246 246;
-$shark-100: 231 231 231;
-$shark-200: 209 209 209;
-$shark-300: 176 176 176;
-$shark-400: 136 136 136;
-$shark-500: 109 109 109;
-$shark-600: 93 93 93;
-$shark-700: 79 79 79;
-$shark-800: 69 69 69;
-$shark-900: 61 61 61;
-$shark-950: 30 30 30; // Main
-/* NEUTRAL */