From f5bebc057e9d951565c9ec4862526931a4f3cf72 Mon Sep 17 00:00:00 2001 From: TheThomaas Date: Wed, 23 Apr 2025 21:35:43 +0200 Subject: [PATCH] Replace gulp with lightningCSS --- .eleventy.js | 39 - eleventy.config.js | 112 + gulp-tasks/sass.js | 50 - gulpfile.js | 19 - package-lock.json | 9531 ++--------------- package.json | 16 +- src/_data/site.js | 18 +- src/{scss => css}/components/_button.scss | 0 src/{scss => css}/components/_focus.scss | 0 src/{scss => css}/components/_footer.scss | 0 src/{scss => css}/components/_header.scss | 0 src/{scss => css}/components/_icons.scss | 0 src/{scss => css}/components/_reset.scss | 0 src/{scss => css}/components/_skip-link.scss | 0 .../components/_superminimal.scss | 0 src/{scss => css}/components/_tokens.scss | 71 +- src/{scss => css}/components/_utilities.scss | 0 src/{scss => css}/components/_variables.scss | 0 .../components/icons/_download.scss | 0 .../components/icons/_github.scss | 0 .../components/icons/_internet.scss | 0 src/{scss => css}/components/icons/_mail.scss | 0 src/{scss => css}/critical.scss | 0 src/css/scss.json | 3 + src/experiences/experiences.11tydata.js | 3 - src/experiences/experiences.json | 3 + src/pages/sections/sections.11tydata.js | 3 - src/pages/sections/sections.json | 3 + src/projects/projects.11tydata.js | 4 - src/projects/projects.json | 4 + src/scss/components/_colors.scss | 70 - 31 files changed, 888 insertions(+), 9061 deletions(-) delete mode 100644 .eleventy.js create mode 100644 eleventy.config.js delete mode 100644 gulp-tasks/sass.js delete mode 100644 gulpfile.js rename src/{scss => css}/components/_button.scss (100%) rename src/{scss => css}/components/_focus.scss (100%) rename src/{scss => css}/components/_footer.scss (100%) rename src/{scss => css}/components/_header.scss (100%) rename src/{scss => css}/components/_icons.scss (100%) rename src/{scss => css}/components/_reset.scss (100%) rename src/{scss => css}/components/_skip-link.scss (100%) rename src/{scss => css}/components/_superminimal.scss (100%) rename src/{scss => css}/components/_tokens.scss (52%) rename src/{scss => css}/components/_utilities.scss (100%) rename src/{scss => css}/components/_variables.scss (100%) rename src/{scss => css}/components/icons/_download.scss (100%) rename src/{scss => css}/components/icons/_github.scss (100%) rename src/{scss => css}/components/icons/_internet.scss (100%) rename src/{scss => css}/components/icons/_mail.scss (100%) rename src/{scss => css}/critical.scss (100%) create mode 100644 src/css/scss.json delete mode 100644 src/experiences/experiences.11tydata.js create mode 100644 src/experiences/experiences.json delete mode 100644 src/pages/sections/sections.11tydata.js create mode 100644 src/pages/sections/sections.json delete mode 100644 src/projects/projects.11tydata.js create mode 100644 src/projects/projects.json delete mode 100644 src/scss/components/_colors.scss diff --git a/.eleventy.js b/.eleventy.js deleted file mode 100644 index 6eee010..0000000 --- a/.eleventy.js +++ /dev/null @@ -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' - } - }; -}; \ No newline at end of file diff --git a/eleventy.config.js b/eleventy.config.js new file mode 100644 index 0000000..2c324e3 --- /dev/null +++ b/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' + } + }; +}; \ No newline at end of file diff --git a/gulp-tasks/sass.js b/gulp-tasks/sass.js deleted file mode 100644 index ca98ff2..0000000 --- a/gulp-tasks/sass.js +++ /dev/null @@ -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 - 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