apply_css_controller.js

import { Controller } from "@hotwired/stimulus";

export default class ApplyCssController extends Controller {
  static targets = ["element"];

  static values = {
    selector: String,
    onConnect: { type: Boolean, default: false },
  };

  static classes = ["add", "remove"];

  connect() {
    if (this.onConnectValue) {
      this.apply();
    }
  }

  apply() {
    let elements;

    if (this.hasElementTarget) {
      elements = this.elementTargets;
    } else if (this.hasSelectorValue) {
      elements = document.querySelectorAll(this.selectorValue);
    }

    elements.forEach((element) => {
      if (this.hasAddClass) {
        this.addClasses.forEach((cssClass) => element.classList.add(cssClass));
      }

      if (this.hasRemoveClass) {
        this.removeClasses.forEach((cssClass) => element.classList.remove(cssClass));
      }
    });
  }
}

Example of use:

<turbo-stream action="update" target="hidden_workaround_element">
  <template>
    <div data-controller="apply-css"
         data-apply-css-add-class="field_with_errors"
         data-apply-css-selector-value="#input_wrapper"
         data-apply-css-on-connect-value="true"></div>
  </template>
</turby-stream>

or:

<turbo-stream action="update" target="hidden_workaround_element">
  <template>
    <div data-controller="apply-css"
         data-apply-css-remove-class="field_with_errors"
         data-apply-css-selector-value="#input_wrapper, #input_wrapper .field_with_errors"
         data-apply-css-on-connect-value="true"></div>
  </template>
</turby-stream>