unnest, add light theme, fixes

assets/css/common/mixins.css

@@ -22,35 +22,35 @@
   }
 }
 
-@define-mixin even-odd-type $type {
+@define-mixin even-odd-type $classname, $type {
-  &:nth-child(odd).$(type),
+  .$(classname):nth-child(odd).$(type),
-  &:nth-child(odd) .$(type) {
+  .$(classname):nth-child(odd) .$(type) {
     background: var(--$(type)-color);
   }
-  &:nth-child(even).$(type),
+  .$(classname):nth-child(even).$(type),
-  &:nth-child(even) .$(type) {
+  .$(classname):nth-child(even) .$(type) {
     background: var(--$(type)-dark-color);
   }
-  &:nth-child(even) &:nth-child(odd).$(type),
+  .$(classname):nth-child(even) .$(classname):nth-child(odd).$(type),
-  &:nth-child(even) &:nth-child(odd) .$(type) {
+  .$(classname):nth-child(even) .$(classname):nth-child(odd) .$(type) {
     background: var(--$(type)-color);
   }
 }
 
-@define-mixin even-odd {
+@define-mixin even-odd $classname {
-  &:nth-child(odd) {
+  .$(classname):nth-child(odd) {
     background: var(--secondary-dark-color);
   }
-  &:nth-child(even) {
+  .$(classname):nth-child(even) {
     background: var(--secondary-muted-color);;
   }
 
-  @mixin even-odd-type primary;
+  @mixin even-odd-type $classname, primary;
-  @mixin even-odd-type success;
+  @mixin even-odd-type $classname, success;
-  @mixin even-odd-type warning;
+  @mixin even-odd-type $classname, warning;
-  @mixin even-odd-type danger;
+  @mixin even-odd-type $classname, danger;
-  @mixin even-odd-type information;
+  @mixin even-odd-type $classname, information;
-  @mixin even-odd-type special;
+  @mixin even-odd-type $classname, special;
 }
 
 @define-mixin animated-transition {

assets/css/elements/block.css

@@ -1,31 +1,29 @@
 @define-mixin block-type $type {
-  .block--$(type) {
+  .block--$(type) .block__content {
-    .block__content {
     border-color: var(--$(type)-border-color);
     background: var(--$(type)-dark-color);
   }
 
-    .block__footer {
+  .block--$(type) .block__footer {
     background: var(--$(type)-color);
   }
 
-    &.block--muted {
+  .block--$(type).block--muted {
     border-color: var(--$(type)-color);
   }
 
-    &.block--fixed {
+  .block--$(type).block--fixed {
     background: var(--$(type)-color);
   }
 
-    & a {
+  .block--$(type) a {
     color: var(--$(type)-link-color);
+  }
 
-      &:hover {
+  .block--$(type) a:hover {
     color: var(--link-hover-color);
   }
 }
-  }
-}
 
 .block {
   margin-bottom: var(--padding-normal);
@@ -86,10 +84,10 @@
   padding: 0 var(--padding-normal);
   font-size: var(--font-header-size);
   margin-bottom: var(--padding-small);
-
-  & > .fa {
-    margin-right: var(--padding-normal);
 }
+
+.block__header > .fa, .block__header--single-item > .fa {
+  margin-right: var(--padding-normal);
 }
 
 .block__header--single-item {
@@ -129,20 +127,20 @@
 .block__header--js-tabbed {
   display: flex;
   padding: 0;
+}
 
-  & a {
+.block__header--js-tabbed a {
   display: block;
   color: var(--text-color);
   padding: 0 var(--padding-normal);
-
-    &:hover {
-      background: var(--background-color);
-    }
 }
 
-  .selected {
+.block__header--js-tabbed a:hover {
   background: var(--background-color);
 }
+
+.block__header--js-tabbed .selected {
+  background: var(--background-color);
 }
 
 .block--spaced-top {

assets/css/elements/button.css

@@ -3,33 +3,33 @@
     color: var(--$(type)-link-color) !important;
     border-color: var(--$(type)-border-color);
     background: var(--$(type)-dark-color);
+  }
 
-    &.button--important {
+  .button--$(type).button--important {
     color: var(--text-color) !important;
     background: var(--$(type)-color);
     box-shadow: 0 -1px var(--$(type)-dark-color) inset;
   }
 
-    &:hover {
+  .button--$(type):hover {
     background: var(--$(type)-muted-color) !important;
   }
-  }
 
   .button__group--$(type) {
     border-color: var(--$(type)-color);
     background: var(--$(type)-dark-color);
+  }
 
-    & a {
+  .button__group--$(type) a {
     color: var(--$(type)-link-color);
+  }
 
-      &:hover {
+  .button__group--$(type) a:hover {
     @mixin animated-transition;
     color: var(--text-color);
     background: var(--$(type)-color);
   }
 }
-  }
-}
 
 .button {
   @mixin animated-transition;
@@ -46,13 +46,13 @@
   overflow: hidden;
   line-height: var(--button-height);
   align-items: center;
+}
 
-  &:hover {
+.button:hover {
   @mixin animated-transition;
   background: var(--primary-muted-color);
   cursor: pointer;
 }
-}
 
 .button > i {
   margin-right: var(--padding-small);
@@ -66,10 +66,10 @@
 .button__row {
   display: flex;
   flex-direction: row;
-
-  & > button {
-    margin-right: var(--padding-small);
 }
+
+.button__row > button {
+  margin-right: var(--padding-small);
 }
 
 .button__group, .button__group--single, .button__group--standalone {
@@ -80,10 +80,10 @@
   margin-right: var(--padding-normal);
   background: var(--secondary-dark-color);
   line-height: var(--button-group-height);
-
-  &:last-child {
-    margin: 0;
 }
+
+.button__group:last-child, .button__group--single:last-child, .button__group--standalone:last-child {
+  margin: 0;
 }
 
 .button__group--tall {
@@ -97,10 +97,10 @@
 .button__group .button {
   border: 0;
   border-right: var(--secondary-color);
-
-  &:last-child {
-    border-right: 0;
 }
+
+.button__group .button:last-child {
+  border-right: 0;
 }
 
 .button__group--single {
@@ -111,12 +111,12 @@
   @mixin animated-transition;
   font-weight: bold;
   padding: 0 var(--padding-small);
+}
 
-  &:hover {
+.button__group--standalone a:hover {
   @mixin animated-transition;
   background: var(--secondary-muted-color);
 }
-}
 
 .button--borderless {
   border-width: 0;
@@ -126,10 +126,10 @@
   color: var(--link-color);
   border-width: 0 !important;
   background: 0;
-
-  &:hover {
-    background: var(--primary-muted-color);
 }
+
+.block__header__buttons .button:hover {
+  background: var(--primary-muted-color);
 }
 
 @mixin button-type success;

assets/css/elements/dropdown.css

@@ -1,15 +1,13 @@
 .dropdown {
   position: relative;
   display: inline-block;
+}
 
-  &:hover {
+.dropdown:hover .dropdown__content {
-    .dropdown__content {
   display: block;
   min-width: 100%;
   z-index: 999;
 }
-  }
-}
 
 .dropdown__content {
   background: var(--primary-muted-color);
@@ -18,12 +16,12 @@
   display: none;
   top: 100%;
   left: 0;
+}
 
-  & > :not(.hidden) {
+.dropdown__content > :not(.hidden) {
   display: block;
   white-space: nowrap;
 }
-}
 
 .dropdown__content--right {
   left: inherit;
@@ -34,13 +32,11 @@
   display: grid;
   grid-template-columns: auto 1fr;
   color: var(--text-color);
+}
 
-  &:hover {
+.dropdown__item:hover .dropdown__text {
-    .dropdown__text {
   background: var(--primary-dark-color);
 }
-  }
-}
 
 .dropdown__icon {
   padding: 0 var(--padding-small);
@@ -62,8 +58,8 @@
 .dropdown__link {
   padding: 0 var(--padding-small);
   color: var(--text-color) !important;
+}
 
-  &:hover {
+.dropdown__link:hover {
   background: var(--primary-dark-color);
 }
-}

assets/css/elements/flash.css

@@ -2,20 +2,20 @@
   .flash--$(type) {
     border: 1px solid var(--$(type)-border-color);
     background: var(--$(type)-color);
+  }
 
-    .flash__message {
+  .flash--$(type) .flash__message {
     border-left: 1px solid var(--$(type)-border-color);
   }
 
-    & a {
+  .flash--$(type) a {
     color: var(--$(type)-link-color);
+  }
 
-      &:hover {
+  .flash--$(type) a:hover {
     color: var(--link-hover-color);
   }
 }
-  }
-}
 
 .flash {
   display: grid;

assets/css/elements/heading.css

@@ -14,12 +14,15 @@
     border-bottom-color: var(--$(type)-border-color);
   }
 
-  .block--$(type) {
+  .block--$(type) h1,
-    h1, h2, h3, h4, h5, h6 {
+  .block--$(type) h2,
+  .block--$(type) h3,
+  .block--$(type) h4,
+  .block--$(type) h5,
+  .block--$(type) h6 {
     border-bottom-color: var(--$(type)-border-color);
   }
 }
-}
 
 @mixin heading h1;
 @mixin heading h2;

assets/css/elements/input.css

@@ -5,15 +5,15 @@
   color: var(--text-color);
   box-sizing: border-box;
   font-family: var(--font-family-monospace);
+}
 
-  &:focus {
+.input:focus {
   outline: none;
 }
 
-  &::placeholder {
+.input::placeholder {
   color: var(--secondary-border-color);
 }
-}
 
 .input--wide {
   width: 100%;

assets/css/elements/interaction.css

@@ -4,13 +4,13 @@
     color: var(--$(type)-color) !important;
     padding: 0 var(--padding-tiny);
     width: 1rem;
+  }
 
-    &.active, &:hover {
+  .interaction--$(type).active, .interaction--$(type):hover {
     color: var(--text-color) !important;
     background-color: var(--$(type)-color);
   }
 }
-}
 
 @mixin interaction-type fave;
 @mixin interaction-type upvote;

assets/css/elements/layout.css

@@ -44,13 +44,11 @@
 }
 
 @mixin if-desktop {
-  .centered-layout {
+  .centered-layout .layout--medium, .centered-layout .layout--narrow {
-    .layout--medium, .layout--narrow {
     margin-left: auto;
     margin-right: auto;
   }
 }
-}
 
 #container.centered-layout .layout--centered {
   justify-content: center;

assets/css/elements/media.css

@@ -59,21 +59,19 @@
   position: relative;
   border-radius: 0 0 var(--border-radius-inner) var(--border-radius-inner);
   overflow: hidden;
+}
 
-  .image-container {
+.media-box__content .image-container {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
-}
 
-.media-box__content--featured {
+.media-box__content--featured .media-box__image {
-  .media-box__image {
   max-height: var(--media-featured-width);
 }
-}
 
 .media-box__overlay {
   display: block;
@@ -105,14 +103,14 @@
 .image-container a {
   display: flex;
   max-height: 100%;
+}
 
 /* For some reason tall images don't center properly within the container
     without this hack. I blame CSS. */
-  & > img {
+.image-container a > img {
   max-height: 100%;
   margin: auto;
 }
-}
 
 .media-box__image {
   max-width: 100%;

assets/css/elements/separator.css

@@ -1,19 +1,17 @@
 @define-mixin separator-type $type {
   .separator--$(type) {
     border-color: var(--$(type)-border-color);
+  }
 
-    &.separator--vertical {
+  .separator--$(type).separator--vertical {
     background: var(--$(type)-border-color);
   }
-  }
 
-  .button__group--standalone .separator--$(type),
+  .button__group--standalone .separator--$(type).separator--vertical,
-  .button__group .separator--$(type) {
+  .button__group .separator--$(type).separator--vertical {
-    &.separator--vertical {
     background: var(--$(type)-color) !important;
   }
 }
-}
 
 .separator {
   margin: var(--padding-normal) 0;

assets/css/options/extra-rounding.css

@@ -0,0 +1,5 @@
+:root {
+  --border-radius-outer: 0.6rem;
+  --border-radius-inner: 0.4rem;
+  --border-radius-tag: 0.25rem;
+}

assets/css/options/no-rounding.css

@@ -0,0 +1,5 @@
+:root {
+  --border-radius-outer: 0;
+  --border-radius-inner: 0;
+  --border-radius-tag: 0;
+}

assets/css/options/tag-border.css

@@ -0,0 +1,3 @@
+:root {
+  --tag-border-width: 1px;
+}

assets/css/themes/light-blue.css

@@ -0,0 +1,89 @@
+$background-color: #f7f7f7;
+$text-color: #171717;
+
+$primary-color: #62a7d9;
+$secondary-color: #c1e4f9;
+$danger-color: #e78f82;
+$warning-color: #f0c180;
+$success-color: #8de3b1;
+$information-color: #90dce7;
+$special-color: #dc77e9;
+
+$upvote-color: #5b9b26;
+$downvote-color: #da3412;
+$fave-color: #a18e27;
+$comment-color: #b099dd;
+$hide-color: #da3412;
+
+$tag-default-color: #84dd96;
+$tag-error-color: #eb848c;
+$tag-rating-color: #9cc6f0;
+$tag-origin-color: #b5b0ed;
+$tag-character-color: #b6e4ed;
+$tag-oc-color: #efaaf2;
+$tag-species-color: #e1997a;
+$tag-body-type-color: #bcbcbc;
+$tag-content-fanmade-color: #e388c2;
+$tag-content-official-color: #ebe9b3;
+$tag-spoiler-color: #dcb879;
+
+$spoiler-color: #0f0f0f;
+
+@define-mixin tag-color $tagname, $color, $text-percentage: 40, $border-percentage: 15 {
+  --tag-$(tagname)-color: $(color);
+  --tag-$(tagname)-border-color: hsl(from $color h s calc(l - $border-percentage));
+  --tag-$(tagname)-text-color: hsl(from $color h s calc(l - $text-percentage));
+}
+
+@define-mixin type-color $type, $color {
+  --$(type)-color: $color;
+  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l - 10));
+  --$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l + 12));
+  --$(type)-link-color: hsl(from $color h calc(s + 50) calc(l - 47));
+}
+
+:root {
+  --background-color: $background-color;
+  --text-color: $text-color;
+
+  --link-color: hsl(from $primary-color h calc(s + 25) calc(l - 25));
+  --link-hover-color: $text-color;
+
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 20) calc(l - 30));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 10));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 10) calc(l + 30));
+
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l - 15));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 5));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+
+  --upvote-color: $upvote-color;
+  --downvote-color: $downvote-color;
+  --fave-color: $fave-color;
+  --comment-color: $comment-color;
+  --hide-color: $hide-color;
+
+  --spoiler-color: $spoiler-color;
+  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
+
+  @mixin type-color success, $success-color;
+  @mixin type-color warning, $warning-color;
+  @mixin type-color danger, $danger-color;
+  @mixin type-color information, $information-color;
+  @mixin type-color special, $special-color;
+
+  @mixin tag-color default, $tag-default-color;
+  @mixin tag-color error, $tag-error-color, 37;
+  @mixin tag-color rating, $tag-rating-color, 37;
+  @mixin tag-color origin, $tag-origin-color, 42;
+  @mixin tag-color character, $tag-character-color;
+  @mixin tag-color oc, $tag-oc-color, 40;
+  @mixin tag-color species, $tag-species-color, 37;
+  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
+  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
+  @mixin tag-color content-official, $tag-content-official-color;
+  @mixin tag-color spoiler, $tag-spoiler-color;
+}

assets/css/views/communication.css

@@ -13,10 +13,10 @@
   background: 0;
   border: 0;
   padding: var(--padding-small);
-
-  &:hover {
-    background: var(--secondary-muted-color);
 }
+
+.communication__toolbar__button:hover {
+  background: var(--secondary-muted-color);
 }
 
 .communication-edit__actions {

assets/css/views/metabar.css

@@ -1,5 +1,5 @@
 @define-mixin fix-interaction $type {
-  .interaction--$(type) {
+  .metabar__interactions .interaction--$(type) {
     padding: var(--padding-tiny) var(--padding-small);
   }
 }
@@ -9,12 +9,12 @@
     display: grid;
     width: 100%;
     grid-template-columns: repeat(5, 1fr);
+  }
 
   @mixin fix-interaction fave;
   @mixin fix-interaction upvote;
   @mixin fix-interaction downvote;
   @mixin fix-interaction hide;
-  }
 
   .metabar__interactions * {
     align-self: center;
@@ -58,11 +58,9 @@
   box-sizing: border-box;
 }
 
-.metabar__mobile-info {
+.metabar__mobile-info td {
-  & td {
   padding: var(--padding-small);
 }
-}
 
 .badges {
   display: inline-block;

assets/css/views/statistics.css

@@ -7,13 +7,13 @@
 }
 
 .statistics__statistic {
-  @mixin even-odd;
-
   display: grid;
   grid-template-columns: 15% 15% auto;
   background: var(--secondary-color);
 }
 
+@mixin even-odd statistics__statistic;
+
 .statistics__column {
   text-align: center;
   padding: var(--padding-small);
@@ -27,8 +27,8 @@
 
 .barline__bar {
   fill: var(--primary-border-color);
+}
 
-  &:hover {
+.barline__bar:hover {
   fill: var(--danger-color);
 }
-}

assets/css/views/tag.css

@@ -1,22 +1,22 @@
 @define-mixin tag-color $tagtype {
-  &[data-tag-category=$(tagtype)] {
+  .tag[data-tag-category=$(tagtype)] {
     color: var(--tag-$(tagtype)-text-color);
     background: var(--tag-$(tagtype)-color);
     border-color: var(--tag-$(tagtype)-border-color);
+  }
 
-    .tag__state {
+  .tag[data-tag-category=$(tagtype)] .tag__state {
     color: var(--tag-$(tagtype)-text-color);
   }
 
-    .tag__name {
+  .tag[data-tag-category=$(tagtype)] .tag__name {
     color: var(--tag-$(tagtype)-text-color);
   }
 
-    .tag__count {
+  .tag[data-tag-category=$(tagtype)] .tag__count {
     background: var(--tag-$(tagtype)-border-color);
   }
 }
-}
 
 .tag-list {
   display: flex;
@@ -35,8 +35,9 @@
   border-radius: var(--border-radius-tag);
   border: var(--tag-border-width) solid var(--tag-default-border-color);
   font-weight: bold;
+}
 
-  a {
+.tag a {
   color: inherit;
 }
 
@@ -50,7 +51,6 @@
 @mixin tag-color content-fanmade;
 @mixin tag-color content-official;
 @mixin tag-color spoiler;
-}
 
 .tag > span {
   display: table-cell;
@@ -79,10 +79,10 @@
 .tag__dropdown__link {
   background-color: var(--primary-muted-color);
   padding: 0 var(--padding-small);
-
-  &:hover {
-    background-color: var(--primary-dark-color);
 }
+
+.tag__dropdown__link:hover {
+  background-color: var(--primary-dark-color);
 }
 
 .tag-info__image {

assets/package-lock.json

@@ -17,7 +17,6 @@
         "jest-environment-jsdom": "^29.7.0",
         "normalize.css": "^8.0.1",
         "postcss-mixins": "^10.0.1",
-        "postcss-nested": "^6.0.1",
         "postcss-simple-vars": "^7.0.1",
         "typescript": "^5.4",
         "vite": "^5.2"
@@ -3073,17 +3072,6 @@
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -3243,9 +3231,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.751",
+      "version": "1.4.752",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.751.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.752.tgz",
-      "integrity": "sha512-2DEPi++qa89SMGRhufWTiLmzqyuGmNF3SK4+PQetW1JKiZdEpF4XQonJXJCzyuYSA6mauiMhbyVhqYAP45Hvfw=="
+      "integrity": "sha512-P3QJreYI/AUTcfBVrC4zy9KvnZWekViThgQMX/VpJ+IsOBbcX5JFpORM4qWapwWQ+agb2nYAOyn/4PMXOk0m2Q=="
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -5962,36 +5950,6 @@
         "postcss": "^8.2.14"
       }
     },
-    "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-simple-vars": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
@@ -6806,11 +6764,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-    },
     "node_modules/v8-to-istanbul": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",

assets/package.json

@@ -22,7 +22,6 @@
     "jest-environment-jsdom": "^29.7.0",
     "normalize.css": "^8.0.1",
     "postcss-mixins": "^10.0.1",
-    "postcss-nested": "^6.0.1",
     "postcss-simple-vars": "^7.0.1",
     "typescript": "^5.4",
     "vite": "^5.2"

assets/tsconfig.json

@@ -12,7 +12,7 @@
       "DOM.Iterable"
     ],
 
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,

assets/vite.config.ts

@@ -2,36 +2,27 @@ import fs from 'fs';
 import path from 'path';
 import autoprefixer from 'autoprefixer';
 import postcssMixins from 'postcss-mixins';
-import postcssNested from 'postcss-nested';
 import postcssSimpleVars from 'postcss-simple-vars';
 import postcssRelativeColor from '@csstools/postcss-relative-color-syntax';
 import { defineConfig, UserConfig, ConfigEnv } from 'vite';
 
 export default defineConfig(({ command }: ConfigEnv): UserConfig => {
   const isDev = command !== 'build';
+  const targets = new Map();
 
-  if (isDev) {
+  fs.readdirSync(path.resolve(__dirname, 'css/themes/')).forEach(name => {
-    process.stdin.on('close', () => {
-      // eslint-disable-next-line no-process-exit
-      process.exit(0);
-    });
-
-    process.stdin.resume();
-  }
-
-  const themeNames =
-    fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => {
     const m = name.match(/([-a-z]+).css/);
 
-      if (m) { return m[1]; }
+    if (m)
-      return null;
+      targets.set(`css/${m[1]}`, `./css/themes/${m[1]}.css`);
   });
 
-  const themes = new Map();
+  fs.readdirSync(path.resolve(__dirname, 'css/options/')).forEach(name => {
+    const m = name.match(/([-a-z]+).css/);
 
-  for (const name of themeNames) {
+    if (m)
-    themes.set(`css/${name}`, `./css/themes/${name}.css`);
+      targets.set(`css/options/${m[1]}`, `./css/options/${m[1]}.css`);
-  }
+  });
 
   return {
     publicDir: 'static',
@@ -55,7 +46,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
         input: {
           'js/app': './js/app.js',
           'css/application': './css/application.css',
-          ...Object.fromEntries(themes)
+          ...Object.fromEntries(targets)
         },
         output: {
           entryFileNames: '[name].js',
@@ -66,7 +57,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
     },
     css: {
       postcss:  {
-        plugins: [postcssMixins(), postcssNested(), postcssSimpleVars, postcssRelativeColor(), autoprefixer]
+        plugins: [postcssMixins(), postcssSimpleVars(), postcssRelativeColor(), autoprefixer]
       }
     }
   };