<commit_before># Stylesmith

Stylesmith is a small ES6 (ES2015) syntax, zero-dependency library to provide
tagged template strings for style creation.

It's primary purpose is to be used alongside with React.js and Radium.

Inspired by [React: CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js)
and Radium's enhanced style objects (':hover', '@media' keys and similar).


## Usage with React / Radium

```javascript
import React, { Component } from 'react'
import style from 'stylesmith'
import { colors } from './my-theme'

/*
 * You can use any JS variable in the template string style.
 * Pass strings or numbers as style rule values.
 * Pass an object to merge its styles.
 */
const buttonStyle = style`
  background: ${colors.green}
  color: ${colors.white}
  margin: 10 20

  :hover {
    background: ${colors.blue}
  }

  @media print {
    display: none
  }
`

export default class Button extends Component {
  render () {
    return (
      <button style={buttonStyle}>{this.props.children}</button>
    )
  }
}
```


## Installation

Using NPM:

```bash
npm install --save stylesmith
```

Using JSPM:

```bash
jspm install stylesmith
```


## What happens here?

```javascript
style`
  margin: 10
  color: ${color.white}

  :hover {
    text-decoration: underline
    ${anotherStyle}
  }
`

// returns this object:

{
  margin: 10,
  color: color.white,
  ':hover': Object.assign({
    'text-decoration': 'underline'
  }, anotherStyle)
}
```

Looks much friendlier, doesn't it?


## License

Licensed under the MIT license. See file LICENSE for details.
<commit_msg>Improve README<commit_after># Stylesmith

Stylesmith is a small ES6 (ES2015) syntax, zero-dependency library to provide
tagged template strings for style creation.

It's primary purpose is to be used alongside with React.js and Radium.

Inspired by [React: CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js)
and Radium's enhanced style objects (':hover', '@media' keys and similar).


## Usage with React / Radium

```javascript
import React, { Component } from 'react'
import style from 'stylesmith'
import { colors } from './my-theme'

/*
 * You can use any JS variable in the template string style.
 * Pass strings or numbers as style rule values.
 * Pass an object to merge its styles.
 */
const buttonStyle = style`
  background: ${colors.green}
  color: ${colors.white}
  margin: 10 20

  :hover {
    background: ${colors.blue}
  }

  @media print {
    display: none
  }
`

export default class Button extends Component {
  render () {
    return (
      <button style={buttonStyle}>{this.props.children}</button>
    )
  }
}
```


## Installation

Using NPM:

```bash
npm install --save stylesmith
```

Using JSPM:

```bash
jspm install stylesmith
```


## What happens here?

```javascript
style`
  margin: 10
  color: ${color.white}

  :hover {
    text-decoration: underline
    ${anotherStyle}
  }
`

// returns this object:

{
  margin: 10,
  color: color.white,
  ':hover': Object.assign({
    'text-decoration': 'underline'
  }, anotherStyle)
}
```

Looks much friendlier, doesn't it? And no more CSS class name crazyness!
The styles you define here are only applied to the elements you render with
the `style` property set to it.


## Why would I need that?

As vjeux points out in his popular talk
[React: CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js), CSS styling
comes with some built-in troubles. Some of them can pretty easy be come over by
using a pre-processor like SASS or LESS (like variables).

But other problems persist and cannot easily be solved using stylesheets, such
as the fact that CSS only knows one global scope. So you have to be very careful
how to write your CSS selectors in order to not have them style things they are
not supposed to and avoid naming clashes.

React style objects provide


## License

Licensed under the terms of the MIT license. See file LICENSE for details.

{'fraction_non_alphanumeric': 0.10575942915392457, 'fraction_numerical': 0.006625891946992864, 'mean_word_length': 3.6285377358490565, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3763639', 'n_tokens_mistral': 1266, 'n_tokens_neox': 1168, 'n_words': 477}