[A/B Testing] Changing parent CSS class based on experiment variable

Development
2

Note that this is probably causing an uncaught error to users who are not logged in. I recommend changing that to

const user = api.getCurrentUser();
if (!user) return;

const userId = user.id;

With that out of the way, let’s get back to your question.

Unlike CSS, SCSS supports a parent selector, so that’s something you can use.

Since you want to apply this to every other user (id % 2)

You can check that when the app loads. So, something like this at the very top

const user = api.getCurrentUser();
const userId = user.id;

if (!userId) return;

const testThemeUser = userId % 2 === 0;

if (testThemeUser) {
  document.body.classList.add("test-theme");
}

You can then use the testThemeUser in your JS conditionals and the test-theme CSS class in your styles.

So, something like this.

JS

let template = findRawTemplate("list/custom-topic-list-item");
if (testThemeUser)
  template = findRawTemplate("list/variant-custom-topic-list-item");
if (template) {
  this.set("topicListItemContents", template(this).htmlSafe());
}

SCSS

.topic-list {
  tbody {
    border: none;
  }
  tr {
    border: none;
  }
  .example-div {
    border: none;
  }
  // test theme SCSS
  .test-theme & {
    .example-div {
      border: 2px solid black;
    }
    .another-example-div {
      font-size: 10px;
    }
  }
}