update deps, fix stylelint errors, cleanups

.gitignore

@@ -1 +1,2 @@
+/dist
 /node_modules

.stylelintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-rscss/config"]
+  "extends": ["stylelint-config-standard", "stylelint-rscss/config"],
+  "rules": {
+    "property-no-vendor-prefix": null,
+    "selector-class-pattern": "[a-z\\-][a-z0-9\\-]+"
+  }
 }

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright 2020-2022 Morris Brodersen <mb@morrisbrodersen.de>
+Copyright 2020-2023 Morris Brodersen <mb@morrisbrodersen.de>
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

README.md

@@ -172,7 +172,7 @@ All JavaScript files are ES modules (`import`/`export`).
 Basic code quality (code style, linting) is guided by
 [Prettier](https://prettier.io), [stylelint](https://stylelint.io) and
 [ESLint](https://eslint.org).
-I've set the ESLint parser to ES5 to ensure only ES5 code is allowed.
+I've set the ESLint parser to ES2020 to ensure only ES2020 code is allowed.
 
 Note that I've opted out of web components completely.
 I can't clearly articulate what I dislike about them
@@ -803,6 +803,11 @@ Thanks!
 
 ## 9. Changelog
 
+### 05/2023
+
+- Fix stylelint errors
+- Update dependencies
+
 ### 08/2022
 
 - Small improvements

package.json

@@ -30,8 +30,8 @@
     "eslint-plugin-compat": "^4.0.2",
     "http-server": "^14.1.1",
     "prettier": "^2.7.1",
-    "stylelint": "^14.9.1",
+    "stylelint": "^15.6.1",
-    "stylelint-config-standard": "^26.0.0",
+    "stylelint-config-standard": "^33.0.0",
     "stylelint-rscss": "^0.4.0"
   }
 }

public/styles/app-button.css

@@ -47,7 +47,7 @@
   color: #eee;
 }
 
-@media (min-width: 600px) {
+@media (width >= 600px) {
   .app-button.-xl {
     font-size: 2em;
   }

public/styles/app-date-picker.css

@@ -2,7 +2,7 @@
   width: 260px;
   background: #fff;
   border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 10%) 0 4px 12px;
+  box-shadow: rgb(0 0 0 / 10%) 0 4px 12px;
   padding: 8px;
   transform: translate(110%, 0);
   transition: all 0.2s ease-in-out;
@@ -16,7 +16,7 @@
 .app-date-picker > .header {
   display: flex;
   font-size: 1em;
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
   line-height: 1.5em;
 }
 
@@ -30,21 +30,24 @@
   width: 100%;
 }
 
+/* stylelint-disable-next-line rscss/class-format */
 .app-date-picker > .dates > thead > tr > th {
   font-weight: normal;
   padding: 0;
 }
 
+/* stylelint-disable-next-line rscss/class-format */
 .app-date-picker > .dates > tbody > tr > td {
   padding: 0;
 }
 
+/* stylelint-disable-next-line rscss/class-format */
 .app-date-picker > .dates > tbody > tr > td > button {
   width: 100%;
   height: 1.9em;
 }
 
-@media (min-width: 320px) {
+@media (width >= 320px) {
   .app-date-picker {
     width: 300px;
   }

public/styles/app-footer.css

@@ -5,6 +5,7 @@
   color: #999;
 }
 
+/* stylelint-disable-next-line rscss/no-descendant-combinator */
 .app-footer a {
   color: #999;
 }

public/styles/todo-custom-list.css

@@ -10,7 +10,7 @@
 }
 
 .todo-custom-list > .header > .title {
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
   font-size: 1.5em;
   line-height: normal;
   cursor: pointer;
@@ -18,7 +18,7 @@
 
 .todo-custom-list > .header > .form {
   display: none;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
   font-size: 1em;
   line-height: 1em;
 }
@@ -52,8 +52,8 @@
 }
 
 .todo-custom-list.-dragging {
-  box-shadow: 10px 0 12px -14px rgba(0, 0, 0, 30%),
+  box-shadow: 10px 0 12px -14px rgb(0 0 0 / 30%),
-    -10px 0 12px -14px rgba(0, 0, 0, 30%);
+    -10px 0 12px -14px rgb(0 0 0 / 30%);
   background: #fff;
   opacity: 0.8;
 }

public/styles/todo-day.css

@@ -9,14 +9,14 @@
 
 .todo-day > .header > .dayofweek {
   text-transform: uppercase;
-  margin: 0 0 0.25em 0;
+  margin: 0 0 0.25em;
   font-size: 1.5em;
 }
 
 .todo-day > .header > .date {
   text-transform: uppercase;
   font-weight: normal;
-  margin: 0.25em 0 0 0;
+  margin: 0.25em 0 0;
   font-size: 0.8em;
   color: #aaa;
 }

public/styles/todo-frame.css

@@ -27,7 +27,7 @@
 
 .todo-frame > .leftcontrols > p,
 .todo-frame > .rightcontrols > p {
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .todo-frame > .rightcontrols > .datepicker {
@@ -38,10 +38,7 @@
 .todo-frame > .container {
   position: absolute;
   overflow: hidden;
-  top: 0;
+  inset: 0 52px;
-  right: 52px;
-  bottom: 0;
-  left: 52px;
 }
 
 .todo-frame > .container > .card {
@@ -56,7 +53,7 @@
   transition: height 0.2s ease-out;
 }
 
-@media (min-width: 600px) {
+@media (width >= 600px) {
   .todo-frame > .container {
     right: 70px;
     left: 70px;
@@ -72,19 +69,19 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .todo-frame > .container > .card {
     width: 33.333%;
   }
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .todo-frame > .container > .card {
     width: 25%;
   }
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .todo-frame > .container > .card {
     width: 20%;
   }

public/styles/todo-item.css

@@ -48,7 +48,7 @@
   border: 0;
   border-radius: 0;
   outline: 0;
-  padding: 0 0 0.25em 0;
+  padding: 0 0 0.25em;
   width: 100%;
   font-family: inherit;
   font-size: inherit;