Generate unique classNames

[ItsJonQ]

Generate unique classNames ✨

This update (super) enhances Fancy to with the CSS Modules-like feature of
parsing and generating unique classNames.

This is done by tapping into stylis with a custom plugin to identify
and tokenize selector names. Several parsing steps have been adding to extract
those classNames and create (short) uuid variants, which are then:

1. rendered (with the original rules) into the <style> tag
2. passed into the ComposedComponent as a styles prop for use

The previous StyleSheet factory was converted into a simple Class for
ease of understanding.

Basic Example

Fancy provides you with a "styles" prop, that contains unique classNames that is generated from and maps to your defined CSS.

const Card = props => {
  const { styles } = props
  <div className={styles.Card} />
}

const css = `
  .Card {
    background: white;
    position: relative;
    border: 1px solid black;
  }
`
const StyledCard = fancy(css)(Card)

Result (CSS)

Fancy preserves your original className. This is allow for reusability of your style rules, potentially with components from a different scope or even outside of React.

.Card,
.Card__l14h91-1 {
  background: white;
  position: relative;
  border: 1px solid black;
}

Result (HTML)

<div class="Card__l14h91-1"></div>

Note: This feature is only available to class-based selectors. Selectors like div or #id will not receive unique classNames.

[coveralls]

Pull Request Test Coverage Report for Build 27

• 67 of 67 (100.0%) changed or added relevant lines in 5 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 25:	0.0%
Covered Lines:	112
Relevant Lines:	112

---

💛 - Coveralls