<commit_before># jile

Manage your styles in JavaScript with the full power of CSS.

#### Installation

```
$ npm i jile --save
```
  
#### Usage

For those that have used both [CSS Modules](https://github.com/css-modules/css-modules) and [inline styles](https://facebook.github.io/react/tips/inline-styles.html), this should feel quite natural.

```javascript
import jile from 'jile';

const jileObject = jile({
  '.foo': {
    display: 'inline-block'
  }
});

const styles = jileObject.selectors;

const ExampleComponent = () => {
  return (
    <div className={styles.foo}>
      I have a scoped class Selector!
    </div>
  );
};
```

With output of:

```javascript
<div class="jile__foo__2202820774">
  I have a scoped class selector!
</div>
```

This example uses [React](https://github.com/facebook/react), but you can use it with anything as it has no dependencies on a particular view library or framework.

#### How it works

Any styles that you declare in the object passed to the `jile` function are parsed, scoped, autoprefixed, and converted into CSS which is injected into the head of the document as a `<style>` tag. Scoping entails hashing selectors (only ID and Class selectors will be hashed) so that you can use the same selector (such as `.container`) in many components without worrying about specificity or collision. The return from the `jile` function is a map of the selector names you provided to their respective hashed output names.

#### Why

**...not inline styles?**

Inline styles have become popular again for a reason ... everything is in JavaScript so it is dynamic, specificity is not a concern, and prefixing is handled easily, without the need for proprietary method calls (Compass, for example). That said, inline styles can only provide a limited subset of CSS ... `@media` queries, `@keyframes`, psuedo-selectors, etc. are all unable to be done with pure inline styles. Libraries like [Radium](https://github.com/FormidableLabs/radium) help with some of these aspects, but it still is incomplete.

**...not CSS Modules?**

CSS Modules solve the main problem that CSS has ... global everything. A lot of `jile` concepts are taken from CSS Modules, because you can leverage the full power of CSS while still scoping things to your component. That said, CSS adds another piece to your build process (more dependencies), and now requires consumers of your component to include a second reference (one for your JS, one for your CSS).

**... not both?**

This is the objective of `jile`, to combine the flexibility and power of CSS with the implementation simplicity of JS. It leverages a (hopefully) familiar syntax to make transitioning from styles to `jile`s quick and painless.

#### Examples

**Basic usage**

The keys you provide to your objects are the selectors that will be used, and you can get as wild with your selectors as you would like ... `#unique-container button > .crazy-stuff + i` will totally be respected.

```javascript
const styles = jile({
  '.basic': {
    display: 'inline-block'
  }
});

// or give it some options
const options = {
    id: 'my-magical-component,
    sourceMap: false
};

const styles = jile({
  '.basic': {
    display: 'inline-block'
  }
}, options);
```

**Nested children**

Use the `&` before your child declarations to inherit from the parent.

```javascript
const styles = jile({
  '.parent': {
    color: '#333',
    fontSize: 32,
    
    '& .child': {
      color: '#777',
      fontSize: 14
    },
    
    '& > button::before': {
      content: '"I am a pseudo-element!"',
      display: 'block'
    }
  }
});<commit_msg>Fixes... * README typo<commit_after># jile

Manage your styles in JavaScript with the full power of CSS.

#### Installation

```
$ npm i jile --save
```
  
#### Usage

For those that have used both [CSS Modules](https://github.com/css-modules/css-modules) and [inline styles](https://facebook.github.io/react/tips/inline-styles.html), this should feel quite natural.

```javascript
import jile from 'jile';

const jileObject = jile({
  '.foo': {
    display: 'inline-block'
  }
});

const styles = jileObject.selectors;

const ExampleComponent = () => {
  return (
    <div className={styles.foo}>
      I have a scoped class Selector!
    </div>
  );
};
```

With output of:

```javascript
<div class="jile__foo__2202820774">
  I have a scoped class selector!
</div>
```

This example uses [React](https://github.com/facebook/react), but you can use it with anything as it has no dependencies on a particular view library or framework.

#### How it works

Any styles that you declare in the object passed to the `jile` function are parsed, scoped, autoprefixed, and converted into CSS which is injected into the head of the document as a `<style>` tag. Scoping entails hashing selectors (only ID and Class selectors will be hashed) so that you can use the same selector (such as `.container`) in many components without worrying about specificity or collision. The return from the `jile` function is a map of the selector names you provided to their respective hashed output names.

#### Why

**...not inline styles?**

Inline styles have become popular again for a reason ... everything is in JavaScript so it is dynamic, specificity is not a concern, and prefixing is handled easily, without the need for proprietary method calls (Compass, for example). That said, inline styles can only provide a limited subset of CSS ... `@media` queries, `@keyframes`, psuedo-selectors, etc. are all unable to be done with pure inline styles. Libraries like [Radium](https://github.com/FormidableLabs/radium) help with some of these aspects, but it still is incomplete.

**...not CSS Modules?**

CSS Modules solve the main problem that CSS has ... global everything. A lot of `jile` concepts are taken from CSS Modules, because you can leverage the full power of CSS while still scoping things to your component. That said, CSS adds another piece to your build process (more dependencies), and now requires consumers of your component to include a second reference (one for your JS, one for your CSS).

**... not both?**

This is the objective of `jile`, to combine the flexibility and power of CSS with the implementation simplicity of JS. It leverages a (hopefully) familiar syntax to make transitioning from styles to `jile`s quick and painless.

#### Examples

**Basic usage**

The keys you provide to your objects are the selectors that will be used, and you can get as wild with your selectors as you would like ... `#unique-container button > .crazy-stuff + i` will totally be respected.

```javascript
const styles = jile({
  '.basic': {
    display: 'inline-block'
  }
});

// or give it some options
const options = {
    id: 'my-magical-component',
    sourceMap: false
};

const styles = jile({
  '.basic': {
    display: 'inline-block'
  }
}, options);
```

**Nested children**

Use the `&` before your child declarations to inherit from the parent.

```javascript
const styles = jile({
  '.parent': {
    color: '#333',
    fontSize: 32,
    
    '& .child': {
      color: '#777',
      fontSize: 14
    },
    
    '& > button::before': {
      content: '"I am a pseudo-element!"',
      display: 'block'
    }
  }
});
{'fraction_non_alphanumeric': 0.10541586073500966, 'fraction_numerical': 0.005526388505111909, 'mean_word_length': 3.7159609120521173, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 19, 'https://': 8, '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': '6825408', 'n_tokens_mistral': 2060, 'n_tokens_neox': 1985, 'n_words': 956}