FocusAssify

This browserify plugin returns a random unique className which wraps your existing sass-code.

Options

// defaults
const options = {
  indentSize: 2,
  indentChar: ' ',
  rootNamespace: 'focusass',
};

const focusassify = require('focusassify')(options);

FeedbackView/FeedbackView.hbs

<form>
  <input type="text" />
  <button type="submit">Submit</button>
</form>

FeedbackView/FeedbackView.js:

import { View } from 'backbone';

export default View.extend({
  className: require('./FeedbackView.scss'),
  template: require('./FeedbackView.hbs'),
});

FeedbackView/FeedbackView.scss:

before

button {
  border: 1px solid black;
}

after applying focusassify

.focusass-jdxHh {
  button {
    border: 1px solid black;
  }
}

Rendered view's html

<div class="focusass-jdxHh">
  <form>
    <input type="text" />
    <button type="submit">Submit</button>
  </form>
</div>

This example with a backbone view works because you pass the className as an attribute inside of the extended component constructor, still need to figure out how yo apply this to inferno or react components. There we just need to know how to apply a className to the components root element efficiently.