Ejecting dark-mode.css prevents the CSS from compiling?

[Daniel Tenner]

Not sure if it's just me. Repeatably works here:

Steps:

bin/dev

Check that everything works fine. Ctrl-C to kill the server.

bin/resolve bullet_train-themes-light-1.7.2/app/assets/stylesheets/light/tailwind/dark-mode.css --eject
bin/dev

CSS compilation now blows up with:

17:42:50 light-css.1        | [Error: ENOENT: no such file or directory, stat '/Users/danieltenner/dev/[redacted]/app/assets/stylesheets/light/application.css'] {
17:42:50 light-css.1        |   errno: -2,
17:42:50 light-css.1        |   code: 'ENOENT',
17:42:50 light-css.1        |   syscall: 'stat',
17:42:50 light-css.1        |   path: '/Users/danieltenner/dev/[redacted]/app/assets/stylesheets/light/application.css'
17:42:50 light-css.1        | }
17:42:52 light-mailer-css.1 | [Error: ENOENT: no such file or directory, stat '/Users/danieltenner/dev/[redacted]/app/assets/stylesheets/light/application.css'] {
17:42:52 light-mailer-css.1 |   errno: -2,
17:42:52 light-mailer-css.1 |   code: 'ENOENT',
17:42:52 light-mailer-css.1 |   syscall: 'stat',
17:42:52 light-mailer-css.1 |   path: '/Users/danieltenner/dev/[redacted]/app/assets/stylesheets/light/application.css'
17:42:52 light-mailer-css.1 | }

Remove the offending CSS:

rm app/assets/stylesheets/light/tailwind/dark-mode.css
bin/dev

Server still bugs out with the same error. Remove the (empty) directory:

rm -rf app/assets/stylesheets/light

Server now starts fine.

I'm guessing that the empty /light directory is the problem. This suggests a workaround of also ejecting application.css in the tailwind directory but... no, that doesn't work either.

This means that there are some hard override of styles that are hardcoded and very hard to get rid of. Not sure what a good solution is here.

[Daniel Tenner]

Ok, there is a workaround.

Pick up the styles you don't like, and define them at the bottom of you application.css:

/* Override these from the hardcoded theme stuff */
@layer utilities {
  @media (prefers-color-scheme: dark) {
    /* Trix Editor */
    trix-editor {
      @apply bg-primary-900 border-neutral-800 !important;

      &:focus, &:active {
        @apply bg-primary-800 border-primary-500 !important;
      }
    }

    trix-toolbar {
      @apply opacity-50 !important;

      &.visible {
        @apply opacity-100 !important;
      }

      .trix-button-group, .trix-button {
        @apply border-slate-400 !important;
      }

      .trix-button:disabled::before {
        @apply opacity-25;
      }
    }

    .tribute-container {
      ul {
        @apply bg-slate-800 border-slate-900 !important;
      }
    }

    .trix-dialogs {
      @apply bg-slate-800 border-slate-900 !important;
    }

    .trix-content a[href^="bullettrain://"] {
      @apply text-white bg-slate-500;
    }
  }
}

This does the job.

[Daniel Tenner]

(doesn't solve the fact that these styles probably shouldn't be hidden so deep in the theme?)