bullet-train-co / bullet_train-core

The Open Source Ruby on Rails SaaS Framework
37 stars 44 forks source link

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

Open swombat opened 6 months ago

swombat commented 6 months ago

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.

swombat commented 6 months ago

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.

swombat commented 6 months ago

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