j2c/docs/inline.md

A tiny CSS in JS solution.

## `j2c.inline(declarations)`

### Basics

```JS
const j2c = new J2c()
j2c.inline({
  margin: 0,
  paddingLeft: 0
}); // => "margin: 0; padding-left: 0;"
```

You can also use dashed property names (`"padding-left"`) if you prefer them to CamelCased ones.

### Mixins

You can 

```JS
var colorRed = {color: '#f00'};

j2c.inline([
  colorRed,
  { margin: '5px' }
]); // "color: red; margin: 5px;"
```

### Sub-properties as nested objects

```JS
j2c.inline({
  font: {
    Family: "serif",
    Weight: "100"
  }
}); // "font-family: serif; font-weight: 100;"
```

You can combine it with mixins

```JS
j2c.inline({
  border: [
    'solid 1px #444',
    { LeftWidth: '3px' }
  ]
}); // "border: solid 1px #444; border-left-width: 3px;"
```

### The `$` operator for properties that share the same value

```JS
j2c.inline({
  margin$padding: 0,
  border: [
    "solid 1px white",
    {Left$Right:{
      Width: '2px'
    }}
  ]
})
```

### Animation names are localized

```JS
j2c.inline({
  animationName: "jump, global(fadeout)"
}) "animation-name: jump_1pq5rdj, fadeout;"

j2c.suffix // "_1pq5rdj"
```

If you want to include animations defined in another namespace, you must wrap them in a `global()` call.

```JS
const otherNames = j2c.ns('other').names

j2c.inline({
  animationName: "global(${otherNames.jump})"
}) "animation-name: __other_jump_1pq5rdj;"
```