From a7e1968a8c14fbe8c09b551e24d360f57ae894af Mon Sep 17 00:00:00 2001 From: Ruben Date: Mon, 2 Jun 2025 10:50:26 -0500 Subject: [PATCH] use lightningcss to minify instead --- README.md | 2 + _includes/layouts/base.njk | 2 - _includes/layouts/header.njk | 3 + _includes/layouts/sneexy/base.njk | 2 - eleventy.config.js | 12 +- package-lock.json | 260 +++++++++++++++++++++++++++--- package.json | 2 +- styles/base.css | 44 +++-- 8 files changed, 271 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index f74f10d..f199e60 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,6 @@ the main homepage that powers [synth.download](https://synth.download). generated with [eleventy](https://www.11ty.dev). +feel free to use this yourself if you'd like, but note that things are pretty messy in here. + ♡2025 All wrongs reversed. Please copy and share. diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index d303f62..a204937 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -1,13 +1,11 @@ --- title: base --- -{% set css %} {% include "base.css" %} {% endset %} {% include "layouts/header.njk" %} - diff --git a/_includes/layouts/header.njk b/_includes/layouts/header.njk index c130461..24b5b6b 100644 --- a/_includes/layouts/header.njk +++ b/_includes/layouts/header.njk @@ -1,3 +1,5 @@ +{% set css %} {% include "base.css" %} {% endset %} + {{ title or metadata.title }} • synth download! @@ -11,6 +13,7 @@ + diff --git a/_includes/layouts/sneexy/base.njk b/_includes/layouts/sneexy/base.njk index 1214822..532fafd 100644 --- a/_includes/layouts/sneexy/base.njk +++ b/_includes/layouts/sneexy/base.njk @@ -1,13 +1,11 @@ --- title: base --- -{% set css %} {% include "base.css" %} {% endset %} {% include "layouts/header.njk" %} - diff --git a/eleventy.config.js b/eleventy.config.js index 4b463ac..01919b7 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,18 +1,22 @@ import { feedPlugin } from "@11ty/eleventy-plugin-rss"; import eleventyNavigationPlugin from "@11ty/eleventy-navigation"; -import CleanCSS from "clean-css"; +import { transform } from "lightningcss"; export default function(eleventyConfig) { eleventyConfig.addPassthroughCopy("assets/"); eleventyConfig.addPassthroughCopy("styles/"); eleventyConfig.addPassthroughCopy("scripts/"); - eleventyConfig.addPlugin(eleventyNavigationPlugin); - eleventyConfig.addFilter("cssmin", function (code) { - return new CleanCSS({}).minify(code).styles; + const result = transform({ + code: Buffer.from(code, 'utf-8'), + minify: true, + }) + return result.code.toString('utf-8') }); + eleventyConfig.addPlugin(eleventyNavigationPlugin); + eleventyConfig.addPlugin(feedPlugin, { type: "atom", // or "rss", "json" outputPath: "/feed.xml", diff --git a/package-lock.json b/package-lock.json index f57ac76..bf7ad21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@11ty/eleventy": "^3.1.0", "@11ty/eleventy-navigation": "^1.0.4", "@11ty/eleventy-plugin-rss": "^2.0.4", - "clean-css": "^5.3.3" + "lightningcss": "^1.30.1" } }, "node_modules/@11ty/dependency-tree": { @@ -460,18 +460,6 @@ "fsevents": "~2.3.2" } }, - "node_modules/clean-css": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", - "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==", - "license": "MIT", - "dependencies": { - "source-map": "~0.6.0" - }, - "engines": { - "node": ">= 10.0" - } - }, "node_modules/commander": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", @@ -522,6 +510,15 @@ "node": ">=4" } }, + "node_modules/detect-libc": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz", + "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==", + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -1036,6 +1033,234 @@ "node": ">=6" } }, + "node_modules/lightningcss": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz", + "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==", + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-darwin-arm64": "1.30.1", + "lightningcss-darwin-x64": "1.30.1", + "lightningcss-freebsd-x64": "1.30.1", + "lightningcss-linux-arm-gnueabihf": "1.30.1", + "lightningcss-linux-arm64-gnu": "1.30.1", + "lightningcss-linux-arm64-musl": "1.30.1", + "lightningcss-linux-x64-gnu": "1.30.1", + "lightningcss-linux-x64-musl": "1.30.1", + "lightningcss-win32-arm64-msvc": "1.30.1", + "lightningcss-win32-x64-msvc": "1.30.1" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz", + "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz", + "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz", + "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz", + "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==", + "cpu": [ + "arm" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz", + "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz", + "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz", + "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz", + "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz", + "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz", + "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/linkify-it": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", @@ -1487,15 +1712,6 @@ "node": ">=8.0.0" } }, - "node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", diff --git a/package.json b/package.json index 1ec6e36..b47457f 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,6 @@ "@11ty/eleventy": "^3.1.0", "@11ty/eleventy-navigation": "^1.0.4", "@11ty/eleventy-plugin-rss": "^2.0.4", - "clean-css": "^5.3.3" + "lightningcss": "^1.30.1" } } diff --git a/styles/base.css b/styles/base.css index 5392426..d0f1f28 100644 --- a/styles/base.css +++ b/styles/base.css @@ -1692,8 +1692,8 @@ footer { /* different styling for elements in dark mode must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */ -@media (prefers-color-scheme: dark) { - html:not([data-theme="light"]) { +html:not([data-theme="light"]) { + @media (prefers-color-scheme: dark) { .navbar { .nav-home:hover { background-color: var(--accent); @@ -2190,39 +2190,20 @@ html[page-is="goopy"] { box-shadow: var(--accent) 0px 0px 0px .3rem; transition: .2s box-shadow; } -} -html[data-theme="light"][page-is="goopy"] { - --accent: #00d131 !important; - - .nav-baselink, .nav-accessibility { - background-color: var(--accent) !important; - color: var(--foreground) !important; - } -} - -html[data-theme="dark"][page-is="goopy"] { - --accent: #65ff88 !important; -} - -/* goop coloring for theme issues stuff */ -@media (prefers-color-scheme: light) { - html[page-is="goopy"] { + /* goop coloring for theme issues stuff */ + @media (prefers-color-scheme: light) { .nav-baselink, .nav-accessibility { background-color: var(--accent) !important; color: var(--foreground) !important; } } -} -@media (prefers-color-scheme: dark) { - html[page-is="goopy"] { + @media (prefers-color-scheme: dark) { --accent: #65ff88 !important; } -} -@media screen and (max-width: 59em) { - html[page-is="goopy"] { + @media screen and (max-width: 59em) { #sneexy > section { #logo { max-width: 100%; @@ -2259,6 +2240,19 @@ html[data-theme="dark"][page-is="goopy"] { } } +html[data-theme="light"][page-is="goopy"] { + --accent: #00d131 !important; + + .nav-baselink, .nav-accessibility { + background-color: var(--accent) !important; + color: var(--foreground) !important; + } +} + +html[data-theme="dark"][page-is="goopy"] { + --accent: #65ff88 !important; +} + /* -------------------------------------------------------------------- ======================================================================= -------------------------------------------------------------------- */