Trigger noscript

[earthboundkid]

The noscript selector is useful, but it would also be useful if I could manually activate noscript mode if, e.g., loading JS fails for some reason. In terms of implementation, I think the way to do it is to have @media (scripting: none) set some CSS variable, and then I could set the same variable in a <script onerror="..."> handler as well.

[wongjn]

I don't think this would work with the way Tailwind variants work. They generally modify rule selectors, not property values, and since container styles aren't widely implemented yet, using a CSS variable would not work.

Instead, you could set some root class name somewhere on error and then tweak noscript like:

@custom-variant noscript {
  @media (scripting: none) {
    @slot;
  }
  .script-error & {
    @slot;
  }
}

[earthboundkid]

That would work too. Should there be a standardized class for script-error?

[wongjn]

I think it gets tricky to standardise, especially for projects with more than one <script> tag.

[earthboundkid]

Minor correction for anyone in the future who reads this thread, it should be

@custom-variant noscript {
  @media (scripting: none) {
    @slot;
  }
  .script-error & {
    @slot;
  }
}

With the .script-error & instead of bare .script-error.

[wongjn]

Ah yes, thanks, updated!

[yudin-s]

I would model this as two activation paths for the same variant:

1. true no-script mode: @media (scripting: none)
2. script failed mode: a root class you set yourself, for example .script-error

The CSS variable approach is awkward here because a Tailwind variant needs to change selector generation. A variable can change values, but it cannot make a generated selector start matching by itself.

Something like this is closer to how Tailwind variants work:

@import "tailwindcss";

@custom-variant noscript {
  @media (scripting: none) {
    @slot;
  }

  .script-error & {
    @slot;
  }
}

Then, if your critical script fails:

<script
  src="/app.js"
  onerror="document.documentElement.classList.add('script-error')"
></script>

After that, classes using the noscript: variant would also apply under .script-error.

The caveat is timing. If you need fallback styles before any blocking render happens, the failure class needs to be set very early, ideally from the same script tag that can fail or from a tiny inline bootstrap. If the class is added later, you will still get a brief state where only the normal scripted styles apply.