focusassify

2.0.0 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i focusassify

Weekly Downloads

1

Version

2.0.0

License

MIT

Last publish

Collaborators

  • elgubenis