This browserify plugin returns a random unique className which wraps your existing sass-code.
// defaults
const options = {
indentSize: 2,
indentChar: ' ',
rootNamespace: 'focusass',
};
const focusassify = require('focusassify')(options);
import { View } from 'backbone';
export default View.extend({
className: require('./FeedbackView.scss'),
template: require('./FeedbackView.hbs'),
});
button {
border: 1px solid black;
}
.focusass-jdxHh {
button {
border: 1px solid black;
}
}
<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.