Update some of the packages

einomi · einomi · commit 000ab851b3ba · 2025-07-16T21:19:26.000+02:00
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,2 @@
+src/sass/grid/
+src/sass/lib/
diff --git a/README.md b/README.md
@@ -115,8 +115,6 @@ This starter uses `@11ty/eleventy-img` to generate modern image formats (AVIF, W
 
 You can change image compression settings for avif, webp, jpeg files in `.eleventy.js` config.
 
-Png are compressed with [pngquant](https://pngquant.org/) as it provides the best compression. You can change png compression settings in `optimize-png.js` config.
-
 ## TypeScript (optional)
 
 This boilerplate has built-in support for TypeScript, but it is completely optional to use it during development. We have chosen to use JSDoc notation ([which is officially supported by TypeScript team](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html)) to provide TypeScript support. This means that you don't have to write your code using TypeScript syntax, and can instead continue to write your code using JavaScript syntax with JSDoc notation for TypeScript support. This approach also allows you to easily disable TypeScript if you do not need it at some point during your development process, for example, to speed up development or if you have new developers working on the project who are not familiar with TypeScript.
diff --git a/package.json b/package.json
@@ -20,7 +20,6 @@
     "lint:js": "eslint --max-warnings 0 \"src/**/*.{jsx,js}\"",
     "pre-commit": "npm-run-all format --parallel lint:*",
     "beautify-html": "html-minifier --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css true --minify-js true --input-dir dist --output-dir dist --file-ext html",
-    "optimize-png": "node scripts/optimize-png.js",
     "validate:ci": "npm-run-all --parallel lint:*"
   },
   "husky": {
@@ -56,35 +55,35 @@
     "eslint-plugin-sonarjs": "^0.6.0",
     "eslint-plugin-unicorn": "^28.0.2",
     "fancy-log": "^1.3.3",
-    "gulp": "^4.0.2",
+    "gulp": "^5.0.1",
     "gulp-cheerio": "^1.0.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-dart-sass": "^1.1.0",
     "gulp-if": "^3.0.0",
-    "gulp-imagemin": "^7.1.0",
+    "gulp-imagemin": "^9.1.0",
     "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
-    "gulp-sourcemaps": "^3.0.0",
-    "gulp-svgmin": "^3.0.0",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-svgmin": "^4.1.0",
     "gulp-svgstore": "^7.0.1",
-    "gulp-watch": "^5.0.1",
+    "gulp-watch": "^4.2.4",
     "gulp-zip": "^5.0.2",
     "html-minifier": "^4.0.0",
     "image-size": "^0.9.4",
     "imagemin": "^7.0.1",
-    "imagemin-mozjpeg": "^9.0.0",
-    "imagemin-pngquant": "^9.0.2",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-pngquant": "^10.0.0",
     "node-notifier": "^9.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.49",
-    "postcss-assets": "^5.0.0",
+    "postcss": "^8.5.6",
+    "postcss-assets": "^6.0.0",
     "rimraf": "^3.0.2",
-    "stylelint": "^13.11.0",
-    "stylelint-config-idiomatic-order": "^8.1.0",
-    "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-scss": "^3.19.0",
-    "tailwindcss": "^2.2.19",
+    "stylelint": "^16.21.1",
+    "stylelint-config-idiomatic-order": "^10.0.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
+    "stylelint-scss": "^6.12.1",
+    "tailwindcss": "^3.4.17",
     "through2": "^4.0.2",
     "webpack": "^5.100.2",
     "webpack-cli": "^4.10.0"
diff --git a/scripts/optimize-png.js b/scripts/optimize-png.js
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
@@ -12,8 +12,8 @@
     <meta name="description" content="Set a proper description" />
 
     {% block stylesheets %}
-      <link rel="stylesheet" href="{{ STATIC_PATH }}/css/tailwind.css" />
       <link rel="stylesheet" href="{{ STATIC_PATH }}/css/styles.css" />
+      <link rel="stylesheet" href="{{ STATIC_PATH }}/css/tailwind.css" />
     {% endblock %}
   </head>
   <body>
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -1,15 +1,15 @@
 .button {
   @include button-reset;
-  @extend .transition-active;
+  @extend %transition-active;
   display: flex;
   height: 54px;
   align-items: center;
   justify-content: center;
   padding: 1px 20px 0;
   border: 2px solid rgba(#fff, 0.2);
+  border-radius: 8px;
   backdrop-filter: blur(8px);
   background-color: rgba(#fff, 0.05);
-  border-radius: 8px;
   color: #fff;
   cursor: pointer;
   font-size: 16px;
diff --git a/src/index.njk b/src/index.njk
@@ -89,7 +89,7 @@
           generated.
         </h3>
         {# passing maxWidth=500 here #}
-        <div class="max-w-xs bg-gray-800 p-2 rounded">
+        <div class="max-w-xs bg-gray-800 rounded">
           {%
             image './src/images/wolf.png',
             {
@@ -101,12 +101,14 @@
         </div>
       </section>
       <section class="mt-14">
-        <h3 class="text-lg font-semibold mb-1 max-w-xl">
+        <h3 class="text-lg font-semibold mb-2 max-w-xl">
           An image inlined in CSS example (compress such images manually!). Not
-          recommended for wide usage, see below.
+          recommended for wide usage.
         </h3>
-        <h4 class="max-w-xl text-lg text-red-400 mb-6 font-bold tracking-wide">
-          <span class="uppercase">Attention!</span> Please use this feature with
+        <h4
+          class="max-w-xl text-lg text-amber-200 mb-6 font-bold tracking-wide"
+        >
+          <span class="uppercase">Warning!</span> Please use this feature with
           caution as it may bloat the final CSS file. Inlining images could be a
           good approach if the file is quite small, in other cases prefer
           `&#123;% image %&#125;` tag.
diff --git a/src/sass/_extends.scss b/src/sass/_extends.scss
@@ -1,9 +1,21 @@
 @mixin button-reset {
   border: none;
+  border-radius: 0;
   appearance: none;
   background-color: transparent;
-  border-radius: 0;
   cursor: pointer;
   text-decoration: none;
   user-select: none;
 }
+
+%transition-active {
+  transition:
+    color $default-transition-duration $default-transition-function,
+    background $default-transition-duration $default-transition-function,
+    border-color $default-transition-duration $default-transition-function,
+    opacity $default-transition-duration $default-transition-function;
+}
+
+%transition-hover {
+  transition: none;
+}
diff --git a/src/sass/_global.scss b/src/sass/_global.scss
@@ -1,12 +1,9 @@
 .transition-active {
-  transition: color $default-transition-duration $default-transition-function,
-    background $default-transition-duration $default-transition-function,
-    border-color $default-transition-duration $default-transition-function,
-    opacity $default-transition-duration $default-transition-function;
+  @extend %transition-active;
 }
 
 .transition-hover {
-  transition: none;
+  @extend %transition-hover;
 }
 
 body {
diff --git a/src/sass/_reset.scss b/src/sass/_reset.scss
@@ -44,7 +44,7 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  appearance: button;
+  appearance: auto;
   background-color: #0000;
   background-image: none;
 }
diff --git a/src/sass/lib/_mixins.scss b/src/sass/lib/_mixins.scss
@@ -1,13 +1,23 @@
 @mixin font-family-sans {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
 }
 
 @mixin button-reset {
   border: none;
+  border-radius: 0;
   appearance: none;
   background-color: transparent;
-  border-radius: 0;
   text-decoration: none;
   user-select: none;
 }
@@ -36,9 +46,9 @@
 
 @mixin input-reset {
   border: none;
+  border-radius: 0;
   appearance: none;
   background-color: transparent;
-  border-radius: 0;
 }
 
 @mixin retina {
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -2,7 +2,8 @@
 @import 'colors';
 @import 'lib/base';
 @import 'fonts';
-@import 'reset';
+// Use reset only if you disable Tailwind since Tailwind resets the styles
+// @import 'reset';
 @import 'global';
 @import 'layout';
 @import 'extends';
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,11 +1,14 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-
 module.exports = {
   mode: 'jit',
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './src/**/*.njk', './src/**/*.svg'],
   theme: {
     screens: {
       xs: '375px',
-      ...defaultTheme.screens,
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
     },
     container: {
       center: true,
@@ -20,5 +23,5 @@ module.exports = {
   variants: {
     extend: {},
   },
-  purge: ['./src/**/*.{js,jsx,ts,tsx}', './src/**/*.njk', './src/**/*.svg'],
+  plugins: [],
 };

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,9 @@`
`1`	`1`	`.transition-active {`
`2`		`- transition: color $default-transition-duration $default-transition-function,`
`3`		`- background $default-transition-duration $default-transition-function,`
`4`		`- border-color $default-transition-duration $default-transition-function,`
`5`		`- opacity $default-transition-duration $default-transition-function;`
	`2`	`+ @extend %transition-active;`
`6`	`3`	`}`
`7`	`4`
`8`	`5`	`.transition-hover {`
`9`		`- transition: none;`
	`6`	`+ @extend %transition-hover;`
`10`	`7`	`}`
`11`	`8`
`12`	`9`	`body {`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ button,`
`44`	`44`	`[type='button'],`
`45`	`45`	`[type='reset'],`
`46`	`46`	`[type='submit'] {`
`47`		`- appearance: button;`
	`47`	`+ appearance: auto;`
`48`	`48`	`background-color: #0000;`
`49`	`49`	`background-image: none;`
`50`	`50`	`}`