Update sass

eleventy.config.js

@@ -1,24 +1,31 @@
-const Image = require('@11ty/eleventy-img');
-const util = require('util');
+/**
+ * Hint VS Code for eleventyConfig autocompletion.
+ * © Henry Desroches - https://gist.github.com/xdesro/69583b25d281d055cd12b144381123bf
+ * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig -
+ * @returns {Object} -
+ */
+
+import Image from '@11ty/eleventy-img';
+import util from 'util';
 
 const emojiRegex = /[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]/ug
 
-module.exports = config => {
-    config.setUseGitIgnore(false);
-    config.addWatchTarget("./src/_includes/css/main.css");
+export default async function (eleventyConfig) {
+    eleventyConfig.setUseGitIgnore(false);
+    eleventyConfig.addWatchTarget("./src/_includes/css/main.css");
     
-    config.addPassthroughCopy({ public: './' });
-    config.addPassthroughCopy('src/img');
-    config.addPassthroughCopy('src/fonts');
-    config.addPassthroughCopy('src/admin');
+    eleventyConfig.addPassthroughCopy({ public: './' });
+    eleventyConfig.addPassthroughCopy('src/img');
+    eleventyConfig.addPassthroughCopy('src/fonts');
+    eleventyConfig.addPassthroughCopy('src/admin');
 
 
     /* Collections */
-    config.addCollection('recipes', collection => {
+    eleventyConfig.addCollection('recipes', collection => {
         return [...collection.getFilteredByGlob('./src/recipes/*.md')];
     });
 
-    config.addCollection('tagList', collection => {
+    eleventyConfig.addCollection('tagList', collection => {
         const tagsSet = new Set();
         collection.getAll().forEach(item => {
           if (!item.data.tags) return;
@@ -38,15 +45,15 @@ module.exports = config => {
 
 
     /* Filters */
-    config.addFilter('console', function(value) {
+    eleventyConfig.addFilter('console', function(value) {
         return util.inspect(value);
     });
 
-    config.addFilter('noEmoji', function(value) {
+    eleventyConfig.addFilter('noEmoji', function(value) {
         return value.replace(emojiRegex, '').trim();
     });
 
-    config.addFilter('onlyEmoji', function(value) {
+    eleventyConfig.addFilter('onlyEmoji', function(value) {
         let match = value.match(emojiRegex);
         // If the string doesn't contain any emoji, instead we output the first letter wrapped in some custom styles
         if (!match) {
@@ -55,14 +62,14 @@ module.exports = config => {
         return Array.isArray(match) ? match.join('') : match;
     });
 
-    config.addFilter('limit', (arr, limit) => arr.slice(0, limit));
+    eleventyConfig.addFilter('limit', (arr, limit) => arr.slice(0, limit));
 
-    config.addFilter('lowercase', function(value) {
+    eleventyConfig.addFilter('lowercase', function(value) {
         return value.toLowerCase();
     });
 
     // This workaround is needed so we can transform it back into an array with Alpine (we can't split on "," as it can be included within the items)
-    config.addFilter('arrayToString', function(value) {
+    eleventyConfig.addFilter('arrayToString', function(value) {
         return encodeURI(value.join('£'));
     });
 
@@ -86,8 +93,8 @@ module.exports = config => {
         return Image.generateHTML(metadata, imageAttributes);
     }
 
-    config.addNunjucksAsyncShortcode('recipeimage', imageShortcode);
-    config.addShortcode('year', () => `${new Date().getFullYear()}`);
+    eleventyConfig.addNunjucksAsyncShortcode('recipeimage', imageShortcode);
+    eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
 
     return {
         dir: {

package.json

@@ -3,21 +3,22 @@
   "version": "0.1.0",
   "description": "A starter kit to make your own online recipe cookbook",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "dev:css": "sass src/scss/main.scss:src/_includes/css/main.css --watch --style=compressed",
     "dev:11ty": "eleventy --serve",
-    "dev": "npm-run-all --parallel dev:css dev:11ty",
+    "dev": "npm-run-all --parallel dev:*",
     "prod:css": "sass src/scss/main.scss:src/_includes/css/main.css --style=compressed",
     "prod:11ty": "eleventy",
-    "build": "npm-run-all prod:css prod:11ty"
+    "build": "npm-run-all prod:*"
   },
   "author": "Maël Brunet",
   "license": "MIT",
   "devDependencies": {
-    "@11ty/eleventy": "^0.12.1",
-    "@11ty/eleventy-img": "^0.8.3",
+    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-img": "^6.0.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.32.12"
+    "sass": "^1.86.3"
   },
   "dependencies": {
     "alpinejs": "^2.8.2"

src/scss/_global.scss

@@ -1,3 +1,5 @@
+@use "mixins";
+
 :root {
     --color-grey-100: #F9FAFB;
     --color-grey-200: #F3F4F6;
@@ -32,7 +34,7 @@ main {
 section {
     padding: 30px 0;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         padding: 60px 0;
     }
 }

src/scss/_mixins.scss

@@ -1,3 +1,6 @@
+@use "sass:string";
+@use "sass:map";
+
 $breakpoints-map: (
   small: "all and (min-width: 576px)",
   medium: "all and (min-width: 768px)",
@@ -9,11 +12,11 @@ $breakpoints-map: (
 // -------------------------------------
 @mixin mq($breakpoint-name) {
   // sanitize variable
-  $breakpoint-name: unquote($breakpoint-name);
+  $breakpoint-name: string.unquote($breakpoint-name);
 
   // check if passed name is in $breakpoints-map
-  @if map-has-key($breakpoints-map, $breakpoint-name) {
-    $breakpoint-query: map-get($breakpoints-map, $breakpoint-name);
+  @if map.has-key($breakpoints-map, $breakpoint-name) {
+    $breakpoint-query: map.get($breakpoints-map, $breakpoint-name);
 
     // write media query
     @media #{$breakpoint-query} {

src/scss/components/_recipe.scss

@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .c-recipe__header-image {
     width: 100%;
     object-fit: cover;
@@ -36,7 +38,7 @@
     flex-direction: column;
     gap: 30px;
     
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         display: grid;
         grid-template-columns: 400px 1fr;
         grid-template-rows: min-content 1fr;
@@ -52,7 +54,7 @@
     flex-wrap: wrap;
     gap: 12px;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: tags;
         margin-bottom: 0;
     }
@@ -60,7 +62,7 @@
 
 
 .c-recipe__ingredients-wrapper {
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: ingredients;
     }
 }
@@ -83,7 +85,7 @@
 }
 
 .c-recipe__instructions-wrapper {
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: instructions;
     }
 }

src/scss/components/_search.scss

@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .c-search__search-toggle {
     margin-left: 20px;
     padding: 10px;
@@ -31,7 +33,7 @@
     box-shadow: var(--shadow-xl);
     font-size: 1rem;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         max-width: 500px;
     }
 }

src/scss/main.scss

@@ -1,15 +1,15 @@
-@import "reset.scss";
-@import "mixins.scss";
-@import "utility.scss";
-@import "global.scss";
+@use "reset";
+@use "mixins";
+@use "utility";
+@use "global";
 
-@import "typography.scss";
-@import "layout.scss";
+@use "typography";
+@use "layout";
 
-@import "components/about.scss";
-@import "components/card.scss";
-@import "components/home.scss";
-@import "components/nav.scss";
-@import "components/recipe.scss";
-@import "components/recipe-tags.scss";
-@import "components/search.scss";
+@use "components/about";
+@use "components/card";
+@use "components/home";
+@use "components/nav";
+@use "components/recipe";
+@use "components/recipe-tags";
+@use "components/search";