Merge branch 'main' into utopia

* main:
  yarn dedupe
  Bump the npm-minor-upgrades group with 3 updates
  Automated webmentions update
  upgrade deps
  Bump the npm-minor-upgrades group with 11 updates
  Automated webmentions update
  fix broken links
  Clean up legacy note
  upgrade dotenv
  Update Sass compiler article
  Bump the npm-minor-upgrades group with 7 updates
  Automated webmentions update
  Move updates to the start of the post
  Link to first step of logical shorthands research

Author: mirisuzanne

content/_data/webmentions.json

@@ -1,5 +1,5 @@
 {
-  "lastFetched": "2025-06-23T08:08:45.726Z",
+  "lastFetched": "2025-07-14T08:09:25.082Z",
   "children": [
     {
       "type": "entry",

content/blog/2019/smashing.md

@@ -162,7 +162,7 @@ With a quick search, I found several examples and articles:
 There's a lot of room left to explore here, so play with it, and share
 what you find!
 
-[Live Theming with CSS Variables]: https://www.jonathan-harrell.com/blog/live-theming-with-css-variables/
+[Live Theming with CSS Variables]: https://www.jonathanharrell.com/blog/live-theming-with-css-variables/
 [How to use variables in CSS]: https://www.sitepoint.com/how-to-use-variables-in-css/
 [CSS-Tricks also provides a rundown]: https://css-tricks.com/css-custom-properties-theming/
 

content/blog/2024/sass-compiler.md

@@ -3,6 +3,7 @@ title: Speeding Up Your Sass Compilation in Vite and Webpack
 sub: A quick guide to adopting the modern Sass API
 author: james
 date: 2024-08-14
+updated: 2025-06-30
 image:
   src: blog/2024/sass-compiler.jpeg
   alt: >
@@ -18,6 +19,8 @@ summary:
   but it doesn't have to be anymore.
 ---
 
+{% import 'utility.macros.njk' as utility %}
+
 Vite comes with built in support for Sass, as well as other CSS preprocessors.
 Just `npm install sass`, import a `.scss` file, and it works.
 
@@ -40,7 +43,15 @@ see the Vite team add support in version 5.4.0.
 
 ## How to enable the Sass Compiler API in Vite
 
-1. Update to Vite version 5.4.0 or above.
+{% set update = ['Update', utility.datetime(updated)] | join(' ') %}
+{% callout 'note', update %}
+
+[Vite 7.0](https://vite.dev/blog/announcing-vite7) changed the available options
+for compiling Sass, simplifying the process even more.
+
+{% endcallout %}
+
+1. Update to Vite version 5.4.0 or above, and ideally 7.0 or above.
 2. Switch from `sass` to `sass-embedded` by running `npm uninstall sass; npm
    install -D sass-embedded`.
 
@@ -52,29 +63,30 @@ and `sass-embedded` exposes the same API, but around a native Dart executable.
 In many situations, `sass-embedded` is faster.
 {% endcallout %}
 
-3. In your `vite.config.js` file, set `css.preprocessorOptions.scss.api` to `modern-compiler`.
+3. Vite 7.0 made the Sass Compiler API the default (and removed support for the
+   non-compiler API), so you don't need to opt in to the API. For Vite 5.4.0
+   through < 7.0, you will need to opt in. In your `vite.config.js` file, set
+   `css.preprocessorOptions.scss.api` to `modern-compiler`.
 
 ```js
 ...
 css: {
   preprocessorOptions: {
+    // Set `sass` if using the indented syntax
     scss: {
+      // Only needed on versions < 7.0.0
       api: 'modern-compiler',
     }
   }
 }
 ...
 ```
 
-{% callout %}
-If you're using the indented syntax, you'll need to use the `sass` key
-instead of `scss`.
-{% endcallout %}
-
-4. Adjust any options from the [`legacy`] API options to the [`modern`] API
-   options. In my case, I needed to update `pkgImporter` to `importers: [new
-   NodePackageImporter()]` and change the import of `NodePackageImporter` from
-  `sass` to `sass-embedded`.
+4. Vite 7.0 also removed support for the legacy API. If you were using the
+   legacy API, adjust any options from the [`legacy`] API options to the
+  [`modern`] API options. In my case, I needed to update `pkgImporter` to
+  `importers: [new NodePackageImporter()]` and change the import of
+  `NodePackageImporter` from `sass` to `sass-embedded`.
 
 [`legacy`]: https://sass-lang.com/documentation/js-api/interfaces/legacystringoptions/
 [`modern`]: https://sass-lang.com/documentation/js-api/interfaces/stringoptions/

content/blog/2025/logical-options.md

@@ -3,6 +3,7 @@ title: How do we move logical shorthands forward?
 sub: There are several proposals, but one major road block
 author: miriam
 date: 2025-03-27
+updated: 2025-06-27
 image:
   src: blog/2025/closed.jpg
   alt: >
@@ -32,6 +33,19 @@ summary: >
   a decade from now.
 ---
 
+{% import 'utility.macros.njk' as utility %}
+
+{% set update = ['Update', utility.datetime(updated)] | join(' ') %}
+{% callout 'note', update %}
+Thanks to your contributions,
+I've completed the first phase of this project --
+[documenting impacted properties](https://css.oddbird.net/logical/properties/).
+But there's more to do,
+and we could still
+[use your help](https://opencollective.com/oddbird-open-source/contribute/css-logical-shorthands-86141)
+moving forward.
+{% endcallout %}
+
 ## What are flow-relative 'logical' properties?
 
 The specification for

content/blog/2025/logical-shorthand.md

@@ -2,6 +2,7 @@
 title: Support Logical Shorthands in CSS
 sub:  Can we get this process unstuck?
 date: 2025-03-20
+updated: 2025-06-27
 author: miriam
 image:
   src: blog/2025/logical.jpg
@@ -27,6 +28,19 @@ summary: >
   _Can we get them unstuck?_
 ---
 
+{% import 'utility.macros.njk' as utility %}
+
+{% set update = ['Update', utility.datetime(updated)] | join(' ') %}
+{% callout 'note', update %}
+Thanks to your contributions,
+I've completed the first phase of this project --
+[documenting impacted properties](https://css.oddbird.net/logical/properties/).
+But there's more to do,
+and we could still
+[use your help](https://opencollective.com/oddbird-open-source/contribute/css-logical-shorthands-86141)
+moving forward.
+{% endcallout %}
+
 CSS began to add
 [logical properties and values](https://www.w3.org/TR/css-logical-1/)
 in 2017,

content/blog/elsewhere/interview/podcast/podrocket/web-design.md

@@ -17,6 +17,5 @@ audio: https://chrt.fm/track/7F1212/aphid.fireside.fm/d/1437767933/3911462c-bca2
 {{ embed.audio(audio) }}
 
 Or listen on…
-- [YouTube](https://buff.ly/unnKZIs)
 - [Apple](https://buff.ly/ZFB9NRi)
 - [Spotify](https://buff.ly/unnKZIs)

package.json

@@ -43,7 +43,7 @@
     "webmentions": "node scripts/fetch-webmentions.js",
     "prod": "yarn build",
     "checklinks:internal": "npx --yes --package=hyperlink --package=tap-spot -- 'hyperlink --canonicalroot https://www.oddbird.net/ --root _site/ -r -p -i --skip \".css.map\" --skip \".js.map\" --skip \"feed.atom\" --skip \"/docs/\" _site/index.html | tap-spot'",
-    "checklinks:external": "npx --yes --package=broken-link-checker -- 'blc -ro --exclude=localhost --exclude=oddsite.local --exclude=stackoverflow.com --exclude=codepen.io --exclude=linkedin.com --exclude=projects.invisionapp.com --exclude=docs.github.com --exclude=www.sass.hk --exclude=www.drupal.org --exclude=www.canva.com --exclude=www.fastcompany.com --exclude=duabuset-tandem.com --exclude=puta-elementa.com --exclude=campaignzero.org --exclude=twitter.com --exclude=vimeo.com --exclude=slideshare.net --exclude=coachhub.resilienceboost.com --exclude=bsky.app --exclude=nativesintech.org --exclude=gsap.com --exclude=cps.edu --exclude=siegemedia.com --exclude=patreon.com --exclude=blog.natbat.net --exclude=figma.com --exclude=theworkitem.com --exclude=substack.com --exclude=info.cern.ch --exclude=apps.microsoft.com --exclude=jonathanharrell.com --exclude=breakpoint-sass.com https://www.oddbird.net'",
+    "checklinks:external": "npx --yes --package=broken-link-checker -- 'blc -ro --exclude=localhost --exclude=oddsite.local --exclude=stackoverflow.com --exclude=codepen.io --exclude=linkedin.com --exclude=projects.invisionapp.com --exclude=docs.github.com --exclude=www.sass.hk --exclude=www.drupal.org --exclude=www.canva.com --exclude=www.fastcompany.com --exclude=duabuset-tandem.com --exclude=puta-elementa.com --exclude=campaignzero.org --exclude=twitter.com --exclude=vimeo.com --exclude=slideshare.net --exclude=coachhub.resilienceboost.com --exclude=bsky.app --exclude=nativesintech.org --exclude=gsap.com --exclude=cps.edu --exclude=siegemedia.com --exclude=patreon.com --exclude=blog.natbat.net --exclude=figma.com --exclude=theworkitem.com --exclude=substack.com --exclude=info.cern.ch --exclude=apps.microsoft.com --exclude=jonathanharrell.com --exclude=breakpoint-sass.com --exclude=fontspring.com --exclude=thebuild.com --exclude=buff.ly --exclude=askubuntu.com https://www.oddbird.net'",
     "checklinks": "run-s checklinks:internal checklinks:external"
   },
   "imports": {
@@ -57,16 +57,16 @@
     "cssremedy": "^0.1.0-beta.2"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^3.1.1",
+    "@11ty/eleventy": "^3.1.2",
     "@11ty/eleventy-fetch": "^5.1.0",
     "@11ty/eleventy-img": "^6.0.4",
     "@11ty/eleventy-plugin-rss": "^2.0.4",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.1",
     "@11ty/is-land": "^4.0.1",
-    "@babel/core": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
     "@date-fns/utc": "^2.1.0",
-    "@eslint/js": "^9.29.0",
+    "@eslint/js": "^9.31.0",
     "@netlify/plugin-a11y": "^1.0.0-beta.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
@@ -76,18 +76,18 @@
     "autoprefixer": "^10.4.21",
     "chalk": "^5.4.1",
     "chokidar-cli": "^3.0.0",
-    "core-js": "^3.43.0",
+    "core-js": "^3.44.0",
     "date-fns": "^4.1.0",
-    "dotenv": "^16.5.0",
+    "dotenv": "^17.2.0",
     "doxray": "^0.10.1",
-    "eslint": "^9.29.0",
+    "eslint": "^9.31.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "fs-extra": "^11.3.0",
-    "globals": "^16.2.0",
-    "jest": "^30.0.2",
-    "jest-environment-jsdom": "^30.0.2",
+    "globals": "^16.3.0",
+    "jest": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4",
     "js-yaml": "^4.1.0",
     "lite-youtube-embed": "^0.3.3",
     "lodash-es": "^4.17.21",
@@ -96,21 +96,21 @@
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
     "mockdate": "^3.0.5",
-    "netlify-plugin-11ty": "^1.4.0",
+    "netlify-plugin-11ty": "^1.5.0",
     "node-fetch": "^3.3.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.6",
     "posthtml": "^0.16.6",
-    "prettier": "^3.6.0",
+    "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
-    "rollup": "^4.44.0",
+    "rollup": "^4.45.0",
     "sanitize-html": "^2.17.0",
     "sass-embedded": "^1.89.2",
     "sassdoc": "^2.7.4",
     "sassdoc-theme-herman": "^6.0.2",
     "slugify": "^1.6.6",
     "striptags": "^3.2.0",
-    "stylelint": "^16.21.0",
+    "stylelint": "^16.21.1",
     "stylelint-config-standard-scss": "^15.0.1",
     "truncate-html": "^1.2.2",
     "typescript": "^5.8.3",