<commit_before># CSSX language

CSSX is not a new language. It's still the CSS that you know and use every day. The only one difference is that you write it inside a JavaScript context. To make this possible we have to use a [transpiler](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler). It understand and successfully transforms expressions like the one below:

```js
var sheet = cssx(
  body {
    margin: 0;
    padding: 0;
  }
);
```

The `cssx` call (in this format) returns a [CSSX stylesheet](https://github.com/krasimir/cssx/tree/master/packages/cssx#stylesheet-api) object which we use to manage our styles. To append a new CSS rule we use the `add` method:

```js
sheet.add('p', cssx({
  font-size: 1em;
  line-height: 1.2em;
}));
```

## Language expressions

#### `cssx(<selector> { <styles> } ...)`

It returns a [CSSX stylesheet](https://github.com/krasimir/cssx/tree/master/packages/cssx#stylesheet-api) object.

Example:

```js
var sheet = cssx(
  body {
    margin: 0;
    padding: 0;
  }
);
```

Same as:

```js
var sheet = cssx.stylesheet('id');
sheet.add('body', {
  margin: 0,
  padding: 0
});
```

#### `cssx({ styles })`

It returns a vanilla JavaScript object.

Example:

```js
var styles = cssx({
  font-size: 1em;
  line-height: 1.2em;
});
```

Same as :

```js
var styles = {
  'line-height': '1.2em',
  'font-size': '1em'
};
```

## Using JavaScript

The biggest benefit of CSSX is the fact that it's written in JavaScript context. So it has an access to all the data in the current scope.

```js<commit_msg>Updating docs<commit_after># CSSX language

CSSX is not a new language. It's still the CSS that we know and use every day. The difference is that we write it inside a JavaScript context. That's possible because we now have an access to [CSSX transpiler](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler). It understand and successfully transforms expressions like this:

```js
var sheet = cssx(
  body {
    margin: 0;
    padding: 0;
  }
);
```

The `cssx` call (in this format) returns a [CSSX stylesheet](https://github.com/krasimir/cssx/tree/master/packages/cssx#stylesheet-api) object which we use to manage our styles. For example, to append a new CSS rule we use the `add` method:

```js
sheet.add('p', cssx({
  font-size: 1em;
  line-height: 1.2em;
}));
```

## Language expressions

#### `cssx(<selector> { <styles> } ...)`

It returns a [CSSX stylesheet](https://github.com/krasimir/cssx/tree/master/packages/cssx#stylesheet-api) object.

Example:

```js
var sheet = cssx(
  body {
    margin: 0;
    padding: 0;
  }
);
```

Same as:

```js
var sheet = cssx('id');
sheet.add('body', {
  margin: 0,
  padding: 0
});
```

The `id` passed to `cssx` is optional. If you don't provide one the library will generate it for you. However, we should say that running only `cssx()` generates a new stylesheet every time. So if we plan to execute such code many times it's good to provide that ID.

#### `cssx({ styles })`

It returns a vanilla JavaScript object.

Example:

```js
var styles = cssx({
  font-size: 1em;
  line-height: 1.2em;
});
```

Same as :

```js
var styles = {
  'line-height': '1.2em',
  'font-size': '1em'
};
```

## Using JavaScript

The biggest benefit of CSSX is the fact that it's written in JavaScript context. So it has an access to all the data in the current scope.

```js
{'fraction_non_alphanumeric': 0.1419698314108252, 'fraction_numerical': 0.008873114463176575, 'mean_word_length': 3.7366946778711485, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 6, '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': '184364', 'n_tokens_mistral': 1185, 'n_tokens_neox': 1121, 'n_words': 418}